ALT If the page URL has a fragment (e.g., ht​tps://example.com/#posts), then the CSS :target pseudo-class matches the element with that ID (e.g., <div id="posts">). However, browsers only update :target on page load (before DOMContentLoaded) and during fragment navigation. If the page uses JavaScript to dynamically add a fragment to the URL or insert an element with an ID to the DOM, resulting in a match between URL fragment and element ID, the :target selector will not start matching the element. This is a problem for websites with dynamic content. The CSS Working Group is currently discussing whether :target’s behavior should be changed.

ALT Use the CSS :disabled pseudo-class instead of the [disabled] attribute selector to match disabled form controls. The [disabled] selector matches form controls that have the disabled attribute set (this includes dynamically disabled form controls, since the .disabled property reflects the disabled attribute). However, a form control is also in the disabled state if it’s inside a disabled <fieldset> element. In other words, the form control can be disabled even when it doesn’t have the disabled attribute set. The :disabled selector matches the disabled form control in both cases.

ALT The global innerWidth and innerHeight properties return the width and height of the layout viewport (including the size of the classic scrollbar if present). These properties are not interoperable between browsers due to a bug in WebKit. In Safari on macOS and all iOS browsers, when the user zooms in on a part of the page via a pinch-to-zoom gesture, innerWidth and innerHeight incorrectly return the size of the the visual viewport instead of the layout viewport.

ALT The CSS Font Loading module defines a check method, which can be used to check if a web font has finished loading and is ready to render some text without causing a font swap. Specifically, check returns false for unloaded web fonts, and true in all other cases. Chromium’s implementation of document.fonts.check() incorrectly also checks if the font is available locally and returns false if it isn’t. This bug has lead some developers to think that this API can be used to check if a font is available on the user’s device. For that purpose, Cr-based desktop browsers support the (non-standard) Local Font Access API, which requires permission from the user.

ALT The CSS overscroll‑behavior property can be used to disable default browser gestures such as pull-to-refresh and swipe-between-pages, as well as prevent scroll chaining (e.g., when the page starts scrolling after the user scrolls to the end of a modal dialog). This CSS feature is currently limited in browsers in two ways: (1) The swipe-between-pages gesture cannot be disabled in Safari. (2) Scroll chaining can only be prevented if the first scroll container (e.g., modal dialog) has scrollable overflow; this limitation is considered a browser bug (all browsers are affected).

ALT In Shadow DOM, an element’s id attribute is locally scoped within the shadow root. This allows multiple instances of a custom element to use the same id attribute values, but it also prevents attributes such as aria‑describedby (attributes that refer to other elements by ID) from working across shadow boundaries. As an exception, URL-fragment links (e.g., <a href="#heading">) refer to the id in the outer page, even if that id also exists in the shadow tree.

ALT The CSS font‑size‑adjust property is supported in Firefox and Safari 16.4 (March 2023). It’s also available as an SVG presentation attribute. This feature is useful for aligning the x-heights of different fonts, and preserving the x-height when font fallback occurs in order to keep the text readable. Firefox also supports the new two-value syntax, which allows adjusting the font size based on other typographic metrics such as cap-height.

ALT The HTML maxlength attribute defines the “maximum allowed value length” of an <input> or <textarea> element. Browsers do not allow users to enter any more characters after the maximum length has been reached. If the user pastes or drag-and-drops a longer string, it is automatically truncated (this can damage the meaning of the text). Unfortunately, screen readers don’t announce when the user reaches the maxlength character limit. Also, Safari’s maxlength implementation treats all emoji characters as length 1, regardless of their string length (this will be “fixed” to match other browsers in a future update).

ALT Browsers provide form validation by default. Unfortunately, the default error messages have a number of accessibility and usability issues: (1) the error message disappears after a few seconds in some browsers; (2) if the form contains multiple errors, only one error message is shown; (3) the user is unable to increase the text size of error messages; (4) most of the time, the error message does not clearly explain the problem and how to fix it. It is recommended to avoid the default error messages and implement custom error messages instead (make sure to avoid premature validation).

ALT When a web page is requested, the web server may sometimes take a bit longer to construct the HTML response. An early hint is a preliminary response with HTTP status code 103 that allows the web server to send preload links for critical page resources (stylesheets, scripts, images, fonts) before the final response is ready. The browser can then request these resources early, while still waiting for the HTML document. “Before Early Hints, no work could be started until the browser received the first byte of the response.”

ALT Chrome supports a new type of full prerendering (a replacement for <link rel=prerender>) for “instant page loads”. Websites can declare a list of URLs to prerender (called “speculation rules”) in JSON format. When the user types something into the URL bar, Chrome will prerender the predicted URL if its “confidence” is greater than 80%. During prerendering, the page is loaded in the background, the DOM tree is fully constructed, and scripts are executed, but a number of web API calls are delayed until the page is activated. A web page can detect if it’s being prerendered by checking if document.prerendering returns true. Web servers can opt out of prerendering by returning a non-success status code for HTTP requests with a Sec‑Purpose: prefetch;prerender header.

ALT People with motor disabilities use speech recognition software (e.g, Dragon, iOS Voice Control) to browse the web and interact with websites. Links, buttons, and other interactive controls should have visible text labels (e.g., the user will speak “Click products” to activate <button>Products</button>). Users can also speak keyboard commands (“Tab”, “Press enter”, etc.), so that’s another reason for the website to be keyboard accessible (e.g., modal dialogs should trap focus). Sticky headers should be avoided because they “can overlap and obscure focusable content as the page scrolls down”.

ALT A web page’s JavaScript code can cause long tasks (50 milliseconds or more on the main thread). If the user attempts to interact with the page during that time, the page may appear frozen and unresponsive. To mitigate this problem, long tasks can be broken up into smaller tasks via setTimeout (this can be “promisified” for better ergonomics). Additionally, Cr-based browsers support isInputPending, which is useful for deciding whether to yield to the main thread early and continue work in a subsequent task, and postTask, which allows scheduling tasks at three different levels of priority.

ALT The HTML <template> element is a unique kind of element. The HTML content of a <template> is placed into a separate document fragment that is not rendered, and unlike <div hidden>, not active (scripts don’t run, images don’t load, etc.) and isolated from DOM APIs such as document.querySelector. This inactive (not to be confused with inert) HTML content can then be dynamically added to the page via JavaScript (e.g.,a menu button as a progressive enhancement).

ALT The CSS text‑transform property can be used to change the letter case of text rendered on the screen (e.g., text‑transform: uppercase renders “text” as “TEXT”). In 2018, the CSS Working Group decided that such text transforms are purely a visual effect that should not apply when the user copies text to the clipboard. Only Firefox implements this behavior. In all other browsers, when CSS-transformed text is copied, it is sent to the clipboard with transformations applied (“TEXT” instead of “text”).

ALT The <audio> element has been supported in all major browsers since 2013. If the element includes the <audio loop> attribute, the sound will play on repeat endlessly. Unfortunately, most browsers still have trouble looping audio in a seamless manner (without a noticeable pause between iterations). The WebKit and Chromium bugs for this issue have been filed in 2021. As a workaround, the Web Audio API can be used to play audio that loops seamlessly in all browsers.

ALT In the Internationalization API, the Intl.NumberFormat constructor for language-sensitive number formatting provides a compact option (notation: 'compact') with two display modes (compactDisplay: 'short' and 'long'). For example, formatting the number 1_234_567 produces the strings '1.2M' (short) or '1.2 million' (long) in English ('en'). Additionally, the length of the output can be adjusted via the maximumSignificantDigits option (e.g., setting it to 3 changes the string to '1.23M'). Test different numbers in the interactive demo.

ALT The events index in the HTML Standard does not list a number of events that are defined in other specifications. This includes the cut, copy, and paste events, which are defined in Clipboard API and events, mouse and keyboard events (incl. contextmenu), which are defined in UI Events, the resize, scroll, and scrollend events, which are defined in CSSOM View, and the slotchange event, which is defined in the DOM Standard.

ALT The CSS Fonts module contains a list of around 40 font features (e.g., slashed zero) for which it recommends authors to use the high-level font‑variant‑* and font‑kerning properties instead the the low-level font‑feature‑settings property. However, some font‑variant‑* properties and values are still not widely supported in browsers. For example, font‑variant‑position is not supported in Chromium (the sups and subs font features can make the lh unit more reliable), while font‑variant‑alternates (e.g., styleset()) shipped in Chrome and Safari only very recently.