mdn · estelle · Oct 26, 2022 · Oct 21, 2022 · Oct 21, 2022 · Oct 21, 2022
@@ -76,12 +76,6 @@ Data values are strings. Number values must be quoted in the selector for the st
 
 Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.
 
-The main issues to consider are Internet Explorer support and performance. Internet Explorer 11+ provides support for the standard, but all earlier versions [do not support `dataset`](https://caniuse.com/#feat=dataset). To support IE 10 and under you need to access data attributes with {{domxref("Element.getAttribute", "getAttribute()")}} instead. Also, the performance of reading `data-*` attributes compared to storing the data in a regular JavaScript object is poor.
-
-That said, though, for custom element-associated metadata, they are a great solution.
-
-In Firefox 49.0.2 (and perhaps earlier/later versions), the data attributes that exceed 1022 characters will not be read by JavaScript (ECMAScript 4).
-
 ## See also
 
 - This article is adapted from [Using data attributes in JavaScript and CSS on hacks.mozilla.org](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/).

@@ -205,7 +205,7 @@ The humble favicon has been around for many years. It is the first icon of this
 
 A favicon can be added to your page by:
 
-1. Saving it in the same directory as the site's index page, saved in `.ico` format (most browsers will support favicons in more common formats like `.gif` or `.png`, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
+1. Saving it in the same directory as the site's index page, saved in `.ico` format (most also support favicons in more common formats like `.gif` or `.png`)
 2. Adding the following line into your HTML's {{HTMLElement("head")}} block to reference it:
 
    ```html

@@ -93,7 +93,6 @@ So why would anyone want to use raster graphics over SVG? Well, SVG does have so
 
 - SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser.
 - SVG can be harder to create than raster images, depending on what kind of image you are trying to create.
-- SVG is not supported in older browsers, so may not be suitable if you need to support older versions of Internet Explorer with your web site (SVG started being supported as of IE9.)
 
 Raster graphics are arguably better for complex precision images such as photos, for the reasons described above.
 

@@ -102,7 +102,7 @@ The audio and video tracks within the container hold data in the appropriate for
 For example:
 
 - A WebM container typically packages Vorbis or Opus audio with VP8/VP9 video. This is supported in all modern browsers, though older versions may not work.
-- An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers, as well as Internet Explorer.
+- An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers.
 - The Ogg container tends to use Vorbis audio and Theora video. This is best supported in Firefox and Chrome, but has basically been superseded by the better quality WebM format.
 
 There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

@@ -207,7 +207,7 @@ myName = 'Bob';
 
 Again, this is a sensible language decision. There is no reason to redeclare variables — it just makes things more confusing.
 
-For these reasons and more, we recommend that you use `let` in your code, rather than `var`. There is no reason to use `var`, unless you need to support Internet Explorer 10 or older with your code.
+For these reasons and more, we recommend that you use `let` in your code, rather than `var`. There is no longer any reason to use `var`, as it has been supported since Internet Explorer 11.
 
 > **Note:** If you are trying this code in your browser's console, prefer to copy & paste each of the code blocks here as a whole. There's a [feature in Chrome's console](https://goo.gle/devtools-const-repl) where variable re-declarations with `let` and `const` are allowed:
 >

@@ -50,7 +50,7 @@ After getting familiar with the basics of JavaScript, you should be in a positio
 >
 > We think that the features added to JavaScript in ECMAScript 2015 and subsequent versions enable developers to write more readable, reliable, and expressive code, and that it's important to learn about them.
 >
-> The features we teach in this course are stable and have been supported by all major browsers for several years. You're only likely to have trouble using them in obsolete browsers, in particular Internet Explorer. If you do need to support obsolete browsers, we recommend using a tool like [Babel](https://babeljs.io/), which enables you to write modern JavaScript but have it run in browsers that don't support it.
+> The features we teach in this course are stable and have been supported by all major browsers for several years.
 
 This topic contains the following modules, in a suggested order for working through them.
 

@@ -87,10 +87,10 @@ Other formats improve on JPEG's capabilities regarding compression, but are not
   > **Note:** Despite having [announced support](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174) for WebP in Safari 14, as of version 14.0 .webp images do not display natively on a macOS desktop, whereas Safari on iOS 14 does display .webp images properly.
 
 - [AVIF](/en-US/docs/Web/Media/Formats/Image_types#avif_image) — Good choice for both images and animated images due to high performance and royalty free image format (even more efficient that WebP, but not as widely supported). It is now supported on Chrome, Opera and Firefox. See also [an online tool to convert previous image formats to AVIF](https://avif.io/).
-- **JPEG-XR** — created by Microsoft and only available in Internet Explorer and EdgeHTML based Edge. Doesn't support progressive display and the image decoding is not hardware accelerated and therefore resource-intensive on the browser's main thread. Progressive JPEG above-the-fold is that they render progressively (hence the name), meaning the user sees a low-resolution version that gains clarity as the image downloads, rather than the image loading at full resolution top-to-bottom or even only rendering once completely downloaded.
+- **JPEG-XR** — created by Microsoft and was only available in Internet Explorer and EdgeHTML based Edge. It didn't support progressive display and the image decoding was not hardware accelerated and therefore resource-intensive on the browser's main thread. Progressive JPEG above-the-fold is that they rendered progressively (hence the name), meaning the user saw a low-resolution version that gained clarity as the image downloaded, rather than the image loading at full resolution top-to-bottom or even only rendering once completely downloaded.
 - **JPEG2000** — once to be successor to JPEG but only supported in Safari. Doesn't support progressive display either.
 
-Given the narrow support for JPEG-XR and JPEG2000, and also taking decode costs into the equation, the only serious contender for JPEG today is WebP. Which is why you could consider offering your images in that flavor, too, for the browsers that support it. This can be done via the `<picture>` element with the help of a `<source>` element equipped with a [type attribute](/en-US/docs/Web/HTML/Element/picture#the_type_attribute).
+Given the narrow support for JPEG-XR and JPEG2000, and also taking decode costs into the equation, the only serious contender for JPEG is WebP. Which is why you could offer your images in that flavor too. This can be done via the `<picture>` element with the help of a `<source>` element equipped with a [type attribute](/en-US/docs/Web/HTML/Element/picture#the_type_attribute).
 
 If all of this sounds a bit complicated or feels like too much work for your team then there is also online services that you can use as image CDNs that will automate the serving of the correct image format on-the-fly, according to the type of device or browser requesting the image. The biggest ones are [Cloudinary](https://cloudinary.com/blog/make_all_images_on_your_website_responsive_in_3_easy_steps) and [Image Engine](https://imageengine.io/).
 

@@ -165,7 +165,7 @@ The output of this code is as follows:
 
 > **Note:** You can also see this running live as [forms-test.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html) on GitHub (see the [source code](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/html-css/forms-test.html) also).
 
-If you view the example on a supporting browser, you'll see the UI features in action as you try to input data. On devices with dynamic keyboards, type-specific keypads will be displayed. On a non-supporting browser like Internet Explorer, the inputs will just default to normal text inputs, meaning the user can still enter the correct information.
+If you view the example, you'll see the UI features in action as you try to input data. On devices with dynamic keyboards, type-specific keypads will be displayed. On a non-supporting browser like Internet Explorer, the inputs will just default to normal text inputs, meaning the user can still enter the correct information.
 
 #### CSS fallback behavior
 

@@ -87,7 +87,7 @@ _Example 3: Markup for the tabs widget with ARIA attributes added._
 </div>
 ```
 
-ARIA is [well supported](https://caniuse.com/#feat=wai-aria) by all major browsers, including Firefox, Safari, Opera, Chrome, and Internet Explorer, and many assistive technologies.
+ARIA is [well supported](https://caniuse.com/#feat=wai-aria) by all major browsers and many assistive technologies.
 
 ### Presentational changes
 

@@ -186,11 +186,7 @@ Elements with the following [`role="…"`](/en-US/docs/Web/Accessibility/ARIA/Ro
 
 ## Additional live region attributes
 
-(TBD: more granular information on the support of the individual attributes with combinations of OS/Browser/AT).
-
-General support for Live Regions was added to JAWS on version 10.0. In Windows Eyes supports Live Regions since version 8.0 "for use outside of Browse Mode for Microsoft Internet Explorer and Mozilla Firefox". NVDA added some basic support for Live Regions for Mozilla Firefox back in 2008 and was improved in 2010 and 2014. In 2015, basic support was also added for Internet Explorer (MSHTML).
-
-The Paciello Group has some [information about the state of the support of Live Regions](https://www.tpgi.com/screen-reader-support-aria-live-regions/) (2014). Paul J. Adam has researched [the support of `aria-atomic` and `aria-relevant`](https://pauljadam.com/demos/aria-atomic-relevant.html) in particular.
+Live Regions are well supported. The Paciello Group, in 2014, posted [information about the state of the support of Live Regions](https://www.tpgi.com/screen-reader-support-aria-live-regions/). Paul J. Adam has researched [the support of `aria-atomic` and `aria-relevant`](https://pauljadam.com/demos/aria-atomic-relevant.html) in particular.
 
 1. **`aria-atomic`**: The `aria-atomic=BOOLEAN` is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes. The possible settings are: `false` or `true`. The default setting is `false`.
 2. [**`aria-relevant`**](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)

@@ -80,11 +80,6 @@ The state of ARIA technology has always depended on the community. If you notice
    <td><a href="https://code.google.com/p/chromium/issues/list">File Chromium bugs</a></td>
    <td></td>
   </tr>
-  <tr>
-   <td>Microsoft Internet Explorer</td>
-   <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/">File IE bugs</a></td>
-   <td></td>
-  </tr>
   <tr>
    <td>Microsoft Edge</td>
    <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/">File MS Edge Bugs</a></td>

@@ -49,7 +49,7 @@ It is important to note that there is only one listener per context and that it
 - {{domxref("AudioListener.setPosition()")}} {{deprecated_inline}}
   - : Sets the position of the listener.
 
-> **Note:** Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox, Internet Explorer and Safari.
+> **Note:** Although these methods are deprecated they are currently the only way to set the orientation and position in Firefox.
 
 ## Deprecated features
 

@@ -28,11 +28,11 @@ The [`id`](/en-US/docs/Web/HTML/Global_attributes/id) attribute isn't specific t
 
 The `<canvas>` element can be styled just like any normal image ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). These rules, however, don't affect the actual drawing on the canvas. We'll see how this is done in a [dedicated chapter](/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) of this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent.
 
-### Fallback content
+### Accessible content
 
-The `<canvas>` element differs from an {{HTMLElement("img")}} tag in that, like for {{HTMLElement("video")}}, {{HTMLElement("audio")}}, or {{HTMLElement("picture")}} elements, it is easy to define some fallback content, to be displayed in older browsers not supporting it, like versions of Internet Explorer earlier than version 9 or textual browsers. You should always provide fallback content to be displayed by those browsers.
+The `<canvas>` element, like {{HTMLElement("img")}} tag in that, like for {{HTMLElement("video")}}, {{HTMLElement("audio")}}, or {{HTMLElement("picture")}} elements, must be made accessible by providing fallback text, to be displayed when the media doesn't load or the user is unable to experience it as intended. You should always provide fallback content, captions, and alternative text, as appropriate for the media type.
 
-Providing fallback content is very straightforward: just insert the alternate content inside the `<canvas>` element. Browsers that don't support `<canvas>` will ignore the container and render the fallback content inside it. Browsers that do support `<canvas>` will ignore the content inside the container, and just render the canvas normally.
+Providing fallback content is very straightforward: just insert the alternate content inside the `<canvas>` element to be accessed by screen readers, spiders, and other automated bots. Browsers, by default, will ignore the content inside the container, rendering the canvas normally unless `<canvas>` isn't supported.
 
 For example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:
 
@@ -42,17 +42,17 @@ For example, we could provide a text description of the canvas content or provid
 </canvas>
 
 <canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt="Photo of a clock" />
+  <img src="images/clock.png" width="150" height="150" alt="A clock" />
 </canvas>
 ```
 
-Telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example. Providing a useful fallback text or sub DOM helps to make the canvas more accessible.
+Telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all. Providing useful fallback text or sub DOM adds accessibility to an otherwise non-accessible element.
 
 ### Required `</canvas>` tag
 
 As a consequence of the way fallback is provided, unlike the {{HTMLElement("img")}} element, the {{HTMLElement("canvas")}} element **requires** the closing tag (`</canvas>`). If this tag is not present, the rest of the document would be considered the fallback content and wouldn't be displayed.
 
-If fallback content is not needed, a simple `<canvas id="foo" …></canvas>` is fully compatible with all browsers that support canvas at all.
+If fallback content is not needed, a simple `<canvas id="foo" role="presentation" …></canvas>` is fully compatible with all browsers that support canvas at all. This should only be used if the canvas is purely presentational.
 
 ## The rendering context
 

@@ -135,19 +135,6 @@ function addStylesheetRules (rules) {
 
 {{Compat}}
 
-### Legacy browser support
-
-To support Internet Explorer 8 and below, use:
-`addRule(selector, rule [, index]);`. Example:
-`addRule('pre', 'font: 14px verdana'); // add rule at end`
-
-Also note the non-standard
-[`removeRule()`](https://www.quirksmode.org/dom/w3c_css.html#change)
-and
-[`.rules`](https://www.quirksmode.org/dom/w3c_css.html#access)
-instead of {{domxref("CSSStyleSheet.deleteRule","deleteRule()")}} and
-{{domxref("CSSStyleSheet",".cssRules")}}, respectively.
-
 ## See also
 
 - {{domxref("CSSStyleSheet.deleteRule")}}

@@ -57,9 +57,6 @@ possible values are:
 Assigning any other value to `effectAllowed` has no effect and the old value
 is retained.
 
-Internet Explorer will change the value to be lowercased; thus, `linkMove`
-will become `linkmove`, and so on.
-
 ## Examples
 
 ### Setting effectAllowed

@@ -283,7 +283,7 @@ The `Document` interface is extended with the {{DOMxRef("XPathEvaluator")}} inte
 The `Document` interface for HTML documents inherit from the {{DOMxRef("HTMLDocument")}} interface or is extended for such documents:
 
 - {{DOMxRef("Document.clear()")}} {{Deprecated_Inline}}
-  - : In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+  - : In majority of modern browsers, this method does nothing.
 - {{DOMxRef("Document.close()")}}
   - : Closes a document stream for writing.
 - {{DOMxRef("Document.execCommand()")}} {{Deprecated_Inline}}

@@ -62,16 +62,9 @@ When called on an HTML element in a DOM flagged as an HTML document,
 
 ### Non-existing attributes
 
-Essentially all web browsers (Firefox, Internet Explorer, recent versions of Opera,
-Safari, Konqueror, and iCab, as a non-exhaustive list) return `null` when
-the specified attribute does not exist on the specified element; this is what [the current DOM specification draft](https://dom.spec.whatwg.org/#dom-element-getattribute) specifies. The old DOM 3 Core specification, on the other
-hand, says that the correct return value in this case is actually the _empty
-string_, and some DOM implementations implement this behavior. The
-implementation of `getAttribute()` in XUL (Gecko) actually follows the DOM
-3 Core specification and returns an empty string. Consequently, you should use
-{{domxref("element.hasAttribute()")}} to check for an attribute's existence prior to
-calling `getAttribute()` if it is possible that the requested attribute
-does not exist on the specified element.
+Essentially all web browsers return `null` when
+the specified attribute does not exist on the specified element; this is what the [DOM specification](https://dom.spec.whatwg.org/#dom-element-getattribute) specifies. In the old DOM 3 Core specification, the return value was the _empty
+string_. The implementation of `getAttribute()` in XUL (Gecko) followed this and returned an empty string. You may encounter a {{domxref("element.hasAttribute()")}} call to check for an attribute's existence before a `getAttribute()` call for this reason.
 
 ### Retrieving nonce values