Browse features

Mark up content
- Mark up the document
  - <html> The <html> element represents the top-level of an HTML document and is referred to as the root element.
  - <body> The <body> element represents the content of an HTML document.
  - <base> The <base> element sets the base URL (the URL that relative URLs are relative to) for all relative URLs in the document.
  - <title> The <title> element sets the title of the document and exposes it to users via the UI of the browser or app they're using and through assistive technology.
  - <link> The <link> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon.
  - <meta> The <meta> element represents metadata about the page used by the browser or search engines, including description, keywords, and character sets.
- Mark up sections
  - <aside> The <aside> element represents a portion of a document whose content is only indirectly related to the document's main content.
  - <dialog> The <dialog> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.
  - <hr> The <hr> element represents a thematic break between paragraphs, often shown as a horizontal rule.
  - <header> and <footer> The <header> and <footer> HTML elements represent content that precedes and follows the main page content, respectively.
  - <div> The <div> HTML element is the generic container for content.
  - <details> The <details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <summary> element is visible.
  - Mutually exclusive <details> elements Multiple <details> elements which use the same name attribute are mutually exclusive. When one member of the group is opened, all other members are closed.
  - <mark> The <mark> element represents text which is marked or highlighted for reference or notation purposes.
  - <main> The <main> element represents the dominant content of a document. It is commonly used together with <header> and <footer>.
  - <menu> The <menu> element represents an unordered list of action items (<li>), such as a toolbar. It is a semantic alternative to the <ul> element.
  - <head> The <head> element contains machine-readable information (metadata) about the document, such as the title, <script> and <style> elements, and <meta> elements.
  - <hgroup> The <hgroup> element represents a heading and related content.
  - <nav> The <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
  - <section> The <section> element is a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.
  - <progress> The <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
  - Inert elements The inert HTML attribute marks an element and its descendants as non-interactive. Inert elements don't get focus or fire click events.
- Mark up text
  - <a> The <a> element creates a hyperlink to any resource that's accessible via a URL, such as web pages, files, email addresses, or locations within the same page.
  - <abbr> The <abbr> HTML element represents an abbreviation or acronym.
  - <address> The <address> element represents contact information for a person or people, or for an organization.
  - <article> The <article> element represents self-contained content, which is intended to be independently distributable or reusable, such as a comment, a blog post, or news article.
  - <b> The <b> HTML element draws reader's attention to text, styling text as bold by default.
  - <em> The <em> HTML element emphasizes or stresses the content, styling text as italic by default.
  - <q> The <q> element represents a short inline quotation.
  - <ruby> The <ruby> element produces small annotations that are rendered with its base text.
  - <s> The <s> HTML element indicates text that is no longer relevant or accurate, styling text as strikethrough by default.
  - <br> The <br> element produces line breaks in text.
  - <blockquote> The <blockquote> element represents an extended quotation, styling contents as an indented block by default.
  - <cite> The <cite> element represents the title of a quoted, referenced, or mentioned creative work, such as a film or book.
  - <code> The <code> element displays its contents as a fragment of computer code.
  - <i> The <i> HTML element identifies idiomatic content, styling text as italic by default.
  - <kbd> The <kbd> element represents textual user input, such as keyboard or voice input, styling text in monospaced type by default.
  - <h1> through <h6> The <h1> through <h6> HTML elements represent six levels of section headings, in order of decreasing importance.
  - <span> The <span> HTML element is the generic inline container for content.
  - <strong> The <strong> HTML element brings attention to the content, styling text as bold by default.
  - <sub> and <sup> The <sub> and <sup> elements sets inline text to be displayed as subscript or superscript for solely typographical reasons.
  - <u> The <u> HTML element makes non-textual annotations, styling text as underlined by default.
  - <time> The <time> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the datetime attribute to translate dates into machine-readable format.
  - <del> The <del> element element represents a range of text that has been deleted from a document, styling text as strikethrough by default.
  - <dfn> The <dfn> element marks a term to be defined, styling text as italic by default.
  - <p> The <p> element represents a paragraph of text.
  - <pre> The <pre> element represents a block element of preformatted text that is presented exactly as written, including all white space.
  - <small> The <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. Styled in a reduced font size by default.
  - <samp> The <samp> element represents a sample or quoted output from a computer program. Styled in a monospace font by default.
  - <bdi> The <bdi> element isolates text that may have a different text direction from its surrounding text. This prevents the browser's bidirectional text algorithm from affecting or being affected by the direction of the surrounding text.
  - <bdo> The <bdo> element overrides the directionality of text, so that the text within is rendered in a different direction than the surrounding text.
  - <data> The <data> element links a given piece of content with a machine-readable translation.
  - <ins> The <ins> element element represents a range of text that has been inserted into a document, styling text as underlined by default.
  - <wbr> The <wbr> HTML element represents a word break opportunity, to explicitly mark a place within a word where a line might be broken.
  - translate attribute The translate HTML attribute marks whether an element's text should be translated.
- Mark up forms
  - <form> The <form> element contains interactive controls for submitting information.
  - <input> The <input type="text"> HTML element allows the user to enter information into a form. By default, an <input> element is a text input.
  - <input type="button"> The <input type="button"> HTML element represents a button that triggers some action, such as submitting a form or opening a dialog, styled as a labeled rectangular box by default. Not to be confused with the <button> element, which contains HTML content.
  - <input type="checkbox"> The <input type="checkbox"> HTML element represents a tickable box with two states, checked and unchecked.
  - <input type="color"> The <input type="color"> HTML element shows a color picker from which users can choose a color value.
  - <input type="file"> The <input type="file"> HTML element shows a file picker from which users can choose a file to upload with the form.
  - <input type="hidden"> The <input type="hidden"> HTML element represents a form field that is not shown visually but is still included in the form submission.
  - <input type="image"> The <input type="image"> HTML element is an image that can be used to submit a form, like the <input type="submit"> element.
  - <input type="number"> The <input type="number"> HTML element represents numeric input data.
  - <input type="password"> The <input type="password"> HTML element represents a field for users to enter a password. The password is hidden from view, typically replaced by dots or asterisks.
  - <input type="radio"> The <input type="radio"> HTML element represents one button in a group such that only one can be chosen at a time.
  - <input type="range"> The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
  - <input type="reset"> The <input type="reset"> HTML element represents a button that sets all form fields to their initial values.
  - Input selectors The :checked, :disabled, and :enabled CSS pseudo-classes match form elements based on their state.
  - <input type="submit"> The <input type="submit"> HTML element represents a button that triggers an action on its associated <form>, such as sending the form data to a server.
  - Date and time <input> types The <input type="date"> and <input type="time"> HTML elements show date and time pickers.
  - Email, telephone, and URL <input> types The <input type="email">, <input type="tel">, and <input type="url"> HTML elements represent email address, telephone number, and URL fields in a form.
  - <fieldset> and <legend> The <fieldset> and <legend> elements group several form control elements within a web form.
  - <button> The <button> HTML element represents a button that triggers some action, such as submitting a form or opening a dialog, styled as a labeled rectangular box by default.
  - <input type="search"> The <input type="search"> HTML element represents a text field for search queries.
  - <label> The <label> HTML element represents a caption for a form field.
  - <search> The <search> HTML element is a container that represents the parts of the web page with search functionality.
  - <select> The <select> element provides a menu of options for a user to pick from, typically rendered as a dropdown list.
  - <textarea> The <textarea> element represents an editing control that allows users to enter multi-line, free-form, plain text.
  - <output> The <output> element represents the result of a calculation, user action, or form entry.
  - <datalist> The <datalist> element sets recommended values for an <input> element. Browsers may show a dropdown menu of all values or match values as the user types.
- Mark up lists
  - <ol>, <ul>, and <li> The <ol>, <ul>, and <li> HTML elements represent ordered and unordered lists.
- Mark up tabular data
  - Tables The <table> HTML element, with several related elements, represents tabular data in rows and columns of cells.
- Mark up mathematical expressions
  - MathML MathML, or the Mathematical Markup Language, describes mathematical notation, such as expressions and formulas. Also known as MathML Core.
  - <var> The <var> element represents the name of a variable in a mathematical expression or a programming context.
- Embed media
  - <audio> The <audio> element plays sound such as audio effects or music, optionally with controls provided by the browser.
  - <canvas> The <canvas> HTML element is a space to draw graphics in, using the 2D canvas API, WebGL, or WebGPU.
  - <figure> and <figcaption> The <figure> and <figcaption> HTML elements represent an illustration, diagram, text, or other self-contained reference content, with an optional caption.
  - <img> The <img> element adds an image into the document.
  - <source> The <source> element sets a media resource for the <picture>, <video>, and <audio> elements.
  - <picture> The <picture> element is used for art direction in responsive images, where a different image is displayed based on the <source> element.
  - <video> The <video> element plays videos or movies, optionally with controls provided by the browser.
- Embed external content
  - <iframe> The <iframe> element embeds another HTML page into the current page.
  - srcdoc The srcdoc attribute for the <iframe> HTML element sets a string of HTML to embed in the document. The value of srcdoc overrides loading a document from the src attribute.
  - Credentialless iframes The credentialless attribute for the <iframe> HTML element loads third-party content in an ephemeral context and does not send any credentials such as cookies. When using cross-origin isolation, this allows you to embed content that does not send Cross-Origin-Embedder-Policy headers.
  - <embed> The <embed> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.
  - <object> The <object> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.
Position content
- Position The position CSS property sets the origin position of an element to an element, the element's scrollport, or the viewport.
- Physical properties The physical CSS properties, top, right, bottom, and left, set the inset position of an element relative to the corresponding side of a container determined by the element's position property.
- Logical properties CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
- Absolute positioning The position: absolute CSS declaration removes an element from the normal flow and positions it relative to its containing block, which is often the root element, or closest positioned ancestor.
- Grid CSS grid is a two-dimensional layout system, which lays content out in rows and columns.
- Subgrid The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.
- Grid animation Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.
- Fixed positioning The position: fixed CSS declaration removes an element from the normal flow and positions it relative to the viewport or page.
- Flexbox Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.
- Flexbox gap The gap CSS property in a flexbox layout sets the size of the space between items.
- Masonry Masonry is a type of CSS grid layout where the items on one of the axes are tightly packed together, like brickwork, instead of leaving gaps to align across the other axis.
- Static positioning The position: static CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as top or inset-block-start.
- Sticky positioning The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position.
- Relative positioning The position: relative CSS declaration offsets the position of an element relative to its position in the normal flow.
- Anchor positioning Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.
- Multi-column layout Multi-column layout flows an element's content across one or more columns in a single row, without affecting the display property of its children.
- Column breaks In columnar layouts (created by the columns or column-count CSS properties), the break-after, break-before, break-inside properties control where columns start or end.
- column-fill The column-fill CSS property sets the distribution of content across columns in a multi-column layout.
- column-span The column-span CSS property controls whether a child element extends across all columns of a multi-column parent.
- z-index The z-index CSS property orders overlapping elements, with higher values appearing in front of or on top of lower values.
- Popover The popover HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the showPopover() method.
- Widows and orphans The widows and orphans CSS properties set the minimum lines included in a text fragment created by page, column, or region breaks.
- Safe area inset environment variables The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.
- alignment-baseline The alignment-baseline CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent.
- baseline-shift The baseline-shift CSS property sets the position of an element relative to its dominant baseline.
- baseline-source The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.
- reading-flow The reading-flow CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation.
- Visual viewport API The visualViewport API provides a way to query and modify the user-visible viewport of a web page.
- BarProp The visible property of the window.locationbar, window.menubar, window.personalbar, window.scrollbars, window.statusbar, and window.toolbar APIs historically represented the visibility of a browser user interface. For privacy reasons, it now represents whether the window is a pop-up.
Style content
- Load CSS stylesheets
  - <style> The <style> element embeds an inline CSS stylesheet in a document.
  - <link> The <link> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon.
  - @import The @import CSS at-rule loads styles from another stylesheet.
  - CSS import attributes Module `import … with { type: "css" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts and formerly known as import assertions.
- Organize stylesheets
  - @namespace The @namespace CSS rule sets a default namespace or namespace prefix. Namespace prefixes allow CSS selectors to distinguish elements with the same name but different document types, such as the HTML <a> element and the SVG <a> element.
  - @scope The @scope CSS at-rule sets the scope for a group of rules.
  - @supports The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
  - @supports (compatibility prefix) The @supports (-webkit-transform-3d) CSS media query is a standardized compatibility alternative to @supports (transform-style).
  - Cascade layers The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.
  - Custom properties Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.
  - Nesting CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.
  - Registered custom properties The CSS.registerProperty() static method and the @property CSS at-rule register custom properties for which types and behaviors can be defined.
  - unset The unset keyword resets any CSS property, removing any values previously set by the author, user, or browser. Inherited properties (like color) reset to the parent element's computed value. Non-inherited properties (like display) reset to the specified initial value (inline).
  - revert The revert CSS keyword resets any property to its previous default, provided by either the user or browser stylesheets. For example, setting display: revert on a <div> will likely result in display: block, the browser default style. This is often confused with initial.
  - all The all CSS property is a shorthand for all CSS properties, except for direction and unicode-bidi. It accepts only the keywords for explicit defaulting (such as initial and inherit), since they are the only values supported on all CSS properties.
  - inherit The inherit keyword resets any CSS property to the computed value of that property from the parent element.
  - initial The initial keyword resets any CSS property to its initial value as defined by the specification. For example, the initial value of the display property is inline, regardless of the element being styled. Not to be confused with revert, which resets to the user or browser default style.
- Select elements to style
  - Selectors (core) CSS selectors match elements based on their type, attributes, and relationship to other elements. They define the specific elements to which a block of styles will be applied. This feature represents the oldest selectors of CSS.
  - :root The :root pseudo-class matches the root element of the document, usually the <html> element.
  - ::backdrop The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
  - ::file-selector-button The ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
  - ::first-letter The ::first-letter CSS pseudo-element selects the first letter in an element for styling.
  - ::first-line The ::first-line CSS pseudo-element selects the first line of text in an element for styling.
  - ::marker The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets.
  - ::placeholder The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
  - ::selection The ::selection CSS pseudo-element selects text a user has highlighted.
  - ::spelling-error and ::grammar-error The ::spelling-error and ::grammar-error CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.
  - ::target-text The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.
  - :autofill The :autofill pseudo-class matches <input> elements that have been filled in automatically by the browser.
  - :default The :default CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the checked attribute.
  - :dir() The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).
  - :focus-visible The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
  - :has() The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
  - :indeterminate The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked.
  - :is() The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.
  - :modal The :modal pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a <dialog> element used with showModal().
  - :nth-child() The :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements based on their index within a list of elements. The :first-child and :last-child pseudo-classes match the first and last element in a list, and the :only-child pseudo-class matches an element with no siblings.
  - :nth-child() of <selector> The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
  - :placeholder-shown The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.
  - :read-only and :read-write The :read-only and :read-write CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, :read-only matches <input> and <textarea> elements with the readonly attribute.
  - :state() The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.
  - :user-valid and :user-invalid The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.
  - :where() The :where() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.
  - :not() The :not() functional pseudo-class matches elements that do not match the selectors in its argument.
  - :nth-of-type() pseudo-classes The :nth-of-type() and :nth-last-of-type() CSS functional pseudo-classes match elements based on their position among siblings of the same type. The :first-of-type, :last-of-type, and :only-of-type` pseudo-classes match the first, last, and only elements of its type.
  - Time-relative pseudo-selectors The :future and :past CSS pseudo-classes match upcoming or prior elements during media playback.
  - Case-sensitive attribute selector The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.
  - Case-insensitive attribute selector The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.
- Generate style-only content
  - Content The content CSS property sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the ::before and ::after pseudo-elements to generate cosmetic content.
  - attr() (content only) The attr() CSS function, in content property declarations, sets a ::before or ::after pseudo-element's content to the value of the specified HTML attribute.
  - ::before and ::after The ::before and ::after CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the content property to generate cosmetic content.
  - Alt text for generated content The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.
  - ::details-content The ::details-content pseudo-element selects the expandable content of a <details> element, excluding the <summary>.
- Define colors
  - color-mix() The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.
  - color-scheme The color-scheme CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.
  - color() The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
  - RGB The rgb(), rgba(), and hexadecimal (as in #004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.
  - currentColor The currentColor CSS value allows you to reuse an element's computed text color for other properties.
  - Named colors Some CSS color values can be referenced by name, such as red or limegreen. They stand in for specific RGB color values.
  - Oklab and Oklch The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. Oklch is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS color(), oklab(), and oklch() functions.
  - Relative colors The from keyword for color functions (color(), hsl(), oklch(), etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS).
  - System colors The system color CSS keywords, such as ButtonBorder or LinkText, allow you to match default colors from the user agent.
  - Lab and LCH The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.
  - HSL The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.
  - HWB The hwb() CSS function picks colors using hue, whiteness, and blackness channels.
  - COLRv1 COLRv1 is a font format that supports multi-color glyphs. COLRv1 extends COLRv0 to support gradients, transforms, and blending modes.
  - Forced colors The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.
  - light-dark() The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.
- Style elements
  - Set dimensions
    
    Width and height The width and height CSS properties set the preferred physical size of an element.
    
    box-sizing The box-sizing CSS property sets whether an element's width and height are calculated based on the content-box, which does not count the size of borders or padding, or border-box, which does count them.
    
    Min and max width and height The min-width, min-height, max-width, and max-height CSS properties set the minimum and maximum size of an element.
    
    min-content and max-content The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.
    
    min(), max(), and clamp() The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.
    
    margin The margin CSS property sets space around an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
    
    margin-trim The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.
    
    padding The padding CSS property sets space between an element's edge and its contents. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.
    
    resize (CSS property) The resize CSS property sets whether an element can be resized by the user, and on which axes.
    
    Container queries Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.
    
    Container style queries Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.
    
    fit-content The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.
    
    fit-content() The fit-content() CSS function, used outside of a grid layout property, clamps a length between min-content and max-content.
    
    overflow The overflow CSS property sets the behavior for when content doesn't fit in an element.
    
    overflow-clip-margin The overflow-clip-margin CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as overflow: clip.
    
    Window Controls Overlay The display_override:\ ["window-controls-overlay"] web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.
    
    aspect-ratio The aspect-ratio CSS property controls the width-to-height ratio of elements. For <img> and <video> elements, the width and height attributes used together with height: auto control the aspect ratio while the image/video is loading.
    
    zoom The zoom CSS property scales the size of an element. Unlike the transform property, a zoomed element affects page layout.
  - Style borders
    
    Borders The border CSS property sets the color, style, and width of the line around an element.
    
    Border images The border-image CSS property draws an image around an element.
    
    border-radius The border-radius CSS property rounds the corners of the border drawn around an element.
    
    element() The element() CSS function creates a live-updating image from an HTML element that can be used as an image or background image.
    
    paint() The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.
    
    outline The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.
    
    Outlines The outline-color, outline-style, and outline-width and outline-offset CSS properties style a line around an element, outside of the border.
    
    image() The image() CSS function creates an image similar to url() but with additional functionality. It can create a solid color as an image, provide a fallback from an image URL to a solid color, or clip a sprite image using media fragments. Not to be confused with the Image() constructor.
    
    box-decoration-break The box-decoration-break CSS property sets whether box decorations, such as borders or backgrounds, of an element divided across a page, column, or region wraps each fragment or splits across the break.
  - Style background
    
    background The background CSS property is a shorthand that sets several background properties at once.
    
    background-position The background-position CSS property offsets the initial position of background images relative to the background origin.
    
    background-origin The background-origin CSS property sets the background starting position relative to the border and padding of an element.
    
    background-image The background-image CSS property sets the graphics to display behind the content of an element and in front of the background color. Graphics may be any combination of images or gradients.
    
    background-attachment The background-attachment CSS property sets whether an element's background image or gradient moves as the element scrolls.
    
    background-blend-mode The background-blend-mode CSS property blends an element's background image and background color using blend modes like multiply, difference, or color.
    
    background-clip The background-clip CSS property sets the extent of the background: the padding box, the content box, or the default border box.
    
    background-clip: border-area The background-clip: border-area CSS declaration draws the background underneath only the border of an element.
    
    background-clip: text The background-clip: text CSS declaration draws the background underneath only the text in the element.
    
    background-color The background-color CSS property sets the fill color of an element, behind any content and background images or gradients.
    
    background-repeat The background-repeat CSS property sets how a background image is tiled.
    
    background-size The background-size CSS property scales or stretches a background based on the size of the element (with the contain and cover keywords), a length, or percentage.
    
    cross-fade() The cross-fade() CSS function generates an image by mixing two images.
    
    Conic gradients The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.
    
    Gradient interpolation Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.
    
    Gradients The linear-gradient() and radial-gradient() CSS functions and their repeating counterparts create backgrounds that progress smoothly between multiple colors.
    
    element() The element() CSS function creates a live-updating image from an HTML element that can be used as an image or background image.
    
    paint() The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.
    
    image-orientation The image-orientation CSS property corrects the rotation of an image using the image's metadata, such as EXIF.
    
    image-rendering The image-rendering CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.
    
    crisp-edges The image-rendering: crisp-edges CSS declaration scales images to preserve lines without blurring.
    
    smooth The image-rendering: smooth CSS declaration scales images while retaining a gradual color blending that is useful for photos.
    
    object-fit The object-fit CSS property sets how images, videos, and other replaced elements are scaled within their container.
    
    object-position The object-position CSS property places images, videos, and other replaced elements within their boxes.
    
    object-view-box The object-view-box CSS property crops and zooms to an inset area of an image.
    
    image() The image() CSS function creates an image similar to url() but with additional functionality. It can create a solid color as an image, provide a fallback from an image URL to a solid color, or clip a sprite image using media fragments. Not to be confused with the Image() constructor.
  - Transform elements
    
    2D transforms The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.
    
    3D transforms The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.
    
    Individual transform properties The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.
    
    transform-box The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.
  - Style lists
    
    List style The list-style shorthand CSS property and the list-style-image, list-style-position, and list-style-type longhand properties set the position and appearance of a list item's marker.
    
    counter-set The counter-set CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.
    
    Counters (CSS) The counter-reset and counter-increment CSS properties and the counter() and counters() functions automatically number headings or ordered list items.
    
    @counter-style The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.
    
    Reversed counter-reset The reversed() CSS function for counter-reset creates a counter that counts down.
  - Set visibility
    
    Two-value display property The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
    
    opacity The opacity CSS property sets the transparency of an element.
    
    visibility The visibility CSS property sets whether an element is shown. Invisible elements still affect the document layout.
    
    Display The display CSS property sets the display behavior of an element's box within its layout and sets the layout behavior for its child elements.
    
    display: flow-root The display: flow-root CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.
    
    display: list-item The display: list-item CSS declaration renders an element with the box layout of a <li> HTML element.
    
    display: ruby The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>.
    
    display: table The display: table CSS declaration renders an element with the box layout of a <table> HTML element. Child elements may use equivalents to <table> internal elements such as display: table-row for <tr>.
    
    display: contents The display: contents CSS declaration sets an element to display only its contents, not itself.
    
    content-visibility The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.
  - Apply effects
    
    Masks The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.
    
    mask-border The mask-border CSS property sets how the edges of an element are masked. It is a shorthand for mask-border-outset, mask-border-repeat, mask-border-slice, mask-border-source, and mask-border-width.
    
    mask-type The mask-type CSS property on an SVG <mask> element sets whether the mask is a luminance or alpha mask.
    
    Clip path boxes The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.
    
    clip-path The clip-path CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.
    
    path() The path() CSS shape function creates a shape for clip-path, shape-outside, and the SVG attribute d.
    
    shape-outside The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.
    
    shapes The circle(), ellipse(), inset(), polygon(), rect(), and xywh() CSS shape functions create shapes for use with clip-path and shape-outside.
    
    backdrop-filter The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element.
    
    mix-blend-mode The mix-blend-mode CSS property blends an element's content with its background or parent elements using blend modes like multiply, difference, or color.
    
    box-shadow The box-shadow CSS property applies shadow effects around an element's frame. This can create drop shadow and inner shadow effects.
  - Contain styles
    
    Inline-size containment The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.
    
    Layout containment The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations.
    
    Size containment The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.
    
    Style containment The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.
    
    Paint containment The contain: paint CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations.
    
    contain-intrinsic-size The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.
  - Control accessibility
    
    speak The speak CSS property sets whether or not text should be spoken.
    
    speak-as The speak-as CSS property sets how any element's content is spoken. Not to be confused with the speak-as descriptor of @counter-style at-rules.
  - Other
    
    Cursor styles The cursor CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.
    
    isolation The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.
    
    paint-order The paint-order CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, paint-order: markers stroke fill; draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.
    
    path() The path() CSS shape function creates a shape for clip-path, shape-outside, and the SVG attribute d.
    
    overflow-anchor The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.
    
    touch-action The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.
- Style text
  - Control text
    
    Hanging punctuation The hanging-punctuation CSS property puts punctuation characters outside of the box to align the text with the rest of the document.
    
    line-break The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.
    
    dominant-baseline The dominant-baseline CSS property sets the specific baseline used to align an elements's text and inline-level contents.
    
    line-clamp The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box.
    
    line-height The line-height CSS property sets the spacing between text baselines, oriented to the horizontal or vertical writing mode.
    
    letter-spacing The letter-spacing CSS property controls the amount of space between each letter in an element or block of text.
    
    initial-letter The initial-letter CSS property sets the number of lines the first letter of an element occupies. You can use the property to make a raised capital or drop cap.
    
    tab-size The tab-size CSS property sets the width of the tab character.
    
    text-align The text-align CSS property sets the horizontal placement of the inner content of a block element.
    
    text-align-last The text-align-last CSS property sets the alignment of the last line of text before a forced line break.
    
    text-decoration The text-decoration CSS property sets the style and color of decorative lines including underline, overline, line-through, or a combination of lines.
    
    text-decoration in ::selection The text-decoration CSS property in a ::selection rule sets the underline and other text decoration styles on the text a user has highlighted.
    
    text-emphasis The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.
    
    text-indent The text-indent CSS property sets the size of the empty space (indentation) at the beginning of lines in a text.
    
    text-indent: each-line The text-indent: each-line CSS declaration indents text after forced breaks as well as to the first line of a block.
    
    text-indent: hanging The text-indent: hanging CSS declaration indents all lines except the first.
    
    text-justify The text-justify CSS property sets the justification method of text when text-align: justify is set.
    
    text-size-adjust The text-size-adjust CSS property disables or modifies the browser's default text size adjustment for small screen sizes.
    
    text-spacing-trim The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.
    
    text-transform The text-transform CSS property sets text case and capitalization.
    
    text-wrap The text-wrap CSS property sets how lines break in text that overflows the container. It is a shorthand for text-wrap-style and text-wrap-mode.
    
    text-wrap-mode The text-wrap-mode CSS property sets whether lines may wrap with the values wrap and nowrap. It is a longhand property for both white-space and text-wrap.
    
    text-wrap-style The text-wrap-style CSS property sets how lines break in text that overflows the container. It can also be set with the text-wrap shorthand.
    
    text-wrap: balance The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.
    
    text-wrap: nowrap The text-wrap: nowrap CSS declaration prevents text breaking into multiple lines. Text that doesn't fit overflows instead.
    
    text-wrap: pretty The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.
    
    text-wrap: stable The text-wrap: stable CSS declaration wraps text using the default algorithm, but does not change wrapping on earlier lines while the text is being edited.
    
    word-break The word-break CSS property sets how lines break within words.
    
    word-break: auto-phrase The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.
    
    word-spacing The word-spacing CSS property sets the amount of white space between words.
    
    overflow-wrap The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.
    
    writing-mode The writing-mode CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.
    
    white-space The white-space CSS property sets how white space is collapsed and how lines wrap. It is a shorthand for white-space-collapse and text-wrap-mode.
    
    white-space-collapse The white-space-collapse CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.
    
    caret-color The caret-color CSS property sets the color of the text insertion pointer in a text input.
    
    user-select The user-select CSS property controls which elements can be selected by the user.
    
    Text overflow The text-overflow CSS property sets how hidden overflow content appears to users. The property can clip content, truncate content with an ellipsis (…), or truncate with a custom string.
    
    Custom ellipses The text-overflow CSS property with a string value sets the string representing clipped text.
    
    Hyphenate character The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.
    
    Hyphenate limit chars The hyphenate-limit-chars CSS property sets the number of characters in a word before it is hyphenated and the minimum number of characters on either side of the hyphen.
    
    Hyphenation The hyphens CSS property controls when long words are broken by line wrapping. Although called hyphens, the property applies to word-splitting behavior across languages, such as customary spelling changes or the use of other characters. Support for non-English languages varies significantly.
    
    Quotes The quotes CSS property sets the quotation marks inserted via the content CSS property or <q> element.
    
    Custom highlights Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.
    
    Rhythmic sizing The line-height-step CSS property creates consistent vertical rhythm by setting the spacing between body text baselines. It rounds taller lines like headings up to the next multiple of the body text spacing.
    
    text-shadow The text-shadow CSS property sets the position and styles of shadow on text.
    
    Text underline position The text-underline-position and text-underline-offset CSS properties set the position and distance from initial position of text underlines on text with text-decoration: underline.
  - Ruby
    
    ruby-align The ruby-align CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.
    
    ruby-overhang The ruby-overhang CSS property sets whether ruby annotations may overlap adjacent text.
    
    ruby-position The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.
  - Fonts
    
    System font The font-family: system-ui CSS declaration uses the operating system default font for text.
    
    Font metric overrides The ascent-override, descent-override, and line-gap-override descriptors adjust the display of a font declared in an @font-face statement. This can help make fallback fonts look the same size.
    
    Math font family The font-family: math CSS declaration uses the browser default font face for displaying mathematical expressions.
    
    @font-face The @font-face CSS at-rule creates a custom font-family value. The at-rule's descriptors set the font's name, source, and various display settings.
    
    Font loading The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.
    
    Font shorthand The font CSS property shorthand sets multiple font properties, including style, weight, size, and font family.
    
    font-display The font-display CSS descriptor sets whether to show a substitute font or nothing while a font face loads. The property manages what's known as a flash of unstyled text or flash of invisible text.
    
    font-family The font-family CSS property sets the desired font face for text, along with optional fallback font faces.
    
    font-feature-settings The font-feature-settings CSS property sets low-level OpenType feature tags for a font. When possible, use font-variant instead.
    
    font-kerning The font-kerning CSS property sets whether kerning data from a font is used to adjust the space between letters.
    
    font-language-override The font-language-override CSS property sets which language-specific glyphs are displayed.
    
    font-optical-sizing The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.
    
    font-palette The font-palette CSS property selects a color palette from the font, optionally overriding individual colors in the @font-palette-values at-rule.
    
    font-palette animation You can animate color fonts between two font-palette values.
    
    font-size The font-size CSS property sets the text height.
    
    font-size-adjust The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.
    
    font-stretch The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.
    
    font-style The font-style CSS property sets the text style, with normal, italic, and oblique options.
    
    font-synthesis The font-synthesis CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.
    
    font-synthesis-position The font-synthesis-position CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font.
    
    font-synthesis-small-caps The font-synthesis-small-caps CSS property sets whether or not the browser should synthesize small caps typefaces when they're missing from the font.
    
    font-synthesis-style The font-synthesis-style CSS property sets whether or not the browser should synthesize italic and oblique typefaces when they're missing from the font.
    
    font-synthesis-weight The font-synthesis-weight CSS property sets whether or not the browser should synthesize bold typefaces when they're missing from the font.
    
    font-variant The font-variant CSS property is a shorthand for font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-emoji, font-variant-ligatures, font-variant-numeric, and font-variant-position.
    
    font-variant-alternates The font-variant-alternates CSS property, along with the @font-feature-values at-rule, chooses when to use a font's alternate glyphs.
    
    font-variant-caps The font-variant-caps CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.
    
    font-variant-east-asian The font-variant-east-asian CSS property controls glyph substitution and sizing in East Asian text.
    
    font-variant-emoji The font-variant-emoji CSS property sets the default presentation for emoji characters.
    
    font-variant-ligatures The font-variant-ligatures CSS property sets how characters can be visually combined for readability or stylistic reasons.
    
    font-variant-numeric The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.
    
    font-variant-position The font-variant-position CSS property sets whether to use alternate glyphs for subscript and superscript text.
    
    font-variation-settings The font-variation-settings CSS property sets an "axis of variability" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.
    
    font-weight The font-weight CSS property controls the thickness of a font. It is set explicitly with the keyword bold or a number, or relative to the inherited thickness with the keywords bolder or lighter.
- Style scrolling
  - Scroll snap CSS scroll snap controls the panning and scrolling behavior within a scroll container.
  - scroll-behavior The scroll-behavior CSS property controls whether scrolling is smooth or snaps, for scroll actions not performed by the user such as those triggered by navigation.
  - scrollbar-color The scrollbar-color CSS property sets the color of the scrollbar track and thumb.
  - scrollbar-gutter The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.
  - scrollbar-width The scrollbar-width CSS property sets the width of the scrollbar.
  - overscroll-behavior The overscroll-behavior CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.
- Animate elements
  - Declaratively
    
    Animatable clipping paths The clip-path property can be animated using CSS transitions and animations.
    
    animation-composition The animation-composition CSS property chooses how to combine animations that affect the same property.
    
    Animations (CSS) The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.
    
    cubic-bezier() easing The cubic-bezier() CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The ease, ease-in, ease-out, and ease-in-out keyword values are presets for common Bézier curves.
    
    transition-behavior The transition-behavior: allow-discrete CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%.
    
    Transitions (CSS) The transition shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none.
    
    linear() easing The linear() easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.
    
    Motion path The offset CSS property animates an element along a defined motion path.
    
    Scroll-driven animations The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.
    
    steps() easing The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.
    
    will-change The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes.
    
    display animation You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.
    
    overlay The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property.
    
    @starting-style The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.
    
    SMIL SVG animations The <animate>, <animateMotion>, and <animateTransform> SVG elements declaratively animate SVG elements. Also known as SMIL.
  - Programmatically
    
    Web animations The animate() method of Element objects programmatically animates elements over time and can synchronize the animations of multiple elements.
    
    scrollIntoView() The scrollIntoView() method scrolls an element's ancestor containers such that the element is visible to the user.
    
    Scroll to text fragment Text fragments are URL fragments on the form #:~:text=snippet and link to a snippet of text within a page. The browser may scroll, highlight, or otherwise bring that text to the reader's attention.
    
    requestAnimationFrame() The requestAnimationFrame() method schedules a function that runs before the next repaint. You can use it to animate content with JavaScript.
    
    requestAnimationFrame() in workers The requestAnimationFrame() method in workers schedules a function that runs before the next repaint. Together with offscreen canvas, you can animate content from a worker.
- Animate page navigation
  - View transitions View transitions allow you to create animated visual transitions between different states of a document.
  - Cross-document view transitions The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.
  - Active view transition The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.
  - view-transition-class The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.
- Style forms
  - accent-color The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.
  - appearance The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.
  - Vertical form controls The writing-mode CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is vertical-lr or vertical-rl. The direction CSS property sets whether inputs flow from top to bottom or bottom to top.
  - field-sizing The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.
  - tabindex The tabindex HTML attribute make an element focusable, and sets the element's relative ordering for sequential focus navigation.
- Define lengths
  - cap unit The cap CSS length unit corresponds to the height of Latin capital letters.
  - ch unit The ch CSS length unit is a font-relative length based on the width of the zero (0) character.
  - em unit The em CSS length unit is a font-relative length equal to the specified font size. In an element with a 2 inch font, 1em equals 2 inches.
  - rem The rem CSS length unit is a font-relative length that is equal to the font size of the root HTML element which for most browsers is 16px.
  - ex unit The ex CSS length unit is a font-relative length equal to the used x-height of the first available font. X-height is often equal to the height of the lowercase x.
  - ic unit The ic CSS length unit corresponds to the width of CJK ideographic characters.
  - lh unit The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.
  - Q unit The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.
  - rcap unit The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.
  - rch unit The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.
  - rex unit The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.
  - ric unit The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.
  - rlh unit The rlh CSS length unit is a font-relative length relative to the line height of root element.
  - Small, large, and dynamic viewport units The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.
  - Viewport units The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.
  - calc-size() The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
- Calculate styling values
  - abs() and sign() The abs() and sign() CSS functions compute the absolute value or the sign of the input.
  - round(), mod(), and rem() The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.
  - pow(), sqrt(), hypot(), log(), and exp() The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.
  - sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS) The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.
  - calc() The calc() CSS function computes mathematical expressions such a calc(100%/3 - 1em).
  - calc() keywords The e, pi, infinity, and NaN keywords represent well-defined constants accepted in CSS math functions such as calc().
  - attr() The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes.
- Adapt to the device
  - Media queries The @media CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as screen or print, and one or more mandatory media features, such as prefers-reduced-animations.
  - Media query range syntax The range syntax of CSS media queries allows you to use mathematical comparison operators such as <, >, <=, and >= to define a range of values for a media query. For example, (400px < width < 1000px) returns true if the viewport width is between 400px and 1000px.
  - Overflow media queries The overflow-block and overflow-inline CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.
  - video-dynamic-range media query The video-dynamic-range CSS media query sets styles based on whether a device can display video with at least standard range colors or at least high range colors. Non-visual devices will match neither.
  - Update frequency media query The update CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. For example, you can avoid animations on devices that aren't fast enough to display them smoothly.
  - display-mode media query The display-mode CSS media query sets styles based on whether the web page is in fullscreen, standalone, minimal-ui, browser, or picture-in-picture mode.
  - color-gamut media query The color-gamut media query sets styles based on the colors a device can display.
  - dynamic-range media query The dynamic-range CSS media query sets styles based on whether a device can display at least standard range colors or at least high range colors. Non-visual devices will match neither.
  - Interaction media queries The pointer, any-pointer, hover, and any-hover CSS media queries set styles based on the presence of pointing devices and their ability to hover over elements. For example, most smartphones match the (hover: none) and (pointer: coarse) media query.
  - resolution media query The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.
  - resolution media query (compatibility prefixes) The -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, and -webkit-max-device-pixel-ratio CSS media queries are standardized compatibility alternatives to resolution media queries.
  - image-set() The image-set() CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.
  - scripting media query The scripting CSS media query sets styles based on whether scripting such as JavaScript is available. Values are enabled if scripting is available, initial-only if scripting is only available on page load (for example, printed content), or none.
- Adapt to user preferences
  - prefers-color-scheme media query The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.
  - prefers-contrast media query The prefers-contrast CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors.
  - prefers-reduced-data media query The prefers-reduced-data CSS media query detects whether the user has a preference for using less network traffic. For example, you can use this media query to avoid loading large font files and use a system font instead.
  - prefers-reduced-motion media query The prefers-reduced-motion CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device, such as scrolling, panning, zooming, and strobing.
  - prefers-reduced-transparency media query The prefers-reduced-transparency CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility.
  - inverted-colors media query The inverted-colors CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.
Handle media
- Capture media
  - HTML media capture The capture HTML attribute for <input type="file"> elements allows the user to capture media using the device's camera or microphone.
  - Media capture The navigator.mediaDevices.getUserMedia() API requests access to devices that produce audio or video streams, such as microphones or video cameras.
- Display images
  - AVIF AVIF (AV1 Image File Format) is an image format based on the AV1 video format.
  - JPEG XL The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.
  - WebP The WebP image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.
  - SVG The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.
  - Preloading responsive images The imagesrcset and imagesizes attributes with the rel="preload" attribute for the <link> HTML element starts fetching responsive images before they're found in the body of the document.
  - Lazy-loading images and iframes The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.
  - Image maps The <area> and <map> elements define a clickable area on an image.
  - createImageBitmap The createImageBitmap() global method creates an ImageBitmap object from a source such as an image, SVG, blob, or canvas. An ImageBitmap object represents pixel data that can be drawn to a canvas with lower latency than other types, such as ImageData.
- Play audio and video
  - <audio> The <audio> element plays sound such as audio effects or music, optionally with controls provided by the browser.
  - <video> The <video> element plays videos or movies, optionally with controls provided by the browser.
  - Web Audio The Web Audio API creates graphs of audio nodes that handle sound inputs, synthesize sounds, apply effects, create visualizations, and output to audio devices.
  - Text tracks The <track> element is used as a child of the media elements that lets you specify a timed text track to be displayed in parallel with the media element.
  - Audio session The navigator.audioSession API controls how audio playback interacts with other applications. For example, playing music can pause audio from other applications, while ambient audio can play at the same time.
  - Audio and video tracks The audioTracks and videoTracks APIs for media elements switch audio and video tracks during playback.
  - AudioWorklet The AudioWorklet API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.
  - controlslist The controlslist attribute for <audio> or <video> hides parts of the browser's built-in controls. For example, controlslist="nofullscreen" removes the button to play the video in fullscreen.
  - preservesPitch The preservesPitch property for <audio> or <video> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.
  - WebVTT WebVTT is a captions and subtitles format. WebVTT files are loaded using the <track> element, and the VTTCue API can be used to create or update cues dynamically.
  - WebVTT cue alignment The WebVTT cue alignment settings control which part of the cue is aligned with the given line and position. Cue alignment is set using line and position settings in WebVTT files or the lineAlign and positionAlign properties of VTTCue using JavaScript.
  - WebVTT regions WebVTT regions set the areas of the video where captions or subtitles should be rendered, such as placing roll-up captions used for live captions.
  - captureStream() for <audio> and <video> The captureStream() method for <audio> and <video> elements returns a MediaStream for the media element's content. You can use this to record media or send it elsewhere, such as a canvas or WebRTC connection.
  - requestVideoFrameCallback() The requestVideoFrameCallback() method for <video> schedules a function that runs with the next video frame. It is similar to requestAnimationFrame(), but for video.
  - WebCodecs The WebCodecs API provides low-level access to individual video frames and chunks of audio samples, for full control over the way media is processed.
  - fastSeek() The fastSeek() method seeks an <audio> or <video> element as fast as possible, by seeking to a keyframe instead of exactly the requested time.
  - Speech recognition The SpeechRecognition API converts audio into text using the device's speech recognition service.
  - Speech synthesis The SpeechSynthesis API converts text to speech with artificial voices.
  - Picture-in-picture (video) The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video.
  - Remote playback The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities.
  - Managed media source The ManagedMediaSource API is a MediaSource where the browser manages the memory of source buffers and may evict data if needed.
  - Media element pseudo-classes The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.
  - Media session The navigator.mediaSession API integrates with platform UI for media playback. It can be used to set metadata such as title and artwork, and to handle user actions like playing, pausing, or seeking.
  - Media source The MediaSource API is a custom data source for media elements commonly used for adaptive streaming. Also known as Media Source Extensions (MSE).
  - OfflineAudioContext The OfflineAudioContext API represents an audio processing graph that writes to an AudioBuffer instead of an output device.
  - Time-relative pseudo-selectors The :future and :past CSS pseudo-classes match upcoming or prior elements during media playback.
- Draw graphics
  - 2D canvas The CanvasRenderingContext2D API is the "2d" rendering context for the <canvas> element. It represents a flat, two-dimensional space for drawing graphics and animations.
  - 2D canvas opacity The optional alpha parameter of a 2D canvas's getContext() method sets whether the canvas has an alpha transparency channel. If set to false, then this permits the browser to optimize compositing for an opaque canvas.
  - willReadFrequently The optional willReadFrequently parameter of a canvas's getContext() method permits the browser to optimize for frequent getImageData() calls by avoiding hardware acceleration. Also known as multiple readback.
  - contextlost and contextrestored The contextlost event for <canvas> fires when the canvas backing storage is lost, while the contextrestored event fires when it is recreated.
  - Offscreen canvas The OffscreenCanvas API provides a canvas that can be drawn to off screen, with no dependencies on the DOM, which can be used to run heavy rendering operations inside a worker context.
  - captureStream() for <canvas> The captureStream() method for <canvas> elements returns a MediaStream which includes a CanvasCaptureMediaStreamTrack representing real-time video of the canvas image. You can use this to record the canvas, or send it elsewhere, such as another canvas or WebRTC connection.
  - Canvas createConicGradient() The createConicGradient() methods draw a conic gradient to a 2D canvas.
  - Canvas reset() The reset() method clears a canvas to its initial state.
  - Canvas roundRect() The roundRect() methods draw a rounded rectangle to a 2D canvas.
  - WebGL The WebGLRenderingContext API is the "webgl" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations.
  - OES_draw_buffers_indexed WebGL extension The OES_draw_buffers_indexed extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.
  - WebGL2 The WebGL2RenderingContext API is the "webgl2" rendering context for the <canvas> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.
  - SVG The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.
  - SVG filters The <filter> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.
  - Opacity (SVG) The fill-opacity, and stroke-opacity SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.
  - Color management for 2D canvas The optional colorSpace parameter of a 2D canvas's getContext() method chooses the color representation, such as "srgb" or "display-p3".
  - Color management for WebGL The drawingBufferColorSpace and unpackColorSpace properties of WebGLRenderingContext sets the color representation for the buffer and imported textures, such as "srgb" or "display-p3".
  - Color management for WebGL2 The drawingBufferColorSpace and unpackColorSpace properties of WebGL2RenderingContext sets the color representation for the buffer and imported textures, such as "srgb" or "display-p3".
  - Desynchronized 2D canvas The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency.
  - Desynchronized WebGL canvas The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL canvas independently of the event loop. This can reduce drawing latency.
  - Desynchronized WebGL2 canvas The optional desynchronized parameter of a canvas's getContext() method permits the browser to draw a WebGL2 canvas independently of the event loop. This can reduce drawing latency.
  - WEBGL_color_buffer_float WebGL extension The WEBGL_color_buffer_float extension for WebGL 1.0 contexts adds the 32-bit floating-point type RGBA32F as a color-renderable format.
  - WEBGL_compressed_texture_astc WebGL extension The WEBGL_compressed_texture_astc extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to compressedTexImage2D() and compressedTexSubImage2D().
  - WEBGL_compressed_texture_etc WebGL extension The WEBGL_compressed_texture_etc extension for WebGL 1.0 and 2.0 contexts adds many ETC2 and EAC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().
  - WEBGL_compressed_texture_etc1 WebGL extension The WEBGL_compressed_texture_etc1 extension for WebGL 1.0 and 2.0 contexts adds the ETC1 compressed texture format to compressedTexImage2D() and compressedTexSubImage2D().
  - WEBGL_compressed_texture_pvrtc WebGL extension The WEBGL_compressed_texture_pvrtc extension for WebGL 1.0 and 2.0 contexts adds PVRTC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().
  - WEBGL_compressed_texture_s3tc WebGL extension The WEBGL_compressed_texture_s3tc extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().
  - WEBGL_compressed_texture_s3tc_srgb WebGL extension The WEBGL_compressed_texture_s3tc_srgb extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats for the sRGB colorspace to compressedTexImage2D() and compressedTexSubImage2D().
  - WEBGL_debug_renderer_info WebGL extension The WEBGL_debug_renderer_info extension for WebGL 1.0 and 2.0 contexts exposes information about the graphics driver for debugging purposes.
  - WEBGL_debug_shaders WebGL extension The WEBGL_debug_shaders extension for WebGL 1.0 and 2.0 contexts adds the getTranslatedShaderSource() method to debug shaders from privileged contexts.
  - WEBGL_depth_texture WebGL extension The WEBGL_depth_texture extension for WebGL 1.0 contexts defines 2D depth and depth-stencil textures.
  - WEBGL_draw_buffers WebGL extension The WEBGL_draw_buffers extension for WebGL 1.0 contexts enables a fragment shader to write to several textures, which is useful for deferred shading, for example.
  - WEBGL_lose_context WebGL extension The WEBGL_lose_context extension for WebGL 1.0 and 2.0 contexts simulates losing and restoring a WebGLRenderingContext or WebGL2RenderingContext.
  - WEBGL_multi_draw WebGL extension The WEBGL_multi_draw extension for WebGL 1.0 and 2.0 contexts renders more than one primitive with a single function call.
  - SharedArrayBuffer in WebGL SharedArrayBuffer objects can be used in WebGL APIs that previously only worked with ArrayBuffer objects.
  - ANGLE_instanced_arrays WebGL extension The ANGLE_instanced_arrays extension for WebGL 1.0 contexts draws the same object multiple times or groups of similar objects multiple times, if the group shares the same vertex data, primitive count and type.
  - OES_element_index_uint WebGL extension The OES_element_index_uint extension for WebGL 1.0 contexts adds support for gl.UNSIGNED_INT types to WebGLRenderingContext.drawElements().
  - OES_fbo_render_mipmap WebGL extension The OES_fbo_render_mipmap extension for WebGL 1.0 contexts attaches any level of a texture to a framebuffer object.
  - OES_standard_derivatives WebGL extension The OES_standard_derivatives extension for WebGL 1.0 contexts adds the GLSL derivative functions dFdx, dFdy, and fwidth.
  - OES_texture_float WebGL extension The OES_texture_float extension for WebGL 1.0 contexts adds floating-point pixel types for textures.
  - OES_texture_float_linear WebGL extension The OES_texture_float_linear extension for WebGL 1.0 and 2.0 contexts adds linear filtering with floating-point pixel types for textures.
  - OES_texture_half_float WebGL extension The OES_texture_half_float extension for WebGL 1.0 contexts adds texture formats with 16-bit (also known as half float) and 32-bit floating-point components.
  - OES_texture_half_float_linear WebGL extension The OES_texture_half_float_linear extension for WebGL 1.0 contexts adds linear filtering with half floating-point pixel types for textures.
  - OES_vertex_array_object WebGL extension The OES_vertex_array_object extension for WebGL 1.0 contexts adds vertex array objects (VAOs) which encapsulate vertex array states. These objects keep pointers to vertex data and names for different sets of vertex data.
  - EXT_blend_minmax WebGL extension The EXT_blend_minmax extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.
  - EXT_color_buffer_float WebGL extension The EXT_color_buffer_float extension for WebGL 2.0 contexts adds color-renderable floating point formats to renderbufferStorage().
  - EXT_color_buffer_half_float WebGL extension The EXT_color_buffer_half_float extension for WebGL 1.0 and 2.0 contexts renders 16-bit floating-point color buffers.
  - EXT_disjoint_timer_query WebGL extension The EXT_disjoint_timer_query extension for WebGL 1.0 contexts measures the duration of a set of GL commands, without stalling the rendering pipeline.
  - EXT_float_blend WebGL extension The EXT_float_blend extension for WebGL 1.0 and 2.0 contexts adds 32-bit floating-point components to blending and draw buffers.
  - EXT_frag_depth WebGL extension The EXT_frag_depth extension for WebGL 1.0 and 2.0 contexts adds setting the depth value of a fragment from within the fragment shader.
  - EXT_shader_texture_lod WebGL extension The EXT_shader_texture_lod extension for WebGL 1.0 and 2.0 contexts adds texture functions to the OpenGL ES Shading Language such that the shader writer explicitly controls of the level of detail (LOD).
  - EXT_sRGB WebGL extension The EXT_sRGB extension for WebGL 1.0 contexts adds sRGB support to textures and framebuffer objects.
  - EXT_texture_compression_bptc WebGL extension The EXT_texture_compression_bptc extension for WebGL 1.0 and 2.0 contexts adds the BPTC compressed texture formats to compressedTexImage2D() and compressedTexSubImage2D().
  - EXT_texture_compression_rgtc WebGL extension The EXT_texture_compression_rgtc extension for WebGL 1.0 and 2.0 contexts adds RGTC compressed texture formats. RGTC is a block-based texture compression format suited for unsigned and signed red and red-green textures. Also known as Red-Green Texture Compression.
  - EXT_texture_filter_anisotropic WebGL extension The EXT_texture_filter_anisotropic extension for WebGL 1.0 and 2.0 contexts adds anisotropic filtering (AF). AF improves the quality of mipmapped texture access when viewing a textured primitive at an oblique angle.
  - EXT_texture_norm16c WebGL extension The EXT_texture_norm16 extension to WebGL 2.0 contexts adds 16 bit signed normalized and unsigned normalized fixed-point texture, renderbuffer, and texture buffer formats.
  - OVR_multiview2 WebGL extension The OVR_multiview2 extension for WebGL 2.0 contexts renders into multiple views simultaneously. This especially useful for virtual reality (VR) and WebXR.
Run client-side logic
- Write JavaScript code
  - Write code
    
    JavaScript (initial core language support) JavaScript is a programming language that runs in browsers, usually through the <script> element. JavaScript has changed over many years. This feature represents the oldest language features, such as built-in objects, statements, and operators. Also known as ECMAScript.
  - Organize code
    
    <script> and <noscript> The <script> element contains or loads data or executable code. This is typically used to load JavaScript code. The <noscript> element represents alternative content to show when scripting is not allowed.
    
    JavaScript modules JavaScript modules allow code to be organized into reusable units. Modules use import to load other modules and export to declare what is available to import from other modules. In HTML, modules are loaded with <script type="module">.
    
    JavaScript modules in service workers The navigator.serviceWorker.register() method accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in service workers.
    
    JavaScript modules in shared workers The SharedWorker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in shared workers.
    
    JavaScript modules in workers The Worker() constructor accepts { type: "module" } to load scripts that use import and export. Also known as ECMAScript modules or ESM in workers.
  - Asynchronous code
    
    Promise (initial support) A promise represents an asynchronous operation which eventually succeeds or fails.
    
    Promise finally() The promise finally() method executes a function when the promise settles (resolves or rejects).
    
    Promise.allSettled() The Promise.allSettled() static method waits for an array of promises to settle (resolve or reject).
    
    Promise.any() The Promise.any() static method returns a promise that fulfills as soon as the first of an iterable of promises fulfills, with that promise's value. Otherwise, it rejects with an AggregateError when all of the promises have rejected.
    
    Promise.try() The Promise.try() static method returns a promise that takes a callback of any kind (returns or throws, synchronously or asynchronously) and wraps its result in a Promise.
    
    Promise.withResolvers() The Promise.withResolvers() static method is an alternative to the Promise() constructor that returns both the promise and resolution functions. You can use this to access resolve and reject outside the scope of the executor function.
  - Reflection
    
    Proxy and Reflect The Proxy and Reflect JavaScript built-ins intercept and define custom behavior for fundamental language operations (such as property lookup, assignment, enumeration, or function invocation).
  - Collections
    
    Map (initial support) Map objects hold key-value pairs and remember the original insertion order of the keys.
    
    Set (initial support) Set objects store unique values of any type.
    
    Set methods The difference(), intersection(), isDisjointFrom(), isSubsetOf(), isSupersetOf(), symmetricDifference(), and union() methods of the JavaScript Set object performs operations between two sets.
    
    WeakMap A WeakMap object holds key-value pairs that do not create strong references to its keys, such that value data can be associated with a key without preventing garbage collection of the key.
    
    WeakSet A WeakSet object stores unique values of any type without creating strong references to the values, such that membership in the set does not prevent garbage collection of the value.
    
    Iterator methods The Iterator object is an abstract base for objects that implement the iterator protocol. It provides methods common to built-in iterators, such as filter(), find(), map(), and reduce(). You can also use the static method Iterator.from() to convert an existing iterable into an Iterator.
    
    Iterators and the for...of loop The for...of loop operates on a sequence of values sourced from an iterable object, such as arrays, array-like objects, DOM collections, iterators, generators, and user-defined iterables. All built-in iterators inherit from the Iterator class.
    
    Array (initial support) Arrays are ordered lists of JavaScript values.
    
    Array at() The at() method of arrays and typed arrays returns the item at an index, including negative indices for getting items relative to the end of an array. Also known as the relative indexing method.
    
    Array by copy The toReversed(), toSorted(), toSpliced(), and with() methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such as sort() or reverse() that change arrays in place.
    
    Array copyWithin() The copyWithin() method of arrays and typed arrays shifts or copies items of an array to another index of the array without changing its length.
    
    Array fill() The fill() method of arrays and typed arrays sets all or some items of an array to a given a value.
    
    Array find() and findIndex() The find() and findIndex() methods of arrays and typed arrays search an array for the first item that satisfies a test function.
    
    Array findLast() and findLastIndex() The findLast() and findLastIndex() methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function.
    
    Array flat() and flatMap() The flat() and flatMap() methods for arrays creates a new array such that each nested array item is concatenated into it.
    
    Array grouping The Object.groupBy() and Map.groupBy() static methods group values of arrays and iterables based on a function that returns a key for each value.
    
    Array includes() The includes() method of arrays and typed arrays returns whether a given value appears in the array.
    
    Array iteration methods Array iteration methods
    
    Array iterators Arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().
    
    Array splice() The array splice() method changes an array in-place. You can use it to delete items, overwrite items, or insert items, starting from an index.
    
    Array.from() The Array.from() and typed array .from() static methods copy items from an iterable or array-like object to make a new array.
    
    Array.fromAsync() The Array.fromAsync() static method copies items from an async iterable object to make a new array.
    
    Array.isArray() The Array.isArray() static method checks whether a value is an array.
    
    Array.of() The Array.of() and typed array .of() static methods create new arrays from the values of any number of arguments.
    
    Stable array sort Stable array sort() function
    
    Typed array iteration methods Typed array iteration methods
    
    Typed array iterators Typed arrays are iterable with the for … of statement and enumerable with the methods entries(), keys(), and values().
    
    Typed arrays (initial support) Typed arrays are ordered lists of JavaScript values, where all values are of the same numerical type, such as 8-bit integers or 32-bit floating point numbers.
  - Strings
    
    String (initial support) The string type (and String object) represents a sequence of characters.
    
    String at() The at() method of strings returns the character (one UTF-16 code unit) at an index, including negative indices for getting the character relative to the end of the string. Also known as the relative indexing method.
    
    String codePointAt() and fromCodePoint() The codePointAt() method returns the numeric value of the UTF-16 code point at an index of the string. The fromCodePoint() method returns a string created from one or more code points.
    
    String includes() The includes() method of strings returns whether a search string appears within the string.
    
    String isWellFormed() and toWellFormed() The isWellFormed() method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The toWellFormed() method returns a new string where all lone surrogates are replaced by the Unicode replacement character.
    
    String matchAll() The matchAll() method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.
    
    String normalize() The normalize() method of strings returns a Unicode normal form of a string as a new string. More than one code point sequence can represent the same characters. You can use the normalize() method to find canonically or compatibly equivalent strings.
    
    String padStart() and padEnd() The padStart() and padEnd() methods of strings return a string lengthened to a minimum number of characters by adding characters to the start or end of the string.
    
    String raw() The String.raw() static method interpolates template literal substitutions, but ignores escape sequences. It is the tag function for template literals.
    
    String repeat() The repeat() method of strings returns the original string repeated a number of times.
    
    String replaceAll() The replaceAll() method of strings returns a new string where all matches of a pattern (a string or regular expression) have been substituted with a replacement string.
    
    String startsWith() and endsWith() The startsWith() and endsWith() methods of strings returns whether a search string appears at the beginning or end of the provided string.
    
    String trimStart() and trimEnd() The trimStart() and trimEnd() methods of strings return a new string with whitespace removed from the beginning or end of the string.
  - Dates
    
    Date The Date object represents a single moment in time.
    
    Temporal The Temporal API allows you to work with dates, times, time zones, and durations. It is more powerful than the Date API.
  - Internationalization
    
    Intl The Intl API provides language sensitive string comparison, number formatting, date and time formatting, and more.
    
    Intl.DisplayNames The Intl.DisplayNames API provides localized names of language, region, script, and currency codes.
    
    Intl.DurationFormat The Intl.DurationFormat API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.
    
    Intl.ListFormat The Intl.ListFormat API creates a locale-aware formatter that turns iterable objects into localized strings.
    
    Intl.Locale The Intl.Locale API parses Unicode locale identifiers, with language, region, and script codes, such as zh-Hans-CN or en-GB.
    
    Intl.Locale info The getter methods of the Intl.Locale API provide supplemental information about a Unicode locale, such as the locale's calendar (for example, the first day in a week or the weekend start day), writing direction, 12- or 24-hour cycles, and numbering system.
    
    Intl.PluralRules The Intl.PluralRules API creates a locale-aware object that tells you which of the language's pluralization rules apply based on a given number.
    
    Intl.RelativeTimeFormat The Intl.RelativeTimeFormat API creates a locale-aware formatter that turns an object representing a relative time (such as '1 day ago') into a localized string.
    
    Intl.Segmenter The Intl.Segmenter API creates a locale-aware text splitter that can separate a string into meaningful graphemes, words, or sentences.
    
    Language The navigator.language read-only property returns a string representing the preferred language of the user, usually the language of the browser UI. The navigator.languages read-only property returns an array of strings representing the user's preferred languages.
  - Other built-ins
    
    Navigator The window.navigator API is a generic global object, under which many other, more interesting APIs are located. It doesn't do anything interesting on its own.
    
    Math and numbers The number type (and Number object) represents floating-point numbers, such as 42 or -4.201, while the Math API contains mathematical functions and constants. JavaScript can also represent boundless negative and positive values as Infinity or not-a-number as NaN (as in 0 * Infinity).
    
    Regular expressions The RegExp object represents a regular expression, a notation for matching text patterns.
    
    Async functions The async and await keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.
    
    Async generators Async generator functions (async function*) create iterators that return multiple promises, one after another, on-demand.
    
    Async iterators and the for await..of loop Asynchronous iterator objects, such as those returned by promises or generator functions, are iterable with the for await .. of loop.
    
    Asynchronously iterable streams Asynchronous iteration of a stream allows you to use for await … of loops to iterate through a stream's incoming data.
    
    AbortController and AbortSignal The AbortController and AbortSignal APIs allow you to cancel an ongoing operation, such as a fetch() request.
    
    AbortSignal.any() The AbortSignal.any() static method combines an iterable of abort signals into a single signal, with the abort reason taken from the first signal to abort.
    
    Atomics.waitAsync The Atomics.waitAsync() static method waits for a value in a shared memory location, providing a promise when the expected value is not yet in memory. The waitAsync() method is a non-blocking alternative to Atomics.wait().
    
    BigInt The BigInt JavaScript type represents integers of any size, including integers too large for the primitive Number type.
    
    BigInt64Array The BigInt64Array and BigUint64Array typed arrays represent 64-bit integers, signed and unsigned respectively.
    
    Classes Classes are an object-oriented syntax for JavaScript prototypes.
    
    Float16Array Float16Array is a typed array of 16-bit floating point numbers.
    
    Generators Generator functions (function*) create iterators that return multiple values, one after another, on-demand.
    
    JSON The JSON API provides static methods for parsing values from and converting values to JavaScript Object Notation (JSON), a serialization format for objects, arrays, numbers, strings, Boolean values, and null.
    
    JSON source text access To serialize and parse JSON in a lossless way, JSON.stringify() handles rawJSON values and JSON.parse()'s reviver callback takes a source context parameter.
    
    Resizable buffers The resize() method of an ArrayBuffer and the grow() method of a SharedArrayBuffer, constructed with the maxByteLength option, changes the size of the buffer in place.
    
    setInterval The setInterval() global function repeatedly executes provided code on a given delay, and the accompanying clearInterval() cancels the interval.
    
    setTimeout The setTimeout() global function executes provided code after a given duration of time, and the accompanying clearTimeout() cancels the timer.
    
    SharedArrayBuffer and Atomics The SharedArrayBuffer object represents bytes shared between multiple workers and the main thread. The Atomics object safely accesses SharedArrayBuffer data to make sure predictable values are read and written and that operations are not interrupted.
    
    Symbol A Symbol value is a unique, non-enumerable primitive value used for encapsulation or information hiding. For example, a symbol can be a key of an object that can never collide with any other key.
    
    Weak references The WeakRef and FinalizationRegistry objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.
    
    Functions Functions are series of statements that can be called and return a value. The function keyword (as in function () { }) and arrow (=>) expression create functions. The JavaScript functions protocol includes default and rest parameters and binding to this.
    
    Base64 encoding and decoding The atob() and btoa() global functions encode and decode strings to and from base 64, respectively.
- Manipulate the DOM
  - DOM The DOM (Document Object Model) API represents HTML and XML documents as trees of nodes. You can use the API to inspect and modify the structure and content of a document.
- Store data
  - Storage access The document.requestStorageAccess() method allows content in iframes to request storing and reading cookies and other site data, while the document.hasStorageAccess() method checks if such access is granted.
  - Storage buckets The navigator.storageBuckets API allows you to organize locally stored data into groups called storage buckets. Each bucket can have different settings, allowing the browser to manage and delete buckets independently rather than applying the same treatment to all.
  - Storage manager The navigator.storage API provides information about the availability and persistence of the data that a site stores on the device, by using APIs such as the Cache API or the IndexedDB API.
  - Shared storage The sharedStorage API stores data to a shared space where the data can then be processed without the ability to track users across the different sites they visit. A common use case is measuring the reach of third-party ads without using user-tracking cookies."
  - localStorage and sessionStorage The localStorage and sessionStorage APIs store data as key-value pairs. While localStorage persists across sessions, sessionStorage data is discarded when the page is closed.
  - Non-cookie storage access Non-cookie storage access extends the requestStorageAccess() API to let content in cross-site iframes request access to first-party data beyond cookies.
  - Dataset The dataset API attaches and accesses custom data on elements, using either the dataset property of HTMLElement or attributes prefixed with data-.
- Handle user input
  - Autofocus The autofocus HTML attribute gives focus to an element on page load.
  - document.caretPositionFromPoint() The document.caretPositionFromPoint() method finds an insertion point, represented by a DOM node and an offset within that node, for given coordinates in the viewport.
  - document.elementFromPoint() and document.elementsFromPoint() The document.elementFromPoint() and document.elementsFromPoint() methods find the top-most element at a given point in the viewport, or all elements at a given point in the viewport, respectively.
  - showPicker() for <input> The showPicker() method for <input> elements shows the user interface for picking a value. For example, for <input type="date"> it shows the interface for picking a date.
  - showPicker() for <select> The showPicker() method for <select> elements shows the dropdown menu or other user interface for picking one of the options.
  - Selection The Selection API controls and modifies user text selections within the page.
  - Selection composed ranges The window.getSelection().getComposedRanges() method returns ranges that represent the current user selection, even if the selection spans across shadow tree boundaries.
  - Keyboard lock The navigator.keyboard.lock() API allows you to capture keys that are normally reserved by the operating system. It can be used to provide an immersive fullscreen experience such as games.
  - Keyboard map The navigator.keyboard.getLayoutMap() API returns a map from key codes to human readable key names. It can be used to describe buttons to the user when using the keyboard as a set of buttons, such as in games.
  - Mouse events Mouse events, such as click, mousedown, or mousemove, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.
  - Intersection observer The Intersection Observer API asynchronously observes changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
  - Intersection observer visibility tracking The trackVisibility parameter for the IntersectionObserver constructor enables tracking the visibility of an element, to detect if it may be obscured by other content or visual effects. Also known as IntersectionObserver v2.
  - writingsuggestions The writingsuggestions HTML attribute turns on or off a browser's writing suggestions. Writing suggestions vary by browser. For example, if turned on then a browser might show inline text completions accepted by pressing Tab.
  - EditContext The EditContext API allows you to build rich text editors that support advanced text input, such as Input Method Editor (IME) composition, an emoji picker, or other platform-specific editing UI.
  - Drag and Drop The Drag and Drop API lets users drag and drop elements and external files such as images onto web pages. Developers can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements.
  - Idle detection The IdleDetector API is used to notify a webpage of the user's idle, active, and locked state.
  - dirname The dirname attribute of <textarea> and <input> HTML elements includes the field's writing direction as form data on submission.
  - User activation The navigator.userActivation API reveals whether the user has interacted with the page through an "activation" gesture such as a click, tap, or key press. User activation gated APIs (such as the fullscreen API) fail without user interaction, and this API allows you to predict such a failure.
  - Pointer lock Provides access to raw mouse movement by locking the target of mouse events to a single element and hiding the mouse cursor.
  - scrollend The scrollend event fires when an element or document has finished scrolling.
  - Input events The input event fires when a form control changes or an element with the contenteditable attribute changes.
  - hidden="until-found" The hidden="until-found" attribute hides an element until it is found using the browser's find-in-page search or it is directly navigated to by following a URL fragment.
  - Permissions The navigator.permissions API checks whether a permission, such as access to geolocation data, has been granted.
  - Touch events Touch events touchstart, touchmove, touchend, and touchcancel fire when users interact with a touch-sensitive surface, such as a screen or drawing tablet. These events are similar to mouse events.
  - Virtual keyboard The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing.
- Run multi-threaded code
  - BroadcastChannel The BroadcastChannel API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs.
  - postMessage The postMessage() global method sends cross-origin messages to windows and workers, including popups and iframes. Also known as cross-document messaging.
  - Channel messaging Channel messaging communicates one-to-one between browsing contexts on the same origin, such as between <iframe> elements or two documents using a shared worker.
  - messageerror The messageerror event fires on a target, such as a window or worker, when an incoming message cannot be deserialized. This event can fire for many types of messages, such as cross-document messages or broadcast channel messages.
  - structuredClone() The structuredClone() global method creates a deep copy of an object. Values that cannot be cloned can instead be transferred, making the original value no longer usable.
  - Serializable errors The DOMException, Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, and URIError objects are serializable. You can call structuredClone() on an error object or pass it to a worker using postMessage().
  - Locks The navigator.locks API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.
  - Transferable ArrayBuffer The transfer() and transferToFixedLength() methods of ArrayBuffer move a buffer from one context to another (for example, to a worker).
- Run native code
  - WebAssembly The WebAssembly.instantiate() and WebAssembly.instantiateStreaming() global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.
  - BigInt to i64 conversion (WebAssembly) Integer values pass bidirectionally between JavaScript and WebAssembly, converted to i64 values in WebAssembly or BigInt values in JavaScript.
  - Bulk memory operations (WebAssembly) Bulk memory operations, such as copy and init, mirror the efficiency of native memcpy and memmove operations.
  - Exception handling (WebAssembly) Exceptions break the normal control flow of execution to represent exceptional behavior, such as an error. You can respond to the exception in JavaScript code.
  - Extended constant expressions (WebAssembly) The i32.add, i32.sub, i32.mul, i64.add, i64.sub, and i64.mul operations extend constant expressions to include arithmetic.
  - Garbage collection (WebAssembly) Garbage collection tracks references for better memory management with garbage-collected languages running in WebAssmbly.
  - Multi-memory (WebAssembly) A single module in WebAssembly can have multiple memories.
  - Multi-value (WebAssembly) Instructions and blocks can produce multiple result values.
  - Import and export of mutable globals (WebAssembly) Mutable global variables are importable and exportable.
  - Non-trapping float-to-int conversion (WebAssembly) Saturating floating-point to integer conversion operators return the maximum or minimum integer value on overflow instead of trapping.
  - Reference types (WebAssembly) The externref type can be both a value type and a table element type, while funcref can be a value type.
  - Sign extension operators (WebAssembly) Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.
  - Relaxed-width SIMD (WebAssembly) Relaxed SIMD (Single Instruction Multiple Data) introduces local non-determinism, where the results of the instructions may vary based on hardware support.
  - Tail call optimization (WebAssembly) Tail call optimization discards a caller frame and replaces the call with a jump instruction.
  - Threads and atomics (WebAssembly) Threads in WebAssembly run code in parallel, while atomic memory instructions can guarantee that no two threads can read or write to shared memory at the same time.
- Other
  - Compression streams The CompressionStream and DecompressionStream interfaces compress and decompress data using the gzip or deflate formats.
  - Web authentication The web authentication API allows you to create public key-based credentials and use them for authentication, such as when signing in. Also known as WebAuthn.
  - Web authentication easy public key access The getAuthenticatorData(), getPublicKey(), and getPublicKeyAlgorithm() methods of AuthenticatorAttestationResponse access credential data inside attestationObject without the need to parse it.
  - Web Cryptography The Web Cryptography API performs low-level cryptographic operations, such as encryption, decryption, and signature verification. Also known as the Web Crypto API.
  - Fixed-width SIMD (WebAssembly) 128-bit SIMD (Single Instruction Multiple Data) performs one instruction on multiple units of data, when running on hardware that supports such instructions. Also known as vector instructions.
  - WebOTP The OTPCredential API represents a one-time-password (OTP).
  - checkVisibility() The checkVisibility() method checks if an element is potentially visible, with optional parameters for the kinds of visibility to check. For example, it checks whether the element has the style display: none, but can also check for visibility: hidden.
  - getComputedStyle() The getComputedStyle() global method returns an CSSStyleDeclaration object that represents all CSS declarations applied to a given element.
  - requestIdleCallback() The requestIdleCallback() API queues a function that runs in idle browser time, either at the end of a frame or when the user is inactive. Also known as the background tasks API.
Integrate with the system
- Integrate with the OS
  - Contact picker The navigator.contacts API allows you to ask users to share limited details about entries in their contact list with your application.
  - Fullscreen API The fullscreen API makes a specific element fill the whole screen and hides most browser UI.
  - Notifications The Notification() constructor shows a message to the user, typically using the notification system of the host operating system.
  - Document picture-in-picture The document picture-in-picture API creates an always-on-top window from arbitrary HTML content.
  - Eyedropper The EyeDropper API opens an eyedropper tool, a color picker that allows users to select a color from their screen.
  - registerProtocolHandler The navigator.registerProtocolHandler() method declares a site's ability to handle an address scheme (also known as a protocol). For example, an email site can register to open mailto: URLs or a VoIP site to open tel: URLs.
  - File handlers The file_handlers web app manifest member registers an installed web app as a handler for files with specific file extensions or MIME types.
  - Protocol handlers The protocol_handlers web app manifest member registers an installed web app as a handler for a specific protocol. When a user follows a link with the specified protocol, the installed app opens the link.
  - Share targets The share_target web app manifest member registers an installed web app as a handler for shared content. When a user shares content by using the device share dialog, the installed app can be listed as an option for handling the shared content.
  - Application shortcuts The shortcuts web app manifest member registers common actions of an installed web app with the device. The device can present these actions to the user in contextually appropriate locations, such as jump lists on Windows or the app launcher on Android.
  - navigator.share() The navigator.share() method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets.
  - Virtual keyboard The navigator.virtualKeyboard API inspects and controls on-screen virtual keyboards. You can use it to programmatically hide or show a virtual keyboard or respond to the keyboard disappearing or appearing.
- Access hardware
  - Sensors
    
    Orientation Sensor The AbsoluteOrientationSensor and RelativeOrientationSensor APIs describe the physical orientation of a device in three-dimensional space, either in relation to the Earth's coordinate system or in relation to the device's own orientation, respectively.
    
    Gyroscope The Gyroscope API reads the angular velocity of a device in three dimensions.
    
    Geolocation The navigator.gelocation API requests the user's latitude, longitude, heading, and speed.
    
    Screen orientation The screen.orientation API gets information about the orientation of the viewport, such as landscape or portrait. With this API, you can adapt an application's layout or behavior in response to changes in orientation.
    
    Screen orientation lock The screen.orientation.lock() method prevents changes to the screen orientation, typically in fullscreen applications such as games. For example, while locked, rotating a phone to the side won't change the screen orientation from landscape to portrait.
    
    Screen wake lock The navigator.wakeLock.request("screen") API prevents the device's screen from dimming or being turned off.
    
    Device orientation events The DeviceMotion and DeviceOrientation events report the movement and orientation of the browser's device in physical space. Note that coordinates can differ noticeably between platforms and devices.
    
    Accelerometer The Accelerometer, LinearAccelerationSensor and GravitySensor APIs read the acceleration applied to a device in three dimensions, either including the effect of gravity, without its effect, or only its effect, respectively.
    
    Device posture The device posture API provides information about the physical posture of a device, such as whether a foldable device is folded or unfolded.
  - Chips and peripherals
    
    Web Bluetooth The Web Bluetooth API enables selecting and communicating with nearby Bluetooth devices.
    
    WebGPU The navigator.gpu API performs operations such as rendering and computation on dedicated graphics hardware (also known as a Graphics Processing Unit).
    
    WebUSB The WebUSB API exposes USB compatible devices to web pages.
    
    Web MIDI The Web MIDI API enables selecting MIDI input and output devices and sending and receiving MIDI messages.
    
    Web NFC The NDEFReader API reads and writes messages to near-field communication (NFC) tags.
    
    WebNN The WebNN API constructs and executes computational graphs of neural networks by making use of the various machine learning capabilities and hardware accelerators available on the device. Also known as Web Neural Network API.
    
    WebHID The WebHID API provides access to Human Interface Devices (HID) that are connected to the user's device.
    
    Battery status The navigator.getBattery() API obtains information about the device's battery, including charge level and status. Also known as the Battery API.
    
    CPU compute pressure The PressureObserver API monitors CPU load, allowing you to adjust workloads in response to available computing resources. Also known as the Compute Pressure API.
    
    Presentation API The Presentation API shows or controls content on another display, such as a network-connected TV or projector.
    
    Ink The navigator.ink API uses the system compositor to draw to a <canvas> element ahead of pointer events, reducing the delay between moving a stylus or cursor and a pen stroke appearing on screen.
    
    hardwareConcurrency The navigator.hardwareConcurrency read-only property returns the number of logical processors available to run threads on the user's computer.
    
    Vibration The navigator.vibrate() method makes a tactile alert, if the device is equipped with a haptic motor.
  - XR
    
    WebXR The navigator.xr API represents the browser's virtual reality or augmented reality system. You can use to request a WebXR session.
    
    Augmented reality The "immersive-ar" value for navigator.xr.requestSession() starts an augmented reality WebXR session that renders content aligned with the visible environment.
    
    Depth sensing An XRDepthInformation object represents a measurement of the distance from the user's device to the real-world geometry in the user's environment.
    
    DOM overlays for WebXR A DOM overlay shows 2D DOM content as an interactive, transparent layer on top of a WebXR application's WebGL content and camera image.
    
    Gamepad (WebXR) The gamepad attribute of an XRInputSource represents an XR input device, such as a motion controller, that reports data from physical inputs (such as buttons, touch pads, and triggers).
    
    Layers (WebXR) WebXR layer types, such as XRCylinderLayer, XRCylinderLayer, XREquirectLayer, XRProjectionLayer or XRQuadLayer, are managed by the system compositor, to reduce latency or resampling.
    
    Hand input An XRHand object, from the hand attribute of an XRInputSource object, represents a WebXR session's fully-articulated hand tracking model.
    
    Anchors (WebXR) An XRAnchor object keeps track of a pose that is fixed relative to the real world. Anchors build an illusion that the placed objects are really present in the user's environment.
    
    Lighting estimation The XRLightProbe and XRLightEstimate objects represent real-world environmental lighting conditions during a WebXR session.
    
    Raw camera access for WebXR The XRView.camera property provides direct access to pose-synchronized camera images within a WebXR session.
    
    Hit test The getHitTestResults() method of an XRFrame object helps place objects in an augmented reality session by finding where cast rays intersect with real-world geometry.
- Access files
  - File system access The showOpenFilePicker(), showDirectoryPicker(), and showSaveFilePicker() methods request access to files and directories on the user's device and returns a handle for reading and writing to them.
  - Origin private file system The navigator.storage.getDirectory() method returns a FileSystemDirectoryHandle that is restricted to a specific origin and invisible to the user's actual file system for faster file-based applications, such as SQLite databases.
- Access system clipboard
  - Async clipboard The navigator.clipboard API asynchronously reads and writes to the system clipboard.
  - Clipboard events The "copy", "cut", and "paste" events fire on elements when the user starts an action with the clipboard.
  - ClipboardItem.supports() The ClipboardItem.supports() static method checks if the browser supports writing data types such as "image/svg+xml" or other custom formats to the system clipboard.
  - Custom formats for clipboard items The web prefix for ClipboardItem data types (also known as MIME types) allows reading and writing ununsanitized custom data from the device clipboard.
  - Read unsanitized clipboard data The optional formats.unsanitized parameter of the navigator.clipboard.read() method reads unsanitized text/html data from the system clipboard.
  - SVG clipboard items The image/svg+xml data type (also known as the MIME type) for ClipboardItem objects represents SVG data written to or read from the clipboard.
- Install site as app
  - Web app manifest A web app manifest file provides metadata about the site. The browser can use the metadata to install the site as a standalone application on the user's device. The metadata usually includes the app's name, icon, description, and ways in which the app wishes to integrate with the device.
  - Window Controls Overlay The display_override:\ ["window-controls-overlay"] web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.
Create UI components
- Mark up components
  - <slot> The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.
  - <template> The <template> HTML element holds HTML fragments which you can clone and insert into the document using JavaScript.
  - Declarative shadow DOM The shadowrootmode attribute on <template> creates a shadow root without the use of JavaScript. It is a declarative alternative to the attachShadow() method.
- Customize components
  - Shadow DOM Shadow DOM allows you to attach encapsulated "shadow" DOM trees to elements. A shadow DOM tree is a separate component, isolated from the scripts and styles in other parts of the document. This is a part of Web Components.
  - Shadow parts The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
  - Autonomous custom elements Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.
  - Form-associated custom elements Custom elements may act like built-in form elements, via the the attachInternals() method of HTMLElement and the ElementInternals API.
  - Customized built-in elements Customized built-in elements are HTML elements that extend built-in elements using the is attribute, to add new behaviors that you define.
  - Imperative slot assignment The assign() method for <slot> elements assigns nodes to the slot, as an alternative to using the slot and name HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the slotAssignment set to "manual". Also known as manual slot assignment.
  - CloseWatcher The CloseWatcher API listens and responds to close requests on in-page components, such as modals, popovers, and sidebars.
- Style UI components
  - Host The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.
  - host-context The :host-context() CSS pseudo-class selects the containing element of the shadow tree in which it is used if that element or an ancestor matches the provided selector.
  - Constructed stylesheets The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets.
Communicate over the network
- Download resources
  - HTTP/1.1 HTTP/1.1 is a network protocol used by browsers and servers. It has been superseded by HTTP/2 and HTTP/3.
  - HTTP/2 The HTTP/2 protocol is a major revision of the HTTP network protocol, providing improved performance and efficiency by using a single TCP connection to send multiple streams of data at once.
  - HTTP/3 HTTP/3 is a major revision of the HTTP network protocol, providing improved performance and efficiency by using QUIC as the underlying transport protocol.
  - WebTransport The WebTransport API transmits data between a client and a server, by using the HTTP/3 protocol.
  - Fetch The fetch() method makes asynchronous HTTP requests.
  - Fetch metadata request headers The Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site, and Sec-Fetch-User HTTP headers provide extra information about the way a request was made, to help servers reject certain kinds of malicious requests.
  - Fetch priority The fetch() priority option and the fetchPriority HTML attribute give hints to the browser about which requests to do before other requests of the same type.
  - Abortable fetch If you construct a fetch request with an AbortSignal, you can cancel the request.
  - XMLHttpRequest The XMLHttpRequest API makes HTTP requests. It's the predecessor to fetch(). Also known as XHR.
  - Font loading The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.
  - @import The @import CSS at-rule loads styles from another stylesheet.
  - JSON import attributes Module import … with { type: "json" } statements load JSON data. Also known as JSON module scripts and formerly known as import assertions.
  - Background fetch Background fetch downloads data in the background even when the web page is closed.
  - Background sync The background synchronization API registers a service worker callback to run only when the device is no longer offline. You can use this to let users continue using your app while offline and synchronize with a server after reconnecting.
  - <link rel="modulepreload"> The rel="modulepreload" attribute for the <link> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.
  - Lazy-loading images and iframes The loading="lazy" attribute for <img> and <iframe> elements blocks loading the external resource until the user scrolls to that element's part of the page.
  - Referrer policy The Referrer-Policy HTTP header and referrerpolicy HTML attributes control whether requests have the Referer header and what information the header contains.
  - Import maps A <script type="importmap"> HTML element provides an import map as a JSON string. An import map controls how the browser should resolve module specifiers when importing JavaScript modules.
  - blocking="render" The blocking="render" attribute for <link>, <script>, and <style> elements blocks rendering until the external script or stylesheet has been loaded. For <link rel="expect">, rendering is blocked until a specific element is in the DOM.
  - pdfViewerEnabled The navigator.pdfViewerEnabled read-only property returns a Boolean for whether the browser navigates to and shows a PDF in the browser window or downloads the PDF.
- Open communication channels
  - WebSockets The WebSocket API opens a two-way communication channel between the user's browser and a server.
  - WebRTC The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.
  - WebRTC encoded transform The WebRTC encoded transform API allows you to modify audio and video streams in WebRTC connections. For example, it can be used for visual effects or custom codecs.
  - WebRTC SCTP information The sctp object on RTCPeerConnection represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that RTCDataChannel uses.
  - Server-sent events The EventSource API creates a connection to a server and listens to a stream of events sent by the server.
  - Push messages The Push API subscribes to and receives server-initiated messages. Subscribers receive pushed messages in the background, even after periods inactive or offline.
  - Streams The streams API creates, composes, and consumes continuously generated data.
- Handle connection state
  - Online status The navigator.onLine property returns a Boolean for whether the browser is connected to some network (though not necessarily the internet). The online and offline events fire when the connection state changes.
Handle page navigation
- hashchange The hashchange event fires when the URL fragment identifier (the part of the URL starting with #) of the current page has changed.
- History The window.history API manipulates the browser session history, from navigations to state management, in the tab or frame that the current page is loaded in.
- Navigation API The navigation API initiates, intercepts, or modifies browser navigation actions. Not to be confused with the navigator API.
- Beforeunload The beforeunload event is fired when the current window is about to be unloaded. Typically this is used to display a dialog to confirm if users really want to leave the page when there is unsaved data that would be lost.
Print webpages
- Control print
  - window.print() The window.print() method opens the browser's print dialog.
  - Print color adjust The print-color-adjust CSS property sets whether styles of printed pages should be adjusted to use less ink, in cases such as light text on a dark background.
  - Print events An alternative to @media print queries, the beforeprint and afterprint events allow you to change the page for printing and and restore the page after printing.
- Style printed pages
  - Page breaks The break-after, break-before, break-inside CSS properties (along with page-break- aliases) control where printed pages start and end. Also known as pagination or page breaking.
  - Page selectors The :first, :left, and :right pseudo-classes select pages based on their position in sequence after pagination. They're often used with the page CSS property, to choose a print layout defined by the @page rule.
  - Page setup The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.
  - page-orientation The page-orientation CSS property sets the rotation of a page after pagination. This allows pages with the same size declaration to display with different orientations.
Measure performance
- Performance The performance global object and the Performance API provide access to performance-related information for the current execution context.
- Profiler The Profiler API records data about the execution of a page, which you can send to a server for later analysis. Also known as self-profiling.
- Largest contentful paint (LCP) The largest-contentful-paint performance entry and the LargestContentfulPaint API measures the time it takes for the largest image or text to appear. Largest contentful paint (LCP) is a common metric for perceived loading times.
- Paint timing The paint performance entry and the PerformancePaintTiming API measures the duration of "paint" (also called "render") operations as a page loads. The API measures the time to First Paint (FP) and First Contentful Paint (FCP), common metrics for perceived loading times.
- Element timing The element performance entry and the PerformanceElementTiming API measures the time to render elements that have the elementtiming attribute.
- Event timing The event and first-input performance entries and the PerformanceEventTiming API measures the latency of user input events, such as mouse clicks or keypresses, and the latency of the first user input. First Input Delay (FID) is a common metric for perceived responsiveness.
- Navigation timing The navigation performance entry and the PerformanceNavigationTiming API measures navigation events, such as loading time or the number of redirects.
- Memory measurement The measureUserAgentSpecificMemory() method estimates the memory usage of a web application including all its iframes and workers.
- Resource size The decodedBodySize, encodedBodySize, and transferSize properties of the PerformanceResourceTiming API reports the size of resources loaded.
- Resource timing (initial support) PerformanceResourceTiming entries report when network events happen while loading a resource, such as when connections start and end. You can use this information to measure loading times.
- Server timing The serverTiming property of the PerformanceResourceTiming API contains server timing information about network requests.
- Back/forward cache blocking reasons The notRestoredReasons property of a PerformanceNavigationTiming object explains why the current document was blocked from using the back/forward cache (also known as the bfcache) on navigation.
- Long tasks The longtask performance event type and the PerformanceLongTaskTiming API provides information about tasks that occupy the UI thread for 50 milliseconds or more, a metric for input latency, delayed animations, and other sources of "jank."
- Layout instability The layout-shift performance entry and LayoutShift API measures the layout stability of web pages based on movements of the elements on the page.
- Page visibility state The visibility-state performance entry and the VisibilityStateEntry API measure the timing of page visibility state changes, such as when a tab is no longer visible or the user has switched to another app.
- Long animation frames The long-animation-frame performance event type and the PerformanceLongAnimationFrameTiming API provide information about rendering updates that take longer than 50 milliseconds. Also known as LoAFs.
Test
- WebDriver The WebDriver interface allows out-of-process programs to inspect and control browsers to, for example, run tests of web applications. Also known as WebDriver classic.
- WebDriver BiDi WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other.
- Virtual pressure sources The CreateVirtualPressureSource WebDriver command creates artificial sources of compute pressure for testing without the need real device sources of compute pressure.
- Virtual sensors The CreateVirtualSensor WebDriver command creates a virtual sensor for testing applications that use sensor APIs, without the need for real device sensors.
- Console The console API logs debugging messages to the browser development tools' console.