diff --git a/about/index.html b/about/index.html
index 7a2838dd84..5de19f9176 100644
--- a/about/index.html
+++ b/about/index.html
@@ -38,7 +38,7 @@ <h1>About this website</h1>
<p>The website also displays Baseline information for each web feature. To learn more about Baseline, see <a href="https://web-platform-dx.github.io/web-features/">What is Baseline?</a>.</p>
- <p>The website's content was last generated on 1/9/2025 using <a href="https://github.com/web-platform-dx/web-features/">web-features</a> <code>2.15.0-dev-20250108164213-46c29d0</code> and <a href="https://github.com/mdn/browser-compat-data/">browser-compat-data</a> <code>5.6.28</code>. The source code of the website is at <a href="https://github.com/web-platform-dx/web-features-explorer">web-features-explorer GitHub repo</a>.</p>
+ <p>The website's content was last generated on 1/10/2025 using <a href="https://github.com/web-platform-dx/web-features/">web-features</a> <code>2.16.0-dev-20250109133829-f1521f9</code> and <a href="https://github.com/mdn/browser-compat-data/">browser-compat-data</a> <code>5.6.28</code>. The source code of the website is at <a href="https://github.com/web-platform-dx/web-features-explorer">web-features-explorer GitHub repo</a>.</p>
<h2>Other pages</h2>
diff --git a/all/index.html b/all/index.html
index d6573d0646..32f1eff5d0 100644
--- a/all/index.html
+++ b/all/index.html
@@ -9662,6 +9662,117 @@ <h2><a href="/web-features-explorer/features/badging/">Badging</a></h2>
<span class="version">16.4</span>
<span class="date">Released on 2023-03-27</span>
+ </li>
+
+</ul>
+</div>
+ </li>
+
+ <li>
+ <div id="barcode" class="feature short baseline-false">
+ <div class="header">
+ <h2><a href="/web-features-explorer/features/barcode/">Barcode detector</a></h2>
+ <div class="availability">
+
+ Limited availability
+
+
+
+</div>
+ </div>
+ <div class="tags">
+
+ Tags:
+
+ <span class="tag">api</span>
+
+
+
+</div>
+
+ <p>The <code>BarcodeDetector</code> API recognizes various barcode formats in images.</p>
+
+ <p><strong><a href="/web-features-explorer/features/barcode/">Learn more</a></strong></p>
+
+ <ul class="compat">
+
+ <li class="browser browser-chrome">
+ <span class="name">Chrome</span>
+
+
+ <span class="version">❌</span>
+
+
+ </li>
+
+ <li class="browser browser-chrome_android supported">
+ <span class="name">Chrome Android</span>
+
+
+ <span class="version">83</span>
+ <span class="date">Released on 2020-05-19</span>
+
+ </li>
+
+ <li class="browser browser-edge">
+ <span class="name">Edge</span>
+
+
+ <span class="version">❌</span>
+
+
+ </li>
+
+ <li class="browser browser-firefox">
+ <span class="name">Firefox</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-firefox_android">
+ <span class="name">Firefox for Android</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari">
+ <span class="name">Safari</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari_ios">
+ <span class="name">Safari on iOS</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
</li>
</ul>
diff --git a/bcd-mapping/index.html b/bcd-mapping/index.html
index 4335c60bb5..e0e549221d 100644
--- a/bcd-mapping/index.html
+++ b/bcd-mapping/index.html
@@ -32,7 +32,7 @@
<main>
<h1>BCD key mapping</h1>
- <p>The web-features project has 13073 BCD keys mapped, out of 14994 total BCD keys (87% complete).</p>
+ <p>The web-features project has 13077 BCD keys mapped, out of 14994 total BCD keys (87% complete).</p>
<h2>Unmapped BCD keys</h2>
@@ -62,14 +62,6 @@ <h2>Unmapped BCD keys</h2>
<li>api.AudioTrack.sourceBuffer</li>
- <li>api.BarcodeDetector.BarcodeDetector</li>
-
- <li>api.BarcodeDetector</li>
-
- <li>api.BarcodeDetector.detect</li>
-
- <li>api.BarcodeDetector.getSupportedFormats_static</li>
-
<li>api.BaseAudioContext.createScriptProcessor</li>
<li>api.BeforeInstallPromptEvent.BeforeInstallPromptEvent</li>
diff --git a/features/barcode/index.html b/features/barcode/index.html
new file mode 100644
index 0000000000..b497f7c646
--- /dev/null
+++ b/features/barcode/index.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>Web platform features explorer - Barcode detector</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" type="text/css" href="/web-features-explorer/assets/styles.css">
+ <link rel="alternate" type="application/atom+xml" title="Web platform release notes" href="/web-features-explorer/release-notes.xml">
+ </head>
+ <body>
+
+ <header>
+ <a href="/web-features-explorer/">Web platform features explorer</a>
+
+ <nav>
+ <ul>
+ <li><a href="/web-features-explorer/release-notes/december-2024">Release notes</a></li>
+ <li><a href="/web-features-explorer/features">Explore all features</a></li>
+ <li><a href="/web-features-explorer/about">About</a></li>
+ </ul>
+ <search>
+ <form>
+ <input type="search" id="search" placeholder="Search">
+ </form>
+ </search>
+ </nav>
+
+ <output for="search"></output>
+ </header>
+
+
+<main class="feature-page">
+ <div id="barcode" class="feature baseline-false">
+ <div class="header">
+ <h1>Barcode detector</h1>
+ <div class="availability">
+
+ Limited availability
+
+
+
+</div>
+ </div>
+ <div class="tags">
+
+ Tags:
+
+ <span class="tag">api</span>
+
+
+
+</div>
+
+
+
+
+ <p data-pagefind-body="">
+ The <code>BarcodeDetector</code> API recognizes various barcode formats in images.
+ </p>
+
+
+ <h3>Learning resources on MDN</h3>
+ <ul data-pagefind-body="">
+
+ <li>
+ <a href="https://developer.mozilla.org/docs/Web/API/Barcode_Detection_API">
+
+ Barcode Detection API
+
+ </a>
+ </li>
+
+ <li>
+ <a href="https://developer.mozilla.org/docs/Web/API/BarcodeDetector/BarcodeDetector">
+
+ BarcodeDetector: BarcodeDetector() constructor
+
+ </a>
+ </li>
+
+ <li>
+ <a href="https://developer.mozilla.org/docs/Web/API/BarcodeDetector/detect">
+
+ BarcodeDetector: detect() method
+
+ </a>
+ </li>
+
+ <li>
+ <a href="https://developer.mozilla.org/docs/Web/API/BarcodeDetector/getSupportedFormats_static">
+
+ BarcodeDetector: getSupportedFormats() static method
+
+ </a>
+ </li>
+
+ </ul>
+
+
+ <h3>Browser support</h3>
+ <ul class="compat compat-full">
+
+ <li class="browser browser-chrome">
+ <span class="name">Chrome</span>
+
+
+ <span class="version">❌</span>
+
+
+
+ </li>
+
+ <li class="browser browser-chrome_android supported">
+ <span class="name">Chrome Android</span>
+
+
+ <span class="version">83</span>
+ <span class="date">Released on 2020-05-19</span>
+
+ </li>
+
+ <li class="browser browser-edge">
+ <span class="name">Edge</span>
+
+
+ <span class="version">❌</span>
+
+
+
+ </li>
+
+ <li class="browser browser-firefox">
+ <span class="name">Firefox</span>
+
+
+ <span class="version">❌</span>
+
+ <span class="bug">
+ See
+
+ <a href="https://bugzil.la/1553738">bugzil.la/1553738</a>
+
+ </span>
+
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-firefox_android">
+ <span class="name">Firefox for Android</span>
+
+
+ <span class="version">❌</span>
+
+ <span class="bug">
+ See
+
+ <a href="https://bugzil.la/1553738">bugzil.la/1553738</a>
+
+ </span>
+
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari">
+ <span class="name">Safari</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari_ios">
+ <span class="name">Safari on iOS</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+
+ </li>
+
+</ul>
+
+
+
+
+ <div class="specs" data-pagefind-body="">
+ <h3>Specifications</h3>
+ <ul>
+
+ <li>
+
+ <a href="https://wicg.github.io/shape-detection-api/#barcode-detection-api">Accelerated Shape Detection in Images (#barcode-detection-api)</a>,
+ from <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> (W3C).
+
+ </li>
+
+ </ul>
+ </div>
+
+
+ <p class="edit-link">
+ <a href="https://github.com/web-platform-dx/web-features/edit/main/features/barcode.yml">Edit this feature</a>
+ -
+ <a href="https://github.com/web-platform-dx/web-features/issues/new?title=[barcode] Issue title&body=Please describe the issue here...">Report an issue about this feature</a>
+ </p>
+</div>
+</main>
+
+ <script src="/web-features-explorer/assets/search.js" defer=""></script>
+ </body>
+</html>
diff --git a/features/gamepad/index.html b/features/gamepad/index.html
index e5245f2852..e88675f54a 100644
--- a/features/gamepad/index.html
+++ b/features/gamepad/index.html
@@ -74,9 +74,9 @@ <h3>Learning resources on MDN</h3>
<ul data-pagefind-body="">
<li>
- <a href="https://developer.mozilla.org/docs/Web/API/Gamepad_API">
+ <a href="https://developer.mozilla.org/docs/Web/API/Gamepad">
- Gamepad API
+ Gamepad
</a>
</li>
diff --git a/features/index.html b/features/index.html
index 997dd97764..05c85903cc 100644
--- a/features/index.html
+++ b/features/index.html
@@ -9662,6 +9662,117 @@ <h2><a href="/web-features-explorer/features/badging/">Badging</a></h2>
<span class="version">16.4</span>
<span class="date">Released on 2023-03-27</span>
+ </li>
+
+</ul>
+</div>
+ </li>
+
+ <li>
+ <div id="barcode" class="feature short baseline-false">
+ <div class="header">
+ <h2><a href="/web-features-explorer/features/barcode/">Barcode detector</a></h2>
+ <div class="availability">
+
+ Limited availability
+
+
+
+</div>
+ </div>
+ <div class="tags">
+
+ Tags:
+
+ <span class="tag">api</span>
+
+
+
+</div>
+
+ <p>The <code>BarcodeDetector</code> API recognizes various barcode formats in images.</p>
+
+ <p><strong><a href="/web-features-explorer/features/barcode/">Learn more</a></strong></p>
+
+ <ul class="compat">
+
+ <li class="browser browser-chrome">
+ <span class="name">Chrome</span>
+
+
+ <span class="version">❌</span>
+
+
+ </li>
+
+ <li class="browser browser-chrome_android supported">
+ <span class="name">Chrome Android</span>
+
+
+ <span class="version">83</span>
+ <span class="date">Released on 2020-05-19</span>
+
+ </li>
+
+ <li class="browser browser-edge">
+ <span class="name">Edge</span>
+
+
+ <span class="version">❌</span>
+
+
+ </li>
+
+ <li class="browser browser-firefox">
+ <span class="name">Firefox</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-firefox_android">
+ <span class="name">Firefox for Android</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari">
+ <span class="name">Safari</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari_ios">
+ <span class="name">Safari on iOS</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
</li>
</ul>
diff --git a/features/indexeddb/index.html b/features/indexeddb/index.html
index a3fb0c077d..7766e0d4c1 100644
--- a/features/indexeddb/index.html
+++ b/features/indexeddb/index.html
@@ -847,9 +847,9 @@ <h3>Learning resources on MDN</h3>
</li>
<li>
- <a href="https://developer.mozilla.org/docs/Web/API/Window/indexedDB">
+ <a href="https://developer.mozilla.org/docs/Web/API/WorkerGlobalScope/indexedDB">
- Window: indexedDB property
+ WorkerGlobalScope: indexedDB property
</a>
</li>
diff --git a/filter/index.html b/filter/index.html
index 280522b1b0..66be93008a 100644
--- a/filter/index.html
+++ b/filter/index.html
@@ -1385,7 +1385,7 @@ <h1>Client-side filtering features</h1>
<ul id="features"></ul>
<script>
- const allFeatures = [{"description_html":"The <code><a></code> 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.","id":"a","name":"<a>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><abbr></code> HTML element represents an abbreviation or acronym.","id":"abbr","name":"<abbr>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"If you construct a fetch request with an <code>AbortSignal</code>, you can cancel the request.","id":"abortable-fetch","name":"Abortable fetch","status":{"baseline":"high","baseline_high_date":"2021-09-25","baseline_low_date":"2019-03-25","support":{"chrome":"66","chrome_android":"66","edge":"16","firefox":"57","firefox_android":"57","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>AbortController</code> and <code>AbortSignal</code> APIs allow you to cancel an ongoing operation, such as a <code>fetch()</code> request.","id":"aborting","name":"AbortController and AbortSignal","status":{"baseline":"high","baseline_high_date":"2021-09-25","baseline_low_date":"2019-03-25","support":{"chrome":"66","chrome_android":"66","edge":"16","firefox":"57","firefox_android":"57","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>AbortSignal.any()</code> static method combines an iterable of abort signals into a single signal, with the abort reason taken from the first signal to abort.","id":"abortsignal-any","name":"AbortSignal.any()","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"116","chrome_android":"116","edge":"116","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>abs()</code> and <code>sign()</code> CSS functions compute the absolute value or the sign of the input.","id":"abs-sign","name":"abs() and sign()","status":{"baseline":false,"support":{"firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>position: absolute</code> 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.","id":"absolute-positioning","name":"Absolute positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>Accelerometer</code>, <code>LinearAccelerationSensor</code> and <code>GravitySensor</code> 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.","id":"accelerometer","name":"Accelerometer","status":{"baseline":false,"support":{"chrome":"91","chrome_android":"91","edge":"91"}}},{"description_html":"The <code>accent-color</code> CSS property sets a color for checkboxes, radio buttons, and other form controls.","id":"accent-color","name":"accent-color","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"93","edge":"93","firefox":"92","firefox_android":"92"}}},{"description_html":"The <code>accessKey</code> global HTML attribute gives a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character.","id":"accesskey","name":"Accesskey","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"17","chrome_android":"18","edge":"12","firefox":"5","firefox_android":"5","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>:active-view-transition</code> CSS pseudo-class matches the root element when a view transition is active. The <code>:active-view-transition-type()</code> CSS pseudo-class matches only when the active view transition was started with the specified type.","id":"active-view-transition","name":"Active view transition","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code><address></code> element represents contact information for a person or people, or for an organization.","id":"address","name":"<address>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>window.alert()</code>, <code>window.confirm()</code>, and <code>window.prompt()</code> methods open modal dialogs for notifying the user, asking for confirmation, or entering text.","id":"alerts","name":"Alerts","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>align-content</code> property vertically aligns content in block layouts, like it does in flex or grid layouts.","id":"align-content-block","name":"align-content in block layouts","status":{"baseline":"low","baseline_low_date":"2024-04-16","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"125","firefox_android":"125","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>alignment-baseline</code> CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent.","id":"alignment-baseline","name":"alignment-baseline","status":{"baseline":false,"support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>all</code> CSS property is a shorthand for all CSS properties, except for <code>direction</code> and <code>unicode-bidi</code>. It accepts only the keywords for explicit defaulting (such as <code>initial</code> and <code>inherit</code>), since they are the only values supported on all CSS properties.","id":"all","name":"all","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"27","firefox_android":"27","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>/</code> notation in <code>content</code> CSS property values adds alternative text to generated content. For example, the <code>content: url('upvote-icon.svg') / 'Upvote'</code> declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.","id":"alt-text-generated-content","name":"Alt text for generated content","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"128","firefox_android":"128","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>rel=\"alternate stylesheet\"</code> attribute for the <code><link></code> HTML element offers an alternative style option to users.","id":"alternative-style-sheets","name":"Alternative style sheets","status":{"baseline":false,"support":{"firefox":"3","firefox_android":"4"}}},{"description_html":"The <code>AmbientLightSensor</code> interface returns the current light level in lux of the ambient light level around the device.","id":"ambient-light","name":"Ambient light sensor","status":{"baseline":false,"support":{}}},{"description_html":"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.","id":"anchor-positioning","name":"Anchor positioning","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code>ANGLE_instanced_arrays</code> 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.","id":"angle-instanced-arrays","name":"ANGLE_instanced_arrays WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-12-07","baseline_low_date":"2016-06-07","support":{"chrome":"32","chrome_android":"30","edge":"12","firefox":"47","firefox_android":"47","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>animation-composition</code> CSS property chooses how to combine animations that affect the same property.","id":"animation-composition","name":"animation-composition","status":{"baseline":"low","baseline_low_date":"2023-07-04","support":{"chrome":"112","chrome_android":"112","edge":"112","firefox":"115","firefox_android":"115","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>animation</code> CSS property animates an element's style over time, using keyframes described in <code>@keyframes</code> rules.","id":"animations-css","name":"Animations (CSS)","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"43","chrome_android":"43","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>file_handlers</code> web app manifest member registers an installed web app as a handler for files with specific file extensions or MIME types.","id":"app-file-handlers","name":"File handlers","status":{"baseline":false,"support":{"chrome":"102","edge":"102"}}},{"description_html":"The <code>protocol_handlers</code> 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.","id":"app-protocol-handlers","name":"Protocol handlers","status":{"baseline":false,"support":{"chrome":"96","chrome_android":"96","edge":"96"}}},{"description_html":"The <code>share_target</code> 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.","id":"app-share-targets","name":"Share targets","status":{"baseline":false,"support":{"chrome":"89","chrome_android":"76","edge":"89"}}},{"description_html":"The <code>shortcuts</code> 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.","id":"app-shortcuts","name":"Application shortcuts","status":{"baseline":false,"support":{"chrome":"96","chrome_android":"84","edge":"96","safari":"17.4"}}},{"description_html":"The <code>appearance</code> CSS property controls the appearance of form controls. Using <code>appearance: none</code> disables any default native appearance and allows the elements to be styled with CSS.","id":"appearance","name":"appearance","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"80","firefox_android":"80","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"WAI-ARIA attributes have corresponding properties on <code>Element</code> and <code>ElementInternals</code> objects.","id":"aria-attribute-reflection","name":"ARIA attribute reflection","status":{"baseline":"low","baseline_low_date":"2023-10-24","support":{"chrome":"103","chrome_android":"103","edge":"103","firefox":"119","firefox_android":"119","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"Arrays are ordered lists of JavaScript values.","id":"array","name":"Array (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>at()</code> 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.","id":"array-at","name":"Array at()","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"92","chrome_android":"92","edge":"92","firefox":"90","firefox_android":"90","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>toReversed()</code>, <code>toSorted()</code>, <code>toSpliced()</code>, and <code>with()</code> methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such as <code>sort()</code> or <code>reverse()</code> that change arrays in place.","id":"array-by-copy","name":"Array by copy","status":{"baseline":"low","baseline_low_date":"2023-07-04","support":{"chrome":"110","chrome_android":"110","edge":"110","firefox":"115","firefox_android":"115","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>copyWithin()</code> method of arrays and typed arrays shifts or copies items of an array to another index of the array without changing its length.","id":"array-copywithin","name":"Array copyWithin()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"34","firefox_android":"34","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>fill()</code> method of arrays and typed arrays sets all or some items of an array to a given a value.","id":"array-fill","name":"Array fill()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"37","firefox_android":"37","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>find()</code> and <code>findIndex()</code> methods of arrays and typed arrays search an array for the first item that satisfies a test function.","id":"array-find","name":"Array find() and findIndex()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"37","firefox_android":"37","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>findLast()</code> and <code>findLastIndex()</code> methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function.","id":"array-findlast","name":"Array findLast() and findLastIndex()","status":{"baseline":"low","baseline_low_date":"2022-08-23","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"104","firefox_android":"104","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>flat()</code> and <code>flatMap()</code> methods for arrays creates a new array such that each nested array item is concatenated into it.","id":"array-flat","name":"Array flat() and flatMap()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"62","firefox_android":"62","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>Array.from()</code> and typed array <code>.from()</code> static methods copy items from an iterable or array-like object to make a new array.","id":"array-from","name":"Array.from()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"38","firefox_android":"38","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Array.fromAsync()</code> static method copies items from an async iterable object to make a new array.","id":"array-fromasync","name":"Array.fromAsync()","status":{"baseline":"low","baseline_low_date":"2024-01-25","support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"115","firefox_android":"115","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>Object.groupBy()</code> and <code>Map.groupBy()</code> static methods group values of arrays and iterables based on a function that returns a key for each value.","id":"array-group","name":"Array grouping","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"119","firefox_android":"119","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>includes()</code> method of arrays and typed arrays returns whether a given value appears in the array.","id":"array-includes","name":"Array includes()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"47","chrome_android":"47","edge":"14","firefox":"43","firefox_android":"43","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Array.isArray()</code> static method checks whether a value is an array.","id":"array-isarray","name":"Array.isArray()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"}}},{"description_html":"Array iteration methods","id":"array-iteration-methods","name":"Array iteration methods","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"Arrays are iterable with the <code>for … of</code> statement and enumerable with the methods <code>entries()</code>, <code>keys()</code>, and <code>values()</code>.","id":"array-iterators","name":"Array iterators","status":{"baseline":"high","baseline_high_date":"2020-11-09","baseline_low_date":"2018-05-09","support":{"chrome":"66","chrome_android":"66","edge":"14","firefox":"60","firefox_android":"60","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Array.of()</code> and typed array <code>.of()</code> static methods create new arrays from the values of any number of arguments.","id":"array-of","name":"Array.of()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"38","firefox_android":"38","safari":"10","safari_ios":"10"}}},{"description_html":"The array <code>splice()</code> method changes an array in-place. You can use it to delete items, overwrite items, or insert items, starting from an index.","id":"array-splice","name":"Array splice()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><article></code> element represents self-contained content, which is intended to be independently distributable or reusable, such as a comment, a blog post, or news article.","id":"article","name":"<article>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><aside></code> element represents a portion of a document whose content is only indirectly related to the document's main content.","id":"aside","name":"<aside>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>aspect-ratio</code> CSS property controls the width-to-height ratio of elements. For <code><img></code> and <code><video></code> elements, the <code>width</code> and <code>height</code> attributes used together with <code>height: auto</code> control the aspect ratio while the image/video is loading.","id":"aspect-ratio","name":"aspect-ratio","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"89","firefox_android":"89","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>async</code> and <code>await</code> keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.","id":"async-await","name":"Async functions","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"55","chrome_android":"55","edge":"15","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>navigator.clipboard</code> API asynchronously reads and writes to the system clipboard.","id":"async-clipboard","name":"Async clipboard","status":{"baseline":"low","baseline_low_date":"2024-06-11","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"127","firefox_android":"127","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"Async generator functions (<code>async function*</code>) create iterators that return multiple promises, one after another, on-demand.","id":"async-generators","name":"Async generators","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"55","firefox_android":"55","safari":"12","safari_ios":"12"}}},{"description_html":"Asynchronous iteration of a stream allows you to use <code>for await … of</code> loops to iterate through a stream's incoming data.","id":"async-iterable-streams","name":"Asynchronously iterable streams","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"110","firefox_android":"110"}}},{"description_html":"Asynchronous iterator objects, such as those returned by promises or generator functions, are iterable with the <code>for await .. of</code> loop.","id":"async-iterators","name":"Async iterators and the for await..of loop","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"57","firefox_android":"57","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>Atomics.waitAsync()</code> static method waits for a value in a shared memory location, providing a promise when the expected value is not yet in memory. The <code>waitAsync()</code> method is a non-blocking alternative to <code>Atomics.wait()</code>.","id":"atomics-wait-async","name":"Atomics.waitAsync","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"89","edge":"87","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>attr()</code> 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.","id":"attr","name":"attr()","status":{"baseline":false,"support":{}}},{"description_html":"The <code>attr()</code> CSS function, in <code>content</code> property declarations, sets a <code>::before</code> or <code>::after</code> pseudo-element's content to the value of the specified HTML attribute.","id":"attr-contents","name":"attr() (content only)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The Attribution Reporting API measures when an ad click or view leads to a conversion, such as a purchase on an advertiser site.","id":"attribution-reporting","name":"Attribution reporting","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code><audio></code> element plays sound such as audio effects or music, optionally with controls provided by the browser.","id":"audio","name":"<audio>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"3"}}},{"description_html":"The <code>navigator.audioSession</code> 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.","id":"audio-session","name":"Audio session","status":{"baseline":false,"support":{"safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>audioTracks</code> and <code>videoTracks</code> APIs for media elements switch audio and video tracks during playback.","id":"audio-video-tracks","name":"Audio and video tracks","status":{"baseline":false,"support":{"safari":"8","safari_ios":"8"}}},{"description_html":"The <code>AudioWorklet</code> API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.","id":"audio-worklet","name":"AudioWorklet","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"76","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>autocapitalize</code> global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.","id":"autocapitalize","name":"Autocapitalize","status":{"baseline":false,"support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"111","firefox_android":"111","safari_ios":"10.3"}}},{"description_html":"The <code>autocorrect</code> global HTML attribute controls whether to automatically correct spelling or punctuation errors for user input.","id":"autocorrect","name":"Autocorrect","status":{"baseline":false,"support":{}}},{"description_html":"The <code>:autofill</code> pseudo-class matches <code><input></code> elements that have been filled in automatically by the browser.","id":"autofill","name":":autofill","status":{"baseline":"low","baseline_low_date":"2023-02-09","support":{"chrome":"110","chrome_android":"110","edge":"110","firefox":"86","firefox_android":"86","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>autofocus</code> HTML attribute gives focus to an element on page load.","id":"autofocus","name":"Autofocus","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"Autonomous custom elements are HTML elements with a hyphenated tag name (like <code><example-element></code>) that have behaviors you define.","id":"autonomous-custom-elements","name":"Autonomous custom elements","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"63","firefox_android":"63","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"AVIF (AV1 Image File Format) is an image format based on the AV1 video format.","id":"avif","name":"AVIF","status":{"baseline":"low","baseline_low_date":"2024-01-26","support":{"chrome":"85","chrome_android":"85","edge":"121","firefox":"93","firefox_android":"93","safari":"16","safari_ios":"16"}}},{"description_html":"The <code><b></code> HTML element draws reader's attention to text, styling text as bold by default.","id":"b","name":"<b>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>::backdrop</code> CSS pseudo-element is a box underneath an element in the top layer, such as a <code><dialog></code>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.","id":"backdrop","name":"::backdrop","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"47","firefox_android":"47","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>backdrop-filter</code> CSS property applies graphical effects such as blurring or color shifting to the area behind an element.","id":"backdrop-filter","name":"backdrop-filter","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"103","firefox_android":"103","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>background</code> CSS property is a shorthand that sets several background properties at once.","id":"background","name":"background","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>background-attachment</code> CSS property sets whether an element's background image or gradient moves as the element scrolls.","id":"background-attachment","name":"background-attachment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"25","firefox_android":"25","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>background-blend-mode</code> CSS property blends an element's background image and background color using blend modes like <code>multiply</code>, <code>difference</code>, or <code>color</code>.","id":"background-blend-mode","name":"background-blend-mode","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"35","chrome_android":"59","edge":"79","firefox":"30","firefox_android":"54","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>background-clip</code> CSS property sets the extent of the background: the padding box, the content box, or the default border box.","id":"background-clip","name":"background-clip","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"22","firefox_android":"22","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>background-clip: border-area</code> CSS declaration draws the background underneath only the border of an element.","id":"background-clip-border-area","name":"background-clip: border-area","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>background-clip: text</code> CSS declaration draws the background underneath only the text in the element.","id":"background-clip-text","name":"background-clip: text","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>background-color</code> CSS property sets the fill color of an element, behind any content and background images or gradients.","id":"background-color","name":"background-color","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Background fetch downloads data in the background even when the web page is closed.","id":"background-fetch","name":"Background fetch","status":{"baseline":false,"support":{"chrome":"74","chrome_android":"74","edge":"79"}}},{"description_html":"The <code>background-image</code> 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.","id":"background-image","name":"background-image","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>background-origin</code> CSS property sets the background starting position relative to the border and padding of an element.","id":"background-origin","name":"background-origin","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"22","firefox_android":"22","safari":"5.1","safari_ios":"4"}}},{"description_html":"The <code>background-position</code> CSS property offsets the initial position of background images relative to the background origin.","id":"background-position","name":"background-position","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"25","chrome_android":"25","edge":"12","firefox":"13","firefox_android":"14","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>background-repeat</code> CSS property sets how a background image is tiled.","id":"background-repeat","name":"background-repeat","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"30","chrome_android":"30","edge":"12","firefox":"49","firefox_android":"49","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>background-size</code> CSS property scales or stretches a background based on the size of the element (with the <code>contain</code> and <code>cover</code> keywords), a length, or percentage.","id":"background-size","name":"background-size","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"9","firefox_android":"18","safari":"5.1","safari_ios":"4.2"}}},{"description_html":"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.","id":"background-sync","name":"Background sync","status":{"baseline":false,"support":{"chrome":"49","chrome_android":"49","edge":"79"}}},{"description_html":"The <code>navigator.setAppBadge()</code> method allows installed web applications to display an application badge, typically a dot or number shown alongside the application's icon on the device's home screen or application dock.","id":"badging","name":"Badging","status":{"baseline":false,"support":{"chrome":"81","edge":"81","safari":"17","safari_ios":"16.4"}}},{"description_html":"The <code>visible</code> property of the <code>window.locationbar</code>, <code>window.menubar</code>, <code>window.personalbar</code>, <code>window.scrollbars</code>, <code>window.statusbar</code>, and <code>window.toolbar</code> APIs historically represented the visibility of a browser user interface. For privacy reasons, it now represents whether the window is a pop-up.","id":"barprop","name":"BarProp","status":{"baseline":false,"support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"96","firefox_android":"96"}}},{"description_html":"The <code><base></code> element sets the base URL (the URL that relative URLs are relative to) for all relative URLs in the document.","id":"base","name":"<base>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>atob()</code> and <code>btoa()</code> global functions encode and decode strings to and from base 64, respectively.","id":"base64encodedecode","name":"Base64 encoding and decoding","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>baseline-shift</code> CSS property sets the position of an element relative to its dominant baseline.","id":"baseline-shift","name":"baseline-shift","status":{"baseline":false,"support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>baseline-source</code> 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 <code>display</code> property value.","id":"baseline-source","name":"baseline-source","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"115","firefox_android":"115"}}},{"description_html":"The <code>navigator.getBattery()</code> API obtains information about the device's battery, including charge level and status. Also known as the Battery API.","id":"battery","name":"Battery status","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","edge":"79"}}},{"description_html":"The <code><bdi></code> 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.","id":"bdi","name":"<bdi>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"16","chrome_android":"18","edge":"79","firefox":"10","firefox_android":"10","safari":"6","safari_ios":"6"}}},{"description_html":"The <code><bdo></code> element overrides the directionality of text, so that the text within is rendered in a different direction than the surrounding text.","id":"bdo","name":"<bdo>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"≤15","chrome_android":"18","edge":"12","firefox":"10","firefox_android":"10","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>navigator.sendBeacon()</code> method asynchronously sends an HTTP POST request with a limited amount of data, typically for app state, events, and analytics data. The one-way beacon is guaranteed to be initiated before the browser unloads the page, but the sender does not get to handle the response.","id":"beacons","name":"Beacons","status":{"baseline":"high","baseline_high_date":"2020-10-12","baseline_low_date":"2018-04-12","support":{"chrome":"39","chrome_android":"42","edge":"14","firefox":"31","firefox_android":"31","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>::before</code> and <code>::after</code> CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the <code>content</code> property to generate cosmetic content.","id":"before-after","name":"::before and ::after","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>beforeunload</code> 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.","id":"beforeunload","name":"Beforeunload","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>notRestoredReasons</code> property of a <code>PerformanceNavigationTiming</code> object explains why the current document was blocked from using the back/forward cache (also known as the bfcache) on navigation.","id":"bfcache-blocking-reasons","name":"Back/forward cache blocking reasons","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code>BigInt</code> JavaScript type represents integers of any size, including integers too large for the primitive <code>Number</code> type.","id":"bigint","name":"BigInt","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"67","chrome_android":"67","edge":"79","firefox":"68","firefox_android":"68","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>BigInt64Array</code> and <code>BigUint64Array</code> typed arrays represent 64-bit integers, signed and unsigned respectively.","id":"bigint64array","name":"BigInt64Array","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"67","chrome_android":"67","edge":"79","firefox":"68","firefox_android":"68","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>blocking=\"render\"</code> attribute for <code><link></code>, <code><script></code>, and <code><style></code> elements blocks rendering until the external script or stylesheet has been loaded. For <code><link rel=\"expect\"></code>, rendering is blocked until a specific element is in the DOM.","id":"blocking-render","name":"blocking=\"render\"","status":{"baseline":false,"support":{"chrome":"105","chrome_android":"105","edge":"105"}}},{"description_html":"The <code><blockquote></code> element represents an extended quotation, styling contents as an indented block by default.","id":"blockquote","name":"<blockquote>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><body></code> element represents the content of an HTML document.","id":"body","name":"<body>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>border-image</code> CSS property draws an image around an element.","id":"border-image","name":"Border images","status":{"baseline":"high","baseline_high_date":"2019-08-01","baseline_low_date":"2017-02-01","support":{"chrome":"56","chrome_android":"56","edge":"12","firefox":"50","firefox_android":"50","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>border-radius</code> CSS property rounds the corners of the border drawn around an element.","id":"border-radius","name":"border-radius","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>border</code> CSS property sets the color, style, and width of the line around an element.","id":"borders","name":"Borders","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"14","safari":"1","safari_ios":"3"}}},{"description_html":"The <code>box-decoration-break</code> 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.","id":"box-decoration-break","name":"box-decoration-break","status":{"baseline":false,"support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"32","firefox_android":"32"}}},{"description_html":"The <code>box-shadow</code> CSS property applies shadow effects around an element's frame. This can create drop shadow and inner shadow effects.","id":"box-shadow","name":"box-shadow","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>box-sizing</code> CSS property sets whether an element's width and height are calculated based on the <code>content-box</code>, which does not count the size of borders or padding, or <code>border-box</code>, which does count them.","id":"box-sizing","name":"box-sizing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"29","firefox_android":"29","safari":"5.1","safari_ios":"6"}}},{"description_html":"The <code><br></code> element produces line breaks in text.","id":"br","name":"<br>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>BroadcastChannel</code> API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs.","id":"broadcast-channel","name":"BroadcastChannel","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"38","firefox_android":"38","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"Brotli is a lossless data compression algorithm. When used as a content encoding, it often provides better compression than gzip.","id":"brotli","name":"Brotli compression","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"50","chrome_android":"51","edge":"15","firefox":"44","firefox_android":"44","safari":"11","safari_ios":"11"}}},{"description_html":"The <code><button></code> 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.","id":"button","name":"<button>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>calc()</code> CSS function computes mathematical expressions such a <code>calc(100%/3 - 1em)</code>.","id":"calc","name":"calc()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"28","edge":"12","firefox":"16","firefox_android":"16","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>e</code>, <code>pi</code>, <code>infinity</code>, and <code>NaN</code> keywords represent well-defined constants accepted in CSS math functions such as <code>calc()</code>.","id":"calc-constants","name":"calc() keywords","status":{"baseline":"low","baseline_low_date":"2023-06-06","support":{"chrome":"110","chrome_android":"110","edge":"110","firefox":"114","firefox_android":"114","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>calc-size()</code> CSS function computes mathematical expressions that include <code>height</code> and <code>width</code> keyword values, for example <code>calc-size(fit-content, size / 2)</code>. Not to be confused with the <code>calc()</code> CSS function, which cannot use keyword values.","id":"calc-size","name":"calc-size()","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"The <code><canvas></code> HTML element is a space to draw graphics in, using the 2D canvas API, WebGL, or WebGPU.","id":"canvas","name":"<canvas>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The <code>CanvasRenderingContext2D</code> API is the \"2d\" rendering context for the <code><canvas></code> element. It represents a flat, two-dimensional space for drawing graphics and animations.","id":"canvas-2d","name":"2D canvas","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The optional <code>alpha</code> parameter of a 2D canvas's <code>getContext()</code> method sets whether the canvas has an alpha transparency channel. If set to <code>false</code>, then this permits the browser to optimize compositing for an opaque canvas.","id":"canvas-2d-alpha","name":"2D canvas opacity","status":{"baseline":false,"support":{"chrome":"32","chrome_android":"32","edge":"≤79","firefox":"30","firefox_android":"30"}}},{"description_html":"The optional <code>colorSpace</code> parameter of a 2D canvas's <code>getContext()</code> method chooses the color representation, such as <code>\"srgb\"</code> or <code>\"display-p3\"</code>.","id":"canvas-2d-color-management","name":"Color management for 2D canvas","status":{"baseline":false,"support":{"chrome":"92","chrome_android":"92","edge":"92","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"The optional <code>desynchronized</code> parameter of a canvas's <code>getContext()</code> method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency.","id":"canvas-2d-desynchronized","name":"Desynchronized 2D canvas","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"75","edge":"79","safari":"15","safari_ios":"15"}}},{"description_html":"The optional <code>willReadFrequently</code> parameter of a canvas's <code>getContext()</code> method permits the browser to optimize for frequent <code>getImageData()</code> calls by avoiding hardware acceleration. Also known as multiple readback.","id":"canvas-2d-willreadfrequently","name":"willReadFrequently","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"28","firefox_android":"28","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>contextlost</code> event for <code><canvas></code> fires when the canvas backing storage is lost, while the <code>contextrestored</code> event fires when it is recreated.","id":"canvas-context-lost","name":"contextlost and contextrestored","status":{"baseline":false,"support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"125","firefox_android":"125"}}},{"description_html":"The <code>createConicGradient()</code> methods draw a conic gradient to a 2D canvas.","id":"canvas-createconicgradient","name":"Canvas createConicGradient()","status":{"baseline":"low","baseline_low_date":"2023-04-11","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"112","firefox_android":"112","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>reset()</code> method clears a canvas to its initial state.","id":"canvas-reset","name":"Canvas reset()","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"113","firefox_android":"113","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>roundRect()</code> methods draw a rounded rectangle to a 2D canvas.","id":"canvas-roundrect","name":"Canvas roundRect()","status":{"baseline":"low","baseline_low_date":"2023-04-11","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"112","firefox_android":"112","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The CSS <code>cap</code> unit corresponds to the height of Latin capital letters.","id":"cap","name":"cap unit","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"97","firefox_android":"97","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>captureStream()</code> method for <code><audio></code> and <code><video></code> elements returns a <code>MediaStream</code> for the media element's content. You can use this to record media or send it elsewhere, such as a canvas or WebRTC connection.","id":"capture-stream-audio-video","name":"captureStream() for <audio> and <video>","status":{"baseline":false,"support":{"chrome":"62","chrome_android":"62","edge":"79"}}},{"description_html":"The <code>captureStream()</code> method for <code><canvas></code> elements returns a <code>MediaStream</code> which includes a <code>CanvasCaptureMediaStreamTrack</code> 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.","id":"capture-stream-canvas","name":"captureStream() for <canvas>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"51","chrome_android":"51","edge":"79","firefox":"43","firefox_android":"43","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>caret-color</code> CSS property sets the color of the text insertion pointer in a text input.","id":"caret-color","name":"caret-color","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"57","chrome_android":"57","edge":"79","firefox":"53","firefox_android":"53","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>@layer</code> 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.","id":"cascade-layers","name":"Cascade layers","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>i</code> identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.","id":"case-insensitive-attributes","name":"Case-insensitive attribute selector","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"49","chrome_android":"49","edge":"79","firefox":"47","firefox_android":"47","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>s</code> identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.","id":"case-sensitive-attributes","name":"Case-sensitive attribute selector","status":{"baseline":false,"support":{"firefox":"66","firefox_android":"66"}}},{"description_html":"The <code>ch</code> CSS length unit is a font-relative length based on the width of the zero (0) character.","id":"ch","name":"ch unit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"27","chrome_android":"27","edge":"12","firefox":"1","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>change</code> event for <code><input></code>, <code><select></code>, and <code><textarea></code> elements fires when the user modifies the element's value. Unlike the <code>input</code> event, the change event does not necessarily fire on every alteration to an element's value.","id":"change-event","name":"Change event","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"Channel messaging communicates one-to-one between browsing contexts on the same origin, such as between <code><iframe></code> elements or two documents using a shared worker.","id":"channel-messaging","name":"Channel messaging","status":{"baseline":"high","baseline_high_date":"2018-03-22","baseline_low_date":"2015-09-22","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"41","firefox_android":"41","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>@charset</code> CSS at-rule specifies the character encoding of an external style sheet.","id":"charset","name":"@charset","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"4"}}},{"description_html":"The <code>checkVisibility()</code> 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 <code>display: none</code>, but can also check for <code>visibility: hidden</code>.","id":"check-visibility","name":"checkVisibility()","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"106","firefox_android":"106","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code><cite></code> element represents the title of a quoted, referenced, or mentioned creative work, such as a film or book.","id":"cite","name":"<cite>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"Classes are an object-oriented syntax for JavaScript prototypes.","id":"class-syntax","name":"Classes","status":{"baseline":"high","baseline_high_date":"2018-09-08","baseline_low_date":"2016-03-08","support":{"chrome":"42","chrome_android":"42","edge":"13","firefox":"45","firefox_android":"45","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>Clear-Site-Data</code> header deletes browsing data (such as cookies, storage, or cache) associated with the requesting website.","id":"clear-site-data","name":"Clearing site data","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"63","firefox_android":"63","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>clip-path</code> CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.","id":"clip-path","name":"clip-path","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"71","firefox_android":"79","safari":"13.1","safari_ios":"13"}}},{"description_html":"The <code>clip-path</code> property can be animated using CSS transitions and animations.","id":"clip-path-animatable","name":"Animatable clipping paths","status":{"baseline":false,"support":{"chrome":"55","chrome_android":"55","edge":"79","firefox":"49","firefox_android":"49"}}},{"description_html":"The <code>fill-box</code>, <code>stroke-box</code>, and <code>view-box</code> values for <code>clip-path</code> set an edge of the element's box to use as the clipping shape.","id":"clip-path-boxes","name":"Clip path boxes","status":{"baseline":"low","baseline_low_date":"2023-11-02","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"≤72","firefox_android":"≤79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>web </code> prefix for <code>ClipboardItem</code> data types (also known as MIME types) allows reading and writing ununsanitized custom data from the device clipboard.","id":"clipboard-custom-format","name":"Custom formats for clipboard items","status":{"baseline":false,"support":{"chrome":"104","chrome_android":"104","edge":"104"}}},{"description_html":"The <code>\"copy\"</code>, <code>\"cut\"</code>, and <code>\"paste\"</code> events fire on elements when the user starts an action with the clipboard.","id":"clipboard-events","name":"Clipboard events","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"22","firefox_android":"22","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>ClipboardItem.supports()</code> static method checks if the browser supports writing data types such as \"image/svg+xml\" or other custom formats to the system clipboard.","id":"clipboard-supports","name":"ClipboardItem.supports()","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"127","firefox_android":"127"}}},{"description_html":"The <code>image/svg+xml</code> data type (also known as the MIME type) for <code>ClipboardItem</code> objects represents SVG data written to or read from the clipboard.","id":"clipboard-svg","name":"SVG clipboard items","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124"}}},{"description_html":"The optional <code>formats.unsanitized</code> parameter of the <code>navigator.clipboard.read()</code> method reads unsanitized <code>text/html</code> data from the system clipboard.","id":"clipboard-unsanitized-formats","name":"Read unsanitized clipboard data","status":{"baseline":false,"support":{"chrome":"122","chrome_android":"122","edge":"122"}}},{"description_html":"The <code>CloseWatcher</code> API listens and responds to close requests on in-page components, such as modals, popovers, and sidebars.","id":"closewatcher","name":"CloseWatcher","status":{"baseline":false,"support":{"chrome":"126","chrome_android":"126","edge":"126"}}},{"description_html":"The <code><code></code> element displays its contents as a fragment of computer code.","id":"code","name":"<code>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>color</code> CSS property sets the primary foreground color of an element, which is used for text, the default border color, and text decorations.","id":"color","name":"Color","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>color()</code> function picks a color from a given color space. Wide gamut color spaces like <code>display-p3</code> allow showing more vibrant and saturated colors than the standard <code>srgb</code> color space.","id":"color-function","name":"color()","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>color-gamut</code> media query sets styles based on the colors a device can display.","id":"color-gamut","name":"color-gamut media query","status":{"baseline":"low","baseline_low_date":"2023-02-14","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"110","firefox_android":"110","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>color-mix()</code> 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.","id":"color-mix","name":"color-mix()","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"16.2","safari_ios":"16.2"}}},{"description_html":"The <code>color-scheme</code> CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.","id":"color-scheme","name":"color-scheme","status":{"baseline":"high","baseline_high_date":"2024-08-03","baseline_low_date":"2022-02-03","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"96","firefox_android":"96","safari":"13","safari_ios":"13"}}},{"description_html":"COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.","id":"colrv0","name":"COLRv0","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"31","firefox_android":"31","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"COLRv1 is a font format that supports multi-color glyphs. COLRv1 extends COLRv0 to support gradients, transforms, and blending modes.","id":"colrv1","name":"COLRv1","status":{"baseline":false,"support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"107","firefox_android":"107"}}},{"description_html":"In columnar layouts (created by the <code>columns</code> or <code>column-count</code> CSS properties), the <code>break-after</code>, <code>break-before</code>, <code>break-inside</code> properties control where columns start or end.","id":"column-breaks","name":"Column breaks","status":{"baseline":false,"support":{"chrome":"102","chrome_android":"102","edge":"102"}}},{"description_html":"The <code>column-fill</code> CSS property sets the distribution of content across columns in a multi-column layout.","id":"column-fill","name":"column-fill","status":{"baseline":"high","baseline_high_date":"2019-09-07","baseline_low_date":"2017-03-07","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"52","firefox_android":"52","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>column-span</code> CSS property controls whether a child element extends across all columns of a multi-column parent.","id":"column-span","name":"column-span","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"71","firefox_android":"79","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>window.getSelection().getComposedRanges()</code> method returns ranges that represent the current user selection, even if the selection spans across shadow tree boundaries.","id":"composed-ranges","name":"Selection composed ranges","status":{"baseline":false,"support":{"safari":"17","safari_ios":"17"}}},{"description_html":"The <code>compositionstart</code>, <code>compositionupdate</code>, and <code>compositionend</code> events fire when an input method editor adds characters that might not be commonly available on keyboards. Examples of these characters are emoji, logograms in Asian languages, or input from speech recognition processors.","id":"composition-events","name":"Composition events","status":{"baseline":"high","baseline_high_date":"2019-10-19","baseline_low_date":"2017-04-19","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"53","firefox_android":"53","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>CompressionStream</code> and <code>DecompressionStream</code> interfaces compress and decompress data using the gzip or deflate formats.","id":"compression-streams","name":"Compression streams","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"113","firefox_android":"113","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>PressureObserver</code> API monitors CPU load, allowing you to adjust workloads in response to available computing resources. Also known as the Compute Pressure API.","id":"compute-pressure","name":"CPU compute pressure","status":{"baseline":false,"support":{"chrome":"125","edge":"125"}}},{"description_html":"The <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> CSS functions create backgrounds that progress between two or more colors around a center point.","id":"conic-gradients","name":"Conic gradients","status":{"baseline":"high","baseline_high_date":"2023-05-17","baseline_low_date":"2020-11-17","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"83","firefox_android":"83","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>console</code> API logs debugging messages to the browser development tools' console.","id":"console","name":"Console","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"Methods that validate form controls before submission, such as <code>checkValidity()</code>, <code>reportValidity()</code> and <code>setCustomValidity()</code>.","id":"constraint-validation","name":"Constraint validation API","status":{"baseline":"high","baseline_high_date":"2021-06-11","baseline_low_date":"2018-12-11","support":{"chrome":"40","chrome_android":"40","edge":"18","firefox":"51","firefox_android":"64","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>CSSStyleSheet</code> constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using <code>adoptedStyleSheets</code>.","id":"constructed-stylesheets","name":"Constructed stylesheets","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"101","firefox_android":"101","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.contacts</code> API allows you to ask users to share limited details about entries in their contact list with your application.","id":"contact-picker","name":"Contact picker","status":{"baseline":false,"support":{"chrome_android":"80"}}},{"description_html":"The <code>contain</code> CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The <code>none</code> keyword value disables containment, <code>strict</code> is equivalent to <code>contain: size layout style paint</code>, and <code>content</code> is equivalent to <code>contain: layout style paint</code>.","id":"contain","name":"contain","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: inline-size</code> 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.","id":"contain-inline-size","name":"Inline-size containment","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"101","firefox_android":"101","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>contain-intrinsic-size</code> 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.","id":"contain-intrinsic-size","name":"contain-intrinsic-size","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"107","firefox_android":"107","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>contain: layout</code> 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.","id":"contain-layout","name":"Layout containment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: paint</code> 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.","id":"contain-paint","name":"Paint containment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: size</code> CSS declaration sets an element's dimensions exclusively by its <code>height</code> and <code>width</code> properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.","id":"contain-size","name":"Size containment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: style</code> CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (<code>counter-increment</code> and <code>counter-set</code>) and quotation styles (<code>content</code> property quote values) beyond the element's descendants.","id":"contain-style","name":"Style containment","status":{"baseline":"low","baseline_low_date":"2022-07-26","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"103","firefox_android":"103","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"Container size queries with the <code>@container</code> at-rule apply styles to an element based on the dimensions of its container.","id":"container-queries","name":"Container queries","status":{"baseline":"low","baseline_low_date":"2023-02-14","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"110","firefox_android":"110","safari":"16","safari_ios":"16"}}},{"description_html":"Container style queries with the <code>@container</code> at-rule apply styles to an element based on the values of custom properties of its container.","id":"container-style-queries","name":"Container style queries","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>content</code> CSS property sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the <code>::before</code> and <code>::after</code> pseudo-elements to generate cosmetic content.","id":"content","name":"Content","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The Content Index API allows developers to register their offline enabled content with the browser.","id":"content-index","name":"Content Index","status":{"baseline":false,"support":{"chrome_android":"84"}}},{"description_html":"The <code>content-visibility</code> CSS property delays rendering an element, including layout and painting, until it is needed.","id":"content-visibility","name":"content-visibility","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"108","chrome_android":"108","edge":"108","firefox":"130","firefox_android":"130","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>contenteditable</code> global HTML attribute allows the user to edit the content of an element, such as inserting or deleting text.","id":"contenteditable","name":"Contenteditable","status":{"baseline":"high","baseline_high_date":"2024-06-07","baseline_low_date":"2021-12-07","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"95","firefox_android":"79","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>contenteditable=\"plaintext-only\"</code> global HTML attribute allows the user to edit the content of an element, but prevents rich-text formatting.","id":"contenteditable-plaintextonly","name":"contenteditable=\"plaintext-only\"","status":{"baseline":false,"support":{"chrome":"51","chrome_android":"51","edge":"≤79","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>context-fill</code> and <code>context-stroke</code> CSS values are used with <code>fill</code> and <code>stroke</code> in SVG <code><marker></code> or <code><use></code> elements to match a color from where they appear.","id":"context-fill-stroke","name":"context-fill and context-stroke","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"111","firefox_android":"111"}}},{"description_html":"The <code>controlslist</code> attribute for <code><audio></code> or <code><video></code> hides parts of the browser's built-in controls. For example, <code>controlslist=\"nofullscreen\"</code> removes the button to play the video in fullscreen.","id":"controls-list","name":"controlslist","status":{"baseline":false,"support":{"chrome":"58","chrome_android":"58","edge":"79"}}},{"description_html":"The <code>navigator.cookieEnabled</code> property returns a Boolean value for whether the browser accepts or ignores attempts to write cookie data.","id":"cookie-enabled","name":"cookieEnabled","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>CookieStore</code> interface is an asynchronous and promise-based API for managing cookies. It does not rely on document and so is available to service workers as well.","id":"cookie-store","name":"Cookie store","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"87","edge":"87"}}},{"description_html":"The <code>Set-Cookie</code> HTTP header stores limited amounts of data that persist across request and response, creating shared state between the browser and server.","id":"cookies","name":"Cookies","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Cross-Origin Resource Sharing is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. Also known as CORS.","id":"cors","name":"CORS","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>reversed()</code> CSS function for <code>counter-reset</code> creates a counter that counts down.","id":"counter-reset-reversed","name":"Reversed counter-reset","status":{"baseline":false,"support":{"firefox":"96","firefox_android":"96"}}},{"description_html":"The <code>counter-set</code> CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.","id":"counter-set","name":"counter-set","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"68","firefox_android":"68","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>@counter-style</code> 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.","id":"counter-style","name":"@counter-style","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"91","chrome_android":"91","edge":"91","firefox":"33","firefox_android":"33","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>counter-reset</code> and <code>counter-increment</code> CSS properties and the <code>counter()</code> and <code>counters()</code> functions automatically number headings or ordered list items.","id":"counters","name":"Counters (CSS)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"25","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>createImageBitmap()</code> global method creates an <code>ImageBitmap</code> object from a source such as an image, SVG, blob, or canvas. An <code>ImageBitmap</code> object represents pixel data that can be drawn to a canvas with lower latency than other types, such as <code>ImageData</code>.","id":"createimagebitmap","name":"createImageBitmap","status":{"baseline":false,"support":{"chrome":"66","chrome_android":"66","edge":"79","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>navigator.credentials</code> API provides generic storage for authentication credentials. Other credential APIs represent specific kinds of credentials, such as password or public key credentials, that the credential management API stores.","id":"credential-management","name":"Credential management","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"60","firefox_android":"60","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>image-rendering: crisp-edges</code> CSS declaration scales images to preserve lines without blurring.","id":"crisp-edges","name":"crisp-edges","status":{"baseline":false,"support":{"firefox":"65","firefox_android":"65","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>@view-transition</code> 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.","id":"cross-document-view-transitions","name":"Cross-document view transitions","status":{"baseline":false,"support":{"chrome":"126","chrome_android":"126","edge":"126","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>cross-fade()</code> CSS function generates an image by mixing two images.","id":"cross-fade","name":"cross-fade()","status":{"baseline":false,"support":{"safari":"10","safari_ios":"9.3"}}},{"description_html":"Content Security Policy (CSP) helps to mitigate certain security threats, including cross-site scripting (XSS) and clickjacking attacks. It consists of a set of directives from a website to a browser, which instruct the browser to restrict the things that the site is allowed to do.","id":"csp","name":"Content Security Policy (CSP)","status":{"baseline":"high","baseline_high_date":"2019-02-02","baseline_low_date":"2016-08-02","support":{"chrome":"25","chrome_android":"25","edge":"14","firefox":"23","firefox_android":"23","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>CSS.escape()</code> static method escapes a string so that it can be used in a valid CSS selector.","id":"css-escape","name":"CSS.escape()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"31","firefox_android":"31","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"Module `import … with { type: \"css\" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts and formerly known as import assertions.","id":"css-modules","name":"CSS import attributes","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.","id":"css-object-model","name":"CSS object model","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"28","chrome_android":"28","edge":"12","firefox":"22","firefox_android":"22","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>CSS.supports()</code> static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an <code>@supports</code> at-rule condition string.","id":"css-supports","name":"CSS.supports()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"55","firefox_android":"55","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>CSSStyleValue</code> and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.","id":"css-typed-om","name":"CSS typed object model","status":{"baseline":false,"support":{"chrome":"66","chrome_android":"66","edge":"79","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>cubic-bezier()</code> CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, and <code>ease-in-out</code> keyword values are presets for common Bézier curves.","id":"cubic-bezier-easing","name":"cubic-bezier() easing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"16","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>currentColor</code> CSS value allows you to reuse an element's computed text color for other properties.","id":"currentcolor","name":"currentColor","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>cursor</code> CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.","id":"cursor","name":"Cursor styles","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79","firefox":"27","firefox_android":"95","safari":"11"}}},{"description_html":"The <code>text-overflow</code> CSS property with a string value sets the string representing clipped text.","id":"custom-ellipses","name":"Custom ellipses","status":{"baseline":false,"support":{"firefox":"9","firefox_android":"9"}}},{"description_html":"Custom properties are CSS properties prefixed with <code>--</code> that set values you can reuse with the <code>var()</code> function. For example, you can set a <code>--key-color</code> property to reuse as <code>border-color: var(--key-color)</code>. Also known as CSS variables.","id":"custom-properties","name":"Custom properties","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"49","chrome_android":"49","edge":"15","firefox":"31","firefox_android":"31","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"Customized built-in elements are HTML elements that extend built-in elements using the <code>is</code> attribute, to add new behaviors that you define.","id":"customized-built-in-elements","name":"Customized built-in elements","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67","edge":"79","firefox":"63","firefox_android":"63"}}},{"description_html":"The <code><data></code> element links a given piece of content with a machine-readable translation.","id":"data","name":"<data>","status":{"baseline":"high","baseline_high_date":"2020-04-24","baseline_low_date":"2017-10-24","support":{"chrome":"62","chrome_android":"62","edge":"14","firefox":"22","firefox_android":"22","safari":"10","safari_ios":"10"}}},{"description_html":"Data URLs are URLs that start with the <code>data:</code> scheme and which directly contain data rather than point to remote resources.","id":"data-urls","name":"Data URLs","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"≤4","chrome_android":"18","edge":"12","firefox":"≤2","firefox_android":"4","safari":"≤3.1","safari_ios":"≤2"}}},{"description_html":"The <code><datalist></code> element sets recommended values for an <code><input></code> element. Browsers may show a dropdown menu of all values or match values as the user types.","id":"datalist","name":"<datalist>","status":{"baseline":false,"support":{"chrome":"69","chrome_android":"69","edge":"12","firefox":"110","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>dataset</code> API attaches and accesses custom data on elements, using either the <code>dataset</code> property of <code>HTMLElement</code> or attributes prefixed with <code>data-</code>.","id":"dataset","name":"Dataset","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>Date</code> object represents a single moment in time.","id":"date","name":"Date","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>shadowrootmode</code> attribute on <code><template></code> creates a shadow root without the use of JavaScript. It is a declarative alternative to the <code>attachShadow()</code> method.","id":"declarative-shadow-dom","name":"Declarative shadow DOM","status":{"baseline":"low","baseline_low_date":"2024-02-20","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"123","firefox_android":"123","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>:default</code> CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the <code>checked</code> attribute.","id":"default","name":":default","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"10","chrome_android":"18","edge":"79","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"}}},{"description_html":"The <code><del></code> element element represents a range of text that has been deleted from a document, styling text as strikethrough by default.","id":"del","name":"<del>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><dl></code>, <code><dt></code>, and <code><dd></code> HTML elements represent a list of terms and their associated descriptions. Use a description list to create glossaries or similar list of key-value pairs.","id":"description-list","name":"Description list","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The destructuring assignment syntax is a JavaScript expression that unpacks values from arrays, or properties from objects, into distinct variables.","id":"destructuring","name":"Destructuring","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"55","firefox_android":"55","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code><details></code> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <code><summary></code> element is visible.","id":"details","name":"<details>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"12","chrome_android":"18","edge":"79","firefox":"49","firefox_android":"49","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>::details-content</code> pseudo-element selects the expandable content of a <code><details></code> element, excluding the <code><summary></code>.","id":"details-content","name":"::details-content","status":{"baseline":false,"support":{"chrome":"131","chrome_android":"131","edge":"131"}}},{"description_html":"Multiple <code><details></code> elements which use the same <code>name</code> attribute are mutually exclusive. When one member of the group is opened, all other members are closed.","id":"details-name","name":"Mutually exclusive <details> elements","status":{"baseline":"low","baseline_low_date":"2024-09-03","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"130","firefox_android":"130","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>navigator.deviceMemory</code> property returns the approximate amount of device memory, in gigabytes.","id":"device-memory","name":"Device memory","status":{"baseline":false,"support":{"chrome":"65","chrome_android":"65","edge":"79"}}},{"description_html":"The <code>DeviceMotion</code> and <code>DeviceOrientation</code> events report the movement and orientation of the browser's device in physical space. Note that coordinates can differ noticeably between platforms and devices.","id":"device-orientation-events","name":"Device orientation events","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"6","firefox_android":"6","safari":"17","safari_ios":"4.2"}}},{"description_html":"The device posture API provides information about the physical posture of a device, such as whether a foldable device is folded or unfolded.","id":"device-posture","name":"Device posture","status":{"baseline":false,"support":{}}},{"description_html":"The <code>window.devicePixelRatio</code> read-only property returns the ratio of the size of one CSS pixel to the vertical size of one physical pixel on the current display device.","id":"devicepixelratio","name":"devicePixelRatio","status":{"baseline":false,"support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"18","firefox_android":"18"}}},{"description_html":"The <code><dfn></code> element marks a term to be defined, styling text as italic by default.","id":"dfn","name":"<dfn>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"15","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"The <code><dialog></code> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.","id":"dialog","name":"<dialog>","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"98","firefox_android":"98","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>window.getDigitalGoodsService</code> API connects to stores or billing services for in-app products and subscriptions.","id":"digital-goods","name":"Digital goods","status":{"baseline":false,"support":{"chrome_android":"101"}}},{"description_html":"The <code>:dir()</code> CSS functional pseudo-class matches elements by text direction, either right to left (<code>rtl</code>) or left to right (<code>ltr</code>).","id":"dir-pseudo","name":":dir()","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"49","firefox_android":"49","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>dirname</code> attribute of <code><textarea></code> and <code><input></code> HTML elements includes the field's writing direction as form data on submission.","id":"dirname","name":"dirname","status":{"baseline":"low","baseline_low_date":"2023-08-01","support":{"chrome":"17","chrome_android":"18","edge":"79","firefox":"116","firefox_android":"116","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>display</code> CSS property sets the display behavior of an element's box within its layout and sets the layout behavior for its child elements.","id":"display","name":"Display","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"You can animate elements between <code>display: none</code> and any other <code>display</code> value or animate between <code>content-visibility: hidden</code> and any other <code>content-visibility</code> value. This also applies to transitions.","id":"display-animation","name":"display animation","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>display: contents</code> CSS declaration sets an element to display only its contents, not itself.","id":"display-contents","name":"display: contents","status":{"baseline":false,"support":{}}},{"description_html":"The <code>display: flow-root</code> CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.","id":"display-flow-root","name":"display: flow-root","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"53","firefox_android":"53","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>display: list-item</code> CSS declaration renders an element with the box layout of a <code><li></code> HTML element.","id":"display-list-item","name":"display: list-item","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>display-mode</code> CSS media query sets styles based on whether the web page is in <code>fullscreen</code>, <code>standalone</code>, <code>minimal-ui,</code> <code>browser</code>, or <code>picture-in-picture</code> mode.","id":"display-mode","name":"display-mode media query","status":{"baseline":false,"support":{"chrome":"123","edge":"123"}}},{"description_html":"The <code>display: ruby</code> CSS declaration renders an element with the box layout of a <code><ruby></code> HTML element. Child elements may use equivalents to <code><ruby></code> internal elements such as <code>display: ruby-base</code> for <code><rb></code>.","id":"display-ruby","name":"display: ruby","status":{"baseline":false,"support":{"firefox":"38","firefox_android":"38"}}},{"description_html":"The <code>display: table</code> CSS declaration renders an element with the box layout of a <code><table></code> HTML element. Child elements may use equivalents to <code><table></code> internal elements such as <code>display: table-row</code> for <code><tr></code>.","id":"display-table","name":"display: table","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","firefox":"3","firefox_android":"4","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code><div></code> HTML element is the generic container for content.","id":"div","name":"<div>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>document.caretPositionFromPoint()</code> method finds an insertion point, represented by a DOM node and an offset within that node, for given coordinates in the viewport.","id":"document-caretpositionfrompoint","name":"document.caretPositionFromPoint()","status":{"baseline":false,"support":{"chrome":"128","chrome_android":"128","edge":"128","firefox":"23","firefox_android":"23"}}},{"description_html":"The document picture-in-picture API creates an always-on-top window from arbitrary HTML content.","id":"document-picture-in-picture","name":"Document picture-in-picture","status":{"baseline":false,"support":{"chrome":"130","edge":"130"}}},{"description_html":"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.","id":"dom","name":"DOM","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>DOMMatrix</code>, <code>DOMPoint</code>, <code>DOMQuad</code> and <code>DOMRect</code> interfaces offer a way to represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <code><canvas></code>, and SVG.","id":"dom-geometry","name":"DOM Geometry","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"33","firefox_android":"33","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>dominant-baseline</code> CSS property sets the specific baseline used to align an elements's text and inline-level contents.","id":"dominant-baseline","name":"dominant-baseline","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","firefox":"1","firefox_android":"4","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>DOMParser</code> API parses XML or HTML source code from a string into a DOM Document.","id":"domparser","name":"DOMParser","status":{"baseline":"high","baseline_high_date":"2018-09-21","baseline_low_date":"2016-03-21","support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"12","firefox_android":"14","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>download</code> attribute for <code><a></code> elements loads the target URL as a file to be saved, instead of navigating to it. An optional attribute value sets a default file name.","id":"download","name":"download","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"14","chrome_android":"18","edge":"18","firefox":"20","firefox_android":"20","safari":"10.1","safari_ios":"13"}}},{"description_html":"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.","id":"draganddrop","name":"Drag and Drop","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>dynamic-range</code> CSS media query sets styles based on whether a device can display at least <code>standard</code> range colors or at least <code>high</code> range colors. Non-visual devices will match neither.","id":"dynamic-range","name":"dynamic-range media query","status":{"baseline":"high","baseline_high_date":"2024-11-03","baseline_low_date":"2022-05-03","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"100","firefox_android":"100","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>EditContext</code> 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.","id":"edit-context","name":"EditContext","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121"}}},{"description_html":"The <code>element()</code> CSS function creates a live-updating image from an HTML element that can be used as an image or background image.","id":"element","name":"element()","status":{"baseline":false,"support":{}}},{"description_html":"The <code>document.elementFromPoint()</code> and <code>document.elementsFromPoint()</code> methods find the top-most element at a given point in the viewport, or all elements at a given point in the viewport, respectively.","id":"element-from-point","name":"document.elementFromPoint() and document.elementsFromPoint()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"43","chrome_android":"43","edge":"79","firefox":"46","firefox_android":"46","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>element</code> performance entry and the <code>PerformanceElementTiming</code> API measures the time to render elements that have the <code>elementtiming</code> attribute.","id":"element-timing","name":"Element timing","status":{"baseline":false,"support":{"chrome":"77","chrome_android":"77","edge":"79"}}},{"description_html":"The <code><em></code> HTML element emphasizes or stresses the content, styling text as italic by default.","id":"em","name":"<em>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>em</code> CSS length unit is a font-relative length equal to the specified font size. In an element with a 2 inch font, <code>1em</code> equals 2 inches.","id":"em-unit","name":"em unit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><embed></code> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.","id":"embed","name":"<embed>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"1.5","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>:empty</code> CSS pseudo-class matches elements without child elements.","id":"empty","name":":empty","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>enterkeyhint</code> global HTML attribute sets the label for a virtual keyboard's Enter key. For example, <code>enterkeyhint=\"search\"</code> may label the key with a magnifying glass icon.","id":"enterkeyhint","name":"Enterkeyhint","status":{"baseline":"high","baseline_high_date":"2024-05-02","baseline_low_date":"2021-11-02","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"94","firefox_android":"94","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>cause</code> property of errors records the specific original cause of the error, particularly for errors that have been re-thrown.","id":"error-cause","name":"Error cause","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"93","chrome_android":"93","edge":"93","firefox":"91","firefox_android":"91","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>event</code> and <code>first-input</code> performance entries and the <code>PerformanceEventTiming</code> 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.","id":"event-timing","name":"Event timing","status":{"baseline":false,"support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"89","firefox_android":"89"}}},{"description_html":"The <code>Event</code> API and the <code>addEventListener()</code> method on objects that receive events (event targets) represent and handle significant things happening on a page. Many APIs fire events for a wide range of situations relating to those APIs, such as an image loading, a user clicking, or a value changing.","id":"events","name":"Events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>ex</code> 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.","id":"ex","name":"ex unit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>pow()</code>, <code>sqrt()</code>, <code>hypot()</code>, <code>log()</code>, and <code>exp()</code> CSS functions compute various exponential functions.","id":"exp-functions","name":"pow(), sqrt(), hypot(), log(), and exp()","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The exponentiation (<code>**</code>) operator returns the result of raising the first operand to the power of the second operand.","id":"exponentiation","name":"Exponentiation operator","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"52","chrome_android":"52","edge":"14","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>EXT_blend_minmax</code> extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.","id":"ext-blend-minmax","name":"EXT_blend_minmax WebGL extension","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"38","chrome_android":"38","edge":"17","firefox":"47","firefox_android":"35","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>EXT_color_buffer_float</code> extension for WebGL 2.0 contexts adds color-renderable floating point formats to <code>renderbufferStorage()</code>.","id":"ext-color-buffer-float","name":"EXT_color_buffer_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"51","firefox_android":"51","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>EXT_color_buffer_half_float</code> extension for WebGL 1.0 and 2.0 contexts renders 16-bit floating-point color buffers.","id":"ext-color-buffer-half-float","name":"EXT_color_buffer_half_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"63","chrome_android":"63","edge":"17","firefox":"47","firefox_android":"36","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>EXT_disjoint_timer_query</code> extension for WebGL 1.0 contexts measures the duration of a set of GL commands, without stalling the rendering pipeline.","id":"ext-disjoint-timer-query","name":"EXT_disjoint_timer_query WebGL extension","status":{"baseline":false,"support":{}}},{"description_html":"The <code>EXT_float_blend</code> extension for WebGL 1.0 and 2.0 contexts adds 32-bit floating-point components to blending and draw buffers.","id":"ext-float-blend","name":"EXT_float_blend WebGL extension","status":{"baseline":false,"support":{"chrome":"75","chrome_android":"75","edge":"79","firefox":"67","firefox_android":"67","safari":"14.1"}}},{"description_html":"The <code>EXT_frag_depth</code> extension for WebGL 1.0 and 2.0 contexts adds setting the depth value of a fragment from within the fragment shader.","id":"ext-frag-depth","name":"EXT_frag_depth WebGL extension","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","firefox":"47","safari":"9","safari_ios":"15"}}},{"description_html":"The <code>EXT_shader_texture_lod</code> 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).","id":"ext-shader-texture-lod","name":"EXT_shader_texture_lod WebGL extension","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","firefox":"47","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>EXT_sRGB</code> extension for WebGL 1.0 contexts adds sRGB support to textures and framebuffer objects.","id":"ext-srgb","name":"EXT_sRGB WebGL extension","status":{"baseline":"high","baseline_high_date":"2022-08-07","baseline_low_date":"2020-02-07","support":{"chrome":"40","chrome_android":"40","edge":"80","firefox":"58","firefox_android":"28","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>EXT_texture_compression_bptc</code> extension for WebGL 1.0 and 2.0 contexts adds the BPTC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"ext-texture-compression-bptc","name":"EXT_texture_compression_bptc WebGL extension","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"92","edge":"93","firefox":"68","safari":"16"}}},{"description_html":"The <code>EXT_texture_compression_rgtc</code> 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.","id":"ext-texture-compression-rgtc","name":"EXT_texture_compression_rgtc WebGL extension","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"83","edge":"93","safari":"14.1"}}},{"description_html":"The <code>EXT_texture_filter_anisotropic</code> 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.","id":"ext-texture-filter-anisotropic","name":"EXT_texture_filter_anisotropic WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-12-07","baseline_low_date":"2016-06-07","support":{"chrome":"34","chrome_android":"34","edge":"12","firefox":"47","firefox_android":"47","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>EXT_texture_norm16</code> extension to WebGL 2.0 contexts adds 16 bit signed normalized and unsigned normalized fixed-point texture, renderbuffer, and texture buffer formats.","id":"ext-texture-norm16","name":"EXT_texture_norm16c WebGL extension","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"87","edge":"87","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>EyeDropper</code> API opens an eyedropper tool, a color picker that allows users to select a color from their screen.","id":"eyedropper","name":"Eyedropper","status":{"baseline":false,"support":{"chrome":"96","edge":"96"}}},{"description_html":"The <code>fastSeek()</code> method seeks an <code><audio></code> or <code><video></code> element as fast as possible, by seeking to a keyframe instead of exactly the requested time.","id":"fast-seek","name":"fastSeek()","status":{"baseline":false,"support":{"firefox":"31","firefox_android":"31","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>IdentityCredential</code> API delegates authentication to a third-party identity provider, instead of using third-party cookies. Also known as FedCM.","id":"fedcm","name":"Federated credential management","status":{"baseline":false,"support":{"chrome":"116","chrome_android":"116","edge":"116"}}},{"description_html":"The <code>FederatedCredential</code> API represents the details required to authenticate a user using a third-party identity provider. Not to be confused with federated credential management (FedCM).","id":"federated-credentials","name":"Federated credentials","status":{"baseline":false,"support":{"chrome":"51","chrome_android":"51","edge":"79"}}},{"description_html":"The <code><fencedframe></code> element embeds another HTML page into the current page in a more secure and privacy-preserving way than <code><iframe></code> elements.","id":"fencedframe","name":"<fencedframe>","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120"}}},{"description_html":"The <code>fetch()</code> method makes asynchronous HTTP requests.","id":"fetch","name":"Fetch","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"42","chrome_android":"42","edge":"14","firefox":"39","firefox_android":"39","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>Sec-Fetch-Dest</code>, <code>Sec-Fetch-Mode</code>, <code>Sec-Fetch-Site</code>, and <code>Sec-Fetch-User</code> HTTP headers provide extra information about the way a request was made, to help servers reject certain kinds of malicious requests.","id":"fetch-metadata","name":"Fetch metadata request headers","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"90","firefox_android":"90","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>fetch()</code> <code>priority</code> option and the <code>fetchPriority</code> HTML attribute give hints to the browser about which requests to do before other requests of the same type.","id":"fetch-priority","name":"Fetch priority","status":{"baseline":false,"support":{"chrome":"103","chrome_android":"103","edge":"103","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>field-sizing</code> CSS property allows form controls such as <code><textarea></code> to be sized based on their content.","id":"field-sizing","name":"field-sizing","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The <code><fieldset></code> and <code><legend></code> elements group several form control elements within a web form.","id":"fieldset","name":"<fieldset> and <legend>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><figure></code> and <code><figcaption></code> HTML elements represent an illustration, diagram, text, or other self-contained reference content, with an optional caption.","id":"figure","name":"<figure> and <figcaption>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"8","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The File API represents and reads from file data and metadata. Typically, you get files through other APIs, such as the <code><input type=\"file\"></code> element or drag-and-drop events. You may also send file data to other APIs, such as creating images or drawing on canvases.","id":"file","name":"File API","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"38","chrome_android":"38","edge":"79","firefox":"28","firefox_android":"28","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>::file-selector-button</code> CSS pseudo-element selects the button of a <code><input type=\"file\"></code> element.","id":"file-selector-button","name":"::file-selector-button","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"82","firefox_android":"82","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>showOpenFilePicker()</code>, <code>showDirectoryPicker()</code>, and <code>showSaveFilePicker()</code> methods request access to files and directories on the user's device and returns a handle for reading and writing to them.","id":"file-system-access","name":"File system access","status":{"baseline":false,"support":{"chrome":"86","edge":"86"}}},{"description_html":"The <code>filter</code> CSS property applies one or more graphic effects to an element. You can use filter functions, such as <code>blur()</code> and <code>drop-shadow()</code>, alone or combined to produce different effects.","id":"filter","name":"filter","status":{"baseline":"high","baseline_high_date":"2019-03-07","baseline_low_date":"2016-09-07","support":{"chrome":"53","chrome_android":"53","edge":"12","firefox":"35","firefox_android":"35","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>::first-letter</code> CSS pseudo-element selects the first letter in an element for styling.","id":"first-letter","name":"::first-letter","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>::first-line</code> CSS pseudo-element selects the first line of text in an element for styling.","id":"first-line","name":"::first-line","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>fit-content</code> CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.","id":"fit-content","name":"fit-content","status":{"baseline":"high","baseline_high_date":"2024-05-02","baseline_low_date":"2021-11-02","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"94","firefox_android":"94","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>fit-content()</code> CSS function, used outside of a grid layout property, clamps a length between <code>min-content</code> and <code>max-content</code>.","id":"fit-content-function","name":"fit-content()","status":{"baseline":false,"support":{}}},{"description_html":"The <code>position: fixed</code> CSS declaration removes an element from the normal flow and positions it relative to the viewport or page.","id":"fixed-positioning","name":"Fixed positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.","id":"flexbox","name":"Flexbox","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"29","chrome_android":"29","edge":"12","firefox":"20","firefox_android":"20","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>gap</code> CSS property in a flexbox layout sets the size of the space between items.","id":"flexbox-gap","name":"Flexbox gap","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"63","firefox_android":"63","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>float</code> CSS property aligns an element to either side of its container, allowing text and inline elements to flow around it. The <code>clear</code> CSS property sets whether an element is moved below floating elements that proceed it.","id":"float-clear","name":"float and clear","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Float16Array is a typed array of 16-bit floating point numbers.","id":"float16array","name":"Float16Array","status":{"baseline":false,"support":{"firefox":"129","firefox_android":"129","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"Focus events, such as <code>focus</code> and <code>blur</code>, fire when an element gets or loses focus.","id":"focus-events","name":"Focus events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"24","firefox_android":"24","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>:focus-visible</code> CSS pseudo-class selects elements that match the <code>:focus</code> pseudo-class and meets the browser's criteria for visually emphasizing focused elements.","id":"focus-visible","name":":focus-visible","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"85","firefox_android":"85","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>:focus-within</code> CSS pseudo-class matches an element if the element or any of its children are focused.","id":"focus-within","name":":focus-within","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>font-display</code> 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.","id":"font-display","name":"font-display","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"58","firefox_android":"58","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>@font-face</code> CSS at-rule creates a custom <code>font-family</code> value. The at-rule's descriptors set the font's name, source, and various display settings.","id":"font-face","name":"@font-face","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"36","chrome_android":"36","edge":"14","firefox":"39","firefox_android":"39","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>font-family</code> CSS property sets the desired font face for text, along with optional fallback font faces.","id":"font-family","name":"font-family","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-family: math</code> CSS declaration uses the browser default font face for displaying mathematical expressions.","id":"font-family-math","name":"Math font family","status":{"baseline":false,"support":{"chrome":"109","chrome_android":"109","edge":"109"}}},{"description_html":"The <code>font-family: system-ui</code> CSS declaration uses the operating system default font for text.","id":"font-family-system","name":"System font","status":{"baseline":"high","baseline_high_date":"2024-03-07","baseline_low_date":"2021-09-07","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"92","firefox_android":"92","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>font-feature-settings</code> CSS property sets low-level OpenType feature tags for a font. When possible, use <code>font-variant</code> instead.","id":"font-feature-settings","name":"font-feature-settings","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"48","chrome_android":"48","edge":"15","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-kerning</code> CSS property sets whether kerning data from a font is used to adjust the space between letters.","id":"font-kerning","name":"font-kerning","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"33","chrome_android":"33","edge":"79","firefox":"32","firefox_android":"32","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>font-language-override</code> CSS property sets which language-specific glyphs are displayed.","id":"font-language-override","name":"font-language-override","status":{"baseline":false,"support":{"firefox":"34","firefox_android":"34"}}},{"description_html":"The <code>document.fonts</code> API dynamically loads custom fonts and tracks when fonts are loading or ready to use.","id":"font-loading","name":"Font loading","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"35","chrome_android":"35","edge":"79","firefox":"41","firefox_android":"41","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>ascent-override</code>, <code>descent-override</code>, and <code>line-gap-override</code> descriptors adjust the display of a font declared in an <code>@font-face</code> statement. This can help make fallback fonts look the same size.","id":"font-metric-overrides","name":"Font metric overrides","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"89","firefox_android":"89"}}},{"description_html":"The <code>font-optical-sizing</code> CSS property sets whether text rendering is optimized for viewing at different sizes.","id":"font-optical-sizing","name":"font-optical-sizing","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"79","chrome_android":"79","edge":"17","firefox":"62","firefox_android":"62","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>font-palette</code> CSS property selects a color palette from the font, optionally overriding individual colors in the <code>@font-palette-values</code> at-rule.","id":"font-palette","name":"font-palette","status":{"baseline":"low","baseline_low_date":"2022-11-15","support":{"chrome":"101","chrome_android":"101","edge":"101","firefox":"107","firefox_android":"107","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"You can animate color fonts between two <code>font-palette</code> values.","id":"font-palette-animation","name":"font-palette animation","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121"}}},{"description_html":"The <code>font</code> CSS property shorthand sets multiple font properties, including style, weight, size, and font family.","id":"font-shorthand","name":"Font shorthand","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-size</code> CSS property sets the text height.","id":"font-size","name":"font-size","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-size-adjust</code> 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.","id":"font-size-adjust","name":"font-size-adjust","status":{"baseline":"low","baseline_low_date":"2024-07-25","support":{"chrome":"127","chrome_android":"127","edge":"127","firefox":"118","firefox_android":"118","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>font-stretch</code> CSS property selects a font face from a font family based on width, either by a keyword such as <code>condensed</code> or a percentage.","id":"font-stretch","name":"font-stretch","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"60","chrome_android":"60","edge":"12","firefox":"9","firefox_android":"9","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>font-style</code> CSS property sets the text style, with <code>normal</code>, <code>italic</code>, and <code>oblique</code> options.","id":"font-style","name":"font-style","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-synthesis</code> 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 <code>font-synthesis-style</code> and <code>font-synthesis-weight</code>.","id":"font-synthesis","name":"font-synthesis","status":{"baseline":"high","baseline_high_date":"2024-07-06","baseline_low_date":"2022-01-06","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"34","firefox_android":"34","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>font-synthesis-position</code> CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font.","id":"font-synthesis-position","name":"font-synthesis-position","status":{"baseline":false,"support":{"firefox":"118","firefox_android":"118"}}},{"description_html":"The <code>font-synthesis-small-caps</code> CSS property sets whether or not the browser should synthesize small caps typefaces when they're missing from the font.","id":"font-synthesis-small-caps","name":"font-synthesis-small-caps","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>font-synthesis-style</code> CSS property sets whether or not the browser should synthesize italic and oblique typefaces when they're missing from the font.","id":"font-synthesis-style","name":"font-synthesis-style","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>font-synthesis-weight</code> CSS property sets whether or not the browser should synthesize bold typefaces when they're missing from the font.","id":"font-synthesis-weight","name":"font-synthesis-weight","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>font-variant</code> CSS property is a shorthand for <code>font-variant-alternates</code>, <code>font-variant-caps</code>, <code>font-variant-east-asian</code>, <code>font-variant-emoji</code>, <code>font-variant-ligatures</code>, <code>font-variant-numeric</code>, and <code>font-variant-position</code>.","id":"font-variant","name":"font-variant","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-variant-alternates</code> CSS property, along with the <code>@font-feature-values</code> at-rule, chooses when to use a font's alternate glyphs.","id":"font-variant-alternates","name":"font-variant-alternates","status":{"baseline":"low","baseline_low_date":"2023-03-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-caps</code> CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.","id":"font-variant-caps","name":"font-variant-caps","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-east-asian</code> CSS property controls glyph substitution and sizing in East Asian text.","id":"font-variant-east-asian","name":"font-variant-east-asian","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-emoji</code> CSS property sets the default presentation for emoji characters.","id":"font-variant-emoji","name":"font-variant-emoji","status":{"baseline":false,"support":{"chrome":"131","edge":"131"}}},{"description_html":"The <code>font-variant-ligatures</code> CSS property sets how characters can be visually combined for readability or stylistic reasons.","id":"font-variant-ligatures","name":"font-variant-ligatures","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"34","chrome_android":"34","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-numeric</code> CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.","id":"font-variant-numeric","name":"font-variant-numeric","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-position</code> CSS property sets whether to use alternate glyphs for subscript and superscript text.","id":"font-variant-position","name":"font-variant-position","status":{"baseline":false,"support":{"firefox":"≤72","firefox_android":"≤79","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>font-variation-settings</code> 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 <code>font-weight: bold</code>. Also known as variable fonts.","id":"font-variation-settings","name":"font-variation-settings","status":{"baseline":"high","baseline_high_date":"2021-03-05","baseline_low_date":"2018-09-05","support":{"chrome":"62","chrome_android":"62","edge":"17","firefox":"62","firefox_android":"62","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>font-weight</code> CSS property controls the thickness of a font. It is set explicitly with the keyword <code>bold</code> or a number, or relative to the inherited thickness with the keywords <code>bolder</code> or <code>lighter</code>.","id":"font-weight","name":"font-weight","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>forced-colors</code> CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the <code>forced-color-adjust</code> CSS property sets whether forced colors apply to an element.","id":"forced-colors","name":"Forced colors","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"89","chrome_android":"89","edge":"79","firefox":"89","firefox_android":"89","safari":"16","safari_ios":"16"}}},{"description_html":"The <code><form></code> element contains interactive controls for submitting information.","id":"form","name":"<form>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"Custom elements may act like built-in form elements, via the the <code>attachInternals()</code> method of <code>HTMLElement</code> and the <code>ElementInternals</code> API.","id":"form-associated-custom-elements","name":"Form-associated custom elements","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"98","firefox_android":"98","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The form validity CSS pseudo-classes match <code><form></code> elements based on the constraints of a form field, such as validity (<code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>) and necessity (<code>:optional</code> or <code>:required</code>).","id":"form-validity-pseudos","name":"Form validity pseudo-classes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"}}},{"description_html":"The fullscreen API makes a specific element fill the whole screen and hides most browser UI.","id":"fullscreen","name":"Fullscreen API","status":{"baseline":false,"support":{"chrome":"71","chrome_android":"71","edge":"79","firefox":"64","firefox_android":"64","safari":"16.4"}}},{"description_html":"Functions are series of statements that can be called and return a value. The <code>function</code> keyword (as in <code>function () { }</code>) and arrow (<code>=></code>) expression create functions. The JavaScript functions protocol includes default and rest parameters and binding to <code>this</code>.","id":"functions","name":"Functions","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>navigator.getGamepads()</code> API accesses and responds to signals from game controllers.","id":"gamepad","name":"Gamepad","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"35","chrome_android":"35","edge":"12","firefox":"29","firefox_android":"32","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>gamepad.vibrationActuator</code> property represents a gamepad's haptics hardware, which allows you to control the vibration motors in a gamepad.","id":"gamepad-haptics","name":"Gamepad haptic feedback","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79","safari":"16.4"}}},{"description_html":"The <code>touched</code> property of a <code>GamepadButton</code> object indicates whether a button capable of detecting touch is currently touched.","id":"gamepad-touch","name":"Gamepad touch buttons","status":{"baseline":false,"support":{"chrome":"73","chrome_android":"73","edge":"15","firefox":"55","firefox_android":"55"}}},{"description_html":"The <code>hand</code> and <code>pose</code> properties of a <code>Gamepad</code> object represent the position in space and the hand that WebVR controllers are held in.","id":"gamepad-vr","name":"Gamepad VR hands and poses","status":{"baseline":false,"support":{"firefox":"55","firefox_android":"55"}}},{"description_html":"Generator functions (<code>function*</code>) create iterators that return multiple values, one after another, on-demand.","id":"generators","name":"Generators","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"39","chrome_android":"39","edge":"13","firefox":"26","firefox_android":"26","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>navigator.gelocation</code> API requests the user's latitude, longitude, heading, and speed.","id":"geolocation","name":"Geolocation","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"5","safari_ios":"≤3"}}},{"description_html":"The <code>getComputedStyle()</code> global method returns an <code>CSSStyleDeclaration</code> object that represents all CSS declarations applied to a given element.","id":"get-computed-style","name":"getComputedStyle()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"11","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>getHTML()</code> method of <code>Element</code> and <code>ShadowRoot</code> objects serializes an element's DOM to an HTML string.","id":"gethtml","name":"getHTML","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"128","firefox_android":"128","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>globalThis</code> property accesses the global <code>this</code> value (and hence the global object itself) across environments.","id":"globalthis","name":"globalThis","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"71","chrome_android":"71","edge":"79","firefox":"65","firefox_android":"65","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>Sec-GPC</code> request header indicates that the user does not consent to a website or service selling or sharing their personal information with third parties.","id":"gpc","name":"Global privacy control","status":{"baseline":false,"support":{"firefox":"120"}}},{"description_html":"Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, <code>linear-gradient(to right in oklch longer hue, red, red);</code> calculates in the <code>oklch</code> color space, with the hue going all the way around the hue circle from red back to red.","id":"gradient-interpolation","name":"Gradient interpolation","status":{"baseline":"low","baseline_low_date":"2024-06-11","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"127","firefox_android":"127","safari":"16.2","safari_ios":"16.2"}}},{"description_html":"The <code>linear-gradient()</code> and <code>radial-gradient()</code> CSS functions and their repeating counterparts create backgrounds that progress smoothly between multiple colors.","id":"gradients","name":"Gradients","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"3.6","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"CSS grid is a two-dimensional layout system, which lays content out in rows and columns.","id":"grid","name":"Grid","status":{"baseline":"high","baseline_high_date":"2020-04-17","baseline_low_date":"2017-10-17","support":{"chrome":"57","chrome_android":"57","edge":"16","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"Grid animation allows you to animate the <code>grid-template-columns</code> and <code>grid-template-rows</code> CSS properties.","id":"grid-animation","name":"Grid animation","status":{"baseline":"low","baseline_low_date":"2022-10-27","support":{"chrome":"107","chrome_android":"107","edge":"107","firefox":"66","firefox_android":"66","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>Gyroscope</code> API reads the angular velocity of a device in three dimensions.","id":"gyroscope","name":"Gyroscope","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67","edge":"79"}}},{"description_html":"The <code>hanging-punctuation</code> CSS property puts punctuation characters outside of the box to align the text with the rest of the document.","id":"hanging-punctuation","name":"Hanging punctuation","status":{"baseline":false,"support":{}}},{"description_html":"The <code>navigator.hardwareConcurrency</code> read-only property returns the number of logical processors available to run threads on the user's computer.","id":"hardware-concurrency","name":"hardwareConcurrency","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"37","chrome_android":"37","edge":"15","firefox":"48","firefox_android":"48","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>:has()</code> CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.","id":"has","name":":has()","status":{"baseline":"low","baseline_low_date":"2023-12-19","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"121","firefox_android":"121","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>:has-slotted</code> CSS pseudo-class matches <code><slot></code> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.","id":"has-slotted","name":":has-slotted","status":{"baseline":false,"support":{}}},{"description_html":"The <code>#!</code> comment at the absolute start of a script or module is treated as a normal comment and is ignored by the JavaScript engine.","id":"hashbang-comments","name":"Hashbang comments","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"74","chrome_android":"74","edge":"79","firefox":"67","firefox_android":"67","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>hashchange</code> event fires when the URL fragment identifier (the part of the URL starting with <code>#</code>) of the current page has changed.","id":"hashchange","name":"hashchange","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"16","chrome_android":"18","edge":"12","firefox":"11","firefox_android":"14","safari":"6","safari_ios":"6"}}},{"description_html":"The <code><head></code> element contains machine-readable information (metadata) about the document, such as the title, <code><script></code> and <code><style></code> elements, and <code><meta></code> elements.","id":"head","name":"<head>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><header></code> and <code><footer></code> HTML elements represent content that precedes and follows the main page content, respectively.","id":"header-footer","name":"<header> and <footer>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><h1></code> through <code><h6></code> HTML elements represent six levels of section headings, in order of decreasing importance.","id":"headings","name":"<h1> through <h6>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code><hgroup></code> element represents a heading and related content.","id":"hgroup","name":"<hgroup>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>hidden=\"until-found\"</code> 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.","id":"hidden-until-found","name":"hidden=\"until-found\"","status":{"baseline":false,"support":{"chrome":"102","chrome_android":"102","edge":"102"}}},{"description_html":"Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.","id":"highlight","name":"Custom highlights","status":{"baseline":false,"support":{"chrome":"105","chrome_android":"105","edge":"105","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>window.history</code> API manipulates the browser session history, from navigations to state management, in the tab or frame that the current page is loaded in.","id":"history","name":"History","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4"}}},{"description_html":"The <code>:host</code> CSS pseudo-class selects the containing element of the shadow tree in which it is used. The <code>:host()</code> CSS pseudo-class selects the that element only if it matches the provided selector.","id":"host","name":"Host","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>:host-context()</code> 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.","id":"host-context","name":"host-context","status":{"baseline":false,"support":{"chrome":"54","chrome_android":"54","edge":"79"}}},{"description_html":"The <code><hr></code> element represents a thematic break between paragraphs, often shown as a horizontal rule.","id":"hr","name":"<hr>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>hsl()</code> and <code>hsla()</code> CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.","id":"hsl","name":"HSL","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"52","firefox_android":"52","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>Strict-Transport-Security</code> HTTP response header informs browsers that the site should only be accessed using HTTPS, and that any future attempts to access it using HTTP should automatically be converted to HTTPS. Also known as HSTS.","id":"hsts","name":"HTTP Strict Transport Security","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"The <code><html></code> element represents the top-level of an HTML document and is referred to as the root element.","id":"html","name":"<html>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>capture</code> HTML attribute for <code><input type=\"file\"></code> elements allows the user to capture media using the device's camera or microphone.","id":"html-media-capture","name":"HTML media capture","status":{"baseline":false,"support":{"chrome_android":"25","firefox_android":"79","safari_ios":"10"}}},{"description_html":"The <code>Authorization</code> and <code>WWW-Authenticate</code> headers authenticate a user with a server.","id":"http-authentication","name":"HTTP authentication","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"HTTP/1.1 is a network protocol used by browsers and servers. It has been superseded by HTTP/2 and HTTP/3.","id":"http11","name":"HTTP/1.1","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"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.","id":"http2","name":"HTTP/2","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"36","firefox_android":"36","safari":"9","safari_ios":"9"}}},{"description_html":"HTTP/3 is a major revision of the HTTP network protocol, providing improved performance and efficiency by using QUIC as the underlying transport protocol.","id":"http3","name":"HTTP/3","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"88","firefox_android":"88","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>hwb()</code> CSS function picks colors using hue, whiteness, and blackness channels.","id":"hwb","name":"HWB","status":{"baseline":"high","baseline_high_date":"2024-10-28","baseline_low_date":"2022-04-28","support":{"chrome":"101","chrome_android":"101","edge":"101","firefox":"96","firefox_android":"96","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>hyphenate-character</code> CSS property sets the character or string to use at the end of a line before a line break.","id":"hyphenate-character","name":"Hyphenate character","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"98","firefox_android":"98","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>hyphenate-limit-chars</code> 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.","id":"hyphenate-limit-chars","name":"Hyphenate limit chars","status":{"baseline":false,"support":{"chrome":"109","chrome_android":"109","edge":"109"}}},{"description_html":"The <code>hyphens</code> CSS property controls when long words are broken by line wrapping. Although called <code>hyphens</code>, 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.","id":"hyphens","name":"Hyphenation","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"88","chrome_android":"55","edge":"88","firefox":"43","firefox_android":"43","safari":"17","safari_ios":"17"}}},{"description_html":"The <code><i></code> HTML element identifies idiomatic content, styling text as italic by default.","id":"i","name":"<i>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The CSS <code>ic</code> unit corresponds to the width of CJK ideographic characters.","id":"ic","name":"ic unit","status":{"baseline":"low","baseline_low_date":"2022-10-03","support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>IdleDetector</code> API is used to notify a webpage of the user's idle, active, and locked state.","id":"idle-detection","name":"Idle detection","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"114"}}},{"description_html":"The <code><iframe></code> element embeds another HTML page into the current page.","id":"iframe","name":"<iframe>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>credentialless</code> attribute for the <code><iframe></code> 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 <code>Cross-Origin-Embedder-Policy</code> headers.","id":"iframe-credentialless","name":"Credentialless iframes","status":{"baseline":false,"support":{"chrome":"110","chrome_android":"110","edge":"110"}}},{"description_html":"The <code>sandbox</code> attribute for the <code><iframe></code> HTML element sets many security restrictions on the iframe, such as preventing form submissions or opening modal dialogs. Optional <code>allow-</code> values relax specific restrictions.","id":"iframe-sandbox","name":"Sandboxed iframes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"17","firefox_android":"17","safari":"5","safari_ios":"4"}}},{"description_html":"The <code>srcdoc</code> attribute for the <code><iframe></code> HTML element sets a string of HTML to embed in the document. The value of <code>srcdoc</code> overrides loading a document from the <code>src</code> attribute.","id":"iframe-srcdoc","name":"srcdoc","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"20","chrome_android":"25","edge":"79","firefox":"25","firefox_android":"25","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>image()</code> CSS function creates an image similar to <code>url()</code> 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 <code>Image()</code> constructor.","id":"image-function","name":"image()","status":{"baseline":false,"support":{}}},{"description_html":"The <code><area></code> and <code><map></code> elements define a clickable area on an image.","id":"image-maps","name":"Image maps","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>image-orientation</code> CSS property corrects the rotation of an image using the image's metadata, such as EXIF.","id":"image-orientation","name":"image-orientation","status":{"baseline":"high","baseline_high_date":"2022-10-13","baseline_low_date":"2020-04-13","support":{"chrome":"81","chrome_android":"81","edge":"81","firefox":"26","firefox_android":"26","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>image-rendering</code> CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.","id":"image-rendering","name":"image-rendering","status":{"baseline":"high","baseline_high_date":"2024-04-05","baseline_low_date":"2021-10-05","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"93","firefox_android":"93","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>image-set()</code> CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.","id":"image-set","name":"image-set()","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"89","firefox_android":"89","safari":"17","safari_ios":"17"}}},{"description_html":"The <code><img></code> element adds an image into the document.","id":"img","name":"<img>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>@import</code> CSS at-rule loads styles from another stylesheet.","id":"import","name":"@import","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"A <code><script type=\"importmap\"></code> 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.","id":"import-maps","name":"Import maps","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"108","firefox_android":"108","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>:indeterminate</code> 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.","id":"indeterminate","name":":indeterminate","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"39","chrome_android":"39","edge":"79","firefox":"51","firefox_android":"51","safari":"10","safari_ios":"10"}}},{"description_html":"The IndexedDB API is a local storage transactional object database.","id":"indexeddb","name":"IndexedDB","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"51","firefox_android":"51","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>translate</code>, <code>rotate</code>, and <code>scale</code> CSS properties apply single transformations independently, as opposed to applying multiple transformations with the <code>transform</code> CSS property.","id":"individual-transforms","name":"Individual transform properties","status":{"baseline":"low","baseline_low_date":"2022-08-05","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"72","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>inert</code> HTML attribute marks an element and its descendants as non-interactive. Inert elements don't get focus or fire <code>click</code> events.","id":"inert","name":"Inert elements","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"120","firefox_android":"120"}}},{"description_html":"The <code>inherit</code> keyword resets any CSS property to the computed value of that property from the parent element.","id":"inherit-value","name":"inherit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>initial-letter</code> 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.","id":"initial-letter","name":"initial-letter","status":{"baseline":false,"support":{"chrome":"110","chrome_android":"110","edge":"110"}}},{"description_html":"The <code>initial</code> keyword resets any CSS property to its initial value as defined by the specification. For example, the <code>initial</code> value of the <code>display</code> property is <code>inline</code>, regardless of the element being styled. Not to be confused with <code>revert</code>, which resets to the user or browser default style.","id":"initial-value","name":"initial","status":{"baseline":"high","baseline_high_date":"2018-05-12","baseline_low_date":"2015-11-12","support":{"chrome":"1","chrome_android":"18","edge":"13","firefox":"19","firefox_android":"19","safari":"1.2","safari_ios":"1"}}},{"description_html":"The <code>navigator.ink</code> API uses the system compositor to draw to a <code><canvas></code> element ahead of pointer events, reducing the delay between moving a stylus or cursor and a pen stroke appearing on screen.","id":"ink","name":"Ink","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"93"}}},{"description_html":"The <code><input type=\"text\"></code> HTML element allows the user to enter information into a form. By default, an <code><input></code> element is a text input.","id":"input","name":"<input>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"button\"></code> 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 <code><button></code> element, which contains HTML content.","id":"input-button","name":"<input type=\"button\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"checkbox\"></code> HTML element represents a tickable box with two states, checked and unchecked.","id":"input-checkbox","name":"<input type=\"checkbox\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code><input type=\"color\"></code> HTML element shows a color picker from which users can choose a color value.","id":"input-color","name":"<input type=\"color\">","status":{"baseline":false,"support":{"chrome":"20","chrome_android":"25","edge":"14","firefox":"29","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code><input type=\"date\"></code> and <code><input type=\"time\"></code> HTML elements show date and time pickers.","id":"input-date-time","name":"Date and time <input> types","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"20","chrome_android":"25","edge":"12","firefox":"57","firefox_android":"57","safari":"14.1","safari_ios":"5"}}},{"description_html":"The <code><input type=\"email\"></code>, <code><input type=\"tel\"></code>, and <code><input type=\"url\"></code> HTML elements represent email address, telephone number, and URL fields in a form.","id":"input-email-tel-url","name":"Email, telephone, and URL <input> types","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"3"}}},{"description_html":"The <code>input</code> event fires when a form control changes or an element with the <code>contenteditable</code> attribute changes.","id":"input-event","name":"Input events","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"6","firefox_android":"6","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code><input type=\"file\"></code> HTML element shows a file picker from which users can choose a file to upload with the form.","id":"input-file","name":"<input type=\"file\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"4","safari_ios":"3"}}},{"description_html":"The <code><input type=\"hidden\"></code> HTML element represents a form field that is not shown visually but is still included in the form submission.","id":"input-hidden","name":"<input type=\"hidden\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"image\"></code> HTML element is an image that can be used to submit a form, like the <code><input type=\"submit\"></code> element.","id":"input-image","name":"<input type=\"image\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"number\"></code> HTML element represents numeric input data.","id":"input-number","name":"<input type=\"number\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"29","firefox_android":"29","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code><input type=\"password\"></code> HTML element represents a field for users to enter a password. The password is hidden from view, typically replaced by dots or asterisks.","id":"input-password","name":"<input type=\"password\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"radio\"></code> HTML element represents one button in a group such that only one can be chosen at a time.","id":"input-radio","name":"<input type=\"radio\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"range\"></code> element represents a slider for choosing an inexact value between a minimum and maximum value.","id":"input-range","name":"<input type=\"range\">","status":{"baseline":"high","baseline_high_date":"2019-09-16","baseline_low_date":"2017-03-16","support":{"chrome":"4","chrome_android":"57","edge":"12","firefox":"23","firefox_android":"52","safari":"3.1","safari_ios":"5"}}},{"description_html":"The <code><input type=\"reset\"></code> HTML element represents a button that sets all form fields to their initial values.","id":"input-reset","name":"<input type=\"reset\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>:checked</code>, <code>:disabled</code>, and <code>:enabled</code> CSS pseudo-classes match form elements based on their state.","id":"input-selectors","name":"Input selectors","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code><input type=\"submit\"></code> HTML element represents a button that triggers an action on its associated <code><form></code>, such as sending the form data to a server.","id":"input-submit","name":"<input type=\"submit\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><ins></code> element element represents a range of text that has been inserted into a document, styling text as underlined by default.","id":"ins","name":"<ins>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>pointer</code>, <code>any-pointer</code>, <code>hover</code>, and <code>any-hover</code> 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 <code>(hover: none) and (pointer: coarse)</code> media query.","id":"interaction","name":"Interaction media queries","status":{"baseline":"high","baseline_high_date":"2021-06-11","baseline_low_date":"2018-12-11","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"64","firefox_android":"64","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>interpolate-size</code> CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to <code>auto</code> or <code>fit-content</code>.","id":"interpolate-size","name":"interpolate-size","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"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.","id":"intersection-observer","name":"Intersection observer","status":{"baseline":"high","baseline_high_date":"2021-09-25","baseline_low_date":"2019-03-25","support":{"chrome":"58","chrome_android":"58","edge":"16","firefox":"55","firefox_android":"55","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>trackVisibility</code> parameter for the <code>IntersectionObserver</code> 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.","id":"intersection-observer-v2","name":"Intersection observer visibility tracking","status":{"baseline":false,"support":{"chrome":"74","chrome_android":"74","edge":"79"}}},{"description_html":"The <code>Intl</code> API provides language sensitive string comparison, number formatting, date and time formatting, and more.","id":"intl","name":"Intl","status":{"baseline":"high","baseline_high_date":"2020-03-28","baseline_low_date":"2017-09-28","support":{"chrome":"24","chrome_android":"25","edge":"12","firefox":"29","firefox_android":"56","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Intl.DisplayNames</code> API provides localized names of language, region, script, and currency codes.","id":"intl-display-names","name":"Intl.DisplayNames","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"81","chrome_android":"81","edge":"81","firefox":"86","firefox_android":"86","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>Intl.DurationFormat</code> API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.","id":"intl-duration-format","name":"Intl.DurationFormat","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>Intl.ListFormat</code> API creates a locale-aware formatter that turns iterable objects into localized strings.","id":"intl-list-format","name":"Intl.ListFormat","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"72","chrome_android":"72","edge":"79","firefox":"78","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>Intl.Locale</code> API parses Unicode locale identifiers, with language, region, and script codes, such as <code>zh-Hans-CN</code> or <code>en-GB</code>.","id":"intl-locale","name":"Intl.Locale","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"74","chrome_android":"74","edge":"79","firefox":"75","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The getter methods of the <code>Intl.Locale</code> 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.","id":"intl-locale-info","name":"Intl.Locale info","status":{"baseline":false,"support":{"chrome":"130","chrome_android":"130","edge":"130","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>Intl.PluralRules</code> API creates a locale-aware object that tells you which of the language's pluralization rules apply based on a given number.","id":"intl-plural-rules","name":"Intl.PluralRules","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"63","chrome_android":"63","edge":"18","firefox":"58","firefox_android":"58","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>Intl.RelativeTimeFormat</code> API creates a locale-aware formatter that turns an object representing a relative time (such as '1 day ago') into a localized string.","id":"intl-relative-time-format","name":"Intl.RelativeTimeFormat","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"71","chrome_android":"71","edge":"79","firefox":"76","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>Intl.Segmenter</code> API creates a locale-aware text splitter that can separate a string into meaningful graphemes, words, or sentences.","id":"intl-segmenter","name":"Intl.Segmenter","status":{"baseline":"low","baseline_low_date":"2024-04-16","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"125","firefox_android":"125","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>inverted-colors</code> CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.","id":"inverted-colors","name":"inverted-colors media query","status":{"baseline":false,"support":{"safari":"9.1","safari_ios":"10"}}},{"description_html":"The <code>:is()</code> 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.","id":"is","name":":is()","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"82","firefox_android":"82","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>isolation</code> CSS property creates a new stacking context, which impacts <code>z-index</code> ordering and blend modes.","id":"isolation","name":"isolation","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"36","firefox_android":"36","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>Iterator</code> object is an abstract base for objects that implement the iterator protocol. It provides methods common to built-in iterators, such as <code>filter()</code>, <code>find()</code>, <code>map()</code>, and <code>reduce()</code>. You can also use the static method <code>Iterator.from()</code> to convert an existing iterable into an <code>Iterator</code>.","id":"iterator-methods","name":"Iterator methods","status":{"baseline":false,"support":{"chrome":"122","chrome_android":"122","edge":"122","firefox":"131","firefox_android":"131"}}},{"description_html":"The <code>for...of</code> 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 <code>Iterator</code> class.","id":"iterators","name":"Iterators and the for...of loop","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"13","firefox_android":"14","safari":"7","safari_ios":"7"}}},{"description_html":"JavaScript is a programming language that runs in browsers, usually through the <code><script></code> 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.","id":"javascript","name":"JavaScript (initial core language support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.","id":"jpegxl","name":"JPEG XL","status":{"baseline":false,"support":{"safari":"17","safari_ios":"17"}}},{"description_html":"JavaScript modules allow code to be organized into reusable units. Modules use <code>import</code> to load other modules and <code>export</code> to declare what is available to import from other modules. In HTML, modules are loaded with <code><script type=\"module\"></code>.","id":"js-modules","name":"JavaScript modules","status":{"baseline":"high","baseline_high_date":"2020-11-09","baseline_low_date":"2018-05-09","support":{"chrome":"61","chrome_android":"61","edge":"16","firefox":"60","firefox_android":"60","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>navigator.serviceWorker.register()</code> method accepts <code>{ type: \"module\" }</code> to load scripts that use <code>import</code> and <code>export</code>. Also known as ECMAScript modules or ESM in service workers.","id":"js-modules-service-workers","name":"JavaScript modules in service workers","status":{"baseline":false,"support":{"chrome":"91","chrome_android":"91","edge":"91","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>SharedWorker()</code> constructor accepts <code>{ type: \"module\" }</code> to load scripts that use <code>import</code> and <code>export</code>. Also known as ECMAScript modules or ESM in shared workers.","id":"js-modules-shared-workers","name":"JavaScript modules in shared workers","status":{"baseline":false,"support":{"chrome":"80","edge":"80","firefox":"114","firefox_android":"114","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>Worker()</code> constructor accepts <code>{ type: \"module\" }</code> to load scripts that use <code>import</code> and <code>export</code>. Also known as ECMAScript modules or ESM in workers.","id":"js-modules-workers","name":"JavaScript modules in workers","status":{"baseline":"low","baseline_low_date":"2023-06-06","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"114","firefox_android":"114","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>JSON</code> 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.","id":"json","name":"JSON","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"4"}}},{"description_html":"Module <code>import … with { type: \"json\" }</code> statements load JSON data. Also known as JSON module scripts and formerly known as import assertions.","id":"json-modules","name":"JSON import attributes","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"To serialize and parse JSON in a lossless way, <code>JSON.stringify()</code> handles <code>rawJSON</code> values and <code>JSON.parse()</code>'s reviver callback takes a source context parameter.","id":"json-raw","name":"JSON source text access","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114"}}},{"description_html":"The <code><kbd></code> element represents textual user input, such as keyboard or voice input, styling text in monospaced type by default.","id":"kbd","name":"<kbd>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>keydown</code> and <code>keyup</code> events fire for each key press (or, with modifier keys, a combination of key presses) on a keyboard.","id":"keyboard-events","name":"Keyboard events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"1.2","safari_ios":"1"}}},{"description_html":"The <code>navigator.keyboard.lock()</code> 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.","id":"keyboard-lock","name":"Keyboard lock","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79"}}},{"description_html":"The <code>navigator.keyboard.getLayoutMap()</code> 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.","id":"keyboard-map","name":"Keyboard map","status":{"baseline":false,"support":{"chrome":"69","chrome_android":"69","edge":"79"}}},{"description_html":"The <code>KHR_parallel_shader_compile</code> extension for WebGL 1.0 and 2.0 contexts checks the status of shader compilation without blocking the runtime.","id":"khr-parallel-shader-compile","name":"KHR_parallel_shader_compile WebGL extension","status":{"baseline":false,"support":{"chrome":"76","chrome_android":"76","edge":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"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 <code>color()</code>, <code>lab()</code>, and <code>lch()</code> functions. Also known as CIELAB and CIELCH.","id":"lab","name":"Lab and LCH","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15","safari_ios":"15"}}},{"description_html":"The <code><label></code> HTML element represents a caption for a form field.","id":"label","name":"<label>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>:lang()</code> CSS functional pseudo-class matches elements based on their content language.","id":"lang","name":":lang()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>lang</code> global HTML attribute defines the language of an element. It's used by assistive technology to correctly read the content, translation tools to select the origin language, and other applications.","id":"lang-attr","name":"Lang","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>navigator.language</code> read-only property returns a string representing the preferred language of the user, usually the language of the browser UI. The <code>navigator.languages</code> read-only property returns an array of strings representing the user's preferred languages.","id":"language","name":"Language","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>largest-contentful-paint</code> performance entry and the <code>LargestContentfulPaint</code> 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.","id":"largest-contentful-paint","name":"Largest contentful paint (LCP)","status":{"baseline":false,"support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"122","firefox_android":"122"}}},{"description_html":"The <code>unicode-bidi</code> and <code>direction</code> CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use the <code>dir</code> global HTML attribute and <code><bdo></code> HTML element instead.","id":"layout-direction-override","name":"Layout direction override","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"50","firefox_android":"50","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>layout-shift</code> performance entry and <code>LayoutShift</code> API measures the layout stability of web pages based on movements of the elements on the page.","id":"layout-instability","name":"Layout instability","status":{"baseline":false,"support":{"chrome":"84","chrome_android":"84","edge":"84"}}},{"description_html":"The <code>let</code> and <code>const</code> declarations define block-scoped variables.","id":"let-const","name":"Let and const","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"49","chrome_android":"49","edge":"14","firefox":"44","firefox_android":"44","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>letter-spacing</code> CSS property controls the amount of space between each letter in an element or block of text.","id":"letter-spacing","name":"letter-spacing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The CSS <code>lh</code> unit corresponds to the requested line height, the computed value of the <code>line-height</code> property. Some lines may be higher than this based on their content.","id":"lh","name":"lh unit","status":{"baseline":"low","baseline_low_date":"2023-11-21","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>light-dark()</code> CSS function accepts two colors and uses one depending on the current color scheme.","id":"light-dark","name":"light-dark()","status":{"baseline":"low","baseline_low_date":"2024-05-13","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"120","firefox_android":"120","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>line-break</code> CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.","id":"line-break","name":"line-break","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"69","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>line-clamp</code> CSS property limits the text in a block container to a certain number of lines. The prefixed <code>-webkit-line-clamp</code> is widely supported but only works with <code>-webkit-box-orient: vertical</code> in combination with <code>display: -webkit-box</code> or <code>display: -webkit-inline-box</code>.","id":"line-clamp","name":"line-clamp","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>line-height</code> CSS property sets the spacing between text baselines, oriented to the horizontal or vertical writing mode.","id":"line-height","name":"line-height","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>linear()</code> 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.","id":"linear-easing","name":"linear() easing","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"112","firefox_android":"112","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code><link></code> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon.","id":"link","name":"<link>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>rel=\"dns-prefetch\"</code> attribute for the <code><link></code> HTML element is a hint to the browser that the page or user is likely to request resources from another domain, so the browser should preemptively resolve DNS for the <code>href</code> value's domain.","id":"link-rel-dns-prefetch","name":"<link rel=\"dns-prefetch\">","status":{"baseline":"high","baseline_high_date":"≤2022-07-15","baseline_low_date":"≤2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"≤79","firefox":"3","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>rel=\"expect\"</code> attribute for the <code><link></code> HTML element is a hint to the browser to block rendering until the element that the <code>href</code> value references is connected to the document and fully parsed.","id":"link-rel-expect","name":"<link rel=\"expect\">","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124"}}},{"description_html":"The <code>rel=\"preconnect\"</code> attribute for the <code><link></code> HTML element is a hint to the browser that the page or user is likely to request resources from another origin, so the browser should preemptively start a connection to the <code>href</code> value's origin.","id":"link-rel-preconnect","name":"<link rel=\"preconnect\">","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"39","firefox_android":"39","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>rel=\"prefetch\"</code> attribute for the <code><link></code> HTML element is a hint to the browser that the user is likely to navigate to a resource, so the browser should preemptively fetch and cache the resource.","id":"link-rel-prefetch","name":"<link rel=\"prefetch\">","status":{"baseline":false,"support":{}}},{"description_html":"The <code>rel=\"preload\"</code> attribute for the <code><link></code> HTML element requests resources, such as images or style sheets, that the page needs soon, so the browser may prioritize them for loading before rendering begins.","id":"link-rel-preload","name":"<link rel=\"preload\">","status":{"baseline":"high","baseline_high_date":"2023-07-26","baseline_low_date":"2021-01-26","support":{"chrome":"50","chrome_android":"50","edge":"≤79","firefox":"85","firefox_android":"85","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>:link</code> CSS pseudo-class matches unvisited links, <code>:visited</code> matches visited links, and <code>:any-link</code> matches both.","id":"link-selectors","name":"Link selectors","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"50","firefox_android":"50","safari":"9","safari_ios":"9"}}},{"description_html":"The <code><ol></code>, <code><ul></code>, and <code><li></code> HTML elements represent ordered and unordered lists.","id":"list-elements","name":"<ol>, <ul>, and <li>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>list-style</code> shorthand CSS property and the <code>list-style-image</code>, <code>list-style-position</code>, and <code>list-style-type</code> longhand properties set the position and appearance of a list item's marker.","id":"list-style","name":"List style","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>loading=\"lazy\"</code> attribute for <code><img></code> and <code><iframe></code> elements blocks loading the external resource until the user scrolls to that element's part of the page.","id":"loading-lazy","name":"Lazy-loading images and iframes","status":{"baseline":"low","baseline_low_date":"2023-12-19","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"121","firefox_android":"121","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>window.queryLocalFonts()</code> method returns an array of locally-installed fonts, each represented by a <code>FontData</code> object.","id":"local-fonts","name":"Local fonts","status":{"baseline":false,"support":{"chrome":"103","edge":"103"}}},{"description_html":"The <code>localStorage</code> and <code>sessionStorage</code> APIs store data as key-value pairs. While <code>localStorage</code> persists across sessions, <code>sessionStorage</code> data is discarded when the page is closed.","id":"localstorage","name":"localStorage and sessionStorage","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"6","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>location</code> global object represents the current page's address. You can use it to get the parts of the address (such as <code>location.hostname</code> or <code>location.pathname</code>) or navigate to another URL.","id":"location","name":"Location","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The logical AND assignment (<code>&&=</code>) and the logical OR assignment (<code>||=</code>) operators short-circuit the respective binary logical operators.","id":"logical-assignments","name":"Logical assignments","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"79","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"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, <code>block-end</code> refers to the bottom. Also known as flow relative.","id":"logical-properties","name":"Logical properties","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"66","firefox_android":"66","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>long-animation-frame</code> performance event type and the <code>PerformanceLongAnimationFrameTiming</code> API provide information about rendering updates that take longer than 50 milliseconds. Also known as LoAFs.","id":"long-animation-frames","name":"Long animation frames","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The <code>longtask</code> performance event type and the <code>PerformanceLongTaskTiming</code> 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.\"","id":"longtasks","name":"Long tasks","status":{"baseline":false,"support":{"chrome":"58","chrome_android":"58","edge":"79"}}},{"description_html":"The <code>Magnetometer</code> API reads magnetic field sensor data from the device's magnetometer.","id":"magnetometer","name":"Magnetometer","status":{"baseline":false,"support":{}}},{"description_html":"The <code><main></code> element represents the dominant content of a document. It is commonly used together with <code><header></code> and <code><footer></code>.","id":"main","name":"<main>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"21","firefox_android":"21","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>ManagedMediaSource</code> API is a <code>MediaSource</code> where the browser manages the memory of source buffers and may evict data if needed.","id":"managed-media-source","name":"Managed media source","status":{"baseline":false,"support":{"safari":"17","safari_ios":"17.1"}}},{"description_html":"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.","id":"manifest","name":"Web app manifest","status":{"baseline":false,"support":{"chrome":"53","chrome_android":"53","edge":"79","firefox_android":"79","safari":"17","safari_ios":"15.4"}}},{"description_html":"Map objects hold key-value pairs and remember the original insertion order of the keys.","id":"map","name":"Map (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"13","firefox_android":"14","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>margin</code> CSS property sets space around an element. It is a shorthand for <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code>.","id":"margin","name":"margin","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>margin-trim</code> CSS property removes the margins of child elements when they meet the edges of the container.","id":"margin-trim","name":"margin-trim","status":{"baseline":false,"support":{"safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code><mark></code> element represents text which is marked or highlighted for reference or notation purposes.","id":"mark","name":"<mark>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>::marker</code> CSS pseudo-element selects list item markers for styling numbers or bullets.","id":"marker","name":"::marker","status":{"baseline":false,"support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"80","firefox_android":"80"}}},{"description_html":"The <code>mask-border</code> CSS property sets how the edges of an element are masked. It is a shorthand for <code>mask-border-outset</code>, <code>mask-border-repeat</code>, <code>mask-border-slice</code>, <code>mask-border-source</code>, and <code>mask-border-width</code>.","id":"mask-border","name":"mask-border","status":{"baseline":false,"support":{"safari":"17.2"}}},{"description_html":"The <code>mask-type</code> CSS property on an SVG <code><mask></code> element sets whether the mask is a <code>luminance</code> or <code>alpha</code> mask.","id":"mask-type","name":"mask-type","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"24","chrome_android":"25","edge":"79","firefox":"35","firefox_android":"35","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>mask</code> CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.","id":"masks","name":"Masks","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"53","firefox_android":"53","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"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.","id":"masonry","name":"Masonry","status":{"baseline":false,"support":{}}},{"description_html":"The <code>window.matchMedia()</code> method checks whether a media query applies to the document.","id":"matchmedia","name":"matchMedia","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"9","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"5.1","safari_ios":"5"}}},{"description_html":"MathML, or the Mathematical Markup Language, describes mathematical notation, such as expressions and formulas. Also known as MathML Core.","id":"mathml","name":"MathML","status":{"baseline":"low","baseline_low_date":"2023-01-12","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>measureUserAgentSpecificMemory()</code> method estimates the memory usage of a web application including all its iframes and workers.","id":"measure-memory","name":"Memory measurement","status":{"baseline":false,"support":{"chrome":"89","chrome_android":"89","edge":"89"}}},{"description_html":"The <code>navigator.mediaDevices.getUserMedia()</code> API requests access to devices that produce audio or video streams, such as microphones or video cameras.","id":"media-capture","name":"Media capture","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"53","chrome_android":"53","edge":"12","firefox":"36","firefox_android":"36","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>:playing</code>, <code>:paused</code>, <code>:seeking</code>, <code>:buffering</code>, <code>:stalled</code>, <code>:muted</code>, and <code>:volume-locked</code> CSS pseudo-classes match <code><audio></code> and <code><video></code> elements based on their state.","id":"media-pseudos","name":"Media element pseudo-classes","status":{"baseline":false,"support":{"safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>@media</code> 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 <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.","id":"media-queries","name":"Media queries","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The range syntax of CSS media queries allows you to use mathematical comparison operators such as <code><</code>, <code>></code>, <code><=</code>, and <code>>=</code> to define a range of values for a media query. For example, <code>(400px < width < 1000px)</code> returns true if the viewport width is between 400px and 1000px.","id":"media-query-range-syntax","name":"Media query range syntax","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"102","firefox_android":"102","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.mediaSession</code> 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.","id":"media-session","name":"Media session","status":{"baseline":false,"support":{"chrome":"73","chrome_android":"57","edge":"79","firefox":"82","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>MediaSource</code> API is a custom data source for media elements commonly used for adaptive streaming. Also known as Media Source Extensions (MSE).","id":"media-source","name":"Media source","status":{"baseline":false,"support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"42","firefox_android":"42","safari":"8"}}},{"description_html":"The <code><menu></code> element represents an unordered list of action items (<code><li></code>), such as a toolbar. It is a semantic alternative to the <code><ul></code> element.","id":"menu","name":"<menu>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>messageerror</code> 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.","id":"messageerror","name":"messageerror","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"65","firefox_android":"65","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code><meta></code> element represents metadata about the page used by the browser or search engines, including description, keywords, and character sets.","id":"meta","name":"<meta>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>name=\"theme-color\"</code> attribute for the <code><meta></code> HTML element sets the preferred color to customize the display of the page or the surrounding browser user interface.","id":"meta-theme-color","name":"<meta name=\"theme-color\">","status":{"baseline":false,"support":{"chrome_android":"92","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>min()</code> and <code>max()</code> CSS functions return the minimum or maximum of the arguments, while <code>clamp()</code> clamps a value to a given range.","id":"min-max-clamp","name":"min(), max(), and clamp()","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"79","chrome_android":"79","edge":"79","firefox":"75","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>min-content</code> and <code>max-content</code> CSS keywords represent the smallest and largest intrinsic sizes of an element.","id":"min-max-content","name":"min-content and max-content","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"66","firefox_android":"66","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>min-width</code>, <code>min-height</code>, <code>max-width</code>, and <code>max-height</code> CSS properties set the minimum and maximum size of an element.","id":"min-max-width-height","name":"Min and max width and height","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"18","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>mix-blend-mode</code> CSS property blends an element's content with its background or parent elements using blend modes like <code>multiply</code>, <code>difference</code>, or <code>color</code>.","id":"mix-blend-mode","name":"mix-blend-mode","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"32","firefox_android":"32","safari":"8","safari_ios":"8"}}},{"description_html":"When a document is loaded over HTTPS, browsers ensure that none of the document's resources are loaded over an insecure protocol. Instead, resources that the document attempts to load over an insecure protocol are either loaded over HTTPS or are blocked.","id":"mixed-content","name":"Mixed content handling","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"≤79","chrome_android":"≤79","edge":"79","firefox":"≤23","firefox_android":"≤23","safari":"≤9.1","safari_ios":"≤9.3"}}},{"description_html":"The <code>:modal</code> pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a <code><dialog></code> element used with <code>showModal()</code>.","id":"modal","name":":modal","status":{"baseline":"low","baseline_low_date":"2022-09-02","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"103","firefox_android":"103","safari":"15.6","safari_ios":"15.6"}}},{"description_html":"The <code>rel=\"modulepreload\"</code> attribute for the <code><link></code> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.","id":"modulepreload","name":"<link rel=\"modulepreload\">","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"66","chrome_android":"66","edge":"≤79","firefox":"115","firefox_android":"115","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>offset</code> CSS property animates an element along a defined motion path.","id":"motion-path","name":"Motion path","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"55","chrome_android":"55","edge":"79","firefox":"72","firefox_android":"79","safari":"16","safari_ios":"16"}}},{"description_html":"Mouse events, such as <code>click</code>, <code>mousedown</code>, or <code>mousemove</code>, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.","id":"mouse-events","name":"Mouse events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Multi-column layout flows an element's content across one or more columns in a single row, without affecting the <code>display</code> property of its children.","id":"multi-column","name":"Multi-column layout","status":{"baseline":"high","baseline_high_date":"2019-09-07","baseline_low_date":"2017-03-07","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"52","firefox_android":"52","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>MutationObserver</code> API watches for changes to the DOM tree and calls a callback function when DOM changes occur.","id":"mutationobserver","name":"MutationObserver","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"14","firefox_android":"14","safari":"7","safari_ios":"7"}}},{"description_html":"Some CSS color values can be referenced by name, such as <code>red</code> or <code>limegreen</code>. They stand in for specific RGB color values.","id":"named-color","name":"Named colors","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>@namespace</code> 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 <code><a></code> element and the SVG <code><a></code> element.","id":"namespace","name":"@namespace","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><nav></code> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.","id":"nav","name":"<nav>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>navigation</code> API initiates, intercepts, or modifies browser navigation actions. Not to be confused with the <code>navigator</code> API.","id":"navigation","name":"Navigation API","status":{"baseline":false,"support":{"chrome":"102","chrome_android":"102","edge":"102"}}},{"description_html":"The <code>navigation</code> performance entry and the <code>PerformanceNavigationTiming</code> API measures navigation events, such as loading time or the number of redirects.","id":"navigation-timing","name":"Navigation timing","status":{"baseline":"high","baseline_high_date":"2024-04-25","baseline_low_date":"2021-10-25","support":{"chrome":"57","chrome_android":"57","edge":"12","firefox":"58","firefox_android":"58","safari":"15","safari_ios":"15.1"}}},{"description_html":"The <code>window.navigator</code> API is a generic global object, under which many other, more interesting APIs are located. It doesn't do anything interesting on its own.","id":"navigator","name":"Navigator","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.","id":"nesting","name":"Nesting","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"117","firefox_android":"117","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>navigator.connection</code> API provides information about the network connection a device is using and fires events when the connection type changes.","id":"network-information","name":"Network Information","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67"}}},{"description_html":"Non-cookie storage access extends the <code>requestStorageAccess()</code> API to let content in cross-site iframes request access to first-party data beyond cookies.","id":"non-cookie-storage-access","name":"Non-cookie storage access","status":{"baseline":false,"support":{"chrome":"125"}}},{"description_html":"The <code>:not()</code> functional pseudo-class matches elements that do not match the selectors in its argument.","id":"not","name":":not()","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"84","firefox_android":"84","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>Notification()</code> constructor shows a message to the user, typically using the notification system of the host operating system.","id":"notifications","name":"Notifications","status":{"baseline":false,"support":{"chrome":"20","edge":"14","firefox":"22","firefox_android":"22","safari":"7"}}},{"description_html":"Notifications via service worker registration's <code>showNotification()</code> method, sent from installed web applications (for example, saved to the Home Screen on Safari for iOS), show a message to the user, typically using the notification system of the host operating system.","id":"notifications-apps","name":"Notifications from service workers and installed apps","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"20","chrome_android":"42","edge":"14","firefox":"22","firefox_android":"22","safari":"7","safari_ios":"16.4"}}},{"description_html":"The <code>:nth-child()</code> and <code>:nth-last-child()</code> CSS functional pseudo-classes match elements based on their index within a list of elements. The <code>:first-child</code> and <code>:last-child</code> pseudo-classes match the first and last element in a list, and the <code>:only-child</code> pseudo-class matches an element with no siblings.","id":"nth-child","name":":nth-child()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>of</code> syntax for the <code>:nth-child()</code> and <code>:nth-last-child()</code> CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.","id":"nth-child-of","name":":nth-child() of <selector>","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>:nth-of-type()</code> and <code>:nth-last-of-type()</code> CSS functional pseudo-classes match elements based on their position among siblings of the same type. The <code>:first-of-type</code>, <code>:last-of-type</code>, and :only-of-type` pseudo-classes match the first, last, and only elements of its type.","id":"nth-of-type","name":":nth-of-type() pseudo-classes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The nullish coalescing (<code>??</code>) and nullish coalescing assignment (<code>??=</code>) operators return (or assign) its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.","id":"nullish-coalescing","name":"Nullish coalescing","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"79","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The number type (and <code>Number</code> object) represents floating-point numbers, such as 42 or -4.201, while the <code>Math</code> API contains mathematical functions and constants. JavaScript can also represent boundless negative and positive values as <code>Infinity</code> or not-a-number as <code>NaN</code> (as in <code>0 * Infinity</code>).","id":"number","name":"Math and numbers","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The numeric factory functions, such as <code>CSS.px()</code> or <code>CSS.kHz()</code>, return a <code>CSSUnitValue</code> representing a CSS number value (as in <code>12px</code> or <code>440kHz</code>).","id":"numeric-factory-functions","name":"Numeric factory functions","status":{"baseline":false,"support":{"chrome":"118","chrome_android":"118","edge":"118","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"To improve readability for numeric literals, underscores (<code>_</code>) can be used as separators. For example, <code>1_050.95</code> is equivalent to <code>1050.95</code>.","id":"numeric-seperators","name":"Numeric separators","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"75","chrome_android":"75","edge":"79","firefox":"70","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"The <code><object></code> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.","id":"object","name":"<object>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>object-fit</code> CSS property sets how images, videos, and other replaced elements are scaled within their container.","id":"object-fit","name":"object-fit","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"32","chrome_android":"32","edge":"79","firefox":"36","firefox_android":"36","safari":"10","safari_ios":"10"}}},{"description_html":"Objects in JavaScript are collections of key-value pairs.","id":"object-object","name":"Object","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>object-position</code> CSS property places images, videos, and other replaced elements within their boxes.","id":"object-position","name":"object-position","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"32","chrome_android":"32","edge":"79","firefox":"36","firefox_android":"36","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>object-view-box</code> CSS property crops and zooms to an inset area of an image.","id":"object-view-box","name":"object-view-box","status":{"baseline":false,"support":{"chrome":"104","chrome_android":"104","edge":"104"}}},{"description_html":"The <code>OES_element_index_uint</code> extension for WebGL 1.0 contexts adds support for <code>gl.UNSIGNED_INT</code> types to <code>WebGLRenderingContext.drawElements()</code>.","id":"oes-element-index-uint","name":"OES_element_index_uint WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"24","chrome_android":"25","edge":"12","firefox":"24","firefox_android":"24","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_fbo_render_mipmap</code> extension for WebGL 1.0 contexts attaches any level of a texture to a framebuffer object.","id":"oes-fbo-render-mipmap","name":"OES_fbo_render_mipmap WebGL extension","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"71","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>OES_standard_derivatives</code> extension for WebGL 1.0 contexts adds the GLSL derivative functions <code>dFdx</code>, <code>dFdy</code>, and <code>fwidth</code>.","id":"oes-standard-derivatives","name":"OES_standard_derivatives WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"10","firefox_android":"10","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_float</code> extension for WebGL 1.0 contexts adds floating-point pixel types for textures.","id":"oes-texture-float","name":"OES_texture_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_float_linear</code> extension for WebGL 1.0 and 2.0 contexts adds linear filtering with floating-point pixel types for textures.","id":"oes-texture-float-linear","name":"OES_texture_float_linear WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"29","chrome_android":"29","edge":"12","firefox":"24","firefox_android":"24","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_half_float</code> extension for WebGL 1.0 contexts adds texture formats with 16-bit (also known as half float) and 32-bit floating-point components.","id":"oes-texture-half-float","name":"OES_texture_half_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2019-02-02","baseline_low_date":"2016-08-02","support":{"chrome":"27","chrome_android":"27","edge":"14","firefox":"29","firefox_android":"29","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_half_float_linear</code> extension for WebGL 1.0 contexts adds linear filtering with half floating-point pixel types for textures.","id":"oes-texture-half-float-linear","name":"OES_texture_half_float_linear WebGL extension","status":{"baseline":false,"support":{"chrome":"29","chrome_android":"29","edge":"14","firefox":"30","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_vertex_array_object</code> 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.","id":"oes-vertex-array-object","name":"OES_vertex_array_object WebGL extension","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"24","chrome_android":"25","edge":"17","firefox":"25","firefox_android":"25","safari":"8","safari_ios":"9"}}},{"description_html":"The <code>OfflineAudioContext</code> API represents an audio processing graph that writes to an <code>AudioBuffer</code> instead of an output device.","id":"offline-audio-context","name":"OfflineAudioContext","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"35","chrome_android":"35","edge":"12","firefox":"25","firefox_android":"25","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>OffscreenCanvas</code> 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.","id":"offscreen-canvas","name":"Offscreen canvas","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"105","firefox_android":"105","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"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 <code>color()</code>, <code>oklab()</code>, and <code>oklch()</code> functions.","id":"oklab","name":"Oklab and Oklch","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>navigator.onLine</code> property returns a Boolean for whether the browser is connected to some network (though not necessarily the internet). The <code>online</code> and <code>offline</code> events fire when the connection state changes.","id":"online","name":"Online status","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>opacity</code> CSS property sets the transparency of an element.","id":"opacity","name":"opacity","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The <code>fill-opacity</code>, and <code>stroke-opacity</code> SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.","id":"opacity-svg","name":"Opacity (SVG)","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","firefox":"1","firefox_android":"4","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>:open</code> and <code>:closed</code> CSS pseudo-classes match elements that have open and closed states, like <code><details</code>, <code><dialog></code>, or <code><select></code>, based on their state.","id":"open-closed","name":"Open and closed selectors","status":{"baseline":false,"support":{}}},{"description_html":"Omit the the binding parameter of a <code>catch</code> clause when you don't need information about the exception in a <code>try ... catch</code> statement.","id":"optional-catch-binding","name":"Optional catch binding","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"58","firefox_android":"58","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>AbsoluteOrientationSensor</code> and <code>RelativeOrientationSensor</code> 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.","id":"orientation-sensor","name":"Orientation Sensor","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67","edge":"79"}}},{"description_html":"The <code>navigator.storage.getDirectory()</code> method returns a <code>FileSystemDirectoryHandle</code> 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.","id":"origin-private-file-system","name":"Origin private file system","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"108","chrome_android":"109","edge":"108","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>outline</code> CSS shorthand sets the color, style, and width of a line around an element, outside of the border.","id":"outline","name":"outline","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"88","firefox_android":"88","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>outline-color</code>, <code>outline-style</code>, and <code>outline-width</code> and <code>outline-offset</code> CSS properties style a line around an element, outside of the border.","id":"outlines","name":"Outlines","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"1","chrome_android":"18","edge":"15","firefox":"1.5","firefox_android":"4","safari":"1.2","safari_ios":"1"}}},{"description_html":"The <code><output></code> element represents the result of a calculation, user action, or form entry.","id":"output","name":"<output>","status":{"baseline":"high","baseline_high_date":"≤2021-04-02","baseline_low_date":"≤2018-10-02","support":{"chrome":"10","chrome_android":"18","edge":"≤18","firefox":"4","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>overflow-block</code> and <code>overflow-inline</code> 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.","id":"overflow","name":"Overflow media queries","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"66","firefox_android":"66","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>overflow-anchor</code> 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.","id":"overflow-anchor","name":"overflow-anchor","status":{"baseline":false,"support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"66","firefox_android":"66"}}},{"description_html":"The <code>overflow-clip-margin</code> CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as <code>overflow: clip</code>.","id":"overflow-clip-margin","name":"overflow-clip-margin","status":{"baseline":false,"support":{}}},{"description_html":"The <code>overflow</code> CSS property sets the behavior for when content doesn't fit in an element.","id":"overflow-shorthand","name":"overflow","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"90","chrome_android":"90","edge":"90","firefox":"81","firefox_android":"81","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>overflow-wrap</code> 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 <code>word-wrap</code>.","id":"overflow-wrap","name":"overflow-wrap","status":{"baseline":"high","baseline_high_date":"2021-04-02","baseline_low_date":"2018-10-02","support":{"chrome":"23","chrome_android":"25","edge":"18","firefox":"49","firefox_android":"49","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>overlay</code> CSS property, used as an <code>allow-discrete</code> CSS transition, prevents a top layer element, such as a popover or a <code><dialog></code>, from being removed from the top layer before it has finished animating. You can't set the value of the <code>overlay</code> property; only use it as transition property.","id":"overlay","name":"overlay","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117"}}},{"description_html":"The <code>overscroll-behavior</code> CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.","id":"overscroll-behavior","name":"overscroll-behavior","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"63","chrome_android":"63","edge":"18","firefox":"59","firefox_android":"59","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>OVR_multiview2</code> extension for WebGL 2.0 contexts renders into multiple views simultaneously. This especially useful for virtual reality (VR) and WebXR.","id":"ovr-multiview2","name":"OVR_multiview2 WebGL extension","status":{"baseline":false,"support":{"chrome_android":"93"}}},{"description_html":"The <code><p></code> element represents a paragraph of text.","id":"p","name":"<p>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>padding</code> CSS property sets space between an element's edge and its contents. It is a shorthand for <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code>.","id":"padding","name":"padding","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>break-after</code>, <code>break-before</code>, <code>break-inside</code> CSS properties (along with <code>page-break-</code> aliases) control where printed pages start and end. Also known as pagination or page breaking.","id":"page-breaks","name":"Page breaks","status":{"baseline":false,"support":{"chrome":"1","chrome_android":"18","edge":"12"}}},{"description_html":"The page lifecycle API helps you safely handle page suspensions or discards from memory. The <code>freeze</code> and <code>resume</code> events fire when the browser suspends or resumes a page from memory while the <code>document.wasDiscarded</code> property reports whether the page was reloaded after being dropped.","id":"page-lifecycle","name":"Page lifecycle","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79"}}},{"description_html":"The <code>page-orientation</code> CSS property sets the rotation of a page after pagination. This allows pages with the same <code>size</code> declaration to display with different orientations.","id":"page-orientation","name":"page-orientation","status":{"baseline":false,"support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"122","firefox_android":"122"}}},{"description_html":"The <code>:first</code>, <code>:left</code>, and <code>:right</code> pseudo-classes select pages based on their position in sequence after pagination. They're often used with the <code>page</code> CSS property, to choose a print layout defined by the <code>@page</code> rule.","id":"page-selectors","name":"Page selectors","status":{"baseline":false,"support":{"chrome":"85","chrome_android":"85","edge":"85","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>@page</code> CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.","id":"page-setup","name":"Page setup","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"15","chrome_android":"18","edge":"79","firefox":"95","firefox_android":"95","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>pageshow</code> and <code>pagehide</code> transition events fire when a document loads or unloads due to a navigation, such as clicking on a link on a page or the back button in a browser.","id":"page-transition-events","name":"Page transition events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"5","safari_ios":"4"}}},{"description_html":"The <code>document.visibilityState</code> and <code>document.hidden</code> properties tell you whether the page is visible to the user (for example, it's not minimized or in a background tab).","id":"page-visibility","name":"Page visibility","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"33","chrome_android":"33","edge":"12","firefox":"18","firefox_android":"18","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>visibility-state</code> performance entry and the <code>VisibilityStateEntry</code> 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.","id":"page-visibility-state","name":"Page visibility state","status":{"baseline":false,"support":{"chrome":"115","chrome_android":"115","edge":"115"}}},{"description_html":"The <code>paint()</code> CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.","id":"paint","name":"paint()","status":{"baseline":false,"support":{"chrome":"65","chrome_android":"65","edge":"79"}}},{"description_html":"The <code>paint-order</code> CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, <code>paint-order: markers stroke fill;</code> draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.","id":"paint-order","name":"paint-order","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"≤66","firefox_android":"≤66","safari":"≤12"}}},{"description_html":"The <code>paint</code> performance entry and the <code>PerformancePaintTiming</code> 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.","id":"paint-timing","name":"Paint timing","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"79"}}},{"description_html":"The <code>Document.parseHTMLUnsafe()</code> static method parses HTML into a DOM tree, while the <code>setHTMLUnsafe()</code> method of <code>Element</code> and <code>ShadowRoot</code> parses and inserts HTML into an existing tree. No sanitization applies to these methods, so never call them with user-provided HTML strings.","id":"parse-html-unsafe","name":"Unsanitized HTML parsing methods","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"128","firefox_android":"128","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"Partitioned cookies allow you to opt a cookie into partitioned storage, with a separate cookie jar per top-level site. Also known as Cookies Having Independent Partitioned State or CHIPS.","id":"partitioned-cookies","name":"Partitioned cookies","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114"}}},{"description_html":"The <code>PasswordCredential</code> API represents a username and password.","id":"password-credentials","name":"Password credentials","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"79"}}},{"description_html":"The <code>path()</code> CSS shape function creates a shape for <code>clip-path</code>, <code>shape-outside</code>, and the SVG attribute <code>d</code>.","id":"path-shape","name":"path()","status":{"baseline":false,"support":{}}},{"description_html":"The payment handler API registers a web application as a payment handler and responds to payment requests in the browser's user interface, rather than redirecting users to a separate site to complete a payment.","id":"payment-handler","name":"Payment handler","status":{"baseline":false,"support":{"chrome":"70","chrome_android":"70","edge":"79"}}},{"description_html":"The <code>PaymentRequest</code> API prompts the user to make a payment through the browser's user interface.","id":"payment-request","name":"Payment request","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"53","edge":"15","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>navigator.pdfViewerEnabled</code> read-only property returns a Boolean for whether the browser navigates to and shows a PDF in the browser window or downloads the PDF.","id":"pdf-viewer","name":"pdfViewerEnabled","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"99","firefox_android":"99","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>performance</code> global object and the <code>Performance</code> API provide access to performance-related information for the current execution context.","id":"performance","name":"Performance","status":{"baseline":"high","baseline_high_date":"2018-03-16","baseline_low_date":"2015-09-16","support":{"chrome":"6","chrome_android":"18","edge":"12","firefox":"7","firefox_android":"7","safari":"8","safari_ios":"9"}}},{"description_html":"The <code>navigator.permissions</code> API checks whether a permission, such as access to geolocation data, has been granted.","id":"permissions","name":"Permissions","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"44","chrome_android":"44","edge":"79","firefox":"46","firefox_android":"46","safari":"16","safari_ios":"16"}}},{"description_html":"The physical CSS properties, <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>, set the inset position of an element relative to the corresponding side of a container determined by the element's <code>position</code> property.","id":"physical-properties","name":"Physical properties","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><picture></code> element is used for art direction in responsive images, where a different image is displayed based on the <code><source></code> element.","id":"picture","name":"<picture>","status":{"baseline":"high","baseline_high_date":"2018-09-21","baseline_low_date":"2016-03-21","support":{"chrome":"38","chrome_android":"38","edge":"13","firefox":"38","firefox_android":"38","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video.","id":"picture-in-picture","name":"Picture-in-picture (video)","status":{"baseline":false,"support":{"chrome":"69","chrome_android":"105","edge":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>ping</code> attribute for <code><a></code> elements sets a URL to send a POST request to when the <code><a></code> is clicked. This is typically used for outbound link reporting.","id":"ping","name":"ping","status":{"baseline":false,"support":{"chrome":"12","chrome_android":"18","edge":"17","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>::placeholder</code> CSS pseudo-element selects help text in <code><input></code> and <code><textarea></code> elements when no value is set.","id":"placeholder","name":"::placeholder","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"57","chrome_android":"57","edge":"79","firefox":"51","firefox_android":"51","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>:placeholder-shown</code> CSS pseudo-element selects <code><input></code> and <code><textarea></code> elements when no value is set and the element's <code>placeholder</code> attribute is not empty. Not to be confused with <code>::placeholder</code>, which selects the placeholder text itself.","id":"placeholder-shown","name":":placeholder-shown","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"51","firefox_android":"51","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>pointer-events</code> CSS property sets whether a user can interact with an element using a mouse, touch, or other pointing input device.","id":"pointer-events","name":"pointer-events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"Pointer events, such as <code>pointerdown</code>, and the <code>PointerEvent</code> API, represent general pointing inputs, from a wide range of devices, such as a mouse, pen or stylus, or touch with one or more fingers. Not to be confused with the <code>pointer-events</code> CSS property.","id":"pointer-events-api","name":"Pointer Events","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"55","chrome_android":"55","edge":"12","firefox":"59","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"Provides access to raw mouse movement by locking the target of mouse events to a single element and hiding the mouse cursor.","id":"pointer-lock","name":"Pointer lock","status":{"baseline":false,"support":{"chrome":"37","chrome_android":"37","edge":"13","firefox":"50","firefox_android":"50","safari":"10.1"}}},{"description_html":"The <code>popover</code> HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the <code>showPopover()</code> method.","id":"popover","name":"Popover","status":{"baseline":false,"support":{"chrome":"116","chrome_android":"116","edge":"116","firefox":"125","firefox_android":"125","safari":"17"}}},{"description_html":"The <code>position</code> CSS property sets the origin position of an element to an element, the element's scrollport, or the viewport.","id":"position","name":"Position","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>postMessage()</code> global method sends cross-origin messages to windows and workers, including popups and iframes. Also known as cross-document messaging.","id":"postmessage","name":"postMessage","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code><pre></code> element represents a block element of preformatted text that is presented exactly as written, including all white space.","id":"pre","name":"<pre>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>prefers-color-scheme</code> CSS media query sets styles based on the requested color scheme, light or dark.","id":"prefers-color-scheme","name":"prefers-color-scheme media query","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"67","firefox_android":"67","safari":"12.1","safari_ios":"13"}}},{"description_html":"The <code>prefers-contrast</code> CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors.","id":"prefers-contrast","name":"prefers-contrast media query","status":{"baseline":"high","baseline_high_date":"2024-11-30","baseline_low_date":"2022-05-31","support":{"chrome":"96","chrome_android":"96","edge":"96","firefox":"101","firefox_android":"101","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>prefers-reduced-data</code> 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.","id":"prefers-reduced-data","name":"prefers-reduced-data media query","status":{"baseline":false,"support":{}}},{"description_html":"The <code>prefers-reduced-motion</code> 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.","id":"prefers-reduced-motion","name":"prefers-reduced-motion media query","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"74","chrome_android":"74","edge":"79","firefox":"63","firefox_android":"64","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>prefers-reduced-transparency</code> 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.","id":"prefers-reduced-transparency","name":"prefers-reduced-transparency media query","status":{"baseline":false,"support":{"chrome":"119","chrome_android":"119","edge":"119"}}},{"description_html":"The <code>imagesrcset</code> and <code>imagesizes</code> attributes with the <code>rel=\"preload\"</code> attribute for the <code><link></code> HTML element starts fetching responsive images before they're found in the body of the document.","id":"preloading-responsive-images","name":"Preloading responsive images","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"78","firefox_android":"79","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The Presentation API shows or controls content on another display, such as a network-connected TV or projector.","id":"presentation-api","name":"Presentation API","status":{"baseline":false,"support":{"chrome":"47","chrome_android":"47","edge":"79"}}},{"description_html":"The <code>preservesPitch</code> property for <code><audio></code> or <code><video></code> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.","id":"preserves-pitch","name":"preservesPitch","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"101","firefox_android":"101","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>window.print()</code> method opens the browser's print dialog.","id":"print","name":"window.print()","status":{"baseline":"low","baseline_low_date":"2023-06-06","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"114","safari":"1.1","safari_ios":"1"}}},{"description_html":"The <code>print-color-adjust</code> 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.","id":"print-color-adjust","name":"Print color adjust","status":{"baseline":false,"support":{"firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"An alternative to <code>@media print</code> queries, the <code>beforeprint</code> and <code>afterprint</code> events allow you to change the page for printing and and restore the page after printing.","id":"print-events","name":"Print events","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"63","chrome_android":"63","edge":"12","firefox":"6","firefox_android":"6","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>attributionsourceid</code> and <code>attributiondestination</code> attributes for <code><a></code> elements measure clicks across websites without associating a click to a specific session. Not to be confused with attribution reporting. Also known as PCM.","id":"private-click-measurement","name":"Private click measurement","status":{"baseline":false,"support":{"safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>Access-Control-Request-Private-Network: true</code> and <code>Access-Control-Allow-Private-Network: true</code> HTTP request and response headers establish permission for websites to make requests to internal networks, such as to routers.","id":"private-network-access","name":"Private network access","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124"}}},{"description_html":"The <code>Profiler</code> API records data about the execution of a page, which you can send to a server for later analysis. Also known as self-profiling.","id":"profiler","name":"Profiler","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"94"}}},{"description_html":"The <code><progress></code> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","id":"progress","name":"<progress>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"6","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"6","safari_ios":"7"}}},{"description_html":"A promise represents an asynchronous operation which eventually succeeds or fails.","id":"promise","name":"Promise (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"32","chrome_android":"32","edge":"12","firefox":"29","firefox_android":"29","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>Promise.allSettled()</code> static method waits for an array of promises to settle (resolve or reject).","id":"promise-allsettled","name":"Promise.allSettled()","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"71","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>Promise.any()</code> 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 <code>AggregateError</code> when all of the promises have rejected.","id":"promise-any","name":"Promise.any()","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"79","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The promise <code>finally()</code> method executes a function when the promise settles (resolves or rejects).","id":"promise-finally","name":"Promise finally()","status":{"baseline":"high","baseline_high_date":"2021-04-02","baseline_low_date":"2018-10-02","support":{"chrome":"63","chrome_android":"63","edge":"18","firefox":"58","firefox_android":"58","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>Promise.try()</code> static method returns a promise that takes a callback of any kind (returns or throws, synchronously or asynchronously) and wraps its result in a <code>Promise</code>.","id":"promise-try","name":"Promise.try()","status":{"baseline":false,"support":{"chrome":"128","chrome_android":"128","edge":"128","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>Promise.withResolvers()</code> static method is an alternative to the <code>Promise()</code> constructor that returns both the promise and resolution functions. You can use this to access <code>resolve</code> and <code>reject</code> outside the scope of the executor function.","id":"promise-withresolvers","name":"Promise.withResolvers()","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"121","firefox_android":"121","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>Proxy</code> and <code>Reflect</code> JavaScript built-ins intercept and define custom behavior for fundamental language operations (such as property lookup, assignment, enumeration, or function invocation).","id":"proxy-reflect","name":"Proxy and Reflect","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"49","chrome_android":"49","edge":"12","firefox":"18","firefox_android":"18","safari":"10","safari_ios":"10"}}},{"description_html":"The Push API subscribes to and receives server-initiated messages. Subscribers receive pushed messages in the background, even after periods inactive or offline.","id":"push","name":"Push messages","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"50","chrome_android":"50","edge":"17","firefox":"44","firefox_android":"48","safari":"16","safari_ios":"16.4"}}},{"description_html":"The <code><q></code> element represents a short inline quotation.","id":"q","name":"<q>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>Q</code> CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. <code>1Q</code> is equivalent to 1/40 of 1 centimeter.","id":"q-unit","name":"Q unit","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"49","firefox_android":"49","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>quotes</code> CSS property sets the quotation marks inserted via the <code>content</code> CSS property or <code><q></code> element.","id":"quotes","name":"Quotes","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"70","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>rcap</code> CSS length unit is a font-relative length equal to the value of the <code>cap</code> unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.","id":"rcap","name":"rcap unit","status":{"baseline":false,"support":{"chrome":"118","chrome_android":"118","edge":"118","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>rch</code> CSS length unit is a font-relative length equal to the value of the <code>ch</code> unit on the root element. <code>ch</code> length is based on the width of the zero (0) character.","id":"rch","name":"rch unit","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>:read-only</code> and <code>:read-write</code> CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, <code>:read-only</code> matches <code><input></code> and <code><textarea></code> elements with the <code>readonly</code> attribute.","id":"read-write-pseudos","name":":read-only and :read-write","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"1","chrome_android":"18","edge":"13","firefox":"78","firefox_android":"79","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>reading-flow</code> CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation.","id":"reading-flow","name":"reading-flow","status":{"baseline":false,"support":{}}},{"description_html":"The <code>Referrer-Policy</code> HTTP header and <code>referrerpolicy</code> HTML attributes control whether requests have the <code>Referer</code> header and what information the header contains.","id":"referrer-policy","name":"Referrer policy","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"87","firefox_android":"87","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>RegExp</code> object represents a regular expression, a notation for matching text patterns.","id":"regexp","name":"Regular expressions","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>RegExp.escape()</code> static method takes a string and replaces any characters that are potentially special characters of a regular expression with equivalent escape sequences. For example, <code>RegExp.escape(\"[abc]\")</code> returns <code>\"\\\\[abc\\\\]\"</code>.","id":"regexp-escape","name":"RegExp.escape()","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>CSS.registerProperty()</code> static method and the <code>@property</code> CSS at-rule register custom properties for which types and behaviors can be defined.","id":"registered-custom-properties","name":"Registered custom properties","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"128","firefox_android":"128","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.registerProtocolHandler()</code> 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 <code>mailto:</code> URLs or a VoIP site to open <code>tel:</code> URLs.","id":"registerprotocolhandler","name":"registerProtocolHandler","status":{"baseline":false,"support":{"chrome":"13","edge":"79","firefox":"2","firefox_android":"4"}}},{"description_html":"The <code>from</code> keyword for color functions (<code>color()</code>, <code>hsl()</code>, <code>oklch()</code>, 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).","id":"relative-color","name":"Relative colors","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"128","firefox_android":"128","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>position: relative</code> CSS declaration offsets the position of an element relative to its position in the normal flow.","id":"relative-positioning","name":"Relative positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>rem</code> 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 <code>16px</code>.","id":"rem","name":"rem","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"5","safari_ios":"4"}}},{"description_html":"The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities.","id":"remote-playback","name":"Remote playback","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"56","edge":"121","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The Reporting API makes consistent reports about Content Security Policy violations, Permissions-Policy violations, deprecated feature usage, crashes, and other web platform features available to your server endpoints.","id":"reporting","name":"Reporting API","status":{"baseline":false,"support":{"chrome":"96","chrome_android":"96","edge":"96"}}},{"description_html":"The <code>requestAnimationFrame()</code> method schedules a function that runs before the next repaint. You can use it to animate content with JavaScript.","id":"request-animation-frame","name":"requestAnimationFrame()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"24","chrome_android":"25","edge":"12","firefox":"23","firefox_android":"23","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>requestAnimationFrame()</code> method in workers schedules a function that runs before the next repaint. Together with offscreen canvas, you can animate content from a worker.","id":"request-animation-frame-workers","name":"requestAnimationFrame() in workers","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"99","firefox_android":"99","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>requestVideoFrameCallback()</code> method for <code><video></code> schedules a function that runs with the next video frame. It is similar to <code>requestAnimationFrame()</code>, but for video.","id":"request-video-frame-callback","name":"requestVideoFrameCallback()","status":{"baseline":"low","baseline_low_date":"2024-10-29","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"132","firefox_android":"132","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>requestIdleCallback()</code> 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.","id":"requestidlecallback","name":"requestIdleCallback()","status":{"baseline":false,"support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"55","firefox_android":"55"}}},{"description_html":"The <code>resize()</code> method of an <code>ArrayBuffer</code> and the <code>grow()</code> method of a <code>SharedArrayBuffer</code>, constructed with the <code>maxByteLength</code> option, changes the size of the buffer in place.","id":"resizable-buffers","name":"Resizable buffers","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"128","firefox_android":"128","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>resize</code> CSS property sets whether an element can be resized by the user, and on which axes.","id":"resize","name":"resize (CSS property)","status":{"baseline":false,"support":{"chrome":"4","chrome_android":"18","edge":"79","firefox":"5","firefox_android":"5","safari":"4"}}},{"description_html":"The <code>ResizeObserver</code> API observes and reacts to changes in the size of DOM elements.","id":"resize-observer","name":"Resize observer","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"64","chrome_android":"64","edge":"79","firefox":"69","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>resolution</code> CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.","id":"resolution","name":"resolution media query","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"68","chrome_android":"68","edge":"79","firefox":"62","firefox_android":"62","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>-webkit-device-pixel-ratio</code>, <code>-webkit-min-device-pixel-ratio</code>, and <code>-webkit-max-device-pixel-ratio</code> CSS media queries are standardized compatibility alternatives to <code>resolution</code> media queries.","id":"resolution-compat","name":"resolution media query (compatibility prefixes)","status":{"baseline":"high","baseline_high_date":"2021-04-23","baseline_low_date":"2018-10-23","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"63","firefox_android":"63","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>decodedBodySize</code>, <code>encodedBodySize</code>, and <code>transferSize</code> properties of the <code>PerformanceResourceTiming</code> API reports the size of resources loaded.","id":"resource-size","name":"Resource size","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"54","chrome_android":"54","edge":"17","firefox":"45","firefox_android":"45","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"<code>PerformanceResourceTiming</code> 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.","id":"resource-timing","name":"Resource timing (initial support)","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"29","chrome_android":"29","edge":"12","firefox":"35","firefox_android":"35","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>revert</code> CSS keyword resets any property to its previous default, provided by either the user or browser stylesheets. For example, setting <code>display: revert</code> on a <code><div></code> will likely result in <code>display: block</code>, the browser default style. This is often confused with <code>initial</code>.","id":"revert-value","name":"revert","status":{"baseline":"high","baseline_high_date":"2023-01-27","baseline_low_date":"2020-07-27","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"67","firefox_android":"67","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>rex</code> CSS length unit is a font-relative length that is equal to the x-height of the root element.","id":"rex","name":"rex unit","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>rgb()</code>, rgba()<code>, and hexadecimal (as in </code>#004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.","id":"rgb","name":"RGB","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"52","firefox_android":"52","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>line-height-step</code> 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.","id":"rhythmic-sizing","name":"Rhythmic sizing","status":{"baseline":false,"support":{}}},{"description_html":"The <code>ric</code> CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.","id":"ric","name":"ric unit","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>rlh</code> CSS length unit is a font-relative length relative to the line height of root element.","id":"rlh","name":"rlh unit","status":{"baseline":"low","baseline_low_date":"2023-11-21","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>:root</code> pseudo-class matches the root element of the document, usually the <code><html></code> element.","id":"root","name":":root","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>round()</code>, <code>mod()</code>, and <code>rem()</code> CSS functions compute rounded values and the remainder after division.","id":"round-mod-rem","name":"round(), mod(), and rem()","status":{"baseline":"low","baseline_low_date":"2024-05-17","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code><ruby></code> element produces small annotations that are rendered with its base text.","id":"ruby","name":"<ruby>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"38","firefox_android":"38","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>ruby-align</code> CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.","id":"ruby-align","name":"ruby-align","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"128","chrome_android":"128","edge":"128","firefox":"38","firefox_android":"38","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>ruby-overhang</code> CSS property sets whether ruby annotations may overlap adjacent text.","id":"ruby-overhang","name":"ruby-overhang","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>ruby-position</code> 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.","id":"ruby-position","name":"ruby-position","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"38","firefox_android":"38","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code><s></code> HTML element indicates text that is no longer relevant or accurate, styling text as strikethrough by default.","id":"s","name":"<s>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>safe-area-inset-</code> CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, <code>top:\\ env(safe-area-inset-top);</code> positions the top of an element below the notch on an iPhone.","id":"safe-area-inset","name":"Safe area inset environment variables","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"65","firefox_android":"65","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code><samp></code> element represents a sample or quoted output from a computer program. Styled in a monospace font by default.","id":"samp","name":"<samp>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"Browsers send the <code>Save-Data</code> HTTP request header when the user turns on a data-saving mode. It is a hint to reduce data sent to the browser. Servers should respond with alternative content, such as smaller images and videos, or different markup and styling.","id":"savedata","name":"Save-Data","status":{"baseline":false,"support":{"chrome":"65","chrome_android":"65","edge":"79"}}},{"description_html":"The <code>scheduler</code> API provides a way to prioritize all tasks belonging to an application.","id":"scheduler","name":"Scheduler API","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"The <code>@scope</code> CSS at-rule sets the scope for a group of rules.","id":"scope","name":"@scope","status":{"baseline":false,"support":{"chrome":"118","chrome_android":"118","edge":"118","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>:scope</code> CSS pseudo-class matches the scoping root, for instance the element that <code>querySelector()</code> is called on, or the root of a DOM subtree specified with <code>@scope</code>.","id":"scope-pseudo","name":":scope (pseudo-class)","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"27","chrome_android":"27","edge":"79","firefox":"32","firefox_android":"32","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>window.screen</code> property contains information about the screen of the output device that the referenced <code>window</code> is being rendered on.","id":"screen","name":"Screen","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>navigator.mediaDevices.getDisplayMedia()</code> method asks the user to choose a screen or portion of a screen (such as a window) to capture as a media stream.","id":"screen-capture","name":"Screen capture","status":{"baseline":false,"support":{"chrome":"72","edge":"79","firefox":"33","safari":"13"}}},{"description_html":"The <code>screen.orientation</code> 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.","id":"screen-orientation","name":"Screen orientation","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"38","chrome_android":"39","edge":"79","firefox":"43","firefox_android":"43","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>screen.orientation.lock()</code> 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.","id":"screen-orientation-lock","name":"Screen orientation lock","status":{"baseline":false,"support":{"chrome_android":"38"}}},{"description_html":"The <code>navigator.wakeLock.request(\"screen\")</code> API prevents the device's screen from dimming or being turned off.","id":"screen-wake-lock","name":"Screen wake lock","status":{"baseline":false,"support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"126","firefox_android":"126","safari":"16.4"}}},{"description_html":"The <code><script></code> element contains or loads data or executable code. This is typically used to load JavaScript code. The <code><noscript></code> element represents alternative content to show when scripting is not allowed.","id":"script","name":"<script> and <noscript>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>scripting</code> CSS media query sets styles based on whether scripting such as JavaScript is available. Values are <code>enabled</code> if scripting is available, <code>initial-only</code> if scripting is only available on page load (for example, printed content), or <code>none</code>.","id":"scripting","name":"scripting media query","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"113","firefox_android":"113","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>scroll-behavior</code> CSS property controls whether scrolling is smooth or snaps, for scroll actions not performed by the user such as those triggered by navigation.","id":"scroll-behavior","name":"scroll-behavior","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>animation-timeline</code>, <code>scroll-timeline</code>, and <code>view-timeline</code> CSS properties advance animations based on the user's scroll position.","id":"scroll-driven-animations","name":"Scroll-driven animations","status":{"baseline":false,"support":{"chrome":"115","chrome_android":"115","edge":"115"}}},{"description_html":"The <code>scroll()</code> and <code>scrollBy()</code> methods change the scroll position of overflow content within an element. Similar to setting <code>scrollTop</code> and <code>scrollLeft</code> properties, but with options setting whether the scroll should animate smoothly or jump. Note that <code>scrollTo()</code> is an alias for <code>scroll()</code>.","id":"scroll-elements","name":"Scroll methods on elements","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>scrollIntoView()</code> method scrolls an element's ancestor containers such that the element is visible to the user.","id":"scroll-into-view","name":"scrollIntoView()","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"14","safari_ios":"14"}}},{"description_html":"CSS scroll snap controls the panning and scrolling behavior within a scroll container.","id":"scroll-snap","name":"Scroll snap","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"68","firefox_android":"68","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>scrollsnapchanging</code> and <code>scrollsnapchange</code> events fire when a scroll gesture changes the selected scroll snap target.","id":"scroll-snap-events","name":"Scroll snap events","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"Text fragments are URL fragments on the form <code>#:~:text=snippet</code> 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.","id":"scroll-to-text-fragment","name":"Scroll to text fragment","status":{"baseline":"low","baseline_low_date":"2024-10-01","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"131","firefox_android":"131","safari":"16.1","safari_ios":"16.1"}}},{"description_html":"The <code>scrollbar-color</code> CSS property sets the color of the scrollbar track and thumb.","id":"scrollbar-color","name":"scrollbar-color","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"64","firefox_android":"64"}}},{"description_html":"The <code>scrollbar-gutter</code> CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.","id":"scrollbar-gutter","name":"scrollbar-gutter","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"97","firefox_android":"97","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>scrollbar-width</code> CSS property sets the width of the scrollbar.","id":"scrollbar-width","name":"scrollbar-width","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"64","firefox_android":"64","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>scrollend</code> event fires when an element or document has finished scrolling.","id":"scrollend","name":"scrollend","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"109","firefox_android":"109"}}},{"description_html":"The <code><search></code> HTML element is a container that represents the parts of the web page with search functionality.","id":"search","name":"<search>","status":{"baseline":"low","baseline_low_date":"2023-10-13","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"118","firefox_android":"118","safari":"17","safari_ios":"17"}}},{"description_html":"The <code><input type=\"search\"></code> HTML element represents a text field for search queries.","id":"search-input-type","name":"<input type=\"search\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><section></code> element is a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.","id":"section","name":"<section>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><select></code> element provides a menu of options for a user to pick from, typically rendered as a dropdown list.","id":"select","name":"<select>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>::selection</code> CSS pseudo-element selects text a user has highlighted.","id":"selection","name":"::selection","status":{"baseline":false,"support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"62","firefox_android":"62","safari":"1.1"}}},{"description_html":"The Selection API controls and modifies user text selections within the page.","id":"selection-api","name":"Selection","status":{"baseline":"high","baseline_high_date":"2019-09-07","baseline_low_date":"2017-03-07","support":{"chrome":"11","chrome_android":"18","edge":"12","firefox":"52","firefox_android":"52","safari":"5.1","safari_ios":"5"}}},{"description_html":"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.","id":"selectors","name":"Selectors (core)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>navigator.serial</code> API communicates with devices over serial ports, such as microcontrollers.","id":"serial","name":"Web serial","status":{"baseline":false,"support":{"chrome":"89","edge":"89"}}},{"description_html":"The <code>DOMException</code>, <code>Error</code>, <code>EvalError</code>, <code>RangeError</code>, <code>ReferenceError</code>, <code>SyntaxError</code>, <code>TypeError</code>, and <code>URIError</code> objects are serializable. You can call <code>structuredClone()</code> on an error object or pass it to a worker using <code>postMessage()</code>.","id":"serializable-errors","name":"Serializable errors","status":{"baseline":false,"support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"103","firefox_android":"103"}}},{"description_html":"The <code>EventSource</code> API creates a connection to a server and listens to a stream of events sent by the server.","id":"server-sent-events","name":"Server-sent events","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"6","chrome_android":"18","edge":"79","firefox":"6","firefox_android":"45","safari":"5","safari_ios":"5"}}},{"description_html":"The <code>serverTiming</code> property of the <code>PerformanceResourceTiming</code> API contains server timing information about network requests.","id":"server-timing","name":"Server timing","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"61","firefox_android":"61","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The service worker of a website is a script that runs in its own thread and which acts as local proxy that intercepts network requests from the website. Use a service worker to implement advanced caching strategies, offline support, background tasks, or push notification support on your website.","id":"service-workers","name":"Service workers","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"45","chrome_android":"45","edge":"17","firefox":"44","firefox_android":"44","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"Set objects store unique values of any type.","id":"set","name":"Set (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"13","firefox_android":"14","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>difference()</code>, <code>intersection()</code>, <code>isDisjointFrom()</code>, <code>isSubsetOf()</code>, <code>isSupersetOf()</code>, <code>symmetricDifference()</code>, and <code>union()</code> methods of the JavaScript <code>Set</code> object performs operations between two sets.","id":"set-methods","name":"Set methods","status":{"baseline":"low","baseline_low_date":"2024-06-11","support":{"chrome":"122","chrome_android":"122","edge":"122","firefox":"127","firefox_android":"127","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>setInterval()</code> global function repeatedly executes provided code on a given delay, and the accompanying <code>clearInterval()</code> cancels the interval.","id":"setinterval","name":"setInterval","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>setTimeout()</code> global function executes provided code after a given duration of time, and the accompanying <code>clearTimeout()</code> cancels the timer.","id":"settimeout","name":"setTimeout","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"1"}}},{"description_html":"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.","id":"shadow-dom","name":"Shadow DOM","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>part</code> and <code>exportparts</code> HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the <code>::part()</code> CSS pseudo-element for styling.","id":"shadow-parts","name":"Shadow parts","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"72","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>shape-outside</code> CSS property, along with <code>shape-margin</code> and <code>shape-image-threshold</code>, sets the shape around which adjacent content will wrap.","id":"shape-outside","name":"shape-outside","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"62","firefox_android":"62","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code>, <code>rect()</code>, and <code>xywh()</code> CSS shape functions create shapes for use with <code>clip-path</code> and <code>shape-outside</code>.","id":"shapes","name":"shapes","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"54","firefox_android":"54","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>navigator.share()</code> method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets.","id":"share","name":"navigator.share()","status":{"baseline":false,"support":{"chrome_android":"61","edge":"93","firefox_android":"79","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>SharedArrayBuffer</code> object represents bytes shared between multiple workers and the main thread. The <code>Atomics</code> object safely accesses <code>SharedArrayBuffer</code> data to make sure predictable values are read and written and that operations are not interrupted.","id":"shared-memory","name":"SharedArrayBuffer and Atomics","status":{"baseline":"high","baseline_high_date":"2024-06-13","baseline_low_date":"2021-12-13","support":{"chrome":"68","chrome_android":"89","edge":"79","firefox":"79","firefox_android":"79","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"The <code>sharedStorage</code> 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.\"","id":"shared-storage","name":"Shared storage","status":{"baseline":false,"support":{"chrome":"126","chrome_android":"126","edge":"126"}}},{"description_html":"The <code>showPicker()</code> method for <code><input></code> elements shows the user interface for picking a value. For example, for <code><input type=\"date\"></code> it shows the interface for picking a date.","id":"show-picker-input","name":"showPicker() for <input>","status":{"baseline":false,"support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"101","firefox_android":"101","safari":"17.4"}}},{"description_html":"The <code>showPicker()</code> method for <code><select></code> elements shows the dropdown menu or other user interface for picking one of the options.","id":"show-picker-select","name":"showPicker() for <select>","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"122","firefox_android":"122"}}},{"description_html":"The <code><slot></code> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.","id":"slot","name":"<slot>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>assign()</code> method for <code><slot></code> elements assigns nodes to the slot, as an alternative to using the <code>slot</code> and <code>name</code> HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the <code>slotAssignment</code> set to \"manual\". Also known as manual slot assignment.","id":"slot-assign","name":"Imperative slot assignment","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"92","firefox_android":"92","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code><small></code> 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.","id":"small","name":"<small>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><animate></code>, <code><animateMotion></code>, and <code><animateTransform></code> SVG elements declaratively animate SVG elements. Also known as SMIL.","id":"smil-svg-animations","name":"SMIL SVG animations","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"19","chrome_android":"25","edge":"79","firefox":"4","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>image-rendering: smooth</code> CSS declaration scales images while retaining a gradual color blending that is useful for photos.","id":"smooth","name":"smooth","status":{"baseline":false,"support":{"firefox":"93","firefox_android":"93"}}},{"description_html":"The <code><source></code> element sets a media resource for the <code><picture></code>, <code><video></code>, and <code><audio></code> elements.","id":"source","name":"<source>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>Sourcemap</code> HTTP response header links generated code to a source map, so the browser shows the original source in a debugger. This makes it easier to work with minified or transpiled code.","id":"sourcemap-header","name":"Sourcemap header","status":{"baseline":"high","baseline_high_date":"≤2022-07-15","baseline_low_date":"≤2020-01-15","support":{"chrome":"18","chrome_android":"18","edge":"≤79","firefox":"55","firefox_android":"55","safari":"7","safari_ios":"7"}}},{"description_html":"The <code><span></code> HTML element is the generic inline container for content.","id":"span","name":"<span>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>speak</code> CSS property sets whether or not text should be spoken.","id":"speak","name":"speak","status":{"baseline":false,"support":{}}},{"description_html":"The <code>speak-as</code> CSS property sets how any element's content is spoken. Not to be confused with the <code>speak-as</code> descriptor of <code>@counter-style</code> at-rules.","id":"speak-as","name":"speak-as","status":{"baseline":false,"support":{"safari":"11.1","safari_ios":"11.3"}}},{"description_html":"Speculation rules are hints to the browser to proactively download pages in the background so they appear instantly when the user navigates to them.","id":"speculation-rules","name":"Speculation rules","status":{"baseline":false,"support":{}}},{"description_html":"The <code>SpeechRecognition</code> API converts audio into text using the device's speech recognition service.","id":"speech-recognition","name":"Speech recognition","status":{"baseline":false,"support":{}}},{"description_html":"The <code>SpeechSynthesis</code> API converts text to speech with artificial voices.","id":"speech-synthesis","name":"Speech synthesis","status":{"baseline":"high","baseline_high_date":"2021-03-05","baseline_low_date":"2018-09-05","support":{"chrome":"33","chrome_android":"33","edge":"14","firefox":"49","firefox_android":"62","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>spellcheck</code> global HTML attribute sets whether the browser may check an element for spelling errors.","id":"spellcheck","name":"Spellcheck","status":{"baseline":"high","baseline_high_date":"2020-05-28","baseline_low_date":"2017-11-28","support":{"chrome":"9","chrome_android":"47","edge":"12","firefox":"2","firefox_android":"57","safari":"5.1","safari_ios":"9.3"}}},{"description_html":"The <code>::spelling-error</code> and <code>::grammar-error</code> CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.","id":"spelling-grammar-error","name":"::spelling-error and ::grammar-error","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The spread (<code>...</code>) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.","id":"spread","name":"Spread syntax","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"55","firefox_android":"55","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>srcset</code> and <code>sizes</code> attributes for <code><img></code> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display.","id":"srcset","name":"srcset and sizes","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"38","chrome_android":"38","edge":"13","firefox":"38","firefox_android":"38","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"Stable array sort() function","id":"stable-array-sort","name":"Stable array sort","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"70","chrome_android":"70","edge":"79","firefox":"3","firefox_android":"4","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>@starting-style</code> CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.","id":"starting-style","name":"@starting-style","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>:state()</code> CSS pseudo-class matches custom elements based on their custom state, set through the <code>ElementInternals.states</code> API.","id":"state","name":":state()","status":{"baseline":"low","baseline_low_date":"2024-05-17","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"126","firefox_android":"126","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>position: static</code> CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as <code>top</code> or <code>inset-block-start</code>.","id":"static-positioning","name":"Static positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>steps()</code> CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The <code>step-start</code> and <code>step-end</code> keyword values are presets with a single interval.","id":"steps-easing","name":"steps() easing","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"65","firefox_android":"65","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>position: sticky</code> 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.","id":"sticky-positioning","name":"Sticky positioning","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"56","chrome_android":"56","edge":"16","firefox":"59","firefox_android":"59","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>document.requestStorageAccess()</code> method allows content in iframes to request storing and reading cookies and other site data, while the <code>document.hasStorageAccess()</code> method checks if such access is granted.","id":"storage-access","name":"Storage access","status":{"baseline":"low","baseline_low_date":"2023-12-05","support":{"chrome":"119","chrome_android":"120","edge":"85","firefox":"65","firefox_android":"65","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>navigator.storageBuckets</code> 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.","id":"storage-buckets","name":"Storage buckets","status":{"baseline":false,"support":{"chrome":"122","chrome_android":"122","edge":"122"}}},{"description_html":"The <code>navigator.storage</code> 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.","id":"storage-manager","name":"Storage manager","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"57","firefox_android":"57","safari":"17","safari_ios":"17"}}},{"description_html":"The streams API creates, composes, and consumes continuously generated data.","id":"streams","name":"Streams","status":{"baseline":false,"support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"102","firefox_android":"102"}}},{"description_html":"The <code>stretch</code> CSS keyword expands a box as needed to fit its contents until the maximum size is reached, without preserving the content's preferred aspect ratio.","id":"stretch","name":"stretch","status":{"baseline":false,"support":{}}},{"description_html":"The <code>at()</code> 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.","id":"string-at","name":"String at()","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"92","chrome_android":"92","edge":"92","firefox":"90","firefox_android":"90","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>codePointAt()</code> method returns the numeric value of the UTF-16 code point at an index of the string. The <code>fromCodePoint()</code> method returns a string created from one or more code points.","id":"string-codepoint","name":"String codePointAt() and fromCodePoint()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"29","firefox_android":"29","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>includes()</code> method of strings returns whether a search string appears within the string.","id":"string-includes","name":"String includes()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"40","firefox_android":"40","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>matchAll()</code> method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.","id":"string-matchall","name":"String matchAll()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"67","firefox_android":"67","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>normalize()</code> 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 <code>normalize()</code> method to find canonically or compatibly equivalent strings.","id":"string-normalize","name":"String normalize()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"34","chrome_android":"34","edge":"12","firefox":"31","firefox_android":"31","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>padStart()</code> and <code>padEnd()</code> methods of strings return a string lengthened to a minimum number of characters by adding characters to the start or end of the string.","id":"string-pad","name":"String padStart() and padEnd()","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"57","chrome_android":"57","edge":"15","firefox":"48","firefox_android":"48","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>String.raw()</code> static method interpolates template literal substitutions, but ignores escape sequences. It is the tag function for template literals.","id":"string-raw","name":"String raw()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"34","firefox_android":"34","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>repeat()</code> method of strings returns the original string repeated a number of times.","id":"string-repeat","name":"String repeat()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"36","edge":"12","firefox":"24","firefox_android":"24","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>replaceAll()</code> 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.","id":"string-replaceall","name":"String replaceAll()","status":{"baseline":"high","baseline_high_date":"2023-02-27","baseline_low_date":"2020-08-27","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"77","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>startsWith()</code> and <code>endsWith()</code> methods of strings returns whether a search string appears at the beginning or end of the provided string.","id":"string-startsends-with","name":"String startsWith() and endsWith()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"36","edge":"12","firefox":"17","firefox_android":"17","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>trimStart()</code> and <code>trimEnd()</code> methods of strings return a new string with whitespace removed from the beginning or end of the string.","id":"string-trim-startend","name":"String trimStart() and trimEnd()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"61","firefox_android":"61","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>isWellFormed()</code> method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The <code>toWellFormed()</code> method returns a new string where all lone surrogates are replaced by the Unicode replacement character.","id":"string-wellformed","name":"String isWellFormed() and toWellFormed()","status":{"baseline":"low","baseline_low_date":"2023-10-24","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"119","firefox_android":"119","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The string type (and <code>String</code> object) represents a sequence of characters.","id":"strings","name":"String (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><strong></code> HTML element brings attention to the content, styling text as bold by default.","id":"strong","name":"<strong>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>structuredClone()</code> 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.","id":"structured-clone","name":"structuredClone()","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"94","firefox_android":"94","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code><style></code> element embeds an inline CSS stylesheet in a document.","id":"style","name":"<style>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>style</code> global HTML attribute applies inline CSS styling declarations to individual elements.","id":"style-attr","name":"style (attribute)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><sub></code> and <code><sup></code> elements sets inline text to be displayed as subscript or superscript for solely typographical reasons.","id":"sub-sup","name":"<sub> and <sup>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.","id":"subgrid","name":"Subgrid","status":{"baseline":"low","baseline_low_date":"2023-09-15","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"71","firefox_android":"79","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>@supports</code> 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.","id":"supports","name":"@supports","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"28","chrome_android":"28","edge":"12","firefox":"22","firefox_android":"22","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>@supports (-webkit-transform-3d)</code> CSS media query is a standardized compatibility alternative to <code>@supports (transform-style)</code>.","id":"supports-compat","name":"@supports (compatibility prefix)","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"49","firefox_android":"49","safari":"4","safari_ios":"3.2"}}},{"description_html":"The SVG image format, represented by the <code><svg></code> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.","id":"svg","name":"SVG","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"3","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The SVG 1.1 image format has several components that were excluded from SVG 2, such as fonts, alternate glyphs, and the <code>xlink</code> namespace.","id":"svg-discouraged","name":"SVG 1.1 (discouraged)","status":{"baseline":false,"support":{}}},{"description_html":"The <code><filter></code> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.","id":"svg-filters","name":"SVG filters","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"A <code>Symbol</code> 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.","id":"symbol","name":"Symbol","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"36","firefox_android":"36","safari":"9","safari_ios":"9"}}},{"description_html":"The system color CSS keywords, such as <code>ButtonBorder</code> or <code>LinkText</code>, allow you to match default colors from the user agent.","id":"system-color","name":"System colors","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>tab-size</code> CSS property sets the width of the tab character.","id":"tab-size","name":"tab-size","status":{"baseline":"high","baseline_high_date":"2024-02-10","baseline_low_date":"2021-08-10","support":{"chrome":"42","chrome_android":"42","edge":"79","firefox":"91","firefox_android":"91","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>tabindex</code> HTML attribute make an element focusable, and sets the element's relative ordering for sequential focus navigation.","id":"tabindex","name":"tabindex","status":{"baseline":"high","baseline_high_date":"2021-04-02","baseline_low_date":"2018-10-02","support":{"chrome":"1","chrome_android":"18","edge":"18","firefox":"1.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code><table></code> HTML element, with several related elements, represents tabular data in rows and columns of cells.","id":"table","name":"Tables","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>:target</code> CSS pseudo-class matches the element with an ID matching the URL fragment.","id":"target","name":":target","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"2"}}},{"description_html":"The <code>::target-text</code> pseudo-element allows you to style text highlighted by a URL text fragment such as <code>#:~:text=snippet</code>.","id":"target-text","name":"::target-text","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"131","firefox_android":"131","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>:target-within</code> CSS pseudo-class matches the element with an ID matching the URL fragment and its ancestors.","id":"target-within","name":":target-within","status":{"baseline":false,"support":{}}},{"description_html":"The <code><template></code> HTML element holds HTML fragments which you can clone and insert into the document using JavaScript.","id":"template","name":"<template>","status":{"baseline":"high","baseline_high_date":"2018-05-12","baseline_low_date":"2015-11-12","support":{"chrome":"26","chrome_android":"26","edge":"13","firefox":"22","firefox_android":"22","safari":"8","safari_ios":"8"}}},{"description_html":"Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.","id":"template-literals","name":"Template literals","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"62","chrome_android":"62","edge":"79","firefox":"53","firefox_android":"53","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>Temporal</code> API allows you to work with dates, times, time zones, and durations. It is more powerful than the <code>Date</code> API.","id":"temporal","name":"Temporal","status":{"baseline":false,"support":{}}},{"description_html":"The <code>text-align</code> CSS property sets the horizontal placement of the inner content of a block element.","id":"text-align","name":"text-align","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-align-last</code> CSS property sets the alignment of the last line of text before a forced line break.","id":"text-align-last","name":"text-align-last","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"47","chrome_android":"47","edge":"12","firefox":"49","firefox_android":"49","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>text-box</code> CSS property sets the spacing above and below text based on a font's typographic features. For example, <code>text-box: trim-both ex alphabetic</code> trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.","id":"text-box","name":"text-box","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>text-combine-upright</code> CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.","id":"text-combine-upright","name":"text-combine-upright","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"48","firefox_android":"48","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>text-decoration</code> CSS property sets the style and color of decorative lines including underline, overline, line-through, or a combination of lines.","id":"text-decoration","name":"text-decoration","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-decoration</code> CSS property in a <code>::selection</code> rule sets the underline and other text decoration styles on the text a user has highlighted.","id":"text-decoration-selection","name":"text-decoration in ::selection","status":{"baseline":false,"support":{"chrome":"105","chrome_android":"105","edge":"105"}}},{"description_html":"The <code>text-emphasis</code> CSS property sets position and style for text emphasis marks, especially for East Asian languages.","id":"text-emphasis","name":"text-emphasis","status":{"baseline":"high","baseline_high_date":"2024-09-03","baseline_low_date":"2022-03-03","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"46","firefox_android":"46","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>TextEncoder</code> API transforms a stream of code points into a byte stream with UTF-8 encoding, and <code>TextDecoder</code> does the reverse.","id":"text-encoding","name":"Text encoding and decoding","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"38","chrome_android":"38","edge":"79","firefox":"19","firefox_android":"19","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>text-indent</code> CSS property sets the size of the empty space (indentation) at the beginning of lines in a text.","id":"text-indent","name":"text-indent","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-indent: each-line</code> CSS declaration indents text after forced breaks as well as to the first line of a block.","id":"text-indent-each-line","name":"text-indent: each-line","status":{"baseline":false,"support":{"firefox":"121","firefox_android":"121","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>text-indent: hanging</code> CSS declaration indents all lines except the first.","id":"text-indent-hanging","name":"text-indent: hanging","status":{"baseline":false,"support":{"firefox":"121","firefox_android":"121","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>text-justify</code> CSS property sets the justification method of text when <code>text-align: justify</code> is set.","id":"text-justify","name":"text-justify","status":{"baseline":false,"support":{"firefox":"55","firefox_android":"55"}}},{"description_html":"The <code>text-orientation</code> CSS property sets the how text is typeset within a line when the writing mode is vertical.","id":"text-orientation","name":"text-orientation","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"41","firefox_android":"41","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>text-overflow</code> 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.","id":"text-overflow","name":"Text overflow","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"7","firefox_android":"7","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>text-shadow</code> CSS property sets the position and styles of shadow on text.","id":"text-shadow","name":"text-shadow","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"1.1","safari_ios":"1"}}},{"description_html":"The <code>text-size-adjust</code> CSS property disables or modifies the browser's default text size adjustment for small screen sizes.","id":"text-size-adjust","name":"text-size-adjust","status":{"baseline":false,"support":{"chrome":"54","chrome_android":"54","edge":"79"}}},{"description_html":"The <code>text-spacing-trim</code> CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.","id":"text-spacing-trim","name":"text-spacing-trim","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The <code>-webkit-text-stroke-width</code> and <code>-webkit-text-stroke-color</code> CSS properties set the thickness and color of text outlines. The <code>-webkit-text-fill-color</code> sets the color within text character outlines. Both default to the text color.","id":"text-stroke-fill","name":"Text stroke and fill (compatibility prefixes)","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"4","chrome_android":"18","edge":"15","firefox":"49","firefox_android":"49","safari":"3","safari_ios":"2"}}},{"description_html":"The <code><track></code> 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.","id":"text-tracks","name":"Text tracks","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"23","chrome_android":"25","edge":"12","firefox":"31","firefox_android":"31","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>text-transform</code> CSS property sets text case and capitalization.","id":"text-transform","name":"text-transform","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-underline-position</code> and <code>text-underline-offset</code> CSS properties set the position and distance from initial position of text underlines on text with <code>text-decoration: underline</code>.","id":"text-underline-position","name":"Text underline position","status":{"baseline":"high","baseline_high_date":"2023-05-19","baseline_low_date":"2020-11-19","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"70","firefox_android":"79","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>text-wrap</code> CSS property sets how lines break in text that overflows the container. It is a shorthand for <code>text-wrap-style</code> and <code>text-wrap-mode</code>.","id":"text-wrap","name":"text-wrap","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>text-wrap: balance</code> CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.","id":"text-wrap-balance","name":"text-wrap: balance","status":{"baseline":"low","baseline_low_date":"2024-05-13","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"121","firefox_android":"121","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>text-wrap-mode</code> CSS property sets whether lines may wrap with the values <code>wrap</code> and <code>nowrap</code>. It is a longhand property for both <code>white-space</code> and <code>text-wrap</code>.","id":"text-wrap-mode","name":"text-wrap-mode","status":{"baseline":"low","baseline_low_date":"2024-10-17","support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>text-wrap: nowrap</code> CSS declaration prevents text breaking into multiple lines. Text that doesn't fit overflows instead.","id":"text-wrap-nowrap","name":"text-wrap: nowrap","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>text-wrap: pretty</code> CSS declaration prioritizes better layout over speed when text is broken into multiple lines.","id":"text-wrap-pretty","name":"text-wrap: pretty","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117"}}},{"description_html":"The <code>text-wrap: stable</code> CSS declaration wraps text using the default algorithm, but does not change wrapping on earlier lines while the text is being edited.","id":"text-wrap-stable","name":"text-wrap: stable","status":{"baseline":"low","baseline_low_date":"2024-10-17","support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"121","firefox_android":"121","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>text-wrap-style</code> CSS property sets how lines break in text that overflows the container. It can also be set with the <code>text-wrap</code> shorthand.","id":"text-wrap-style","name":"text-wrap-style","status":{"baseline":false,"support":{"chrome":"130","chrome_android":"130","edge":"130"}}},{"description_html":"The <code><textarea></code> element represents an editing control that allows users to enter multi-line, free-form, plain text.","id":"textarea","name":"<textarea>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3"}}},{"description_html":"The <code><time></code> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the <code>datetime</code> attribute to translate dates into machine-readable format.","id":"time","name":"<time>","status":{"baseline":"high","baseline_high_date":"2020-04-24","baseline_low_date":"2017-10-24","support":{"chrome":"62","chrome_android":"62","edge":"14","firefox":"22","firefox_android":"22","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>:future</code> and <code>:past</code> CSS pseudo-classes match upcoming or prior elements during media playback.","id":"time-relative-selectors","name":"Time-relative pseudo-selectors","status":{"baseline":false,"support":{"chrome":"23","chrome_android":"25","edge":"79","safari":"7","safari_ios":"7"}}},{"description_html":"The <code><title></code> 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.","id":"title","name":"<title>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>title</code> global HTML attribute sets information about an element, such as a name or description. The value is typically shown as a tooltip that appears on mouse over. Since it's not often available to touch-only, keyboard-only, or assistive technology users, it's not a substitute for other text.","id":"title-attr","name":"Title","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>await</code> keyword, when used at the top level of a module (outside of an async function), delays parent module execution until after a promise fulfills.","id":"top-level-await","name":"Top-level await","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"89","firefox_android":"89","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>touch-action</code> CSS property sets whether an element on a touch screen can be panned or pinched to zoom.","id":"touch-action","name":"touch-action","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"52","firefox_android":"52","safari":"13","safari_ios":"9.3"}}},{"description_html":"Touch events <code>touchstart</code>, <code>touchmove</code>, <code>touchend</code>, and <code>touchcancel</code> fire when users interact with a touch-sensitive surface, such as a screen or drawing tablet. These events are similar to mouse events.","id":"touch-events","name":"Touch events","status":{"baseline":false,"support":{"chrome":"22","chrome_android":"25","edge":"12","firefox":"52","firefox_android":"6","safari_ios":"≤3"}}},{"description_html":"The <code>transfer()</code> and <code>transferToFixedLength()</code> methods of <code>ArrayBuffer</code> move a buffer from one context to another (for example, to a worker).","id":"transferable-arraybuffer","name":"Transferable ArrayBuffer","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"122","firefox_android":"122","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>transform-box</code> CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.","id":"transform-box","name":"transform-box","status":{"baseline":"low","baseline_low_date":"2024-04-16","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"125","firefox_android":"125","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>transform</code> 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.","id":"transforms2d","name":"2D transforms","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>transform</code> CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.","id":"transforms3d","name":"3D transforms","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"16","firefox_android":"16","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>transition-behavior: allow-discrete</code> 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%.","id":"transition-behavior","name":"transition-behavior","status":{"baseline":"low","baseline_low_date":"2024-08-06","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"129","firefox_android":"129","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>transition</code> 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.","id":"transitions","name":"Transitions (CSS)","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>translate</code> HTML attribute marks whether an element's text should be translated.","id":"translate","name":"translate attribute","status":{"baseline":"low","baseline_low_date":"2023-03-14","support":{"chrome":"19","chrome_android":"25","edge":"79","firefox":"111","firefox_android":"111","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, and <code>atan2()</code> CSS functions compute various trigonometric functions.","id":"trig-functions","name":"sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)","status":{"baseline":"low","baseline_low_date":"2023-03-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"108","firefox_android":"108","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"Trusted types allow you to lock down insecure parts of the DOM API and prevent client-side cross-site scripting (XSS) attacks.","id":"trusted-types","name":"Trusted types","status":{"baseline":false,"support":{"chrome":"83","chrome_android":"83","edge":"83"}}},{"description_html":"The <code>display</code> CSS property accepts multiple keyword values, such as <code>inline flex</code> or <code>block flow</code>, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.","id":"two-value-display","name":"Two-value display property","status":{"baseline":"low","baseline_low_date":"2023-07-21","support":{"chrome":"115","chrome_android":"115","edge":"115","firefox":"70","firefox_android":"79","safari":"15","safari_ios":"15"}}},{"description_html":"Typed array iteration methods","id":"typed-array-iteration-methods","name":"Typed array iteration methods","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"38","firefox_android":"38","safari":"10","safari_ios":"10"}}},{"description_html":"Typed arrays are iterable with the <code>for … of</code> statement and enumerable with the methods <code>entries()</code>, <code>keys()</code>, and <code>values()</code>.","id":"typed-array-iterators","name":"Typed array iterators","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"37","firefox_android":"37","safari":"10","safari_ios":"10"}}},{"description_html":"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.","id":"typed-arrays","name":"Typed arrays (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"4.2"}}},{"description_html":"The <code><u></code> HTML element makes non-textual annotations, styling text as underlined by default.","id":"u","name":"<u>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>Sec-CH-UA</code> HTTP request header and the <code>navigator.userAgentData</code> API expose browser and platform information used to vary responses and application logic. User agent client hints are similar to user agent strings but more privacy-preserving and safer to parse.","id":"ua-client-hints","name":"User agent client hints","status":{"baseline":false,"support":{"chrome":"98","chrome_android":"98","edge":"98"}}},{"description_html":"The <code>Uint8Array</code> object methods <code>fromBase64()</code>, <code>toBase64()</code>, and <code>setFromBase64()</code> convert to and from base64 strings. The <code>fromHex()</code>, <code>toHex()</code>, and <code>setFromHex()</code> methods convert to and from hex strings.","id":"uint8array-base64-hex","name":"Uint8Array base64 and hex conversion","status":{"baseline":false,"support":{"firefox":"133","firefox_android":"133","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"Unicode point escapes (<code>\\\\u{}</code>) represent Unicode characters within strings.","id":"unicode-point-escapes","name":"Unicode point escapes","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"44","chrome_android":"44","edge":"12","firefox":"40","firefox_android":"40","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>unset</code> keyword resets any CSS property, removing any values previously set by the author, user, or browser. Inherited properties (like <code>color</code>) reset to the parent element's computed value. Non-inherited properties (like <code>display</code>) reset to the specified initial value (<code>inline</code>).","id":"unset-value","name":"unset","status":{"baseline":"high","baseline_high_date":"2018-09-21","baseline_low_date":"2016-03-21","support":{"chrome":"41","chrome_android":"41","edge":"13","firefox":"27","firefox_android":"27","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>update</code> 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.","id":"update","name":"Update frequency media query","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"102","firefox_android":"102","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>Upgrade-Insecure-Requests</code> HTTP request header tells the server that the response should redirect to a secure (HTTPS) resource.","id":"upgrade-insecure-requests","name":"Upgrade insecure requests","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"44","chrome_android":"44","edge":"17","firefox":"48","firefox_android":"48","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"A <code>URL</code> object represents a web address, like <code>https://example.com/</code>, and parts of the address, such as the domain, path, and query string (as <code>URLSearchParams</code>).","id":"url","name":"URL","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"32","chrome_android":"32","edge":"12","firefox":"19","firefox_android":"19","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>URL.canParse()</code> static method checks whether a URL can be parsed into a valid <code>URL</code> object. It's an alternative to calling <code>new URL()</code> in a <code>try … catch</code> statement.","id":"url-canparse","name":"URL.canParse()","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"115","firefox_android":"115","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>URLPattern</code> API creates patterns that can be matched against URLs or URL components.","id":"urlpattern","name":"URLPattern","status":{"baseline":false,"support":{"chrome":"95","chrome_android":"95","edge":"95"}}},{"description_html":"The <code>:active</code>, <code>:focus</code>, and <code>:hover</code> CSS pseudo-classes match elements based on how users are interacting with them.","id":"user-action-pseudos","name":"User action pseudo-classes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The <code>navigator.userActivation</code> 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.","id":"user-activation","name":"User activation","status":{"baseline":"low","baseline_low_date":"2023-11-21","support":{"chrome":"72","chrome_android":"72","edge":"79","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.userAgent</code> read-only property returns the user agent string for the current browser. Selectively showing content based on the user agent string is unreliable. Consider using feature detection instead.","id":"user-agent-sniffing","name":"User agent sniffing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"5"}}},{"description_html":"The <code>:user-valid</code> and <code>:user-invalid</code> pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.","id":"user-pseudos","name":":user-valid and :user-invalid","status":{"baseline":"low","baseline_low_date":"2023-11-02","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"88","firefox_android":"88","safari":"16.5","safari_ios":"16.5"}}},{"description_html":"The <code>user-select</code> CSS property controls which elements can be selected by the user.","id":"user-select","name":"user-select","status":{"baseline":false,"support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"69","firefox_android":"79"}}},{"description_html":"The <code><var></code> element represents the name of a variable in a mathematical expression or a programming context.","id":"var","name":"<var>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>vertical-align</code> CSS property sets the vertical alignment of inline, inline-block, and table cell elements. It has no effect on block-level elements.","id":"vertical-align","name":"vertical-align","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>writing-mode</code> CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is <code>vertical-lr</code> or <code>vertical-rl</code>. The <code>direction</code> CSS property sets whether inputs flow from top to bottom or bottom to top.","id":"vertical-form-controls","name":"Vertical form controls","status":{"baseline":"low","baseline_low_date":"2024-04-18","support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"120","firefox_android":"120","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>navigator.vibrate()</code> method makes a tactile alert, if the device is equipped with a haptic motor.","id":"vibration","name":"Vibration","status":{"baseline":false,"support":{"chrome":"32","chrome_android":"32","edge":"79"}}},{"description_html":"The <code><video></code> element plays videos or movies, optionally with controls provided by the browser.","id":"video","name":"<video>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"3"}}},{"description_html":"The <code>video-dynamic-range</code> CSS media query sets styles based on whether a device can display video with at least <code>standard</code> range colors or at least <code>high</code> range colors. Non-visual devices will match neither.","id":"video-dynamic-range","name":"video-dynamic-range media query","status":{"baseline":false,"support":{"firefox":"100","firefox_android":"100"}}},{"description_html":"The <code>view-transition-class</code> CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.","id":"view-transition-class","name":"view-transition-class","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"View transitions allow you to create animated visual transitions between different states of a document.","id":"view-transitions","name":"View transitions","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>sv*</code>, <code>lv*</code>, and <code>dv*</code> 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.","id":"viewport-unit-variants","name":"Small, large, and dynamic viewport units","status":{"baseline":"low","baseline_low_date":"2022-12-05","support":{"chrome":"108","chrome_android":"108","edge":"108","firefox":"101","firefox_android":"101","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>vw</code>, <code>vh</code>, <code>vmin</code>, and <code>vmax</code> CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.","id":"viewport-units","name":"Viewport units","status":{"baseline":"high","baseline_high_date":"2020-04-17","baseline_low_date":"2017-10-17","support":{"chrome":"26","chrome_android":"26","edge":"16","firefox":"19","firefox_android":"19","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>navigator.virtualKeyboard</code> 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.","id":"virtual-keyboard","name":"Virtual keyboard","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"94"}}},{"description_html":"The <code>CreateVirtualPressureSource</code> WebDriver command creates artificial sources of compute pressure for testing without the need real device sources of compute pressure.","id":"virtual-pressure-sources","name":"Virtual pressure sources","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"The <code>CreateVirtualSensor</code> WebDriver command creates a virtual sensor for testing applications that use sensor APIs, without the need for real device sensors.","id":"virtual-sensors","name":"Virtual sensors","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120"}}},{"description_html":"The <code>visibility</code> CSS property sets whether an element is shown. Invisible elements still affect the document layout.","id":"visibility","name":"visibility","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>visualViewport</code> API provides a way to query and modify the user-visible viewport of a web page.","id":"visual-viewport","name":"Visual viewport API","status":{"baseline":"high","baseline_high_date":"2024-02-10","baseline_low_date":"2021-08-10","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"91","firefox_android":"68","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>WebAssembly.instantiate()</code> and <code>WebAssembly.instantiateStreaming()</code> global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.","id":"wasm","name":"WebAssembly","status":{"baseline":"high","baseline_high_date":"2020-04-17","baseline_low_date":"2017-10-17","support":{"chrome":"57","chrome_android":"57","edge":"16","firefox":"52","firefox_android":"52","safari":"11","safari_ios":"11"}}},{"description_html":"Integer values pass bidirectionally between JavaScript and WebAssembly, converted to i64 values in WebAssembly or BigInt values in JavaScript.","id":"wasm-bigint","name":"BigInt to i64 conversion (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"78","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"Bulk memory operations, such as <code>copy</code> and <code>init</code>, mirror the efficiency of native <code>memcpy</code> and <code>memmove</code> operations.","id":"wasm-bulk-memory","name":"Bulk memory operations (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-04-25","baseline_low_date":"2021-10-25","support":{"chrome":"75","chrome_android":"75","edge":"79","firefox":"78","firefox_android":"79","safari":"15.1","safari_ios":"15.1"}}},{"description_html":"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.","id":"wasm-exception-handling","name":"Exception handling (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-11-03","baseline_low_date":"2022-05-03","support":{"chrome":"95","chrome_android":"95","edge":"95","firefox":"100","firefox_android":"100","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"When caught, an exception is reified into an exception reference, a value of the new type <code>exnref</code>.","id":"wasm-exnref-exceptions","name":"Exception references with exnref (WebAssembly)","status":{"baseline":false,"support":{"firefox":"131","firefox_android":"131"}}},{"description_html":"The <code>i32.add</code>, <code>i32.sub</code>, <code>i32.mul</code>, <code>i64.add</code>, <code>i64.sub</code>, and <code>i64.mul</code> operations extend constant expressions to include arithmetic.","id":"wasm-extended-constant-expressions","name":"Extended constant expressions (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"112","firefox_android":"112","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"Garbage collection tracks references for better memory management with garbage-collected languages running in WebAssmbly.","id":"wasm-garbage-collection","name":"Garbage collection (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"120","firefox_android":"120","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"Instructions accept 64-bit memory indexes.","id":"wasm-memory64","name":"Memory64 (WebAssembly)","status":{"baseline":false,"support":{}}},{"description_html":"A single module in WebAssembly can have multiple memories.","id":"wasm-multi-memory","name":"Multi-memory (WebAssembly)","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"125","firefox_android":"125"}}},{"description_html":"Instructions and blocks can produce multiple result values.","id":"wasm-multi-value","name":"Multi-value (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2023-04-20","baseline_low_date":"2020-10-20","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"78","firefox_android":"79","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"Mutable global variables are importable and exportable.","id":"wasm-mutable-globals","name":"Import and export of mutable globals (WebAssembly)","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"62","firefox_android":"62","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"Saturating floating-point to integer conversion operators return the maximum or minimum integer value on overflow instead of trapping.","id":"wasm-non-trapping-float-to-int","name":"Non-trapping float-to-int conversion (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-04-25","baseline_low_date":"2021-10-25","support":{"chrome":"75","chrome_android":"75","edge":"18","firefox":"64","firefox_android":"64","safari":"15.1","safari_ios":"15.1"}}},{"description_html":"The <code>externref</code> type can be both a value type and a table element type, while <code>funcref</code> can be a value type.","id":"wasm-reference-types","name":"Reference types (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-05-19","baseline_low_date":"2021-11-19","support":{"chrome":"96","chrome_android":"96","edge":"96","firefox":"79","firefox_android":"79","safari":"15.1","safari_ios":"15.1"}}},{"description_html":"Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.","id":"wasm-sign-extension-operators","name":"Sign extension operators (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"69","chrome_android":"69","edge":"18","firefox":"62","firefox_android":"62","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"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.","id":"wasm-simd","name":"Fixed-width SIMD (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"91","chrome_android":"91","edge":"91","firefox":"89","firefox_android":"89","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"Relaxed SIMD (Single Instruction Multiple Data) introduces local non-determinism, where the results of the instructions may vary based on hardware support.","id":"wasm-simd-relaxed","name":"Relaxed-width SIMD (WebAssembly)","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114"}}},{"description_html":"The WebAssembly builtin string functions mirror a subset of the JavaScript <code>String</code> API and adapt it to be efficiently callable without JavaScript glue code.","id":"wasm-string-builtins","name":"String builtins (WebAssembly)","status":{"baseline":false,"support":{"chrome":"130","edge":"130"}}},{"description_html":"Tail call optimization discards a caller frame and replaces the call with a jump instruction.","id":"wasm-tail-call-optimization","name":"Tail call optimization (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"112","chrome_android":"112","edge":"112","firefox":"121","firefox_android":"121","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"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.","id":"wasm-threads","name":"Threads and atomics (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-06-13","baseline_low_date":"2021-12-13","support":{"chrome":"74","chrome_android":"88","edge":"79","firefox":"79","firefox_android":"79","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"A typed function reference can be called directly.","id":"wasm-typed-fun-refs","name":"Typed function references (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"120","firefox_android":"120","safari":"18","safari_ios":"18"}}},{"description_html":"The <code><wbr></code> HTML element represents a word break opportunity, to explicitly mark a place within a word where a line might be broken.","id":"wbr","name":"<wbr>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>WeakRef</code> and <code>FinalizationRegistry</code> objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.","id":"weak-references","name":"Weak references","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"79","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"A <code>WeakMap</code> 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.","id":"weakmap","name":"WeakMap","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"6","firefox_android":"6","safari":"8","safari_ios":"8"}}},{"description_html":"A <code>WeakSet</code> 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.","id":"weakset","name":"WeakSet","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"34","firefox_android":"34","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>animate()</code> method of <code>Element</code> objects programmatically animates elements over time and can synchronize the animations of multiple elements.","id":"web-animations","name":"Web animations","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"36","chrome_android":"36","edge":"79","firefox":"48","firefox_android":"48","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The Web Audio API creates graphs of audio nodes that handle sound inputs, synthesize sounds, apply effects, create visualizations, and output to audio devices.","id":"web-audio","name":"Web Audio","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"35","chrome_android":"35","edge":"12","firefox":"25","firefox_android":"25","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The Web Bluetooth API enables selecting and communicating with nearby Bluetooth devices.","id":"web-bluetooth","name":"Web Bluetooth","status":{"baseline":false,"support":{"chrome":"70","chrome_android":"56","edge":"79"}}},{"description_html":"The Web Cryptography API performs low-level cryptographic operations, such as encryption, decryption, and signature verification. Also known as the Web Crypto API.","id":"web-cryptography","name":"Web Cryptography","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"11","chrome_android":"18","edge":"12","firefox":"21","firefox_android":"21","safari":"5","safari_ios":"5"}}},{"description_html":"The <code>navigator.locks</code> API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.","id":"web-locks","name":"Locks","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"96","firefox_android":"96","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The Web MIDI API enables selecting MIDI input and output devices and sending and receiving MIDI messages.","id":"web-midi","name":"Web MIDI","status":{"baseline":false,"support":{"chrome":"43","chrome_android":"43","edge":"79","firefox":"108"}}},{"description_html":"The <code>NDEFReader</code> API reads and writes messages to near-field communication (NFC) tags.","id":"web-nfc","name":"Web NFC","status":{"baseline":false,"support":{"chrome_android":"100"}}},{"description_html":"The <code>OTPCredential</code> API represents a one-time-password (OTP).","id":"web-otp","name":"WebOTP","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"84","edge":"93"}}},{"description_html":"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.","id":"webauthn","name":"Web authentication","status":{"baseline":"high","baseline_high_date":"2024-03-07","baseline_low_date":"2021-09-07","support":{"chrome":"67","chrome_android":"70","edge":"18","firefox":"60","firefox_android":"92","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>getAuthenticatorData()</code>, <code>getPublicKey()</code>, and <code>getPublicKeyAlgorithm()</code> methods of <code>AuthenticatorAttestationResponse</code> access credential data inside <code>attestationObject</code> without the need to parse it.","id":"webauthn-public-key-easy","name":"Web authentication easy public key access","status":{"baseline":"low","baseline_low_date":"2023-10-24","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"119","firefox_android":"119","safari":"16","safari_ios":"16"}}},{"description_html":"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.","id":"webcodecs","name":"WebCodecs","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"130"}}},{"description_html":"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.","id":"webdriver","name":"WebDriver","status":{"baseline":false,"support":{"firefox":"66"}}},{"description_html":"WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other.","id":"webdriver-bidi","name":"WebDriver BiDi","status":{"baseline":false,"support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"102","firefox_android":"102"}}},{"description_html":"The <code>WebGLRenderingContext</code> API is the <code>\"webgl\"</code> rendering context for the <code><canvas></code> element. It represents a space for drawing two- and three-dimensional graphics and animations.","id":"webgl","name":"WebGL","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"9","chrome_android":"25","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"8"}}},{"description_html":"The <code>WEBGL_color_buffer_float</code> extension for WebGL 1.0 contexts adds the 32-bit floating-point type <code>RGBA32F</code> as a color-renderable format.","id":"webgl-color-buffer-float","name":"WEBGL_color_buffer_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"63","chrome_android":"63","edge":"17","firefox":"30","firefox_android":"30","safari":"14","safari_ios":"15"}}},{"description_html":"The <code>drawingBufferColorSpace</code> and <code>unpackColorSpace</code> properties of <code>WebGLRenderingContext</code> sets the color representation for the buffer and imported textures, such as <code>\"srgb\"</code> or <code>\"display-p3\"</code>.","id":"webgl-color-management","name":"Color management for WebGL","status":{"baseline":"low","baseline_low_date":"2024-10-29","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"132","firefox_android":"132","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>WEBGL_compressed_texture_astc</code> extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-astc","name":"WEBGL_compressed_texture_astc WebGL extension","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"53","firefox_android":"53","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>WEBGL_compressed_texture_etc</code> extension for WebGL 1.0 and 2.0 contexts adds many ETC2 and EAC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-etc","name":"WEBGL_compressed_texture_etc WebGL extension","status":{"baseline":false,"support":{"chrome":"63","chrome_android":"63","edge":"79","firefox_android":"51","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>WEBGL_compressed_texture_etc1</code> extension for WebGL 1.0 and 2.0 contexts adds the ETC1 compressed texture format to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-etc1","name":"WEBGL_compressed_texture_etc1 WebGL extension","status":{"baseline":false,"support":{"chrome":"49","chrome_android":"49","edge":"79","firefox_android":"30","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>WEBGL_compressed_texture_pvrtc</code> extension for WebGL 1.0 and 2.0 contexts adds PVRTC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-pvrtc","name":"WEBGL_compressed_texture_pvrtc WebGL extension","status":{"baseline":false,"support":{"chrome":"128","chrome_android":"28","edge":"128","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>WEBGL_compressed_texture_s3tc</code> extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-s3tc","name":"WEBGL_compressed_texture_s3tc WebGL extension","status":{"baseline":false,"support":{"chrome":"26","edge":"12","firefox":"22","safari":"8"}}},{"description_html":"The <code>WEBGL_compressed_texture_s3tc_srgb</code> extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats for the sRGB colorspace to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-s3tc-srgb","name":"WEBGL_compressed_texture_s3tc_srgb WebGL extension","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"80","firefox":"55","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>WEBGL_debug_renderer_info</code> extension for WebGL 1.0 and 2.0 contexts exposes information about the graphics driver for debugging purposes.","id":"webgl-debug-renderer-info","name":"WEBGL_debug_renderer_info WebGL extension","status":{"baseline":"high","baseline_high_date":"2019-10-19","baseline_low_date":"2017-04-19","support":{"chrome":"33","chrome_android":"33","edge":"12","firefox":"53","firefox_android":"53","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>WEBGL_debug_shaders</code> extension for WebGL 1.0 and 2.0 contexts adds the <code>getTranslatedShaderSource()</code> method to debug shaders from privileged contexts.","id":"webgl-debug-shaders","name":"WEBGL_debug_shaders WebGL extension","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"56","firefox_android":"56","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>WEBGL_depth_texture</code> extension for WebGL 1.0 contexts defines 2D depth and depth-stencil textures.","id":"webgl-depth-texture","name":"WEBGL_depth_texture WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"22","firefox_android":"22","safari":"8","safari_ios":"8"}}},{"description_html":"The optional <code>desynchronized</code> parameter of a canvas's <code>getContext()</code> method permits the browser to draw a WebGL canvas independently of the event loop. This can reduce drawing latency.","id":"webgl-desynchronized","name":"Desynchronized WebGL canvas","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"75","edge":"79"}}},{"description_html":"The <code>WEBGL_draw_buffers</code> extension for WebGL 1.0 contexts enables a fragment shader to write to several textures, which is useful for deferred shading, for example.","id":"webgl-draw-buffers","name":"WEBGL_draw_buffers WebGL extension","status":{"baseline":false,"support":{"chrome":"36","edge":"17","firefox":"28","safari":"9","safari_ios":"15"}}},{"description_html":"The <code>WEBGL_lose_context</code> extension for WebGL 1.0 and 2.0 contexts simulates losing and restoring a <code>WebGLRenderingContext</code> or <code>WebGL2RenderingContext</code>.","id":"webgl-lose-context","name":"WEBGL_lose_context WebGL extension","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"26","chrome_android":"26","edge":"17","firefox":"22","firefox_android":"22","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>WEBGL_multi_draw</code> extension for WebGL 1.0 and 2.0 contexts renders more than one primitive with a single function call.","id":"webgl-multi-draw","name":"WEBGL_multi_draw WebGL extension","status":{"baseline":false,"support":{"chrome":"86","chrome_android":"86","edge":"86","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>OES_draw_buffers_indexed</code> extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.","id":"webgl-oes-draw-buffers-indexed","name":"OES_draw_buffers_indexed WebGL extension","status":{"baseline":"low","baseline_low_date":"2022-12-13","support":{"chrome":"100","chrome_android":"100","edge":"100","firefox":"108","firefox_android":"108","safari":"16","safari_ios":"16"}}},{"description_html":"<code>SharedArrayBuffer</code> objects can be used in WebGL APIs that previously only worked with <code>ArrayBuffer</code> objects.","id":"webgl-sab","name":"SharedArrayBuffer in WebGL","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"79","firefox_android":"79"}}},{"description_html":"The <code>WebGL2RenderingContext</code> API is the <code>\"webgl2\"</code> rendering context for the <code><canvas></code> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.","id":"webgl2","name":"WebGL2","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"56","chrome_android":"58","edge":"79","firefox":"51","firefox_android":"51","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>drawingBufferColorSpace</code> and <code>unpackColorSpace</code> properties of <code>WebGL2RenderingContext</code> sets the color representation for the buffer and imported textures, such as <code>\"srgb\"</code> or <code>\"display-p3\"</code>.","id":"webgl2-color-management","name":"Color management for WebGL2","status":{"baseline":"low","baseline_low_date":"2024-10-29","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"132","firefox_android":"132","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The optional <code>desynchronized</code> parameter of a canvas's <code>getContext()</code> method permits the browser to draw a WebGL2 canvas independently of the event loop. This can reduce drawing latency.","id":"webgl2-desynchronized","name":"Desynchronized WebGL2 canvas","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"75","edge":"79"}}},{"description_html":"The <code>navigator.gpu</code> API performs operations such as rendering and computation on dedicated graphics hardware (also known as a Graphics Processing Unit).","id":"webgpu","name":"WebGPU","status":{"baseline":false,"support":{"chrome":"113","edge":"113"}}},{"description_html":"The WebHID API provides access to Human Interface Devices (HID) that are connected to the user's device.","id":"webhid","name":"WebHID","status":{"baseline":false,"support":{"chrome":"89","edge":"89"}}},{"description_html":"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.","id":"webnn","name":"WebNN","status":{"baseline":false,"support":{}}},{"description_html":"The WebP image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.","id":"webp","name":"WebP","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"9","chrome_android":"18","edge":"18","firefox":"65","firefox_android":"65","safari":"14","safari_ios":"14"}}},{"description_html":"The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.","id":"webrtc","name":"WebRTC","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"22","firefox_android":"24","safari":"11","safari_ios":"11"}}},{"description_html":"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.","id":"webrtc-encoded-transform","name":"WebRTC encoded transform","status":{"baseline":false,"support":{"firefox":"117","firefox_android":"117","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>sctp</code> object on <code>RTCPeerConnection</code> represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that <code>RTCDataChannel</code> uses.","id":"webrtc-sctp","name":"WebRTC SCTP information","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"113","firefox_android":"113","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>RTCPeerConnection.getStats()</code>, <code>RTCRtpSender.getStats()</code>, and <code>RTCRtpReceiver.getStats()</code> methods return detailed information about the status, performance, network, and media for a given WebRTC connection.","id":"webrtc-stats","name":"WebRTC statistics","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"44","firefox_android":"44","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>WebSocket</code> API opens a two-way communication channel between the user's browser and a server.","id":"websockets","name":"WebSockets","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"11","firefox_android":"14","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>WebTransport</code> API transmits data between a client and a server, by using the HTTP/3 protocol.","id":"webtransport","name":"WebTransport","status":{"baseline":false,"support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"114","firefox_android":"114"}}},{"description_html":"The WebUSB API exposes USB compatible devices to web pages.","id":"webusb","name":"WebUSB","status":{"baseline":false,"support":{"chrome":"61","chrome_android":"61","edge":"79"}}},{"description_html":"WebVTT is a captions and subtitles format. WebVTT files are loaded using the <code><track></code> element, and the <code>VTTCue</code> API can be used to create or update cues dynamically.","id":"webvtt","name":"WebVTT","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"23","chrome_android":"25","edge":"12","firefox":"31","firefox_android":"31","safari":"6","safari_ios":"8"}}},{"description_html":"The WebVTT cue alignment settings control which part of the cue is aligned with the given line and position. Cue alignment is set using <code>line</code> and <code>position</code> settings in WebVTT files or the <code>lineAlign</code> and <code>positionAlign</code> properties of <code>VTTCue</code> using JavaScript.","id":"webvtt-cue-alignment","name":"WebVTT cue alignment","status":{"baseline":false,"support":{"firefox":"31","firefox_android":"31","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>VTTCue</code> API updates various aspects of cues dynamically, such as alignment, size and position.","id":"webvtt-cue-settings","name":"WebVTT cue settings","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"23","chrome_android":"25","edge":"79","firefox":"31","firefox_android":"31","safari":"6","safari_ios":"8"}}},{"description_html":"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.","id":"webvtt-regions","name":"WebVTT regions","status":{"baseline":false,"support":{"firefox":"59","firefox_android":"59","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"An <code>XRAnchor</code> 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.","id":"webxr-anchors","name":"Anchors (WebXR)","status":{"baseline":false,"support":{"chrome":"85","chrome_android":"85","edge":"85"}}},{"description_html":"The <code>\"immersive-ar\"</code> value for <code>navigator.xr.requestSession()</code> starts an augmented reality WebXR session that renders content aligned with the visible environment.","id":"webxr-ar","name":"Augmented reality","status":{"baseline":false,"support":{"chrome":"86","chrome_android":"86","edge":"86"}}},{"description_html":"The <code>XRView.camera</code> property provides direct access to pose-synchronized camera images within a WebXR session.","id":"webxr-camera","name":"Raw camera access for WebXR","status":{"baseline":false,"support":{"chrome":"107","chrome_android":"107","edge":"107"}}},{"description_html":"An <code>XRDepthInformation</code> object represents a measurement of the distance from the user's device to the real-world geometry in the user's environment.","id":"webxr-depth-sensing","name":"Depth sensing","status":{"baseline":false,"support":{"chrome":"90","chrome_android":"90","edge":"90"}}},{"description_html":"The <code>navigator.xr</code> API represents the browser's virtual reality or augmented reality system. You can use to request a WebXR session.","id":"webxr-device","name":"WebXR","status":{"baseline":false,"support":{"chrome":"79","chrome_android":"79","edge":"79"}}},{"description_html":"A DOM overlay shows 2D DOM content as an interactive, transparent layer on top of a WebXR application's WebGL content and camera image.","id":"webxr-dom-overlays","name":"DOM overlays for WebXR","status":{"baseline":false,"support":{"chrome":"83","chrome_android":"83","edge":"83"}}},{"description_html":"The <code>gamepad</code> attribute of an <code>XRInputSource</code> represents an XR input device, such as a motion controller, that reports data from physical inputs (such as buttons, touch pads, and triggers).","id":"webxr-gamepads","name":"Gamepad (WebXR)","status":{"baseline":false,"support":{"chrome":"79","chrome_android":"79","edge":"79"}}},{"description_html":"An <code>XRHand</code> object, from the <code>hand</code> attribute of an <code>XRInputSource</code> object, represents a WebXR session's fully-articulated hand tracking model.","id":"webxr-hand-input","name":"Hand input","status":{"baseline":false,"support":{"chrome":"131","chrome_android":"131"}}},{"description_html":"The <code>getHitTestResults()</code> method of an <code>XRFrame</code> object helps place objects in an augmented reality session by finding where cast rays intersect with real-world geometry.","id":"webxr-hit-test","name":"Hit test","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"81","edge":"81"}}},{"description_html":"WebXR layer types, such as <code>XRCylinderLayer</code>, <code>XRCylinderLayer</code>, <code>XREquirectLayer</code>, <code>XRProjectionLayer</code> or <code>XRQuadLayer</code>, are managed by the system compositor, to reduce latency or resampling.","id":"webxr-layers","name":"Layers (WebXR)","status":{"baseline":false,"support":{}}},{"description_html":"The <code>XRLightProbe</code> and <code>XRLightEstimate</code> objects represent real-world environmental lighting conditions during a WebXR session.","id":"webxr-lighting-estimation","name":"Lighting estimation","status":{"baseline":false,"support":{"chrome":"90","chrome_android":"90","edge":"90"}}},{"description_html":"The <code>wheel</code> event fires when the user moves a mouse wheel or similar spatially rotating input device.","id":"wheel-events","name":"Wheel events","status":{"baseline":false,"support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"17","firefox_android":"17","safari":"7"}}},{"description_html":"The <code>:where()</code> 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.","id":"where","name":":where()","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"82","firefox_android":"82","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>white-space</code> CSS property sets how white space is collapsed and how lines wrap. It is a shorthand for <code>white-space-collapse</code> and <code>text-wrap-mode</code>.","id":"white-space","name":"white-space","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>white-space-collapse</code> CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.","id":"white-space-collapse","name":"white-space-collapse","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>widows</code> and <code>orphans</code> CSS properties set the minimum lines included in a text fragment created by page, column, or region breaks.","id":"widows-orphans","name":"Widows and orphans","status":{"baseline":false,"support":{"chrome":"25","chrome_android":"25","edge":"12","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>width</code> and <code>height</code> CSS properties set the preferred physical size of an element.","id":"width-height","name":"Width and height","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>will-change</code> 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.","id":"will-change","name":"will-change","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"36","chrome_android":"36","edge":"79","firefox":"36","firefox_android":"36","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>window</code> global object represents a browser tab or iframe and its relationship to the document and other tabs. It's also a generic global object, under which many other APIs are located.","id":"window","name":"Window","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>display_override:\\ [\"window-controls-overlay\"]</code> web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.","id":"window-controls-overlay","name":"Window Controls Overlay","status":{"baseline":false,"support":{"chrome":"105","edge":"105"}}},{"description_html":"The <code>window.getScreenDetails()</code> method gets information about the screens on a device, which you can use to place new windows on a specific screen with <code>window.open()</code>.","id":"window-management","name":"Window management","status":{"baseline":false,"support":{"chrome":"111","edge":"111"}}},{"description_html":"The <code>with</code> JavaScript statement adds a given object to the chain of scopes used to evaluate names.","id":"with","name":"with","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"48","firefox_android":"48","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>word-break</code> CSS property sets how lines break within words.","id":"word-break","name":"word-break","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"44","chrome_android":"44","edge":"12","firefox":"15","firefox_android":"15","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>word-break: auto-phrase</code> CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.","id":"word-break-auto-phrase","name":"word-break: auto-phrase","status":{"baseline":false,"support":{"chrome":"119","chrome_android":"119","edge":"119"}}},{"description_html":"The <code>word-spacing</code> CSS property sets the amount of white space between words.","id":"word-spacing","name":"word-spacing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>writing-mode</code> CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.","id":"writing-mode","name":"writing-mode","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"48","chrome_android":"48","edge":"12","firefox":"41","firefox_android":"41","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>writingsuggestions</code> 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.","id":"writingsuggestions","name":"writingsuggestions","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>XMLHttpRequest</code> API makes HTTP requests. It's the predecessor to <code>fetch()</code>. Also known as XHR.","id":"xhr","name":"XMLHttpRequest","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>XMLSerializer</code> API provides the <code>serializeToString()</code> method to construct an XML string representing a DOM tree.","id":"xml-serializer","name":"XMLSerializer","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>document.evaluate()</code> method selects elements in an HTML or XML document based on an expression of XPath, a domain specific language for querying XML documents. Also known as XML Path Language.","id":"xpath","name":"XPath","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>XSLTProcessor</code> API transforms XML documents into new XML or HTML documents, using XSLT stylesheets. You can use XSLT to convert data between different XML schemas or to convert XML data into web pages or PDF documents. Also known as Extensible Stylesheet Language Transformations.","id":"xslt","name":"XSLT","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>z-index</code> CSS property orders overlapping elements, with higher values appearing in front of or on top of lower values.","id":"z-index","name":"z-index","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>zoom</code> CSS property scales the size of an element. Unlike the <code>transform</code> property, a zoomed element affects page layout.","id":"zoom","name":"zoom","status":{"baseline":"low","baseline_low_date":"2024-05-14","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"126","firefox_android":"126","safari":"3.1","safari_ios":"3"}}},{"description_html":"Zstandard or <code>zstd</code> is fast lossless compression algorithm. When used as a content encoding, it is often faster and offers better compression than brotli.","id":"zstd","name":"Zstandard compression","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"126","firefox_android":"126"}}}];
+ const allFeatures = [{"description_html":"The <code><a></code> 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.","id":"a","name":"<a>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><abbr></code> HTML element represents an abbreviation or acronym.","id":"abbr","name":"<abbr>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"If you construct a fetch request with an <code>AbortSignal</code>, you can cancel the request.","id":"abortable-fetch","name":"Abortable fetch","status":{"baseline":"high","baseline_high_date":"2021-09-25","baseline_low_date":"2019-03-25","support":{"chrome":"66","chrome_android":"66","edge":"16","firefox":"57","firefox_android":"57","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>AbortController</code> and <code>AbortSignal</code> APIs allow you to cancel an ongoing operation, such as a <code>fetch()</code> request.","id":"aborting","name":"AbortController and AbortSignal","status":{"baseline":"high","baseline_high_date":"2021-09-25","baseline_low_date":"2019-03-25","support":{"chrome":"66","chrome_android":"66","edge":"16","firefox":"57","firefox_android":"57","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>AbortSignal.any()</code> static method combines an iterable of abort signals into a single signal, with the abort reason taken from the first signal to abort.","id":"abortsignal-any","name":"AbortSignal.any()","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"116","chrome_android":"116","edge":"116","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>abs()</code> and <code>sign()</code> CSS functions compute the absolute value or the sign of the input.","id":"abs-sign","name":"abs() and sign()","status":{"baseline":false,"support":{"firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>position: absolute</code> 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.","id":"absolute-positioning","name":"Absolute positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>Accelerometer</code>, <code>LinearAccelerationSensor</code> and <code>GravitySensor</code> 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.","id":"accelerometer","name":"Accelerometer","status":{"baseline":false,"support":{"chrome":"91","chrome_android":"91","edge":"91"}}},{"description_html":"The <code>accent-color</code> CSS property sets a color for checkboxes, radio buttons, and other form controls.","id":"accent-color","name":"accent-color","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"93","edge":"93","firefox":"92","firefox_android":"92"}}},{"description_html":"The <code>accessKey</code> global HTML attribute gives a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character.","id":"accesskey","name":"Accesskey","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"17","chrome_android":"18","edge":"12","firefox":"5","firefox_android":"5","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>:active-view-transition</code> CSS pseudo-class matches the root element when a view transition is active. The <code>:active-view-transition-type()</code> CSS pseudo-class matches only when the active view transition was started with the specified type.","id":"active-view-transition","name":"Active view transition","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code><address></code> element represents contact information for a person or people, or for an organization.","id":"address","name":"<address>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>window.alert()</code>, <code>window.confirm()</code>, and <code>window.prompt()</code> methods open modal dialogs for notifying the user, asking for confirmation, or entering text.","id":"alerts","name":"Alerts","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>align-content</code> property vertically aligns content in block layouts, like it does in flex or grid layouts.","id":"align-content-block","name":"align-content in block layouts","status":{"baseline":"low","baseline_low_date":"2024-04-16","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"125","firefox_android":"125","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>alignment-baseline</code> CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent.","id":"alignment-baseline","name":"alignment-baseline","status":{"baseline":false,"support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>all</code> CSS property is a shorthand for all CSS properties, except for <code>direction</code> and <code>unicode-bidi</code>. It accepts only the keywords for explicit defaulting (such as <code>initial</code> and <code>inherit</code>), since they are the only values supported on all CSS properties.","id":"all","name":"all","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"27","firefox_android":"27","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>/</code> notation in <code>content</code> CSS property values adds alternative text to generated content. For example, the <code>content: url('upvote-icon.svg') / 'Upvote'</code> declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.","id":"alt-text-generated-content","name":"Alt text for generated content","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"128","firefox_android":"128","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>rel=\"alternate stylesheet\"</code> attribute for the <code><link></code> HTML element offers an alternative style option to users.","id":"alternative-style-sheets","name":"Alternative style sheets","status":{"baseline":false,"support":{"firefox":"3","firefox_android":"4"}}},{"description_html":"The <code>AmbientLightSensor</code> interface returns the current light level in lux of the ambient light level around the device.","id":"ambient-light","name":"Ambient light sensor","status":{"baseline":false,"support":{}}},{"description_html":"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.","id":"anchor-positioning","name":"Anchor positioning","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code>ANGLE_instanced_arrays</code> 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.","id":"angle-instanced-arrays","name":"ANGLE_instanced_arrays WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-12-07","baseline_low_date":"2016-06-07","support":{"chrome":"32","chrome_android":"30","edge":"12","firefox":"47","firefox_android":"47","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>animation-composition</code> CSS property chooses how to combine animations that affect the same property.","id":"animation-composition","name":"animation-composition","status":{"baseline":"low","baseline_low_date":"2023-07-04","support":{"chrome":"112","chrome_android":"112","edge":"112","firefox":"115","firefox_android":"115","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>animation</code> CSS property animates an element's style over time, using keyframes described in <code>@keyframes</code> rules.","id":"animations-css","name":"Animations (CSS)","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"43","chrome_android":"43","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>file_handlers</code> web app manifest member registers an installed web app as a handler for files with specific file extensions or MIME types.","id":"app-file-handlers","name":"File handlers","status":{"baseline":false,"support":{"chrome":"102","edge":"102"}}},{"description_html":"The <code>protocol_handlers</code> 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.","id":"app-protocol-handlers","name":"Protocol handlers","status":{"baseline":false,"support":{"chrome":"96","chrome_android":"96","edge":"96"}}},{"description_html":"The <code>share_target</code> 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.","id":"app-share-targets","name":"Share targets","status":{"baseline":false,"support":{"chrome":"89","chrome_android":"76","edge":"89"}}},{"description_html":"The <code>shortcuts</code> 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.","id":"app-shortcuts","name":"Application shortcuts","status":{"baseline":false,"support":{"chrome":"96","chrome_android":"84","edge":"96","safari":"17.4"}}},{"description_html":"The <code>appearance</code> CSS property controls the appearance of form controls. Using <code>appearance: none</code> disables any default native appearance and allows the elements to be styled with CSS.","id":"appearance","name":"appearance","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"80","firefox_android":"80","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"WAI-ARIA attributes have corresponding properties on <code>Element</code> and <code>ElementInternals</code> objects.","id":"aria-attribute-reflection","name":"ARIA attribute reflection","status":{"baseline":"low","baseline_low_date":"2023-10-24","support":{"chrome":"103","chrome_android":"103","edge":"103","firefox":"119","firefox_android":"119","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"Arrays are ordered lists of JavaScript values.","id":"array","name":"Array (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>at()</code> 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.","id":"array-at","name":"Array at()","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"92","chrome_android":"92","edge":"92","firefox":"90","firefox_android":"90","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>toReversed()</code>, <code>toSorted()</code>, <code>toSpliced()</code>, and <code>with()</code> methods of arrays and typed arrays return changed copies of arrays. They stand in contrast to methods such as <code>sort()</code> or <code>reverse()</code> that change arrays in place.","id":"array-by-copy","name":"Array by copy","status":{"baseline":"low","baseline_low_date":"2023-07-04","support":{"chrome":"110","chrome_android":"110","edge":"110","firefox":"115","firefox_android":"115","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>copyWithin()</code> method of arrays and typed arrays shifts or copies items of an array to another index of the array without changing its length.","id":"array-copywithin","name":"Array copyWithin()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"34","firefox_android":"34","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>fill()</code> method of arrays and typed arrays sets all or some items of an array to a given a value.","id":"array-fill","name":"Array fill()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"37","firefox_android":"37","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>find()</code> and <code>findIndex()</code> methods of arrays and typed arrays search an array for the first item that satisfies a test function.","id":"array-find","name":"Array find() and findIndex()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"37","firefox_android":"37","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>findLast()</code> and <code>findLastIndex()</code> methods of arrays and typed arrays search an array in reverse order for the first item that satisfies a test function.","id":"array-findlast","name":"Array findLast() and findLastIndex()","status":{"baseline":"low","baseline_low_date":"2022-08-23","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"104","firefox_android":"104","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>flat()</code> and <code>flatMap()</code> methods for arrays creates a new array such that each nested array item is concatenated into it.","id":"array-flat","name":"Array flat() and flatMap()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"62","firefox_android":"62","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>Array.from()</code> and typed array <code>.from()</code> static methods copy items from an iterable or array-like object to make a new array.","id":"array-from","name":"Array.from()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"38","firefox_android":"38","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Array.fromAsync()</code> static method copies items from an async iterable object to make a new array.","id":"array-fromasync","name":"Array.fromAsync()","status":{"baseline":"low","baseline_low_date":"2024-01-25","support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"115","firefox_android":"115","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>Object.groupBy()</code> and <code>Map.groupBy()</code> static methods group values of arrays and iterables based on a function that returns a key for each value.","id":"array-group","name":"Array grouping","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"119","firefox_android":"119","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>includes()</code> method of arrays and typed arrays returns whether a given value appears in the array.","id":"array-includes","name":"Array includes()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"47","chrome_android":"47","edge":"14","firefox":"43","firefox_android":"43","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Array.isArray()</code> static method checks whether a value is an array.","id":"array-isarray","name":"Array.isArray()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"}}},{"description_html":"Array iteration methods","id":"array-iteration-methods","name":"Array iteration methods","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"Arrays are iterable with the <code>for … of</code> statement and enumerable with the methods <code>entries()</code>, <code>keys()</code>, and <code>values()</code>.","id":"array-iterators","name":"Array iterators","status":{"baseline":"high","baseline_high_date":"2020-11-09","baseline_low_date":"2018-05-09","support":{"chrome":"66","chrome_android":"66","edge":"14","firefox":"60","firefox_android":"60","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Array.of()</code> and typed array <code>.of()</code> static methods create new arrays from the values of any number of arguments.","id":"array-of","name":"Array.of()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"38","firefox_android":"38","safari":"10","safari_ios":"10"}}},{"description_html":"The array <code>splice()</code> method changes an array in-place. You can use it to delete items, overwrite items, or insert items, starting from an index.","id":"array-splice","name":"Array splice()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><article></code> element represents self-contained content, which is intended to be independently distributable or reusable, such as a comment, a blog post, or news article.","id":"article","name":"<article>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><aside></code> element represents a portion of a document whose content is only indirectly related to the document's main content.","id":"aside","name":"<aside>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>aspect-ratio</code> CSS property controls the width-to-height ratio of elements. For <code><img></code> and <code><video></code> elements, the <code>width</code> and <code>height</code> attributes used together with <code>height: auto</code> control the aspect ratio while the image/video is loading.","id":"aspect-ratio","name":"aspect-ratio","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"89","firefox_android":"89","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>async</code> and <code>await</code> keywords allow you to use the asynchronous, promise-based behavior of a function without using promise chains.","id":"async-await","name":"Async functions","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"55","chrome_android":"55","edge":"15","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>navigator.clipboard</code> API asynchronously reads and writes to the system clipboard.","id":"async-clipboard","name":"Async clipboard","status":{"baseline":"low","baseline_low_date":"2024-06-11","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"127","firefox_android":"127","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"Async generator functions (<code>async function*</code>) create iterators that return multiple promises, one after another, on-demand.","id":"async-generators","name":"Async generators","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"55","firefox_android":"55","safari":"12","safari_ios":"12"}}},{"description_html":"Asynchronous iteration of a stream allows you to use <code>for await … of</code> loops to iterate through a stream's incoming data.","id":"async-iterable-streams","name":"Asynchronously iterable streams","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"110","firefox_android":"110"}}},{"description_html":"Asynchronous iterator objects, such as those returned by promises or generator functions, are iterable with the <code>for await .. of</code> loop.","id":"async-iterators","name":"Async iterators and the for await..of loop","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"57","firefox_android":"57","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>Atomics.waitAsync()</code> static method waits for a value in a shared memory location, providing a promise when the expected value is not yet in memory. The <code>waitAsync()</code> method is a non-blocking alternative to <code>Atomics.wait()</code>.","id":"atomics-wait-async","name":"Atomics.waitAsync","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"89","edge":"87","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>attr()</code> 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.","id":"attr","name":"attr()","status":{"baseline":false,"support":{}}},{"description_html":"The <code>attr()</code> CSS function, in <code>content</code> property declarations, sets a <code>::before</code> or <code>::after</code> pseudo-element's content to the value of the specified HTML attribute.","id":"attr-contents","name":"attr() (content only)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The Attribution Reporting API measures when an ad click or view leads to a conversion, such as a purchase on an advertiser site.","id":"attribution-reporting","name":"Attribution reporting","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code><audio></code> element plays sound such as audio effects or music, optionally with controls provided by the browser.","id":"audio","name":"<audio>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"3"}}},{"description_html":"The <code>navigator.audioSession</code> 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.","id":"audio-session","name":"Audio session","status":{"baseline":false,"support":{"safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>audioTracks</code> and <code>videoTracks</code> APIs for media elements switch audio and video tracks during playback.","id":"audio-video-tracks","name":"Audio and video tracks","status":{"baseline":false,"support":{"safari":"8","safari_ios":"8"}}},{"description_html":"The <code>AudioWorklet</code> API runs module code in a separate thread, specifically for non-blocking, low latency audio processing.","id":"audio-worklet","name":"AudioWorklet","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"76","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>autocapitalize</code> global HTML attribute sets the virtual keyboard capitalization behavior for user input on an element, such as the first letter of sentences or all words.","id":"autocapitalize","name":"Autocapitalize","status":{"baseline":false,"support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"111","firefox_android":"111","safari_ios":"10.3"}}},{"description_html":"The <code>autocorrect</code> global HTML attribute controls whether to automatically correct spelling or punctuation errors for user input.","id":"autocorrect","name":"Autocorrect","status":{"baseline":false,"support":{}}},{"description_html":"The <code>:autofill</code> pseudo-class matches <code><input></code> elements that have been filled in automatically by the browser.","id":"autofill","name":":autofill","status":{"baseline":"low","baseline_low_date":"2023-02-09","support":{"chrome":"110","chrome_android":"110","edge":"110","firefox":"86","firefox_android":"86","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>autofocus</code> HTML attribute gives focus to an element on page load.","id":"autofocus","name":"Autofocus","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"Autonomous custom elements are HTML elements with a hyphenated tag name (like <code><example-element></code>) that have behaviors you define.","id":"autonomous-custom-elements","name":"Autonomous custom elements","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"63","firefox_android":"63","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"AVIF (AV1 Image File Format) is an image format based on the AV1 video format.","id":"avif","name":"AVIF","status":{"baseline":"low","baseline_low_date":"2024-01-26","support":{"chrome":"85","chrome_android":"85","edge":"121","firefox":"93","firefox_android":"93","safari":"16","safari_ios":"16"}}},{"description_html":"The <code><b></code> HTML element draws reader's attention to text, styling text as bold by default.","id":"b","name":"<b>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>::backdrop</code> CSS pseudo-element is a box underneath an element in the top layer, such as a <code><dialog></code>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.","id":"backdrop","name":"::backdrop","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"47","firefox_android":"47","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>backdrop-filter</code> CSS property applies graphical effects such as blurring or color shifting to the area behind an element.","id":"backdrop-filter","name":"backdrop-filter","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"103","firefox_android":"103","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>background</code> CSS property is a shorthand that sets several background properties at once.","id":"background","name":"background","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>background-attachment</code> CSS property sets whether an element's background image or gradient moves as the element scrolls.","id":"background-attachment","name":"background-attachment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"25","firefox_android":"25","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>background-blend-mode</code> CSS property blends an element's background image and background color using blend modes like <code>multiply</code>, <code>difference</code>, or <code>color</code>.","id":"background-blend-mode","name":"background-blend-mode","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"35","chrome_android":"59","edge":"79","firefox":"30","firefox_android":"54","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>background-clip</code> CSS property sets the extent of the background: the padding box, the content box, or the default border box.","id":"background-clip","name":"background-clip","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"22","firefox_android":"22","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>background-clip: border-area</code> CSS declaration draws the background underneath only the border of an element.","id":"background-clip-border-area","name":"background-clip: border-area","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>background-clip: text</code> CSS declaration draws the background underneath only the text in the element.","id":"background-clip-text","name":"background-clip: text","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>background-color</code> CSS property sets the fill color of an element, behind any content and background images or gradients.","id":"background-color","name":"background-color","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Background fetch downloads data in the background even when the web page is closed.","id":"background-fetch","name":"Background fetch","status":{"baseline":false,"support":{"chrome":"74","chrome_android":"74","edge":"79"}}},{"description_html":"The <code>background-image</code> 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.","id":"background-image","name":"background-image","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>background-origin</code> CSS property sets the background starting position relative to the border and padding of an element.","id":"background-origin","name":"background-origin","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"22","firefox_android":"22","safari":"5.1","safari_ios":"4"}}},{"description_html":"The <code>background-position</code> CSS property offsets the initial position of background images relative to the background origin.","id":"background-position","name":"background-position","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"25","chrome_android":"25","edge":"12","firefox":"13","firefox_android":"14","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>background-repeat</code> CSS property sets how a background image is tiled.","id":"background-repeat","name":"background-repeat","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"30","chrome_android":"30","edge":"12","firefox":"49","firefox_android":"49","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>background-size</code> CSS property scales or stretches a background based on the size of the element (with the <code>contain</code> and <code>cover</code> keywords), a length, or percentage.","id":"background-size","name":"background-size","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"9","firefox_android":"18","safari":"5.1","safari_ios":"4.2"}}},{"description_html":"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.","id":"background-sync","name":"Background sync","status":{"baseline":false,"support":{"chrome":"49","chrome_android":"49","edge":"79"}}},{"description_html":"The <code>navigator.setAppBadge()</code> method allows installed web applications to display an application badge, typically a dot or number shown alongside the application's icon on the device's home screen or application dock.","id":"badging","name":"Badging","status":{"baseline":false,"support":{"chrome":"81","edge":"81","safari":"17","safari_ios":"16.4"}}},{"description_html":"The <code>BarcodeDetector</code> API recognizes various barcode formats in images.","id":"barcode","name":"Barcode detector","status":{"baseline":false,"support":{"chrome_android":"83"}}},{"description_html":"The <code>visible</code> property of the <code>window.locationbar</code>, <code>window.menubar</code>, <code>window.personalbar</code>, <code>window.scrollbars</code>, <code>window.statusbar</code>, and <code>window.toolbar</code> APIs historically represented the visibility of a browser user interface. For privacy reasons, it now represents whether the window is a pop-up.","id":"barprop","name":"BarProp","status":{"baseline":false,"support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"96","firefox_android":"96"}}},{"description_html":"The <code><base></code> element sets the base URL (the URL that relative URLs are relative to) for all relative URLs in the document.","id":"base","name":"<base>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>atob()</code> and <code>btoa()</code> global functions encode and decode strings to and from base 64, respectively.","id":"base64encodedecode","name":"Base64 encoding and decoding","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>baseline-shift</code> CSS property sets the position of an element relative to its dominant baseline.","id":"baseline-shift","name":"baseline-shift","status":{"baseline":false,"support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>baseline-source</code> 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 <code>display</code> property value.","id":"baseline-source","name":"baseline-source","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"115","firefox_android":"115"}}},{"description_html":"The <code>navigator.getBattery()</code> API obtains information about the device's battery, including charge level and status. Also known as the Battery API.","id":"battery","name":"Battery status","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","edge":"79"}}},{"description_html":"The <code><bdi></code> 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.","id":"bdi","name":"<bdi>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"16","chrome_android":"18","edge":"79","firefox":"10","firefox_android":"10","safari":"6","safari_ios":"6"}}},{"description_html":"The <code><bdo></code> element overrides the directionality of text, so that the text within is rendered in a different direction than the surrounding text.","id":"bdo","name":"<bdo>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"≤15","chrome_android":"18","edge":"12","firefox":"10","firefox_android":"10","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>navigator.sendBeacon()</code> method asynchronously sends an HTTP POST request with a limited amount of data, typically for app state, events, and analytics data. The one-way beacon is guaranteed to be initiated before the browser unloads the page, but the sender does not get to handle the response.","id":"beacons","name":"Beacons","status":{"baseline":"high","baseline_high_date":"2020-10-12","baseline_low_date":"2018-04-12","support":{"chrome":"39","chrome_android":"42","edge":"14","firefox":"31","firefox_android":"31","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>::before</code> and <code>::after</code> CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the <code>content</code> property to generate cosmetic content.","id":"before-after","name":"::before and ::after","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>beforeunload</code> 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.","id":"beforeunload","name":"Beforeunload","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>notRestoredReasons</code> property of a <code>PerformanceNavigationTiming</code> object explains why the current document was blocked from using the back/forward cache (also known as the bfcache) on navigation.","id":"bfcache-blocking-reasons","name":"Back/forward cache blocking reasons","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125"}}},{"description_html":"The <code>BigInt</code> JavaScript type represents integers of any size, including integers too large for the primitive <code>Number</code> type.","id":"bigint","name":"BigInt","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"67","chrome_android":"67","edge":"79","firefox":"68","firefox_android":"68","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>BigInt64Array</code> and <code>BigUint64Array</code> typed arrays represent 64-bit integers, signed and unsigned respectively.","id":"bigint64array","name":"BigInt64Array","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"67","chrome_android":"67","edge":"79","firefox":"68","firefox_android":"68","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>blocking=\"render\"</code> attribute for <code><link></code>, <code><script></code>, and <code><style></code> elements blocks rendering until the external script or stylesheet has been loaded. For <code><link rel=\"expect\"></code>, rendering is blocked until a specific element is in the DOM.","id":"blocking-render","name":"blocking=\"render\"","status":{"baseline":false,"support":{"chrome":"105","chrome_android":"105","edge":"105"}}},{"description_html":"The <code><blockquote></code> element represents an extended quotation, styling contents as an indented block by default.","id":"blockquote","name":"<blockquote>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><body></code> element represents the content of an HTML document.","id":"body","name":"<body>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>border-image</code> CSS property draws an image around an element.","id":"border-image","name":"Border images","status":{"baseline":"high","baseline_high_date":"2019-08-01","baseline_low_date":"2017-02-01","support":{"chrome":"56","chrome_android":"56","edge":"12","firefox":"50","firefox_android":"50","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>border-radius</code> CSS property rounds the corners of the border drawn around an element.","id":"border-radius","name":"border-radius","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>border</code> CSS property sets the color, style, and width of the line around an element.","id":"borders","name":"Borders","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"14","safari":"1","safari_ios":"3"}}},{"description_html":"The <code>box-decoration-break</code> 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.","id":"box-decoration-break","name":"box-decoration-break","status":{"baseline":false,"support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"32","firefox_android":"32"}}},{"description_html":"The <code>box-shadow</code> CSS property applies shadow effects around an element's frame. This can create drop shadow and inner shadow effects.","id":"box-shadow","name":"box-shadow","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>box-sizing</code> CSS property sets whether an element's width and height are calculated based on the <code>content-box</code>, which does not count the size of borders or padding, or <code>border-box</code>, which does count them.","id":"box-sizing","name":"box-sizing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"29","firefox_android":"29","safari":"5.1","safari_ios":"6"}}},{"description_html":"The <code><br></code> element produces line breaks in text.","id":"br","name":"<br>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>BroadcastChannel</code> API allows you to send messages between same-origin browsing contexts, such as between the same page loaded in multiple tabs.","id":"broadcast-channel","name":"BroadcastChannel","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"38","firefox_android":"38","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"Brotli is a lossless data compression algorithm. When used as a content encoding, it often provides better compression than gzip.","id":"brotli","name":"Brotli compression","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"50","chrome_android":"51","edge":"15","firefox":"44","firefox_android":"44","safari":"11","safari_ios":"11"}}},{"description_html":"The <code><button></code> 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.","id":"button","name":"<button>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>calc()</code> CSS function computes mathematical expressions such a <code>calc(100%/3 - 1em)</code>.","id":"calc","name":"calc()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"28","edge":"12","firefox":"16","firefox_android":"16","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>e</code>, <code>pi</code>, <code>infinity</code>, and <code>NaN</code> keywords represent well-defined constants accepted in CSS math functions such as <code>calc()</code>.","id":"calc-constants","name":"calc() keywords","status":{"baseline":"low","baseline_low_date":"2023-06-06","support":{"chrome":"110","chrome_android":"110","edge":"110","firefox":"114","firefox_android":"114","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>calc-size()</code> CSS function computes mathematical expressions that include <code>height</code> and <code>width</code> keyword values, for example <code>calc-size(fit-content, size / 2)</code>. Not to be confused with the <code>calc()</code> CSS function, which cannot use keyword values.","id":"calc-size","name":"calc-size()","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"The <code><canvas></code> HTML element is a space to draw graphics in, using the 2D canvas API, WebGL, or WebGPU.","id":"canvas","name":"<canvas>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The <code>CanvasRenderingContext2D</code> API is the \"2d\" rendering context for the <code><canvas></code> element. It represents a flat, two-dimensional space for drawing graphics and animations.","id":"canvas-2d","name":"2D canvas","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The optional <code>alpha</code> parameter of a 2D canvas's <code>getContext()</code> method sets whether the canvas has an alpha transparency channel. If set to <code>false</code>, then this permits the browser to optimize compositing for an opaque canvas.","id":"canvas-2d-alpha","name":"2D canvas opacity","status":{"baseline":false,"support":{"chrome":"32","chrome_android":"32","edge":"≤79","firefox":"30","firefox_android":"30"}}},{"description_html":"The optional <code>colorSpace</code> parameter of a 2D canvas's <code>getContext()</code> method chooses the color representation, such as <code>\"srgb\"</code> or <code>\"display-p3\"</code>.","id":"canvas-2d-color-management","name":"Color management for 2D canvas","status":{"baseline":false,"support":{"chrome":"92","chrome_android":"92","edge":"92","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"The optional <code>desynchronized</code> parameter of a canvas's <code>getContext()</code> method permits the browser to draw a 2D canvas independently of the event loop. This can reduce drawing latency.","id":"canvas-2d-desynchronized","name":"Desynchronized 2D canvas","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"75","edge":"79","safari":"15","safari_ios":"15"}}},{"description_html":"The optional <code>willReadFrequently</code> parameter of a canvas's <code>getContext()</code> method permits the browser to optimize for frequent <code>getImageData()</code> calls by avoiding hardware acceleration. Also known as multiple readback.","id":"canvas-2d-willreadfrequently","name":"willReadFrequently","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"28","firefox_android":"28","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>contextlost</code> event for <code><canvas></code> fires when the canvas backing storage is lost, while the <code>contextrestored</code> event fires when it is recreated.","id":"canvas-context-lost","name":"contextlost and contextrestored","status":{"baseline":false,"support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"125","firefox_android":"125"}}},{"description_html":"The <code>createConicGradient()</code> methods draw a conic gradient to a 2D canvas.","id":"canvas-createconicgradient","name":"Canvas createConicGradient()","status":{"baseline":"low","baseline_low_date":"2023-04-11","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"112","firefox_android":"112","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>reset()</code> method clears a canvas to its initial state.","id":"canvas-reset","name":"Canvas reset()","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"113","firefox_android":"113","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>roundRect()</code> methods draw a rounded rectangle to a 2D canvas.","id":"canvas-roundrect","name":"Canvas roundRect()","status":{"baseline":"low","baseline_low_date":"2023-04-11","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"112","firefox_android":"112","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The CSS <code>cap</code> unit corresponds to the height of Latin capital letters.","id":"cap","name":"cap unit","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"97","firefox_android":"97","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>captureStream()</code> method for <code><audio></code> and <code><video></code> elements returns a <code>MediaStream</code> for the media element's content. You can use this to record media or send it elsewhere, such as a canvas or WebRTC connection.","id":"capture-stream-audio-video","name":"captureStream() for <audio> and <video>","status":{"baseline":false,"support":{"chrome":"62","chrome_android":"62","edge":"79"}}},{"description_html":"The <code>captureStream()</code> method for <code><canvas></code> elements returns a <code>MediaStream</code> which includes a <code>CanvasCaptureMediaStreamTrack</code> 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.","id":"capture-stream-canvas","name":"captureStream() for <canvas>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"51","chrome_android":"51","edge":"79","firefox":"43","firefox_android":"43","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>caret-color</code> CSS property sets the color of the text insertion pointer in a text input.","id":"caret-color","name":"caret-color","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"57","chrome_android":"57","edge":"79","firefox":"53","firefox_android":"53","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>@layer</code> 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.","id":"cascade-layers","name":"Cascade layers","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>i</code> identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.","id":"case-insensitive-attributes","name":"Case-insensitive attribute selector","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"49","chrome_android":"49","edge":"79","firefox":"47","firefox_android":"47","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>s</code> identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.","id":"case-sensitive-attributes","name":"Case-sensitive attribute selector","status":{"baseline":false,"support":{"firefox":"66","firefox_android":"66"}}},{"description_html":"The <code>ch</code> CSS length unit is a font-relative length based on the width of the zero (0) character.","id":"ch","name":"ch unit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"27","chrome_android":"27","edge":"12","firefox":"1","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>change</code> event for <code><input></code>, <code><select></code>, and <code><textarea></code> elements fires when the user modifies the element's value. Unlike the <code>input</code> event, the change event does not necessarily fire on every alteration to an element's value.","id":"change-event","name":"Change event","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"Channel messaging communicates one-to-one between browsing contexts on the same origin, such as between <code><iframe></code> elements or two documents using a shared worker.","id":"channel-messaging","name":"Channel messaging","status":{"baseline":"high","baseline_high_date":"2018-03-22","baseline_low_date":"2015-09-22","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"41","firefox_android":"41","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>@charset</code> CSS at-rule specifies the character encoding of an external style sheet.","id":"charset","name":"@charset","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"4"}}},{"description_html":"The <code>checkVisibility()</code> 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 <code>display: none</code>, but can also check for <code>visibility: hidden</code>.","id":"check-visibility","name":"checkVisibility()","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"106","firefox_android":"106","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code><cite></code> element represents the title of a quoted, referenced, or mentioned creative work, such as a film or book.","id":"cite","name":"<cite>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"Classes are an object-oriented syntax for JavaScript prototypes.","id":"class-syntax","name":"Classes","status":{"baseline":"high","baseline_high_date":"2018-09-08","baseline_low_date":"2016-03-08","support":{"chrome":"42","chrome_android":"42","edge":"13","firefox":"45","firefox_android":"45","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>Clear-Site-Data</code> header deletes browsing data (such as cookies, storage, or cache) associated with the requesting website.","id":"clear-site-data","name":"Clearing site data","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"63","firefox_android":"63","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>clip-path</code> CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.","id":"clip-path","name":"clip-path","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"71","firefox_android":"79","safari":"13.1","safari_ios":"13"}}},{"description_html":"The <code>clip-path</code> property can be animated using CSS transitions and animations.","id":"clip-path-animatable","name":"Animatable clipping paths","status":{"baseline":false,"support":{"chrome":"55","chrome_android":"55","edge":"79","firefox":"49","firefox_android":"49"}}},{"description_html":"The <code>fill-box</code>, <code>stroke-box</code>, and <code>view-box</code> values for <code>clip-path</code> set an edge of the element's box to use as the clipping shape.","id":"clip-path-boxes","name":"Clip path boxes","status":{"baseline":"low","baseline_low_date":"2023-11-02","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"≤72","firefox_android":"≤79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>web </code> prefix for <code>ClipboardItem</code> data types (also known as MIME types) allows reading and writing ununsanitized custom data from the device clipboard.","id":"clipboard-custom-format","name":"Custom formats for clipboard items","status":{"baseline":false,"support":{"chrome":"104","chrome_android":"104","edge":"104"}}},{"description_html":"The <code>\"copy\"</code>, <code>\"cut\"</code>, and <code>\"paste\"</code> events fire on elements when the user starts an action with the clipboard.","id":"clipboard-events","name":"Clipboard events","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"22","firefox_android":"22","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>ClipboardItem.supports()</code> static method checks if the browser supports writing data types such as \"image/svg+xml\" or other custom formats to the system clipboard.","id":"clipboard-supports","name":"ClipboardItem.supports()","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"127","firefox_android":"127"}}},{"description_html":"The <code>image/svg+xml</code> data type (also known as the MIME type) for <code>ClipboardItem</code> objects represents SVG data written to or read from the clipboard.","id":"clipboard-svg","name":"SVG clipboard items","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124"}}},{"description_html":"The optional <code>formats.unsanitized</code> parameter of the <code>navigator.clipboard.read()</code> method reads unsanitized <code>text/html</code> data from the system clipboard.","id":"clipboard-unsanitized-formats","name":"Read unsanitized clipboard data","status":{"baseline":false,"support":{"chrome":"122","chrome_android":"122","edge":"122"}}},{"description_html":"The <code>CloseWatcher</code> API listens and responds to close requests on in-page components, such as modals, popovers, and sidebars.","id":"closewatcher","name":"CloseWatcher","status":{"baseline":false,"support":{"chrome":"126","chrome_android":"126","edge":"126"}}},{"description_html":"The <code><code></code> element displays its contents as a fragment of computer code.","id":"code","name":"<code>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>color</code> CSS property sets the primary foreground color of an element, which is used for text, the default border color, and text decorations.","id":"color","name":"Color","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>color()</code> function picks a color from a given color space. Wide gamut color spaces like <code>display-p3</code> allow showing more vibrant and saturated colors than the standard <code>srgb</code> color space.","id":"color-function","name":"color()","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>color-gamut</code> media query sets styles based on the colors a device can display.","id":"color-gamut","name":"color-gamut media query","status":{"baseline":"low","baseline_low_date":"2023-02-14","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"110","firefox_android":"110","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>color-mix()</code> 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.","id":"color-mix","name":"color-mix()","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"16.2","safari_ios":"16.2"}}},{"description_html":"The <code>color-scheme</code> CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.","id":"color-scheme","name":"color-scheme","status":{"baseline":"high","baseline_high_date":"2024-08-03","baseline_low_date":"2022-02-03","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"96","firefox_android":"96","safari":"13","safari_ios":"13"}}},{"description_html":"COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.","id":"colrv0","name":"COLRv0","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"31","firefox_android":"31","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"COLRv1 is a font format that supports multi-color glyphs. COLRv1 extends COLRv0 to support gradients, transforms, and blending modes.","id":"colrv1","name":"COLRv1","status":{"baseline":false,"support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"107","firefox_android":"107"}}},{"description_html":"In columnar layouts (created by the <code>columns</code> or <code>column-count</code> CSS properties), the <code>break-after</code>, <code>break-before</code>, <code>break-inside</code> properties control where columns start or end.","id":"column-breaks","name":"Column breaks","status":{"baseline":false,"support":{"chrome":"102","chrome_android":"102","edge":"102"}}},{"description_html":"The <code>column-fill</code> CSS property sets the distribution of content across columns in a multi-column layout.","id":"column-fill","name":"column-fill","status":{"baseline":"high","baseline_high_date":"2019-09-07","baseline_low_date":"2017-03-07","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"52","firefox_android":"52","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>column-span</code> CSS property controls whether a child element extends across all columns of a multi-column parent.","id":"column-span","name":"column-span","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"71","firefox_android":"79","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>window.getSelection().getComposedRanges()</code> method returns ranges that represent the current user selection, even if the selection spans across shadow tree boundaries.","id":"composed-ranges","name":"Selection composed ranges","status":{"baseline":false,"support":{"safari":"17","safari_ios":"17"}}},{"description_html":"The <code>compositionstart</code>, <code>compositionupdate</code>, and <code>compositionend</code> events fire when an input method editor adds characters that might not be commonly available on keyboards. Examples of these characters are emoji, logograms in Asian languages, or input from speech recognition processors.","id":"composition-events","name":"Composition events","status":{"baseline":"high","baseline_high_date":"2019-10-19","baseline_low_date":"2017-04-19","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"53","firefox_android":"53","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>CompressionStream</code> and <code>DecompressionStream</code> interfaces compress and decompress data using the gzip or deflate formats.","id":"compression-streams","name":"Compression streams","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"113","firefox_android":"113","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>PressureObserver</code> API monitors CPU load, allowing you to adjust workloads in response to available computing resources. Also known as the Compute Pressure API.","id":"compute-pressure","name":"CPU compute pressure","status":{"baseline":false,"support":{"chrome":"125","edge":"125"}}},{"description_html":"The <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> CSS functions create backgrounds that progress between two or more colors around a center point.","id":"conic-gradients","name":"Conic gradients","status":{"baseline":"high","baseline_high_date":"2023-05-17","baseline_low_date":"2020-11-17","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"83","firefox_android":"83","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>console</code> API logs debugging messages to the browser development tools' console.","id":"console","name":"Console","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"Methods that validate form controls before submission, such as <code>checkValidity()</code>, <code>reportValidity()</code> and <code>setCustomValidity()</code>.","id":"constraint-validation","name":"Constraint validation API","status":{"baseline":"high","baseline_high_date":"2021-06-11","baseline_low_date":"2018-12-11","support":{"chrome":"40","chrome_android":"40","edge":"18","firefox":"51","firefox_android":"64","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>CSSStyleSheet</code> constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using <code>adoptedStyleSheets</code>.","id":"constructed-stylesheets","name":"Constructed stylesheets","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"101","firefox_android":"101","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.contacts</code> API allows you to ask users to share limited details about entries in their contact list with your application.","id":"contact-picker","name":"Contact picker","status":{"baseline":false,"support":{"chrome_android":"80"}}},{"description_html":"The <code>contain</code> CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The <code>none</code> keyword value disables containment, <code>strict</code> is equivalent to <code>contain: size layout style paint</code>, and <code>content</code> is equivalent to <code>contain: layout style paint</code>.","id":"contain","name":"contain","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: inline-size</code> 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.","id":"contain-inline-size","name":"Inline-size containment","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"101","firefox_android":"101","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>contain-intrinsic-size</code> 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.","id":"contain-intrinsic-size","name":"contain-intrinsic-size","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"107","firefox_android":"107","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>contain: layout</code> 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.","id":"contain-layout","name":"Layout containment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: paint</code> 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.","id":"contain-paint","name":"Paint containment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: size</code> CSS declaration sets an element's dimensions exclusively by its <code>height</code> and <code>width</code> properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.","id":"contain-size","name":"Size containment","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>contain: style</code> CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (<code>counter-increment</code> and <code>counter-set</code>) and quotation styles (<code>content</code> property quote values) beyond the element's descendants.","id":"contain-style","name":"Style containment","status":{"baseline":"low","baseline_low_date":"2022-07-26","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"103","firefox_android":"103","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"Container size queries with the <code>@container</code> at-rule apply styles to an element based on the dimensions of its container.","id":"container-queries","name":"Container queries","status":{"baseline":"low","baseline_low_date":"2023-02-14","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"110","firefox_android":"110","safari":"16","safari_ios":"16"}}},{"description_html":"Container style queries with the <code>@container</code> at-rule apply styles to an element based on the values of custom properties of its container.","id":"container-style-queries","name":"Container style queries","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>content</code> CSS property sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the <code>::before</code> and <code>::after</code> pseudo-elements to generate cosmetic content.","id":"content","name":"Content","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The Content Index API allows developers to register their offline enabled content with the browser.","id":"content-index","name":"Content Index","status":{"baseline":false,"support":{"chrome_android":"84"}}},{"description_html":"The <code>content-visibility</code> CSS property delays rendering an element, including layout and painting, until it is needed.","id":"content-visibility","name":"content-visibility","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"108","chrome_android":"108","edge":"108","firefox":"130","firefox_android":"130","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>contenteditable</code> global HTML attribute allows the user to edit the content of an element, such as inserting or deleting text.","id":"contenteditable","name":"Contenteditable","status":{"baseline":"high","baseline_high_date":"2024-06-07","baseline_low_date":"2021-12-07","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"95","firefox_android":"79","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>contenteditable=\"plaintext-only\"</code> global HTML attribute allows the user to edit the content of an element, but prevents rich-text formatting.","id":"contenteditable-plaintextonly","name":"contenteditable=\"plaintext-only\"","status":{"baseline":false,"support":{"chrome":"51","chrome_android":"51","edge":"≤79","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>context-fill</code> and <code>context-stroke</code> CSS values are used with <code>fill</code> and <code>stroke</code> in SVG <code><marker></code> or <code><use></code> elements to match a color from where they appear.","id":"context-fill-stroke","name":"context-fill and context-stroke","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"111","firefox_android":"111"}}},{"description_html":"The <code>controlslist</code> attribute for <code><audio></code> or <code><video></code> hides parts of the browser's built-in controls. For example, <code>controlslist=\"nofullscreen\"</code> removes the button to play the video in fullscreen.","id":"controls-list","name":"controlslist","status":{"baseline":false,"support":{"chrome":"58","chrome_android":"58","edge":"79"}}},{"description_html":"The <code>navigator.cookieEnabled</code> property returns a Boolean value for whether the browser accepts or ignores attempts to write cookie data.","id":"cookie-enabled","name":"cookieEnabled","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>CookieStore</code> interface is an asynchronous and promise-based API for managing cookies. It does not rely on document and so is available to service workers as well.","id":"cookie-store","name":"Cookie store","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"87","edge":"87"}}},{"description_html":"The <code>Set-Cookie</code> HTTP header stores limited amounts of data that persist across request and response, creating shared state between the browser and server.","id":"cookies","name":"Cookies","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Cross-Origin Resource Sharing is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. Also known as CORS.","id":"cors","name":"CORS","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>reversed()</code> CSS function for <code>counter-reset</code> creates a counter that counts down.","id":"counter-reset-reversed","name":"Reversed counter-reset","status":{"baseline":false,"support":{"firefox":"96","firefox_android":"96"}}},{"description_html":"The <code>counter-set</code> CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.","id":"counter-set","name":"counter-set","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"68","firefox_android":"68","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>@counter-style</code> 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.","id":"counter-style","name":"@counter-style","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"91","chrome_android":"91","edge":"91","firefox":"33","firefox_android":"33","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>counter-reset</code> and <code>counter-increment</code> CSS properties and the <code>counter()</code> and <code>counters()</code> functions automatically number headings or ordered list items.","id":"counters","name":"Counters (CSS)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"25","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>createImageBitmap()</code> global method creates an <code>ImageBitmap</code> object from a source such as an image, SVG, blob, or canvas. An <code>ImageBitmap</code> object represents pixel data that can be drawn to a canvas with lower latency than other types, such as <code>ImageData</code>.","id":"createimagebitmap","name":"createImageBitmap","status":{"baseline":false,"support":{"chrome":"66","chrome_android":"66","edge":"79","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>navigator.credentials</code> API provides generic storage for authentication credentials. Other credential APIs represent specific kinds of credentials, such as password or public key credentials, that the credential management API stores.","id":"credential-management","name":"Credential management","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"60","firefox_android":"60","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>image-rendering: crisp-edges</code> CSS declaration scales images to preserve lines without blurring.","id":"crisp-edges","name":"crisp-edges","status":{"baseline":false,"support":{"firefox":"65","firefox_android":"65","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>@view-transition</code> 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.","id":"cross-document-view-transitions","name":"Cross-document view transitions","status":{"baseline":false,"support":{"chrome":"126","chrome_android":"126","edge":"126","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>cross-fade()</code> CSS function generates an image by mixing two images.","id":"cross-fade","name":"cross-fade()","status":{"baseline":false,"support":{"safari":"10","safari_ios":"9.3"}}},{"description_html":"Content Security Policy (CSP) helps to mitigate certain security threats, including cross-site scripting (XSS) and clickjacking attacks. It consists of a set of directives from a website to a browser, which instruct the browser to restrict the things that the site is allowed to do.","id":"csp","name":"Content Security Policy (CSP)","status":{"baseline":"high","baseline_high_date":"2019-02-02","baseline_low_date":"2016-08-02","support":{"chrome":"25","chrome_android":"25","edge":"14","firefox":"23","firefox_android":"23","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>CSS.escape()</code> static method escapes a string so that it can be used in a valid CSS selector.","id":"css-escape","name":"CSS.escape()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"31","firefox_android":"31","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"Module `import … with { type: \"css\" } statements load CSS modules as constructable stylesheets. Also known as CSS module scripts and formerly known as import assertions.","id":"css-modules","name":"CSS import attributes","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.","id":"css-object-model","name":"CSS object model","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"28","chrome_android":"28","edge":"12","firefox":"22","firefox_android":"22","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>CSS.supports()</code> static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an <code>@supports</code> at-rule condition string.","id":"css-supports","name":"CSS.supports()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"55","firefox_android":"55","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>CSSStyleValue</code> and its subclasses represent CSS values as distinct types instead of only strings. Also known as typed OM.","id":"css-typed-om","name":"CSS typed object model","status":{"baseline":false,"support":{"chrome":"66","chrome_android":"66","edge":"79","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>cubic-bezier()</code> CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, and <code>ease-in-out</code> keyword values are presets for common Bézier curves.","id":"cubic-bezier-easing","name":"cubic-bezier() easing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"16","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>currentColor</code> CSS value allows you to reuse an element's computed text color for other properties.","id":"currentcolor","name":"currentColor","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>cursor</code> CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.","id":"cursor","name":"Cursor styles","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79","firefox":"27","firefox_android":"95","safari":"11"}}},{"description_html":"The <code>text-overflow</code> CSS property with a string value sets the string representing clipped text.","id":"custom-ellipses","name":"Custom ellipses","status":{"baseline":false,"support":{"firefox":"9","firefox_android":"9"}}},{"description_html":"Custom properties are CSS properties prefixed with <code>--</code> that set values you can reuse with the <code>var()</code> function. For example, you can set a <code>--key-color</code> property to reuse as <code>border-color: var(--key-color)</code>. Also known as CSS variables.","id":"custom-properties","name":"Custom properties","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"49","chrome_android":"49","edge":"15","firefox":"31","firefox_android":"31","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"Customized built-in elements are HTML elements that extend built-in elements using the <code>is</code> attribute, to add new behaviors that you define.","id":"customized-built-in-elements","name":"Customized built-in elements","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67","edge":"79","firefox":"63","firefox_android":"63"}}},{"description_html":"The <code><data></code> element links a given piece of content with a machine-readable translation.","id":"data","name":"<data>","status":{"baseline":"high","baseline_high_date":"2020-04-24","baseline_low_date":"2017-10-24","support":{"chrome":"62","chrome_android":"62","edge":"14","firefox":"22","firefox_android":"22","safari":"10","safari_ios":"10"}}},{"description_html":"Data URLs are URLs that start with the <code>data:</code> scheme and which directly contain data rather than point to remote resources.","id":"data-urls","name":"Data URLs","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"≤4","chrome_android":"18","edge":"12","firefox":"≤2","firefox_android":"4","safari":"≤3.1","safari_ios":"≤2"}}},{"description_html":"The <code><datalist></code> element sets recommended values for an <code><input></code> element. Browsers may show a dropdown menu of all values or match values as the user types.","id":"datalist","name":"<datalist>","status":{"baseline":false,"support":{"chrome":"69","chrome_android":"69","edge":"12","firefox":"110","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>dataset</code> API attaches and accesses custom data on elements, using either the <code>dataset</code> property of <code>HTMLElement</code> or attributes prefixed with <code>data-</code>.","id":"dataset","name":"Dataset","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>Date</code> object represents a single moment in time.","id":"date","name":"Date","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>shadowrootmode</code> attribute on <code><template></code> creates a shadow root without the use of JavaScript. It is a declarative alternative to the <code>attachShadow()</code> method.","id":"declarative-shadow-dom","name":"Declarative shadow DOM","status":{"baseline":"low","baseline_low_date":"2024-02-20","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"123","firefox_android":"123","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>:default</code> CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the <code>checked</code> attribute.","id":"default","name":":default","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"10","chrome_android":"18","edge":"79","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"}}},{"description_html":"The <code><del></code> element element represents a range of text that has been deleted from a document, styling text as strikethrough by default.","id":"del","name":"<del>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><dl></code>, <code><dt></code>, and <code><dd></code> HTML elements represent a list of terms and their associated descriptions. Use a description list to create glossaries or similar list of key-value pairs.","id":"description-list","name":"Description list","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The destructuring assignment syntax is a JavaScript expression that unpacks values from arrays, or properties from objects, into distinct variables.","id":"destructuring","name":"Destructuring","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"55","firefox_android":"55","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code><details></code> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested <code><summary></code> element is visible.","id":"details","name":"<details>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"12","chrome_android":"18","edge":"79","firefox":"49","firefox_android":"49","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>::details-content</code> pseudo-element selects the expandable content of a <code><details></code> element, excluding the <code><summary></code>.","id":"details-content","name":"::details-content","status":{"baseline":false,"support":{"chrome":"131","chrome_android":"131","edge":"131"}}},{"description_html":"Multiple <code><details></code> elements which use the same <code>name</code> attribute are mutually exclusive. When one member of the group is opened, all other members are closed.","id":"details-name","name":"Mutually exclusive <details> elements","status":{"baseline":"low","baseline_low_date":"2024-09-03","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"130","firefox_android":"130","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>navigator.deviceMemory</code> property returns the approximate amount of device memory, in gigabytes.","id":"device-memory","name":"Device memory","status":{"baseline":false,"support":{"chrome":"65","chrome_android":"65","edge":"79"}}},{"description_html":"The <code>DeviceMotion</code> and <code>DeviceOrientation</code> events report the movement and orientation of the browser's device in physical space. Note that coordinates can differ noticeably between platforms and devices.","id":"device-orientation-events","name":"Device orientation events","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"6","firefox_android":"6","safari":"17","safari_ios":"4.2"}}},{"description_html":"The device posture API provides information about the physical posture of a device, such as whether a foldable device is folded or unfolded.","id":"device-posture","name":"Device posture","status":{"baseline":false,"support":{}}},{"description_html":"The <code>window.devicePixelRatio</code> read-only property returns the ratio of the size of one CSS pixel to the vertical size of one physical pixel on the current display device.","id":"devicepixelratio","name":"devicePixelRatio","status":{"baseline":false,"support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"18","firefox_android":"18"}}},{"description_html":"The <code><dfn></code> element marks a term to be defined, styling text as italic by default.","id":"dfn","name":"<dfn>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"15","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"The <code><dialog></code> HTML element represents a modal or non-modal dialog box, such as a confirmation prompt or a subwindow used to enter data.","id":"dialog","name":"<dialog>","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"98","firefox_android":"98","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>window.getDigitalGoodsService</code> API connects to stores or billing services for in-app products and subscriptions.","id":"digital-goods","name":"Digital goods","status":{"baseline":false,"support":{"chrome_android":"101"}}},{"description_html":"The <code>:dir()</code> CSS functional pseudo-class matches elements by text direction, either right to left (<code>rtl</code>) or left to right (<code>ltr</code>).","id":"dir-pseudo","name":":dir()","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"49","firefox_android":"49","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>dirname</code> attribute of <code><textarea></code> and <code><input></code> HTML elements includes the field's writing direction as form data on submission.","id":"dirname","name":"dirname","status":{"baseline":"low","baseline_low_date":"2023-08-01","support":{"chrome":"17","chrome_android":"18","edge":"79","firefox":"116","firefox_android":"116","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>display</code> CSS property sets the display behavior of an element's box within its layout and sets the layout behavior for its child elements.","id":"display","name":"Display","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"You can animate elements between <code>display: none</code> and any other <code>display</code> value or animate between <code>content-visibility: hidden</code> and any other <code>content-visibility</code> value. This also applies to transitions.","id":"display-animation","name":"display animation","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>display: contents</code> CSS declaration sets an element to display only its contents, not itself.","id":"display-contents","name":"display: contents","status":{"baseline":false,"support":{}}},{"description_html":"The <code>display: flow-root</code> CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.","id":"display-flow-root","name":"display: flow-root","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"53","firefox_android":"53","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>display: list-item</code> CSS declaration renders an element with the box layout of a <code><li></code> HTML element.","id":"display-list-item","name":"display: list-item","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>display-mode</code> CSS media query sets styles based on whether the web page is in <code>fullscreen</code>, <code>standalone</code>, <code>minimal-ui,</code> <code>browser</code>, or <code>picture-in-picture</code> mode.","id":"display-mode","name":"display-mode media query","status":{"baseline":false,"support":{"chrome":"123","edge":"123"}}},{"description_html":"The <code>display: ruby</code> CSS declaration renders an element with the box layout of a <code><ruby></code> HTML element. Child elements may use equivalents to <code><ruby></code> internal elements such as <code>display: ruby-base</code> for <code><rb></code>.","id":"display-ruby","name":"display: ruby","status":{"baseline":false,"support":{"firefox":"38","firefox_android":"38"}}},{"description_html":"The <code>display: table</code> CSS declaration renders an element with the box layout of a <code><table></code> HTML element. Child elements may use equivalents to <code><table></code> internal elements such as <code>display: table-row</code> for <code><tr></code>.","id":"display-table","name":"display: table","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","firefox":"3","firefox_android":"4","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code><div></code> HTML element is the generic container for content.","id":"div","name":"<div>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>document.caretPositionFromPoint()</code> method finds an insertion point, represented by a DOM node and an offset within that node, for given coordinates in the viewport.","id":"document-caretpositionfrompoint","name":"document.caretPositionFromPoint()","status":{"baseline":false,"support":{"chrome":"128","chrome_android":"128","edge":"128","firefox":"23","firefox_android":"23"}}},{"description_html":"The document picture-in-picture API creates an always-on-top window from arbitrary HTML content.","id":"document-picture-in-picture","name":"Document picture-in-picture","status":{"baseline":false,"support":{"chrome":"130","edge":"130"}}},{"description_html":"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.","id":"dom","name":"DOM","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>DOMMatrix</code>, <code>DOMPoint</code>, <code>DOMQuad</code> and <code>DOMRect</code> interfaces offer a way to represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <code><canvas></code>, and SVG.","id":"dom-geometry","name":"DOM Geometry","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"33","firefox_android":"33","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>dominant-baseline</code> CSS property sets the specific baseline used to align an elements's text and inline-level contents.","id":"dominant-baseline","name":"dominant-baseline","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","firefox":"1","firefox_android":"4","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>DOMParser</code> API parses XML or HTML source code from a string into a DOM Document.","id":"domparser","name":"DOMParser","status":{"baseline":"high","baseline_high_date":"2018-09-21","baseline_low_date":"2016-03-21","support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"12","firefox_android":"14","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>download</code> attribute for <code><a></code> elements loads the target URL as a file to be saved, instead of navigating to it. An optional attribute value sets a default file name.","id":"download","name":"download","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"14","chrome_android":"18","edge":"18","firefox":"20","firefox_android":"20","safari":"10.1","safari_ios":"13"}}},{"description_html":"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.","id":"draganddrop","name":"Drag and Drop","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>dynamic-range</code> CSS media query sets styles based on whether a device can display at least <code>standard</code> range colors or at least <code>high</code> range colors. Non-visual devices will match neither.","id":"dynamic-range","name":"dynamic-range media query","status":{"baseline":"high","baseline_high_date":"2024-11-03","baseline_low_date":"2022-05-03","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"100","firefox_android":"100","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>EditContext</code> 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.","id":"edit-context","name":"EditContext","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121"}}},{"description_html":"The <code>element()</code> CSS function creates a live-updating image from an HTML element that can be used as an image or background image.","id":"element","name":"element()","status":{"baseline":false,"support":{}}},{"description_html":"The <code>document.elementFromPoint()</code> and <code>document.elementsFromPoint()</code> methods find the top-most element at a given point in the viewport, or all elements at a given point in the viewport, respectively.","id":"element-from-point","name":"document.elementFromPoint() and document.elementsFromPoint()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"43","chrome_android":"43","edge":"79","firefox":"46","firefox_android":"46","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>element</code> performance entry and the <code>PerformanceElementTiming</code> API measures the time to render elements that have the <code>elementtiming</code> attribute.","id":"element-timing","name":"Element timing","status":{"baseline":false,"support":{"chrome":"77","chrome_android":"77","edge":"79"}}},{"description_html":"The <code><em></code> HTML element emphasizes or stresses the content, styling text as italic by default.","id":"em","name":"<em>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>em</code> CSS length unit is a font-relative length equal to the specified font size. In an element with a 2 inch font, <code>1em</code> equals 2 inches.","id":"em-unit","name":"em unit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><embed></code> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.","id":"embed","name":"<embed>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"1.5","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>:empty</code> CSS pseudo-class matches elements without child elements.","id":"empty","name":":empty","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>enterkeyhint</code> global HTML attribute sets the label for a virtual keyboard's Enter key. For example, <code>enterkeyhint=\"search\"</code> may label the key with a magnifying glass icon.","id":"enterkeyhint","name":"Enterkeyhint","status":{"baseline":"high","baseline_high_date":"2024-05-02","baseline_low_date":"2021-11-02","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"94","firefox_android":"94","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>cause</code> property of errors records the specific original cause of the error, particularly for errors that have been re-thrown.","id":"error-cause","name":"Error cause","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"93","chrome_android":"93","edge":"93","firefox":"91","firefox_android":"91","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>event</code> and <code>first-input</code> performance entries and the <code>PerformanceEventTiming</code> 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.","id":"event-timing","name":"Event timing","status":{"baseline":false,"support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"89","firefox_android":"89"}}},{"description_html":"The <code>Event</code> API and the <code>addEventListener()</code> method on objects that receive events (event targets) represent and handle significant things happening on a page. Many APIs fire events for a wide range of situations relating to those APIs, such as an image loading, a user clicking, or a value changing.","id":"events","name":"Events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>ex</code> 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.","id":"ex","name":"ex unit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>pow()</code>, <code>sqrt()</code>, <code>hypot()</code>, <code>log()</code>, and <code>exp()</code> CSS functions compute various exponential functions.","id":"exp-functions","name":"pow(), sqrt(), hypot(), log(), and exp()","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The exponentiation (<code>**</code>) operator returns the result of raising the first operand to the power of the second operand.","id":"exponentiation","name":"Exponentiation operator","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"52","chrome_android":"52","edge":"14","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>EXT_blend_minmax</code> extension for WebGL 1.0 contexts adds two blend equations, the minimum and maximum color components of the source and destination colors.","id":"ext-blend-minmax","name":"EXT_blend_minmax WebGL extension","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"38","chrome_android":"38","edge":"17","firefox":"47","firefox_android":"35","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>EXT_color_buffer_float</code> extension for WebGL 2.0 contexts adds color-renderable floating point formats to <code>renderbufferStorage()</code>.","id":"ext-color-buffer-float","name":"EXT_color_buffer_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"51","firefox_android":"51","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>EXT_color_buffer_half_float</code> extension for WebGL 1.0 and 2.0 contexts renders 16-bit floating-point color buffers.","id":"ext-color-buffer-half-float","name":"EXT_color_buffer_half_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"63","chrome_android":"63","edge":"17","firefox":"47","firefox_android":"36","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>EXT_disjoint_timer_query</code> extension for WebGL 1.0 contexts measures the duration of a set of GL commands, without stalling the rendering pipeline.","id":"ext-disjoint-timer-query","name":"EXT_disjoint_timer_query WebGL extension","status":{"baseline":false,"support":{}}},{"description_html":"The <code>EXT_float_blend</code> extension for WebGL 1.0 and 2.0 contexts adds 32-bit floating-point components to blending and draw buffers.","id":"ext-float-blend","name":"EXT_float_blend WebGL extension","status":{"baseline":false,"support":{"chrome":"75","chrome_android":"75","edge":"79","firefox":"67","firefox_android":"67","safari":"14.1"}}},{"description_html":"The <code>EXT_frag_depth</code> extension for WebGL 1.0 and 2.0 contexts adds setting the depth value of a fragment from within the fragment shader.","id":"ext-frag-depth","name":"EXT_frag_depth WebGL extension","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","firefox":"47","safari":"9","safari_ios":"15"}}},{"description_html":"The <code>EXT_shader_texture_lod</code> 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).","id":"ext-shader-texture-lod","name":"EXT_shader_texture_lod WebGL extension","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","firefox":"47","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>EXT_sRGB</code> extension for WebGL 1.0 contexts adds sRGB support to textures and framebuffer objects.","id":"ext-srgb","name":"EXT_sRGB WebGL extension","status":{"baseline":"high","baseline_high_date":"2022-08-07","baseline_low_date":"2020-02-07","support":{"chrome":"40","chrome_android":"40","edge":"80","firefox":"58","firefox_android":"28","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>EXT_texture_compression_bptc</code> extension for WebGL 1.0 and 2.0 contexts adds the BPTC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"ext-texture-compression-bptc","name":"EXT_texture_compression_bptc WebGL extension","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"92","edge":"93","firefox":"68","safari":"16"}}},{"description_html":"The <code>EXT_texture_compression_rgtc</code> 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.","id":"ext-texture-compression-rgtc","name":"EXT_texture_compression_rgtc WebGL extension","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"83","edge":"93","safari":"14.1"}}},{"description_html":"The <code>EXT_texture_filter_anisotropic</code> 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.","id":"ext-texture-filter-anisotropic","name":"EXT_texture_filter_anisotropic WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-12-07","baseline_low_date":"2016-06-07","support":{"chrome":"34","chrome_android":"34","edge":"12","firefox":"47","firefox_android":"47","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>EXT_texture_norm16</code> extension to WebGL 2.0 contexts adds 16 bit signed normalized and unsigned normalized fixed-point texture, renderbuffer, and texture buffer formats.","id":"ext-texture-norm16","name":"EXT_texture_norm16c WebGL extension","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"87","edge":"87","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>EyeDropper</code> API opens an eyedropper tool, a color picker that allows users to select a color from their screen.","id":"eyedropper","name":"Eyedropper","status":{"baseline":false,"support":{"chrome":"96","edge":"96"}}},{"description_html":"The <code>fastSeek()</code> method seeks an <code><audio></code> or <code><video></code> element as fast as possible, by seeking to a keyframe instead of exactly the requested time.","id":"fast-seek","name":"fastSeek()","status":{"baseline":false,"support":{"firefox":"31","firefox_android":"31","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>IdentityCredential</code> API delegates authentication to a third-party identity provider, instead of using third-party cookies. Also known as FedCM.","id":"fedcm","name":"Federated credential management","status":{"baseline":false,"support":{"chrome":"116","chrome_android":"116","edge":"116"}}},{"description_html":"The <code>FederatedCredential</code> API represents the details required to authenticate a user using a third-party identity provider. Not to be confused with federated credential management (FedCM).","id":"federated-credentials","name":"Federated credentials","status":{"baseline":false,"support":{"chrome":"51","chrome_android":"51","edge":"79"}}},{"description_html":"The <code><fencedframe></code> element embeds another HTML page into the current page in a more secure and privacy-preserving way than <code><iframe></code> elements.","id":"fencedframe","name":"<fencedframe>","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120"}}},{"description_html":"The <code>fetch()</code> method makes asynchronous HTTP requests.","id":"fetch","name":"Fetch","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"42","chrome_android":"42","edge":"14","firefox":"39","firefox_android":"39","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>Sec-Fetch-Dest</code>, <code>Sec-Fetch-Mode</code>, <code>Sec-Fetch-Site</code>, and <code>Sec-Fetch-User</code> HTTP headers provide extra information about the way a request was made, to help servers reject certain kinds of malicious requests.","id":"fetch-metadata","name":"Fetch metadata request headers","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"90","firefox_android":"90","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>fetch()</code> <code>priority</code> option and the <code>fetchPriority</code> HTML attribute give hints to the browser about which requests to do before other requests of the same type.","id":"fetch-priority","name":"Fetch priority","status":{"baseline":false,"support":{"chrome":"103","chrome_android":"103","edge":"103","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>field-sizing</code> CSS property allows form controls such as <code><textarea></code> to be sized based on their content.","id":"field-sizing","name":"field-sizing","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The <code><fieldset></code> and <code><legend></code> elements group several form control elements within a web form.","id":"fieldset","name":"<fieldset> and <legend>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><figure></code> and <code><figcaption></code> HTML elements represent an illustration, diagram, text, or other self-contained reference content, with an optional caption.","id":"figure","name":"<figure> and <figcaption>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"8","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The File API represents and reads from file data and metadata. Typically, you get files through other APIs, such as the <code><input type=\"file\"></code> element or drag-and-drop events. You may also send file data to other APIs, such as creating images or drawing on canvases.","id":"file","name":"File API","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"38","chrome_android":"38","edge":"79","firefox":"28","firefox_android":"28","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>::file-selector-button</code> CSS pseudo-element selects the button of a <code><input type=\"file\"></code> element.","id":"file-selector-button","name":"::file-selector-button","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"82","firefox_android":"82","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>showOpenFilePicker()</code>, <code>showDirectoryPicker()</code>, and <code>showSaveFilePicker()</code> methods request access to files and directories on the user's device and returns a handle for reading and writing to them.","id":"file-system-access","name":"File system access","status":{"baseline":false,"support":{"chrome":"86","edge":"86"}}},{"description_html":"The <code>filter</code> CSS property applies one or more graphic effects to an element. You can use filter functions, such as <code>blur()</code> and <code>drop-shadow()</code>, alone or combined to produce different effects.","id":"filter","name":"filter","status":{"baseline":"high","baseline_high_date":"2019-03-07","baseline_low_date":"2016-09-07","support":{"chrome":"53","chrome_android":"53","edge":"12","firefox":"35","firefox_android":"35","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>::first-letter</code> CSS pseudo-element selects the first letter in an element for styling.","id":"first-letter","name":"::first-letter","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>::first-line</code> CSS pseudo-element selects the first line of text in an element for styling.","id":"first-line","name":"::first-line","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>fit-content</code> CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.","id":"fit-content","name":"fit-content","status":{"baseline":"high","baseline_high_date":"2024-05-02","baseline_low_date":"2021-11-02","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"94","firefox_android":"94","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>fit-content()</code> CSS function, used outside of a grid layout property, clamps a length between <code>min-content</code> and <code>max-content</code>.","id":"fit-content-function","name":"fit-content()","status":{"baseline":false,"support":{}}},{"description_html":"The <code>position: fixed</code> CSS declaration removes an element from the normal flow and positions it relative to the viewport or page.","id":"fixed-positioning","name":"Fixed positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.","id":"flexbox","name":"Flexbox","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"29","chrome_android":"29","edge":"12","firefox":"20","firefox_android":"20","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>gap</code> CSS property in a flexbox layout sets the size of the space between items.","id":"flexbox-gap","name":"Flexbox gap","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"63","firefox_android":"63","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>float</code> CSS property aligns an element to either side of its container, allowing text and inline elements to flow around it. The <code>clear</code> CSS property sets whether an element is moved below floating elements that proceed it.","id":"float-clear","name":"float and clear","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Float16Array is a typed array of 16-bit floating point numbers.","id":"float16array","name":"Float16Array","status":{"baseline":false,"support":{"firefox":"129","firefox_android":"129","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"Focus events, such as <code>focus</code> and <code>blur</code>, fire when an element gets or loses focus.","id":"focus-events","name":"Focus events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"24","firefox_android":"24","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>:focus-visible</code> CSS pseudo-class selects elements that match the <code>:focus</code> pseudo-class and meets the browser's criteria for visually emphasizing focused elements.","id":"focus-visible","name":":focus-visible","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"85","firefox_android":"85","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>:focus-within</code> CSS pseudo-class matches an element if the element or any of its children are focused.","id":"focus-within","name":":focus-within","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>font-display</code> 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.","id":"font-display","name":"font-display","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"58","firefox_android":"58","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>@font-face</code> CSS at-rule creates a custom <code>font-family</code> value. The at-rule's descriptors set the font's name, source, and various display settings.","id":"font-face","name":"@font-face","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"36","chrome_android":"36","edge":"14","firefox":"39","firefox_android":"39","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>font-family</code> CSS property sets the desired font face for text, along with optional fallback font faces.","id":"font-family","name":"font-family","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-family: math</code> CSS declaration uses the browser default font face for displaying mathematical expressions.","id":"font-family-math","name":"Math font family","status":{"baseline":false,"support":{"chrome":"109","chrome_android":"109","edge":"109"}}},{"description_html":"The <code>font-family: system-ui</code> CSS declaration uses the operating system default font for text.","id":"font-family-system","name":"System font","status":{"baseline":"high","baseline_high_date":"2024-03-07","baseline_low_date":"2021-09-07","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"92","firefox_android":"92","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>font-feature-settings</code> CSS property sets low-level OpenType feature tags for a font. When possible, use <code>font-variant</code> instead.","id":"font-feature-settings","name":"font-feature-settings","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"48","chrome_android":"48","edge":"15","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-kerning</code> CSS property sets whether kerning data from a font is used to adjust the space between letters.","id":"font-kerning","name":"font-kerning","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"33","chrome_android":"33","edge":"79","firefox":"32","firefox_android":"32","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>font-language-override</code> CSS property sets which language-specific glyphs are displayed.","id":"font-language-override","name":"font-language-override","status":{"baseline":false,"support":{"firefox":"34","firefox_android":"34"}}},{"description_html":"The <code>document.fonts</code> API dynamically loads custom fonts and tracks when fonts are loading or ready to use.","id":"font-loading","name":"Font loading","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"35","chrome_android":"35","edge":"79","firefox":"41","firefox_android":"41","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>ascent-override</code>, <code>descent-override</code>, and <code>line-gap-override</code> descriptors adjust the display of a font declared in an <code>@font-face</code> statement. This can help make fallback fonts look the same size.","id":"font-metric-overrides","name":"Font metric overrides","status":{"baseline":false,"support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"89","firefox_android":"89"}}},{"description_html":"The <code>font-optical-sizing</code> CSS property sets whether text rendering is optimized for viewing at different sizes.","id":"font-optical-sizing","name":"font-optical-sizing","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"79","chrome_android":"79","edge":"17","firefox":"62","firefox_android":"62","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>font-palette</code> CSS property selects a color palette from the font, optionally overriding individual colors in the <code>@font-palette-values</code> at-rule.","id":"font-palette","name":"font-palette","status":{"baseline":"low","baseline_low_date":"2022-11-15","support":{"chrome":"101","chrome_android":"101","edge":"101","firefox":"107","firefox_android":"107","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"You can animate color fonts between two <code>font-palette</code> values.","id":"font-palette-animation","name":"font-palette animation","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121"}}},{"description_html":"The <code>font</code> CSS property shorthand sets multiple font properties, including style, weight, size, and font family.","id":"font-shorthand","name":"Font shorthand","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-size</code> CSS property sets the text height.","id":"font-size","name":"font-size","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-size-adjust</code> 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.","id":"font-size-adjust","name":"font-size-adjust","status":{"baseline":"low","baseline_low_date":"2024-07-25","support":{"chrome":"127","chrome_android":"127","edge":"127","firefox":"118","firefox_android":"118","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>font-stretch</code> CSS property selects a font face from a font family based on width, either by a keyword such as <code>condensed</code> or a percentage.","id":"font-stretch","name":"font-stretch","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"60","chrome_android":"60","edge":"12","firefox":"9","firefox_android":"9","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>font-style</code> CSS property sets the text style, with <code>normal</code>, <code>italic</code>, and <code>oblique</code> options.","id":"font-style","name":"font-style","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-synthesis</code> 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 <code>font-synthesis-style</code> and <code>font-synthesis-weight</code>.","id":"font-synthesis","name":"font-synthesis","status":{"baseline":"high","baseline_high_date":"2024-07-06","baseline_low_date":"2022-01-06","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"34","firefox_android":"34","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>font-synthesis-position</code> CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font.","id":"font-synthesis-position","name":"font-synthesis-position","status":{"baseline":false,"support":{"firefox":"118","firefox_android":"118"}}},{"description_html":"The <code>font-synthesis-small-caps</code> CSS property sets whether or not the browser should synthesize small caps typefaces when they're missing from the font.","id":"font-synthesis-small-caps","name":"font-synthesis-small-caps","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>font-synthesis-style</code> CSS property sets whether or not the browser should synthesize italic and oblique typefaces when they're missing from the font.","id":"font-synthesis-style","name":"font-synthesis-style","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>font-synthesis-weight</code> CSS property sets whether or not the browser should synthesize bold typefaces when they're missing from the font.","id":"font-synthesis-weight","name":"font-synthesis-weight","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>font-variant</code> CSS property is a shorthand for <code>font-variant-alternates</code>, <code>font-variant-caps</code>, <code>font-variant-east-asian</code>, <code>font-variant-emoji</code>, <code>font-variant-ligatures</code>, <code>font-variant-numeric</code>, and <code>font-variant-position</code>.","id":"font-variant","name":"font-variant","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>font-variant-alternates</code> CSS property, along with the <code>@font-feature-values</code> at-rule, chooses when to use a font's alternate glyphs.","id":"font-variant-alternates","name":"font-variant-alternates","status":{"baseline":"low","baseline_low_date":"2023-03-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-caps</code> CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.","id":"font-variant-caps","name":"font-variant-caps","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-east-asian</code> CSS property controls glyph substitution and sizing in East Asian text.","id":"font-variant-east-asian","name":"font-variant-east-asian","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-emoji</code> CSS property sets the default presentation for emoji characters.","id":"font-variant-emoji","name":"font-variant-emoji","status":{"baseline":false,"support":{"chrome":"131","edge":"131"}}},{"description_html":"The <code>font-variant-ligatures</code> CSS property sets how characters can be visually combined for readability or stylistic reasons.","id":"font-variant-ligatures","name":"font-variant-ligatures","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"34","chrome_android":"34","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-numeric</code> CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.","id":"font-variant-numeric","name":"font-variant-numeric","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>font-variant-position</code> CSS property sets whether to use alternate glyphs for subscript and superscript text.","id":"font-variant-position","name":"font-variant-position","status":{"baseline":false,"support":{"firefox":"≤72","firefox_android":"≤79","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>font-variation-settings</code> 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 <code>font-weight: bold</code>. Also known as variable fonts.","id":"font-variation-settings","name":"font-variation-settings","status":{"baseline":"high","baseline_high_date":"2021-03-05","baseline_low_date":"2018-09-05","support":{"chrome":"62","chrome_android":"62","edge":"17","firefox":"62","firefox_android":"62","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>font-weight</code> CSS property controls the thickness of a font. It is set explicitly with the keyword <code>bold</code> or a number, or relative to the inherited thickness with the keywords <code>bolder</code> or <code>lighter</code>.","id":"font-weight","name":"font-weight","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>forced-colors</code> CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the <code>forced-color-adjust</code> CSS property sets whether forced colors apply to an element.","id":"forced-colors","name":"Forced colors","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"89","chrome_android":"89","edge":"79","firefox":"89","firefox_android":"89","safari":"16","safari_ios":"16"}}},{"description_html":"The <code><form></code> element contains interactive controls for submitting information.","id":"form","name":"<form>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"Custom elements may act like built-in form elements, via the the <code>attachInternals()</code> method of <code>HTMLElement</code> and the <code>ElementInternals</code> API.","id":"form-associated-custom-elements","name":"Form-associated custom elements","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"98","firefox_android":"98","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The form validity CSS pseudo-classes match <code><form></code> elements based on the constraints of a form field, such as validity (<code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>) and necessity (<code>:optional</code> or <code>:required</code>).","id":"form-validity-pseudos","name":"Form validity pseudo-classes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"}}},{"description_html":"The fullscreen API makes a specific element fill the whole screen and hides most browser UI.","id":"fullscreen","name":"Fullscreen API","status":{"baseline":false,"support":{"chrome":"71","chrome_android":"71","edge":"79","firefox":"64","firefox_android":"64","safari":"16.4"}}},{"description_html":"Functions are series of statements that can be called and return a value. The <code>function</code> keyword (as in <code>function () { }</code>) and arrow (<code>=></code>) expression create functions. The JavaScript functions protocol includes default and rest parameters and binding to <code>this</code>.","id":"functions","name":"Functions","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>navigator.getGamepads()</code> API accesses and responds to signals from game controllers.","id":"gamepad","name":"Gamepad","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"35","chrome_android":"35","edge":"12","firefox":"29","firefox_android":"32","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>gamepad.vibrationActuator</code> property represents a gamepad's haptics hardware, which allows you to control the vibration motors in a gamepad.","id":"gamepad-haptics","name":"Gamepad haptic feedback","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79","safari":"16.4"}}},{"description_html":"The <code>touched</code> property of a <code>GamepadButton</code> object indicates whether a button capable of detecting touch is currently touched.","id":"gamepad-touch","name":"Gamepad touch buttons","status":{"baseline":false,"support":{"chrome":"73","chrome_android":"73","edge":"15","firefox":"55","firefox_android":"55"}}},{"description_html":"The <code>hand</code> and <code>pose</code> properties of a <code>Gamepad</code> object represent the position in space and the hand that WebVR controllers are held in.","id":"gamepad-vr","name":"Gamepad VR hands and poses","status":{"baseline":false,"support":{"firefox":"55","firefox_android":"55"}}},{"description_html":"Generator functions (<code>function*</code>) create iterators that return multiple values, one after another, on-demand.","id":"generators","name":"Generators","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"39","chrome_android":"39","edge":"13","firefox":"26","firefox_android":"26","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>navigator.gelocation</code> API requests the user's latitude, longitude, heading, and speed.","id":"geolocation","name":"Geolocation","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"5","safari_ios":"≤3"}}},{"description_html":"The <code>getComputedStyle()</code> global method returns an <code>CSSStyleDeclaration</code> object that represents all CSS declarations applied to a given element.","id":"get-computed-style","name":"getComputedStyle()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"11","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>getHTML()</code> method of <code>Element</code> and <code>ShadowRoot</code> objects serializes an element's DOM to an HTML string.","id":"gethtml","name":"getHTML","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"128","firefox_android":"128","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>globalThis</code> property accesses the global <code>this</code> value (and hence the global object itself) across environments.","id":"globalthis","name":"globalThis","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"71","chrome_android":"71","edge":"79","firefox":"65","firefox_android":"65","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>Sec-GPC</code> request header indicates that the user does not consent to a website or service selling or sharing their personal information with third parties.","id":"gpc","name":"Global privacy control","status":{"baseline":false,"support":{"firefox":"120"}}},{"description_html":"Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, <code>linear-gradient(to right in oklch longer hue, red, red);</code> calculates in the <code>oklch</code> color space, with the hue going all the way around the hue circle from red back to red.","id":"gradient-interpolation","name":"Gradient interpolation","status":{"baseline":"low","baseline_low_date":"2024-06-11","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"127","firefox_android":"127","safari":"16.2","safari_ios":"16.2"}}},{"description_html":"The <code>linear-gradient()</code> and <code>radial-gradient()</code> CSS functions and their repeating counterparts create backgrounds that progress smoothly between multiple colors.","id":"gradients","name":"Gradients","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"3.6","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"CSS grid is a two-dimensional layout system, which lays content out in rows and columns.","id":"grid","name":"Grid","status":{"baseline":"high","baseline_high_date":"2020-04-17","baseline_low_date":"2017-10-17","support":{"chrome":"57","chrome_android":"57","edge":"16","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"Grid animation allows you to animate the <code>grid-template-columns</code> and <code>grid-template-rows</code> CSS properties.","id":"grid-animation","name":"Grid animation","status":{"baseline":"low","baseline_low_date":"2022-10-27","support":{"chrome":"107","chrome_android":"107","edge":"107","firefox":"66","firefox_android":"66","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>Gyroscope</code> API reads the angular velocity of a device in three dimensions.","id":"gyroscope","name":"Gyroscope","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67","edge":"79"}}},{"description_html":"The <code>hanging-punctuation</code> CSS property puts punctuation characters outside of the box to align the text with the rest of the document.","id":"hanging-punctuation","name":"Hanging punctuation","status":{"baseline":false,"support":{}}},{"description_html":"The <code>navigator.hardwareConcurrency</code> read-only property returns the number of logical processors available to run threads on the user's computer.","id":"hardware-concurrency","name":"hardwareConcurrency","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"37","chrome_android":"37","edge":"15","firefox":"48","firefox_android":"48","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>:has()</code> CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.","id":"has","name":":has()","status":{"baseline":"low","baseline_low_date":"2023-12-19","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"121","firefox_android":"121","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>:has-slotted</code> CSS pseudo-class matches <code><slot></code> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.","id":"has-slotted","name":":has-slotted","status":{"baseline":false,"support":{}}},{"description_html":"The <code>#!</code> comment at the absolute start of a script or module is treated as a normal comment and is ignored by the JavaScript engine.","id":"hashbang-comments","name":"Hashbang comments","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"74","chrome_android":"74","edge":"79","firefox":"67","firefox_android":"67","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>hashchange</code> event fires when the URL fragment identifier (the part of the URL starting with <code>#</code>) of the current page has changed.","id":"hashchange","name":"hashchange","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"16","chrome_android":"18","edge":"12","firefox":"11","firefox_android":"14","safari":"6","safari_ios":"6"}}},{"description_html":"The <code><head></code> element contains machine-readable information (metadata) about the document, such as the title, <code><script></code> and <code><style></code> elements, and <code><meta></code> elements.","id":"head","name":"<head>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><header></code> and <code><footer></code> HTML elements represent content that precedes and follows the main page content, respectively.","id":"header-footer","name":"<header> and <footer>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><h1></code> through <code><h6></code> HTML elements represent six levels of section headings, in order of decreasing importance.","id":"headings","name":"<h1> through <h6>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code><hgroup></code> element represents a heading and related content.","id":"hgroup","name":"<hgroup>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>hidden=\"until-found\"</code> 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.","id":"hidden-until-found","name":"hidden=\"until-found\"","status":{"baseline":false,"support":{"chrome":"102","chrome_android":"102","edge":"102"}}},{"description_html":"Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.","id":"highlight","name":"Custom highlights","status":{"baseline":false,"support":{"chrome":"105","chrome_android":"105","edge":"105","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>window.history</code> API manipulates the browser session history, from navigations to state management, in the tab or frame that the current page is loaded in.","id":"history","name":"History","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4"}}},{"description_html":"The <code>:host</code> CSS pseudo-class selects the containing element of the shadow tree in which it is used. The <code>:host()</code> CSS pseudo-class selects the that element only if it matches the provided selector.","id":"host","name":"Host","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>:host-context()</code> 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.","id":"host-context","name":"host-context","status":{"baseline":false,"support":{"chrome":"54","chrome_android":"54","edge":"79"}}},{"description_html":"The <code><hr></code> element represents a thematic break between paragraphs, often shown as a horizontal rule.","id":"hr","name":"<hr>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>hsl()</code> and <code>hsla()</code> CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.","id":"hsl","name":"HSL","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"52","firefox_android":"52","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>Strict-Transport-Security</code> HTTP response header informs browsers that the site should only be accessed using HTTPS, and that any future attempts to access it using HTTP should automatically be converted to HTTPS. Also known as HSTS.","id":"hsts","name":"HTTP Strict Transport Security","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"The <code><html></code> element represents the top-level of an HTML document and is referred to as the root element.","id":"html","name":"<html>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>capture</code> HTML attribute for <code><input type=\"file\"></code> elements allows the user to capture media using the device's camera or microphone.","id":"html-media-capture","name":"HTML media capture","status":{"baseline":false,"support":{"chrome_android":"25","firefox_android":"79","safari_ios":"10"}}},{"description_html":"The <code>Authorization</code> and <code>WWW-Authenticate</code> headers authenticate a user with a server.","id":"http-authentication","name":"HTTP authentication","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"HTTP/1.1 is a network protocol used by browsers and servers. It has been superseded by HTTP/2 and HTTP/3.","id":"http11","name":"HTTP/1.1","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"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.","id":"http2","name":"HTTP/2","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"36","firefox_android":"36","safari":"9","safari_ios":"9"}}},{"description_html":"HTTP/3 is a major revision of the HTTP network protocol, providing improved performance and efficiency by using QUIC as the underlying transport protocol.","id":"http3","name":"HTTP/3","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"88","firefox_android":"88","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>hwb()</code> CSS function picks colors using hue, whiteness, and blackness channels.","id":"hwb","name":"HWB","status":{"baseline":"high","baseline_high_date":"2024-10-28","baseline_low_date":"2022-04-28","support":{"chrome":"101","chrome_android":"101","edge":"101","firefox":"96","firefox_android":"96","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>hyphenate-character</code> CSS property sets the character or string to use at the end of a line before a line break.","id":"hyphenate-character","name":"Hyphenate character","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"98","firefox_android":"98","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>hyphenate-limit-chars</code> 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.","id":"hyphenate-limit-chars","name":"Hyphenate limit chars","status":{"baseline":false,"support":{"chrome":"109","chrome_android":"109","edge":"109"}}},{"description_html":"The <code>hyphens</code> CSS property controls when long words are broken by line wrapping. Although called <code>hyphens</code>, 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.","id":"hyphens","name":"Hyphenation","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"88","chrome_android":"55","edge":"88","firefox":"43","firefox_android":"43","safari":"17","safari_ios":"17"}}},{"description_html":"The <code><i></code> HTML element identifies idiomatic content, styling text as italic by default.","id":"i","name":"<i>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The CSS <code>ic</code> unit corresponds to the width of CJK ideographic characters.","id":"ic","name":"ic unit","status":{"baseline":"low","baseline_low_date":"2022-10-03","support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>IdleDetector</code> API is used to notify a webpage of the user's idle, active, and locked state.","id":"idle-detection","name":"Idle detection","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"114"}}},{"description_html":"The <code><iframe></code> element embeds another HTML page into the current page.","id":"iframe","name":"<iframe>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>credentialless</code> attribute for the <code><iframe></code> 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 <code>Cross-Origin-Embedder-Policy</code> headers.","id":"iframe-credentialless","name":"Credentialless iframes","status":{"baseline":false,"support":{"chrome":"110","chrome_android":"110","edge":"110"}}},{"description_html":"The <code>sandbox</code> attribute for the <code><iframe></code> HTML element sets many security restrictions on the iframe, such as preventing form submissions or opening modal dialogs. Optional <code>allow-</code> values relax specific restrictions.","id":"iframe-sandbox","name":"Sandboxed iframes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"17","firefox_android":"17","safari":"5","safari_ios":"4"}}},{"description_html":"The <code>srcdoc</code> attribute for the <code><iframe></code> HTML element sets a string of HTML to embed in the document. The value of <code>srcdoc</code> overrides loading a document from the <code>src</code> attribute.","id":"iframe-srcdoc","name":"srcdoc","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"20","chrome_android":"25","edge":"79","firefox":"25","firefox_android":"25","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>image()</code> CSS function creates an image similar to <code>url()</code> 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 <code>Image()</code> constructor.","id":"image-function","name":"image()","status":{"baseline":false,"support":{}}},{"description_html":"The <code><area></code> and <code><map></code> elements define a clickable area on an image.","id":"image-maps","name":"Image maps","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>image-orientation</code> CSS property corrects the rotation of an image using the image's metadata, such as EXIF.","id":"image-orientation","name":"image-orientation","status":{"baseline":"high","baseline_high_date":"2022-10-13","baseline_low_date":"2020-04-13","support":{"chrome":"81","chrome_android":"81","edge":"81","firefox":"26","firefox_android":"26","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>image-rendering</code> CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.","id":"image-rendering","name":"image-rendering","status":{"baseline":"high","baseline_high_date":"2024-04-05","baseline_low_date":"2021-10-05","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"93","firefox_android":"93","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>image-set()</code> CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.","id":"image-set","name":"image-set()","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"89","firefox_android":"89","safari":"17","safari_ios":"17"}}},{"description_html":"The <code><img></code> element adds an image into the document.","id":"img","name":"<img>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>@import</code> CSS at-rule loads styles from another stylesheet.","id":"import","name":"@import","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"A <code><script type=\"importmap\"></code> 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.","id":"import-maps","name":"Import maps","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"108","firefox_android":"108","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>:indeterminate</code> 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.","id":"indeterminate","name":":indeterminate","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"39","chrome_android":"39","edge":"79","firefox":"51","firefox_android":"51","safari":"10","safari_ios":"10"}}},{"description_html":"The IndexedDB API is a local storage transactional object database.","id":"indexeddb","name":"IndexedDB","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"51","firefox_android":"51","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>translate</code>, <code>rotate</code>, and <code>scale</code> CSS properties apply single transformations independently, as opposed to applying multiple transformations with the <code>transform</code> CSS property.","id":"individual-transforms","name":"Individual transform properties","status":{"baseline":"low","baseline_low_date":"2022-08-05","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"72","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>inert</code> HTML attribute marks an element and its descendants as non-interactive. Inert elements don't get focus or fire <code>click</code> events.","id":"inert","name":"Inert elements","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"120","firefox_android":"120"}}},{"description_html":"The <code>inherit</code> keyword resets any CSS property to the computed value of that property from the parent element.","id":"inherit-value","name":"inherit","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>initial-letter</code> 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.","id":"initial-letter","name":"initial-letter","status":{"baseline":false,"support":{"chrome":"110","chrome_android":"110","edge":"110"}}},{"description_html":"The <code>initial</code> keyword resets any CSS property to its initial value as defined by the specification. For example, the <code>initial</code> value of the <code>display</code> property is <code>inline</code>, regardless of the element being styled. Not to be confused with <code>revert</code>, which resets to the user or browser default style.","id":"initial-value","name":"initial","status":{"baseline":"high","baseline_high_date":"2018-05-12","baseline_low_date":"2015-11-12","support":{"chrome":"1","chrome_android":"18","edge":"13","firefox":"19","firefox_android":"19","safari":"1.2","safari_ios":"1"}}},{"description_html":"The <code>navigator.ink</code> API uses the system compositor to draw to a <code><canvas></code> element ahead of pointer events, reducing the delay between moving a stylus or cursor and a pen stroke appearing on screen.","id":"ink","name":"Ink","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"93"}}},{"description_html":"The <code><input type=\"text\"></code> HTML element allows the user to enter information into a form. By default, an <code><input></code> element is a text input.","id":"input","name":"<input>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"button\"></code> 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 <code><button></code> element, which contains HTML content.","id":"input-button","name":"<input type=\"button\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"checkbox\"></code> HTML element represents a tickable box with two states, checked and unchecked.","id":"input-checkbox","name":"<input type=\"checkbox\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code><input type=\"color\"></code> HTML element shows a color picker from which users can choose a color value.","id":"input-color","name":"<input type=\"color\">","status":{"baseline":false,"support":{"chrome":"20","chrome_android":"25","edge":"14","firefox":"29","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code><input type=\"date\"></code> and <code><input type=\"time\"></code> HTML elements show date and time pickers.","id":"input-date-time","name":"Date and time <input> types","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"20","chrome_android":"25","edge":"12","firefox":"57","firefox_android":"57","safari":"14.1","safari_ios":"5"}}},{"description_html":"The <code><input type=\"email\"></code>, <code><input type=\"tel\"></code>, and <code><input type=\"url\"></code> HTML elements represent email address, telephone number, and URL fields in a form.","id":"input-email-tel-url","name":"Email, telephone, and URL <input> types","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"3"}}},{"description_html":"The <code>input</code> event fires when a form control changes or an element with the <code>contenteditable</code> attribute changes.","id":"input-event","name":"Input events","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"6","firefox_android":"6","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code><input type=\"file\"></code> HTML element shows a file picker from which users can choose a file to upload with the form.","id":"input-file","name":"<input type=\"file\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"4","safari_ios":"3"}}},{"description_html":"The <code><input type=\"hidden\"></code> HTML element represents a form field that is not shown visually but is still included in the form submission.","id":"input-hidden","name":"<input type=\"hidden\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"image\"></code> HTML element is an image that can be used to submit a form, like the <code><input type=\"submit\"></code> element.","id":"input-image","name":"<input type=\"image\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"number\"></code> HTML element represents numeric input data.","id":"input-number","name":"<input type=\"number\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"29","firefox_android":"29","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code><input type=\"password\"></code> HTML element represents a field for users to enter a password. The password is hidden from view, typically replaced by dots or asterisks.","id":"input-password","name":"<input type=\"password\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"radio\"></code> HTML element represents one button in a group such that only one can be chosen at a time.","id":"input-radio","name":"<input type=\"radio\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><input type=\"range\"></code> element represents a slider for choosing an inexact value between a minimum and maximum value.","id":"input-range","name":"<input type=\"range\">","status":{"baseline":"high","baseline_high_date":"2019-09-16","baseline_low_date":"2017-03-16","support":{"chrome":"4","chrome_android":"57","edge":"12","firefox":"23","firefox_android":"52","safari":"3.1","safari_ios":"5"}}},{"description_html":"The <code><input type=\"reset\"></code> HTML element represents a button that sets all form fields to their initial values.","id":"input-reset","name":"<input type=\"reset\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>:checked</code>, <code>:disabled</code>, and <code>:enabled</code> CSS pseudo-classes match form elements based on their state.","id":"input-selectors","name":"Input selectors","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code><input type=\"submit\"></code> HTML element represents a button that triggers an action on its associated <code><form></code>, such as sending the form data to a server.","id":"input-submit","name":"<input type=\"submit\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><ins></code> element element represents a range of text that has been inserted into a document, styling text as underlined by default.","id":"ins","name":"<ins>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>pointer</code>, <code>any-pointer</code>, <code>hover</code>, and <code>any-hover</code> 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 <code>(hover: none) and (pointer: coarse)</code> media query.","id":"interaction","name":"Interaction media queries","status":{"baseline":"high","baseline_high_date":"2021-06-11","baseline_low_date":"2018-12-11","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"64","firefox_android":"64","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>interpolate-size</code> CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to <code>auto</code> or <code>fit-content</code>.","id":"interpolate-size","name":"interpolate-size","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"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.","id":"intersection-observer","name":"Intersection observer","status":{"baseline":"high","baseline_high_date":"2021-09-25","baseline_low_date":"2019-03-25","support":{"chrome":"58","chrome_android":"58","edge":"16","firefox":"55","firefox_android":"55","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>trackVisibility</code> parameter for the <code>IntersectionObserver</code> 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.","id":"intersection-observer-v2","name":"Intersection observer visibility tracking","status":{"baseline":false,"support":{"chrome":"74","chrome_android":"74","edge":"79"}}},{"description_html":"The <code>Intl</code> API provides language sensitive string comparison, number formatting, date and time formatting, and more.","id":"intl","name":"Intl","status":{"baseline":"high","baseline_high_date":"2020-03-28","baseline_low_date":"2017-09-28","support":{"chrome":"24","chrome_android":"25","edge":"12","firefox":"29","firefox_android":"56","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>Intl.DisplayNames</code> API provides localized names of language, region, script, and currency codes.","id":"intl-display-names","name":"Intl.DisplayNames","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"81","chrome_android":"81","edge":"81","firefox":"86","firefox_android":"86","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>Intl.DurationFormat</code> API creates a locale-aware formatter that turns an object representing a duration (such as days, hours, and minutes) into a string.","id":"intl-duration-format","name":"Intl.DurationFormat","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>Intl.ListFormat</code> API creates a locale-aware formatter that turns iterable objects into localized strings.","id":"intl-list-format","name":"Intl.ListFormat","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"72","chrome_android":"72","edge":"79","firefox":"78","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>Intl.Locale</code> API parses Unicode locale identifiers, with language, region, and script codes, such as <code>zh-Hans-CN</code> or <code>en-GB</code>.","id":"intl-locale","name":"Intl.Locale","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"74","chrome_android":"74","edge":"79","firefox":"75","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The getter methods of the <code>Intl.Locale</code> 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.","id":"intl-locale-info","name":"Intl.Locale info","status":{"baseline":false,"support":{"chrome":"130","chrome_android":"130","edge":"130","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>Intl.PluralRules</code> API creates a locale-aware object that tells you which of the language's pluralization rules apply based on a given number.","id":"intl-plural-rules","name":"Intl.PluralRules","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"63","chrome_android":"63","edge":"18","firefox":"58","firefox_android":"58","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>Intl.RelativeTimeFormat</code> API creates a locale-aware formatter that turns an object representing a relative time (such as '1 day ago') into a localized string.","id":"intl-relative-time-format","name":"Intl.RelativeTimeFormat","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"71","chrome_android":"71","edge":"79","firefox":"76","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>Intl.Segmenter</code> API creates a locale-aware text splitter that can separate a string into meaningful graphemes, words, or sentences.","id":"intl-segmenter","name":"Intl.Segmenter","status":{"baseline":"low","baseline_low_date":"2024-04-16","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"125","firefox_android":"125","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>inverted-colors</code> CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.","id":"inverted-colors","name":"inverted-colors media query","status":{"baseline":false,"support":{"safari":"9.1","safari_ios":"10"}}},{"description_html":"The <code>:is()</code> 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.","id":"is","name":":is()","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"82","firefox_android":"82","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>isolation</code> CSS property creates a new stacking context, which impacts <code>z-index</code> ordering and blend modes.","id":"isolation","name":"isolation","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"36","firefox_android":"36","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>Iterator</code> object is an abstract base for objects that implement the iterator protocol. It provides methods common to built-in iterators, such as <code>filter()</code>, <code>find()</code>, <code>map()</code>, and <code>reduce()</code>. You can also use the static method <code>Iterator.from()</code> to convert an existing iterable into an <code>Iterator</code>.","id":"iterator-methods","name":"Iterator methods","status":{"baseline":false,"support":{"chrome":"122","chrome_android":"122","edge":"122","firefox":"131","firefox_android":"131"}}},{"description_html":"The <code>for...of</code> 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 <code>Iterator</code> class.","id":"iterators","name":"Iterators and the for...of loop","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"13","firefox_android":"14","safari":"7","safari_ios":"7"}}},{"description_html":"JavaScript is a programming language that runs in browsers, usually through the <code><script></code> 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.","id":"javascript","name":"JavaScript (initial core language support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The JPEG XL image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.","id":"jpegxl","name":"JPEG XL","status":{"baseline":false,"support":{"safari":"17","safari_ios":"17"}}},{"description_html":"JavaScript modules allow code to be organized into reusable units. Modules use <code>import</code> to load other modules and <code>export</code> to declare what is available to import from other modules. In HTML, modules are loaded with <code><script type=\"module\"></code>.","id":"js-modules","name":"JavaScript modules","status":{"baseline":"high","baseline_high_date":"2020-11-09","baseline_low_date":"2018-05-09","support":{"chrome":"61","chrome_android":"61","edge":"16","firefox":"60","firefox_android":"60","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>navigator.serviceWorker.register()</code> method accepts <code>{ type: \"module\" }</code> to load scripts that use <code>import</code> and <code>export</code>. Also known as ECMAScript modules or ESM in service workers.","id":"js-modules-service-workers","name":"JavaScript modules in service workers","status":{"baseline":false,"support":{"chrome":"91","chrome_android":"91","edge":"91","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>SharedWorker()</code> constructor accepts <code>{ type: \"module\" }</code> to load scripts that use <code>import</code> and <code>export</code>. Also known as ECMAScript modules or ESM in shared workers.","id":"js-modules-shared-workers","name":"JavaScript modules in shared workers","status":{"baseline":false,"support":{"chrome":"80","edge":"80","firefox":"114","firefox_android":"114","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>Worker()</code> constructor accepts <code>{ type: \"module\" }</code> to load scripts that use <code>import</code> and <code>export</code>. Also known as ECMAScript modules or ESM in workers.","id":"js-modules-workers","name":"JavaScript modules in workers","status":{"baseline":"low","baseline_low_date":"2023-06-06","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"114","firefox_android":"114","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>JSON</code> 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.","id":"json","name":"JSON","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"4"}}},{"description_html":"Module <code>import … with { type: \"json\" }</code> statements load JSON data. Also known as JSON module scripts and formerly known as import assertions.","id":"json-modules","name":"JSON import attributes","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"To serialize and parse JSON in a lossless way, <code>JSON.stringify()</code> handles <code>rawJSON</code> values and <code>JSON.parse()</code>'s reviver callback takes a source context parameter.","id":"json-raw","name":"JSON source text access","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114"}}},{"description_html":"The <code><kbd></code> element represents textual user input, such as keyboard or voice input, styling text in monospaced type by default.","id":"kbd","name":"<kbd>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>keydown</code> and <code>keyup</code> events fire for each key press (or, with modifier keys, a combination of key presses) on a keyboard.","id":"keyboard-events","name":"Keyboard events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"1.2","safari_ios":"1"}}},{"description_html":"The <code>navigator.keyboard.lock()</code> 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.","id":"keyboard-lock","name":"Keyboard lock","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79"}}},{"description_html":"The <code>navigator.keyboard.getLayoutMap()</code> 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.","id":"keyboard-map","name":"Keyboard map","status":{"baseline":false,"support":{"chrome":"69","chrome_android":"69","edge":"79"}}},{"description_html":"The <code>KHR_parallel_shader_compile</code> extension for WebGL 1.0 and 2.0 contexts checks the status of shader compilation without blocking the runtime.","id":"khr-parallel-shader-compile","name":"KHR_parallel_shader_compile WebGL extension","status":{"baseline":false,"support":{"chrome":"76","chrome_android":"76","edge":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"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 <code>color()</code>, <code>lab()</code>, and <code>lch()</code> functions. Also known as CIELAB and CIELCH.","id":"lab","name":"Lab and LCH","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15","safari_ios":"15"}}},{"description_html":"The <code><label></code> HTML element represents a caption for a form field.","id":"label","name":"<label>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>:lang()</code> CSS functional pseudo-class matches elements based on their content language.","id":"lang","name":":lang()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>lang</code> global HTML attribute defines the language of an element. It's used by assistive technology to correctly read the content, translation tools to select the origin language, and other applications.","id":"lang-attr","name":"Lang","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>navigator.language</code> read-only property returns a string representing the preferred language of the user, usually the language of the browser UI. The <code>navigator.languages</code> read-only property returns an array of strings representing the user's preferred languages.","id":"language","name":"Language","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>largest-contentful-paint</code> performance entry and the <code>LargestContentfulPaint</code> 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.","id":"largest-contentful-paint","name":"Largest contentful paint (LCP)","status":{"baseline":false,"support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"122","firefox_android":"122"}}},{"description_html":"The <code>unicode-bidi</code> and <code>direction</code> CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use the <code>dir</code> global HTML attribute and <code><bdo></code> HTML element instead.","id":"layout-direction-override","name":"Layout direction override","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"50","firefox_android":"50","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>layout-shift</code> performance entry and <code>LayoutShift</code> API measures the layout stability of web pages based on movements of the elements on the page.","id":"layout-instability","name":"Layout instability","status":{"baseline":false,"support":{"chrome":"84","chrome_android":"84","edge":"84"}}},{"description_html":"The <code>let</code> and <code>const</code> declarations define block-scoped variables.","id":"let-const","name":"Let and const","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"49","chrome_android":"49","edge":"14","firefox":"44","firefox_android":"44","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>letter-spacing</code> CSS property controls the amount of space between each letter in an element or block of text.","id":"letter-spacing","name":"letter-spacing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The CSS <code>lh</code> unit corresponds to the requested line height, the computed value of the <code>line-height</code> property. Some lines may be higher than this based on their content.","id":"lh","name":"lh unit","status":{"baseline":"low","baseline_low_date":"2023-11-21","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>light-dark()</code> CSS function accepts two colors and uses one depending on the current color scheme.","id":"light-dark","name":"light-dark()","status":{"baseline":"low","baseline_low_date":"2024-05-13","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"120","firefox_android":"120","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>line-break</code> CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.","id":"line-break","name":"line-break","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"69","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>line-clamp</code> CSS property limits the text in a block container to a certain number of lines. The prefixed <code>-webkit-line-clamp</code> is widely supported but only works with <code>-webkit-box-orient: vertical</code> in combination with <code>display: -webkit-box</code> or <code>display: -webkit-inline-box</code>.","id":"line-clamp","name":"line-clamp","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>line-height</code> CSS property sets the spacing between text baselines, oriented to the horizontal or vertical writing mode.","id":"line-height","name":"line-height","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>linear()</code> 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.","id":"linear-easing","name":"linear() easing","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"112","firefox_android":"112","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code><link></code> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon.","id":"link","name":"<link>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>rel=\"dns-prefetch\"</code> attribute for the <code><link></code> HTML element is a hint to the browser that the page or user is likely to request resources from another domain, so the browser should preemptively resolve DNS for the <code>href</code> value's domain.","id":"link-rel-dns-prefetch","name":"<link rel=\"dns-prefetch\">","status":{"baseline":"high","baseline_high_date":"≤2022-07-15","baseline_low_date":"≤2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"≤79","firefox":"3","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>rel=\"expect\"</code> attribute for the <code><link></code> HTML element is a hint to the browser to block rendering until the element that the <code>href</code> value references is connected to the document and fully parsed.","id":"link-rel-expect","name":"<link rel=\"expect\">","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124"}}},{"description_html":"The <code>rel=\"preconnect\"</code> attribute for the <code><link></code> HTML element is a hint to the browser that the page or user is likely to request resources from another origin, so the browser should preemptively start a connection to the <code>href</code> value's origin.","id":"link-rel-preconnect","name":"<link rel=\"preconnect\">","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"39","firefox_android":"39","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>rel=\"prefetch\"</code> attribute for the <code><link></code> HTML element is a hint to the browser that the user is likely to navigate to a resource, so the browser should preemptively fetch and cache the resource.","id":"link-rel-prefetch","name":"<link rel=\"prefetch\">","status":{"baseline":false,"support":{}}},{"description_html":"The <code>rel=\"preload\"</code> attribute for the <code><link></code> HTML element requests resources, such as images or style sheets, that the page needs soon, so the browser may prioritize them for loading before rendering begins.","id":"link-rel-preload","name":"<link rel=\"preload\">","status":{"baseline":"high","baseline_high_date":"2023-07-26","baseline_low_date":"2021-01-26","support":{"chrome":"50","chrome_android":"50","edge":"≤79","firefox":"85","firefox_android":"85","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>:link</code> CSS pseudo-class matches unvisited links, <code>:visited</code> matches visited links, and <code>:any-link</code> matches both.","id":"link-selectors","name":"Link selectors","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"50","firefox_android":"50","safari":"9","safari_ios":"9"}}},{"description_html":"The <code><ol></code>, <code><ul></code>, and <code><li></code> HTML elements represent ordered and unordered lists.","id":"list-elements","name":"<ol>, <ul>, and <li>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>list-style</code> shorthand CSS property and the <code>list-style-image</code>, <code>list-style-position</code>, and <code>list-style-type</code> longhand properties set the position and appearance of a list item's marker.","id":"list-style","name":"List style","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>loading=\"lazy\"</code> attribute for <code><img></code> and <code><iframe></code> elements blocks loading the external resource until the user scrolls to that element's part of the page.","id":"loading-lazy","name":"Lazy-loading images and iframes","status":{"baseline":"low","baseline_low_date":"2023-12-19","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"121","firefox_android":"121","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>window.queryLocalFonts()</code> method returns an array of locally-installed fonts, each represented by a <code>FontData</code> object.","id":"local-fonts","name":"Local fonts","status":{"baseline":false,"support":{"chrome":"103","edge":"103"}}},{"description_html":"The <code>localStorage</code> and <code>sessionStorage</code> APIs store data as key-value pairs. While <code>localStorage</code> persists across sessions, <code>sessionStorage</code> data is discarded when the page is closed.","id":"localstorage","name":"localStorage and sessionStorage","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"6","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>location</code> global object represents the current page's address. You can use it to get the parts of the address (such as <code>location.hostname</code> or <code>location.pathname</code>) or navigate to another URL.","id":"location","name":"Location","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The logical AND assignment (<code>&&=</code>) and the logical OR assignment (<code>||=</code>) operators short-circuit the respective binary logical operators.","id":"logical-assignments","name":"Logical assignments","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"79","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"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, <code>block-end</code> refers to the bottom. Also known as flow relative.","id":"logical-properties","name":"Logical properties","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"66","firefox_android":"66","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>long-animation-frame</code> performance event type and the <code>PerformanceLongAnimationFrameTiming</code> API provide information about rendering updates that take longer than 50 milliseconds. Also known as LoAFs.","id":"long-animation-frames","name":"Long animation frames","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The <code>longtask</code> performance event type and the <code>PerformanceLongTaskTiming</code> 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.\"","id":"longtasks","name":"Long tasks","status":{"baseline":false,"support":{"chrome":"58","chrome_android":"58","edge":"79"}}},{"description_html":"The <code>Magnetometer</code> API reads magnetic field sensor data from the device's magnetometer.","id":"magnetometer","name":"Magnetometer","status":{"baseline":false,"support":{}}},{"description_html":"The <code><main></code> element represents the dominant content of a document. It is commonly used together with <code><header></code> and <code><footer></code>.","id":"main","name":"<main>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"21","firefox_android":"21","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>ManagedMediaSource</code> API is a <code>MediaSource</code> where the browser manages the memory of source buffers and may evict data if needed.","id":"managed-media-source","name":"Managed media source","status":{"baseline":false,"support":{"safari":"17","safari_ios":"17.1"}}},{"description_html":"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.","id":"manifest","name":"Web app manifest","status":{"baseline":false,"support":{"chrome":"53","chrome_android":"53","edge":"79","firefox_android":"79","safari":"17","safari_ios":"15.4"}}},{"description_html":"Map objects hold key-value pairs and remember the original insertion order of the keys.","id":"map","name":"Map (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"13","firefox_android":"14","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>margin</code> CSS property sets space around an element. It is a shorthand for <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code>.","id":"margin","name":"margin","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>margin-trim</code> CSS property removes the margins of child elements when they meet the edges of the container.","id":"margin-trim","name":"margin-trim","status":{"baseline":false,"support":{"safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code><mark></code> element represents text which is marked or highlighted for reference or notation purposes.","id":"mark","name":"<mark>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>::marker</code> CSS pseudo-element selects list item markers for styling numbers or bullets.","id":"marker","name":"::marker","status":{"baseline":false,"support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"80","firefox_android":"80"}}},{"description_html":"The <code>mask-border</code> CSS property sets how the edges of an element are masked. It is a shorthand for <code>mask-border-outset</code>, <code>mask-border-repeat</code>, <code>mask-border-slice</code>, <code>mask-border-source</code>, and <code>mask-border-width</code>.","id":"mask-border","name":"mask-border","status":{"baseline":false,"support":{"safari":"17.2"}}},{"description_html":"The <code>mask-type</code> CSS property on an SVG <code><mask></code> element sets whether the mask is a <code>luminance</code> or <code>alpha</code> mask.","id":"mask-type","name":"mask-type","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"24","chrome_android":"25","edge":"79","firefox":"35","firefox_android":"35","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>mask</code> CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.","id":"masks","name":"Masks","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"53","firefox_android":"53","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"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.","id":"masonry","name":"Masonry","status":{"baseline":false,"support":{}}},{"description_html":"The <code>window.matchMedia()</code> method checks whether a media query applies to the document.","id":"matchmedia","name":"matchMedia","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"9","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"5.1","safari_ios":"5"}}},{"description_html":"MathML, or the Mathematical Markup Language, describes mathematical notation, such as expressions and formulas. Also known as MathML Core.","id":"mathml","name":"MathML","status":{"baseline":"low","baseline_low_date":"2023-01-12","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"}}},{"description_html":"The <code>measureUserAgentSpecificMemory()</code> method estimates the memory usage of a web application including all its iframes and workers.","id":"measure-memory","name":"Memory measurement","status":{"baseline":false,"support":{"chrome":"89","chrome_android":"89","edge":"89"}}},{"description_html":"The <code>navigator.mediaDevices.getUserMedia()</code> API requests access to devices that produce audio or video streams, such as microphones or video cameras.","id":"media-capture","name":"Media capture","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"53","chrome_android":"53","edge":"12","firefox":"36","firefox_android":"36","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>:playing</code>, <code>:paused</code>, <code>:seeking</code>, <code>:buffering</code>, <code>:stalled</code>, <code>:muted</code>, and <code>:volume-locked</code> CSS pseudo-classes match <code><audio></code> and <code><video></code> elements based on their state.","id":"media-pseudos","name":"Media element pseudo-classes","status":{"baseline":false,"support":{"safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>@media</code> 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 <code>screen</code> or <code>print</code>, and one or more mandatory media features, such as <code>prefers-reduced-animations</code>.","id":"media-queries","name":"Media queries","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The range syntax of CSS media queries allows you to use mathematical comparison operators such as <code><</code>, <code>></code>, <code><=</code>, and <code>>=</code> to define a range of values for a media query. For example, <code>(400px < width < 1000px)</code> returns true if the viewport width is between 400px and 1000px.","id":"media-query-range-syntax","name":"Media query range syntax","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"102","firefox_android":"102","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.mediaSession</code> 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.","id":"media-session","name":"Media session","status":{"baseline":false,"support":{"chrome":"73","chrome_android":"57","edge":"79","firefox":"82","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>MediaSource</code> API is a custom data source for media elements commonly used for adaptive streaming. Also known as Media Source Extensions (MSE).","id":"media-source","name":"Media source","status":{"baseline":false,"support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"42","firefox_android":"42","safari":"8"}}},{"description_html":"The <code><menu></code> element represents an unordered list of action items (<code><li></code>), such as a toolbar. It is a semantic alternative to the <code><ul></code> element.","id":"menu","name":"<menu>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>messageerror</code> 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.","id":"messageerror","name":"messageerror","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"65","firefox_android":"65","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code><meta></code> element represents metadata about the page used by the browser or search engines, including description, keywords, and character sets.","id":"meta","name":"<meta>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>name=\"theme-color\"</code> attribute for the <code><meta></code> HTML element sets the preferred color to customize the display of the page or the surrounding browser user interface.","id":"meta-theme-color","name":"<meta name=\"theme-color\">","status":{"baseline":false,"support":{"chrome_android":"92","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>min()</code> and <code>max()</code> CSS functions return the minimum or maximum of the arguments, while <code>clamp()</code> clamps a value to a given range.","id":"min-max-clamp","name":"min(), max(), and clamp()","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"79","chrome_android":"79","edge":"79","firefox":"75","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>min-content</code> and <code>max-content</code> CSS keywords represent the smallest and largest intrinsic sizes of an element.","id":"min-max-content","name":"min-content and max-content","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"66","firefox_android":"66","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>min-width</code>, <code>min-height</code>, <code>max-width</code>, and <code>max-height</code> CSS properties set the minimum and maximum size of an element.","id":"min-max-width-height","name":"Min and max width and height","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"18","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>mix-blend-mode</code> CSS property blends an element's content with its background or parent elements using blend modes like <code>multiply</code>, <code>difference</code>, or <code>color</code>.","id":"mix-blend-mode","name":"mix-blend-mode","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"32","firefox_android":"32","safari":"8","safari_ios":"8"}}},{"description_html":"When a document is loaded over HTTPS, browsers ensure that none of the document's resources are loaded over an insecure protocol. Instead, resources that the document attempts to load over an insecure protocol are either loaded over HTTPS or are blocked.","id":"mixed-content","name":"Mixed content handling","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"≤79","chrome_android":"≤79","edge":"79","firefox":"≤23","firefox_android":"≤23","safari":"≤9.1","safari_ios":"≤9.3"}}},{"description_html":"The <code>:modal</code> pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a <code><dialog></code> element used with <code>showModal()</code>.","id":"modal","name":":modal","status":{"baseline":"low","baseline_low_date":"2022-09-02","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"103","firefox_android":"103","safari":"15.6","safari_ios":"15.6"}}},{"description_html":"The <code>rel=\"modulepreload\"</code> attribute for the <code><link></code> HTML element indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution.","id":"modulepreload","name":"<link rel=\"modulepreload\">","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"66","chrome_android":"66","edge":"≤79","firefox":"115","firefox_android":"115","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>offset</code> CSS property animates an element along a defined motion path.","id":"motion-path","name":"Motion path","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"55","chrome_android":"55","edge":"79","firefox":"72","firefox_android":"79","safari":"16","safari_ios":"16"}}},{"description_html":"Mouse events, such as <code>click</code>, <code>mousedown</code>, or <code>mousemove</code>, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.","id":"mouse-events","name":"Mouse events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"Multi-column layout flows an element's content across one or more columns in a single row, without affecting the <code>display</code> property of its children.","id":"multi-column","name":"Multi-column layout","status":{"baseline":"high","baseline_high_date":"2019-09-07","baseline_low_date":"2017-03-07","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"52","firefox_android":"52","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>MutationObserver</code> API watches for changes to the DOM tree and calls a callback function when DOM changes occur.","id":"mutationobserver","name":"MutationObserver","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"14","firefox_android":"14","safari":"7","safari_ios":"7"}}},{"description_html":"Some CSS color values can be referenced by name, such as <code>red</code> or <code>limegreen</code>. They stand in for specific RGB color values.","id":"named-color","name":"Named colors","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>@namespace</code> 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 <code><a></code> element and the SVG <code><a></code> element.","id":"namespace","name":"@namespace","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><nav></code> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.","id":"nav","name":"<nav>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>navigation</code> API initiates, intercepts, or modifies browser navigation actions. Not to be confused with the <code>navigator</code> API.","id":"navigation","name":"Navigation API","status":{"baseline":false,"support":{"chrome":"102","chrome_android":"102","edge":"102"}}},{"description_html":"The <code>navigation</code> performance entry and the <code>PerformanceNavigationTiming</code> API measures navigation events, such as loading time or the number of redirects.","id":"navigation-timing","name":"Navigation timing","status":{"baseline":"high","baseline_high_date":"2024-04-25","baseline_low_date":"2021-10-25","support":{"chrome":"57","chrome_android":"57","edge":"12","firefox":"58","firefox_android":"58","safari":"15","safari_ios":"15.1"}}},{"description_html":"The <code>window.navigator</code> API is a generic global object, under which many other, more interesting APIs are located. It doesn't do anything interesting on its own.","id":"navigator","name":"Navigator","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.","id":"nesting","name":"Nesting","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"117","firefox_android":"117","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>navigator.connection</code> API provides information about the network connection a device is using and fires events when the connection type changes.","id":"network-information","name":"Network Information","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67"}}},{"description_html":"Non-cookie storage access extends the <code>requestStorageAccess()</code> API to let content in cross-site iframes request access to first-party data beyond cookies.","id":"non-cookie-storage-access","name":"Non-cookie storage access","status":{"baseline":false,"support":{"chrome":"125"}}},{"description_html":"The <code>:not()</code> functional pseudo-class matches elements that do not match the selectors in its argument.","id":"not","name":":not()","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"84","firefox_android":"84","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>Notification()</code> constructor shows a message to the user, typically using the notification system of the host operating system.","id":"notifications","name":"Notifications","status":{"baseline":false,"support":{"chrome":"20","edge":"14","firefox":"22","firefox_android":"22","safari":"7"}}},{"description_html":"Notifications via service worker registration's <code>showNotification()</code> method, sent from installed web applications (for example, saved to the Home Screen on Safari for iOS), show a message to the user, typically using the notification system of the host operating system.","id":"notifications-apps","name":"Notifications from service workers and installed apps","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"20","chrome_android":"42","edge":"14","firefox":"22","firefox_android":"22","safari":"7","safari_ios":"16.4"}}},{"description_html":"The <code>:nth-child()</code> and <code>:nth-last-child()</code> CSS functional pseudo-classes match elements based on their index within a list of elements. The <code>:first-child</code> and <code>:last-child</code> pseudo-classes match the first and last element in a list, and the <code>:only-child</code> pseudo-class matches an element with no siblings.","id":"nth-child","name":":nth-child()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>of</code> syntax for the <code>:nth-child()</code> and <code>:nth-last-child()</code> CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.","id":"nth-child-of","name":":nth-child() of <selector>","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>:nth-of-type()</code> and <code>:nth-last-of-type()</code> CSS functional pseudo-classes match elements based on their position among siblings of the same type. The <code>:first-of-type</code>, <code>:last-of-type</code>, and :only-of-type` pseudo-classes match the first, last, and only elements of its type.","id":"nth-of-type","name":":nth-of-type() pseudo-classes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The nullish coalescing (<code>??</code>) and nullish coalescing assignment (<code>??=</code>) operators return (or assign) its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.","id":"nullish-coalescing","name":"Nullish coalescing","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"79","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The number type (and <code>Number</code> object) represents floating-point numbers, such as 42 or -4.201, while the <code>Math</code> API contains mathematical functions and constants. JavaScript can also represent boundless negative and positive values as <code>Infinity</code> or not-a-number as <code>NaN</code> (as in <code>0 * Infinity</code>).","id":"number","name":"Math and numbers","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The numeric factory functions, such as <code>CSS.px()</code> or <code>CSS.kHz()</code>, return a <code>CSSUnitValue</code> representing a CSS number value (as in <code>12px</code> or <code>440kHz</code>).","id":"numeric-factory-functions","name":"Numeric factory functions","status":{"baseline":false,"support":{"chrome":"118","chrome_android":"118","edge":"118","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"To improve readability for numeric literals, underscores (<code>_</code>) can be used as separators. For example, <code>1_050.95</code> is equivalent to <code>1050.95</code>.","id":"numeric-seperators","name":"Numeric separators","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"75","chrome_android":"75","edge":"79","firefox":"70","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"The <code><object></code> element represents an external resource such as a PDF or SVG document. It was historically used for plugins such as Shockwave Flash.","id":"object","name":"<object>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>object-fit</code> CSS property sets how images, videos, and other replaced elements are scaled within their container.","id":"object-fit","name":"object-fit","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"32","chrome_android":"32","edge":"79","firefox":"36","firefox_android":"36","safari":"10","safari_ios":"10"}}},{"description_html":"Objects in JavaScript are collections of key-value pairs.","id":"object-object","name":"Object","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>object-position</code> CSS property places images, videos, and other replaced elements within their boxes.","id":"object-position","name":"object-position","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"32","chrome_android":"32","edge":"79","firefox":"36","firefox_android":"36","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>object-view-box</code> CSS property crops and zooms to an inset area of an image.","id":"object-view-box","name":"object-view-box","status":{"baseline":false,"support":{"chrome":"104","chrome_android":"104","edge":"104"}}},{"description_html":"The <code>OES_element_index_uint</code> extension for WebGL 1.0 contexts adds support for <code>gl.UNSIGNED_INT</code> types to <code>WebGLRenderingContext.drawElements()</code>.","id":"oes-element-index-uint","name":"OES_element_index_uint WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"24","chrome_android":"25","edge":"12","firefox":"24","firefox_android":"24","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_fbo_render_mipmap</code> extension for WebGL 1.0 contexts attaches any level of a texture to a framebuffer object.","id":"oes-fbo-render-mipmap","name":"OES_fbo_render_mipmap WebGL extension","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"71","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>OES_standard_derivatives</code> extension for WebGL 1.0 contexts adds the GLSL derivative functions <code>dFdx</code>, <code>dFdy</code>, and <code>fwidth</code>.","id":"oes-standard-derivatives","name":"OES_standard_derivatives WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"10","firefox_android":"10","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_float</code> extension for WebGL 1.0 contexts adds floating-point pixel types for textures.","id":"oes-texture-float","name":"OES_texture_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_float_linear</code> extension for WebGL 1.0 and 2.0 contexts adds linear filtering with floating-point pixel types for textures.","id":"oes-texture-float-linear","name":"OES_texture_float_linear WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"29","chrome_android":"29","edge":"12","firefox":"24","firefox_android":"24","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_half_float</code> extension for WebGL 1.0 contexts adds texture formats with 16-bit (also known as half float) and 32-bit floating-point components.","id":"oes-texture-half-float","name":"OES_texture_half_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2019-02-02","baseline_low_date":"2016-08-02","support":{"chrome":"27","chrome_android":"27","edge":"14","firefox":"29","firefox_android":"29","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_texture_half_float_linear</code> extension for WebGL 1.0 contexts adds linear filtering with half floating-point pixel types for textures.","id":"oes-texture-half-float-linear","name":"OES_texture_half_float_linear WebGL extension","status":{"baseline":false,"support":{"chrome":"29","chrome_android":"29","edge":"14","firefox":"30","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>OES_vertex_array_object</code> 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.","id":"oes-vertex-array-object","name":"OES_vertex_array_object WebGL extension","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"24","chrome_android":"25","edge":"17","firefox":"25","firefox_android":"25","safari":"8","safari_ios":"9"}}},{"description_html":"The <code>OfflineAudioContext</code> API represents an audio processing graph that writes to an <code>AudioBuffer</code> instead of an output device.","id":"offline-audio-context","name":"OfflineAudioContext","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"35","chrome_android":"35","edge":"12","firefox":"25","firefox_android":"25","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>OffscreenCanvas</code> 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.","id":"offscreen-canvas","name":"Offscreen canvas","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"105","firefox_android":"105","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"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 <code>color()</code>, <code>oklab()</code>, and <code>oklch()</code> functions.","id":"oklab","name":"Oklab and Oklch","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>navigator.onLine</code> property returns a Boolean for whether the browser is connected to some network (though not necessarily the internet). The <code>online</code> and <code>offline</code> events fire when the connection state changes.","id":"online","name":"Online status","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>opacity</code> CSS property sets the transparency of an element.","id":"opacity","name":"opacity","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The <code>fill-opacity</code>, and <code>stroke-opacity</code> SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.","id":"opacity-svg","name":"Opacity (SVG)","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","firefox":"1","firefox_android":"4","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>:open</code> and <code>:closed</code> CSS pseudo-classes match elements that have open and closed states, like <code><details</code>, <code><dialog></code>, or <code><select></code>, based on their state.","id":"open-closed","name":"Open and closed selectors","status":{"baseline":false,"support":{}}},{"description_html":"Omit the the binding parameter of a <code>catch</code> clause when you don't need information about the exception in a <code>try ... catch</code> statement.","id":"optional-catch-binding","name":"Optional catch binding","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"58","firefox_android":"58","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>AbsoluteOrientationSensor</code> and <code>RelativeOrientationSensor</code> 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.","id":"orientation-sensor","name":"Orientation Sensor","status":{"baseline":false,"support":{"chrome":"67","chrome_android":"67","edge":"79"}}},{"description_html":"The <code>navigator.storage.getDirectory()</code> method returns a <code>FileSystemDirectoryHandle</code> 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.","id":"origin-private-file-system","name":"Origin private file system","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"108","chrome_android":"109","edge":"108","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>outline</code> CSS shorthand sets the color, style, and width of a line around an element, outside of the border.","id":"outline","name":"outline","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"88","firefox_android":"88","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>outline-color</code>, <code>outline-style</code>, and <code>outline-width</code> and <code>outline-offset</code> CSS properties style a line around an element, outside of the border.","id":"outlines","name":"Outlines","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"1","chrome_android":"18","edge":"15","firefox":"1.5","firefox_android":"4","safari":"1.2","safari_ios":"1"}}},{"description_html":"The <code><output></code> element represents the result of a calculation, user action, or form entry.","id":"output","name":"<output>","status":{"baseline":"high","baseline_high_date":"≤2021-04-02","baseline_low_date":"≤2018-10-02","support":{"chrome":"10","chrome_android":"18","edge":"≤18","firefox":"4","firefox_android":"4","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>overflow-block</code> and <code>overflow-inline</code> 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.","id":"overflow","name":"Overflow media queries","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"66","firefox_android":"66","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>overflow-anchor</code> 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.","id":"overflow-anchor","name":"overflow-anchor","status":{"baseline":false,"support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"66","firefox_android":"66"}}},{"description_html":"The <code>overflow-clip-margin</code> CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as <code>overflow: clip</code>.","id":"overflow-clip-margin","name":"overflow-clip-margin","status":{"baseline":false,"support":{}}},{"description_html":"The <code>overflow</code> CSS property sets the behavior for when content doesn't fit in an element.","id":"overflow-shorthand","name":"overflow","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"90","chrome_android":"90","edge":"90","firefox":"81","firefox_android":"81","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>overflow-wrap</code> 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 <code>word-wrap</code>.","id":"overflow-wrap","name":"overflow-wrap","status":{"baseline":"high","baseline_high_date":"2021-04-02","baseline_low_date":"2018-10-02","support":{"chrome":"23","chrome_android":"25","edge":"18","firefox":"49","firefox_android":"49","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>overlay</code> CSS property, used as an <code>allow-discrete</code> CSS transition, prevents a top layer element, such as a popover or a <code><dialog></code>, from being removed from the top layer before it has finished animating. You can't set the value of the <code>overlay</code> property; only use it as transition property.","id":"overlay","name":"overlay","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117"}}},{"description_html":"The <code>overscroll-behavior</code> CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.","id":"overscroll-behavior","name":"overscroll-behavior","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"63","chrome_android":"63","edge":"18","firefox":"59","firefox_android":"59","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>OVR_multiview2</code> extension for WebGL 2.0 contexts renders into multiple views simultaneously. This especially useful for virtual reality (VR) and WebXR.","id":"ovr-multiview2","name":"OVR_multiview2 WebGL extension","status":{"baseline":false,"support":{"chrome_android":"93"}}},{"description_html":"The <code><p></code> element represents a paragraph of text.","id":"p","name":"<p>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>padding</code> CSS property sets space between an element's edge and its contents. It is a shorthand for <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code>.","id":"padding","name":"padding","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>break-after</code>, <code>break-before</code>, <code>break-inside</code> CSS properties (along with <code>page-break-</code> aliases) control where printed pages start and end. Also known as pagination or page breaking.","id":"page-breaks","name":"Page breaks","status":{"baseline":false,"support":{"chrome":"1","chrome_android":"18","edge":"12"}}},{"description_html":"The page lifecycle API helps you safely handle page suspensions or discards from memory. The <code>freeze</code> and <code>resume</code> events fire when the browser suspends or resumes a page from memory while the <code>document.wasDiscarded</code> property reports whether the page was reloaded after being dropped.","id":"page-lifecycle","name":"Page lifecycle","status":{"baseline":false,"support":{"chrome":"68","chrome_android":"68","edge":"79"}}},{"description_html":"The <code>page-orientation</code> CSS property sets the rotation of a page after pagination. This allows pages with the same <code>size</code> declaration to display with different orientations.","id":"page-orientation","name":"page-orientation","status":{"baseline":false,"support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"122","firefox_android":"122"}}},{"description_html":"The <code>:first</code>, <code>:left</code>, and <code>:right</code> pseudo-classes select pages based on their position in sequence after pagination. They're often used with the <code>page</code> CSS property, to choose a print layout defined by the <code>@page</code> rule.","id":"page-selectors","name":"Page selectors","status":{"baseline":false,"support":{"chrome":"85","chrome_android":"85","edge":"85","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"The <code>@page</code> CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.","id":"page-setup","name":"Page setup","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"15","chrome_android":"18","edge":"79","firefox":"95","firefox_android":"95","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>pageshow</code> and <code>pagehide</code> transition events fire when a document loads or unloads due to a navigation, such as clicking on a link on a page or the back button in a browser.","id":"page-transition-events","name":"Page transition events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"5","safari_ios":"4"}}},{"description_html":"The <code>document.visibilityState</code> and <code>document.hidden</code> properties tell you whether the page is visible to the user (for example, it's not minimized or in a background tab).","id":"page-visibility","name":"Page visibility","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"33","chrome_android":"33","edge":"12","firefox":"18","firefox_android":"18","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>visibility-state</code> performance entry and the <code>VisibilityStateEntry</code> 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.","id":"page-visibility-state","name":"Page visibility state","status":{"baseline":false,"support":{"chrome":"115","chrome_android":"115","edge":"115"}}},{"description_html":"The <code>paint()</code> CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.","id":"paint","name":"paint()","status":{"baseline":false,"support":{"chrome":"65","chrome_android":"65","edge":"79"}}},{"description_html":"The <code>paint-order</code> CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, <code>paint-order: markers stroke fill;</code> draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.","id":"paint-order","name":"paint-order","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"≤66","firefox_android":"≤66","safari":"≤12"}}},{"description_html":"The <code>paint</code> performance entry and the <code>PerformancePaintTiming</code> 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.","id":"paint-timing","name":"Paint timing","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"79"}}},{"description_html":"The <code>Document.parseHTMLUnsafe()</code> static method parses HTML into a DOM tree, while the <code>setHTMLUnsafe()</code> method of <code>Element</code> and <code>ShadowRoot</code> parses and inserts HTML into an existing tree. No sanitization applies to these methods, so never call them with user-provided HTML strings.","id":"parse-html-unsafe","name":"Unsanitized HTML parsing methods","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"128","firefox_android":"128","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"Partitioned cookies allow you to opt a cookie into partitioned storage, with a separate cookie jar per top-level site. Also known as Cookies Having Independent Partitioned State or CHIPS.","id":"partitioned-cookies","name":"Partitioned cookies","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114"}}},{"description_html":"The <code>PasswordCredential</code> API represents a username and password.","id":"password-credentials","name":"Password credentials","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"79"}}},{"description_html":"The <code>path()</code> CSS shape function creates a shape for <code>clip-path</code>, <code>shape-outside</code>, and the SVG attribute <code>d</code>.","id":"path-shape","name":"path()","status":{"baseline":false,"support":{}}},{"description_html":"The payment handler API registers a web application as a payment handler and responds to payment requests in the browser's user interface, rather than redirecting users to a separate site to complete a payment.","id":"payment-handler","name":"Payment handler","status":{"baseline":false,"support":{"chrome":"70","chrome_android":"70","edge":"79"}}},{"description_html":"The <code>PaymentRequest</code> API prompts the user to make a payment through the browser's user interface.","id":"payment-request","name":"Payment request","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"53","edge":"15","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>navigator.pdfViewerEnabled</code> read-only property returns a Boolean for whether the browser navigates to and shows a PDF in the browser window or downloads the PDF.","id":"pdf-viewer","name":"pdfViewerEnabled","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"99","firefox_android":"99","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>performance</code> global object and the <code>Performance</code> API provide access to performance-related information for the current execution context.","id":"performance","name":"Performance","status":{"baseline":"high","baseline_high_date":"2018-03-16","baseline_low_date":"2015-09-16","support":{"chrome":"6","chrome_android":"18","edge":"12","firefox":"7","firefox_android":"7","safari":"8","safari_ios":"9"}}},{"description_html":"The <code>navigator.permissions</code> API checks whether a permission, such as access to geolocation data, has been granted.","id":"permissions","name":"Permissions","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"44","chrome_android":"44","edge":"79","firefox":"46","firefox_android":"46","safari":"16","safari_ios":"16"}}},{"description_html":"The physical CSS properties, <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>, set the inset position of an element relative to the corresponding side of a container determined by the element's <code>position</code> property.","id":"physical-properties","name":"Physical properties","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><picture></code> element is used for art direction in responsive images, where a different image is displayed based on the <code><source></code> element.","id":"picture","name":"<picture>","status":{"baseline":"high","baseline_high_date":"2018-09-21","baseline_low_date":"2016-03-21","support":{"chrome":"38","chrome_android":"38","edge":"13","firefox":"38","firefox_android":"38","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video.","id":"picture-in-picture","name":"Picture-in-picture (video)","status":{"baseline":false,"support":{"chrome":"69","chrome_android":"105","edge":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>ping</code> attribute for <code><a></code> elements sets a URL to send a POST request to when the <code><a></code> is clicked. This is typically used for outbound link reporting.","id":"ping","name":"ping","status":{"baseline":false,"support":{"chrome":"12","chrome_android":"18","edge":"17","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>::placeholder</code> CSS pseudo-element selects help text in <code><input></code> and <code><textarea></code> elements when no value is set.","id":"placeholder","name":"::placeholder","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"57","chrome_android":"57","edge":"79","firefox":"51","firefox_android":"51","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>:placeholder-shown</code> CSS pseudo-element selects <code><input></code> and <code><textarea></code> elements when no value is set and the element's <code>placeholder</code> attribute is not empty. Not to be confused with <code>::placeholder</code>, which selects the placeholder text itself.","id":"placeholder-shown","name":":placeholder-shown","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"51","firefox_android":"51","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>pointer-events</code> CSS property sets whether a user can interact with an element using a mouse, touch, or other pointing input device.","id":"pointer-events","name":"pointer-events","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"Pointer events, such as <code>pointerdown</code>, and the <code>PointerEvent</code> API, represent general pointing inputs, from a wide range of devices, such as a mouse, pen or stylus, or touch with one or more fingers. Not to be confused with the <code>pointer-events</code> CSS property.","id":"pointer-events-api","name":"Pointer Events","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"55","chrome_android":"55","edge":"12","firefox":"59","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"Provides access to raw mouse movement by locking the target of mouse events to a single element and hiding the mouse cursor.","id":"pointer-lock","name":"Pointer lock","status":{"baseline":false,"support":{"chrome":"37","chrome_android":"37","edge":"13","firefox":"50","firefox_android":"50","safari":"10.1"}}},{"description_html":"The <code>popover</code> HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the <code>showPopover()</code> method.","id":"popover","name":"Popover","status":{"baseline":false,"support":{"chrome":"116","chrome_android":"116","edge":"116","firefox":"125","firefox_android":"125","safari":"17"}}},{"description_html":"The <code>position</code> CSS property sets the origin position of an element to an element, the element's scrollport, or the viewport.","id":"position","name":"Position","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>postMessage()</code> global method sends cross-origin messages to windows and workers, including popups and iframes. Also known as cross-document messaging.","id":"postmessage","name":"postMessage","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code><pre></code> element represents a block element of preformatted text that is presented exactly as written, including all white space.","id":"pre","name":"<pre>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>prefers-color-scheme</code> CSS media query sets styles based on the requested color scheme, light or dark.","id":"prefers-color-scheme","name":"prefers-color-scheme media query","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"67","firefox_android":"67","safari":"12.1","safari_ios":"13"}}},{"description_html":"The <code>prefers-contrast</code> CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors.","id":"prefers-contrast","name":"prefers-contrast media query","status":{"baseline":"high","baseline_high_date":"2024-11-30","baseline_low_date":"2022-05-31","support":{"chrome":"96","chrome_android":"96","edge":"96","firefox":"101","firefox_android":"101","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>prefers-reduced-data</code> 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.","id":"prefers-reduced-data","name":"prefers-reduced-data media query","status":{"baseline":false,"support":{}}},{"description_html":"The <code>prefers-reduced-motion</code> 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.","id":"prefers-reduced-motion","name":"prefers-reduced-motion media query","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"74","chrome_android":"74","edge":"79","firefox":"63","firefox_android":"64","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>prefers-reduced-transparency</code> 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.","id":"prefers-reduced-transparency","name":"prefers-reduced-transparency media query","status":{"baseline":false,"support":{"chrome":"119","chrome_android":"119","edge":"119"}}},{"description_html":"The <code>imagesrcset</code> and <code>imagesizes</code> attributes with the <code>rel=\"preload\"</code> attribute for the <code><link></code> HTML element starts fetching responsive images before they're found in the body of the document.","id":"preloading-responsive-images","name":"Preloading responsive images","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"78","firefox_android":"79","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The Presentation API shows or controls content on another display, such as a network-connected TV or projector.","id":"presentation-api","name":"Presentation API","status":{"baseline":false,"support":{"chrome":"47","chrome_android":"47","edge":"79"}}},{"description_html":"The <code>preservesPitch</code> property for <code><audio></code> or <code><video></code> adjusts the pitch of audio to sound more natural when the playback rate is faster or slower than the default.","id":"preserves-pitch","name":"preservesPitch","status":{"baseline":"low","baseline_low_date":"2023-12-11","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"101","firefox_android":"101","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>window.print()</code> method opens the browser's print dialog.","id":"print","name":"window.print()","status":{"baseline":"low","baseline_low_date":"2023-06-06","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"114","safari":"1.1","safari_ios":"1"}}},{"description_html":"The <code>print-color-adjust</code> 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.","id":"print-color-adjust","name":"Print color adjust","status":{"baseline":false,"support":{"firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"An alternative to <code>@media print</code> queries, the <code>beforeprint</code> and <code>afterprint</code> events allow you to change the page for printing and and restore the page after printing.","id":"print-events","name":"Print events","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"63","chrome_android":"63","edge":"12","firefox":"6","firefox_android":"6","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>attributionsourceid</code> and <code>attributiondestination</code> attributes for <code><a></code> elements measure clicks across websites without associating a click to a specific session. Not to be confused with attribution reporting. Also known as PCM.","id":"private-click-measurement","name":"Private click measurement","status":{"baseline":false,"support":{"safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>Access-Control-Request-Private-Network: true</code> and <code>Access-Control-Allow-Private-Network: true</code> HTTP request and response headers establish permission for websites to make requests to internal networks, such as to routers.","id":"private-network-access","name":"Private network access","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124"}}},{"description_html":"The <code>Profiler</code> API records data about the execution of a page, which you can send to a server for later analysis. Also known as self-profiling.","id":"profiler","name":"Profiler","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"94"}}},{"description_html":"The <code><progress></code> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","id":"progress","name":"<progress>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"6","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"6","safari_ios":"7"}}},{"description_html":"A promise represents an asynchronous operation which eventually succeeds or fails.","id":"promise","name":"Promise (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"32","chrome_android":"32","edge":"12","firefox":"29","firefox_android":"29","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>Promise.allSettled()</code> static method waits for an array of promises to settle (resolve or reject).","id":"promise-allsettled","name":"Promise.allSettled()","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"71","firefox_android":"79","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>Promise.any()</code> 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 <code>AggregateError</code> when all of the promises have rejected.","id":"promise-any","name":"Promise.any()","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"79","firefox_android":"79","safari":"14","safari_ios":"14"}}},{"description_html":"The promise <code>finally()</code> method executes a function when the promise settles (resolves or rejects).","id":"promise-finally","name":"Promise finally()","status":{"baseline":"high","baseline_high_date":"2021-04-02","baseline_low_date":"2018-10-02","support":{"chrome":"63","chrome_android":"63","edge":"18","firefox":"58","firefox_android":"58","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>Promise.try()</code> static method returns a promise that takes a callback of any kind (returns or throws, synchronously or asynchronously) and wraps its result in a <code>Promise</code>.","id":"promise-try","name":"Promise.try()","status":{"baseline":false,"support":{"chrome":"128","chrome_android":"128","edge":"128","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>Promise.withResolvers()</code> static method is an alternative to the <code>Promise()</code> constructor that returns both the promise and resolution functions. You can use this to access <code>resolve</code> and <code>reject</code> outside the scope of the executor function.","id":"promise-withresolvers","name":"Promise.withResolvers()","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"121","firefox_android":"121","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>Proxy</code> and <code>Reflect</code> JavaScript built-ins intercept and define custom behavior for fundamental language operations (such as property lookup, assignment, enumeration, or function invocation).","id":"proxy-reflect","name":"Proxy and Reflect","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"49","chrome_android":"49","edge":"12","firefox":"18","firefox_android":"18","safari":"10","safari_ios":"10"}}},{"description_html":"The Push API subscribes to and receives server-initiated messages. Subscribers receive pushed messages in the background, even after periods inactive or offline.","id":"push","name":"Push messages","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"50","chrome_android":"50","edge":"17","firefox":"44","firefox_android":"48","safari":"16","safari_ios":"16.4"}}},{"description_html":"The <code><q></code> element represents a short inline quotation.","id":"q","name":"<q>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>Q</code> CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. <code>1Q</code> is equivalent to 1/40 of 1 centimeter.","id":"q-unit","name":"Q unit","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"49","firefox_android":"49","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>quotes</code> CSS property sets the quotation marks inserted via the <code>content</code> CSS property or <code><q></code> element.","id":"quotes","name":"Quotes","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"70","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>rcap</code> CSS length unit is a font-relative length equal to the value of the <code>cap</code> unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.","id":"rcap","name":"rcap unit","status":{"baseline":false,"support":{"chrome":"118","chrome_android":"118","edge":"118","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>rch</code> CSS length unit is a font-relative length equal to the value of the <code>ch</code> unit on the root element. <code>ch</code> length is based on the width of the zero (0) character.","id":"rch","name":"rch unit","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>:read-only</code> and <code>:read-write</code> CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, <code>:read-only</code> matches <code><input></code> and <code><textarea></code> elements with the <code>readonly</code> attribute.","id":"read-write-pseudos","name":":read-only and :read-write","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"1","chrome_android":"18","edge":"13","firefox":"78","firefox_android":"79","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>reading-flow</code> CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation.","id":"reading-flow","name":"reading-flow","status":{"baseline":false,"support":{}}},{"description_html":"The <code>Referrer-Policy</code> HTTP header and <code>referrerpolicy</code> HTML attributes control whether requests have the <code>Referer</code> header and what information the header contains.","id":"referrer-policy","name":"Referrer policy","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"87","firefox_android":"87","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>RegExp</code> object represents a regular expression, a notation for matching text patterns.","id":"regexp","name":"Regular expressions","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>RegExp.escape()</code> static method takes a string and replaces any characters that are potentially special characters of a regular expression with equivalent escape sequences. For example, <code>RegExp.escape(\"[abc]\")</code> returns <code>\"\\\\[abc\\\\]\"</code>.","id":"regexp-escape","name":"RegExp.escape()","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>CSS.registerProperty()</code> static method and the <code>@property</code> CSS at-rule register custom properties for which types and behaviors can be defined.","id":"registered-custom-properties","name":"Registered custom properties","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"128","firefox_android":"128","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.registerProtocolHandler()</code> 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 <code>mailto:</code> URLs or a VoIP site to open <code>tel:</code> URLs.","id":"registerprotocolhandler","name":"registerProtocolHandler","status":{"baseline":false,"support":{"chrome":"13","edge":"79","firefox":"2","firefox_android":"4"}}},{"description_html":"The <code>from</code> keyword for color functions (<code>color()</code>, <code>hsl()</code>, <code>oklch()</code>, 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).","id":"relative-color","name":"Relative colors","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"128","firefox_android":"128","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>position: relative</code> CSS declaration offsets the position of an element relative to its position in the normal flow.","id":"relative-positioning","name":"Relative positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>rem</code> 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 <code>16px</code>.","id":"rem","name":"rem","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"5","safari_ios":"4"}}},{"description_html":"The Remote Playback API initiates and controls playback of media on connected remote devices, such as smart TVs with AirPlay or Chromecast capabilities.","id":"remote-playback","name":"Remote playback","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"56","edge":"121","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The Reporting API makes consistent reports about Content Security Policy violations, Permissions-Policy violations, deprecated feature usage, crashes, and other web platform features available to your server endpoints.","id":"reporting","name":"Reporting API","status":{"baseline":false,"support":{"chrome":"96","chrome_android":"96","edge":"96"}}},{"description_html":"The <code>requestAnimationFrame()</code> method schedules a function that runs before the next repaint. You can use it to animate content with JavaScript.","id":"request-animation-frame","name":"requestAnimationFrame()","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"24","chrome_android":"25","edge":"12","firefox":"23","firefox_android":"23","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>requestAnimationFrame()</code> method in workers schedules a function that runs before the next repaint. Together with offscreen canvas, you can animate content from a worker.","id":"request-animation-frame-workers","name":"requestAnimationFrame() in workers","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"99","firefox_android":"99","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>requestVideoFrameCallback()</code> method for <code><video></code> schedules a function that runs with the next video frame. It is similar to <code>requestAnimationFrame()</code>, but for video.","id":"request-video-frame-callback","name":"requestVideoFrameCallback()","status":{"baseline":"low","baseline_low_date":"2024-10-29","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"132","firefox_android":"132","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>requestIdleCallback()</code> 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.","id":"requestidlecallback","name":"requestIdleCallback()","status":{"baseline":false,"support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"55","firefox_android":"55"}}},{"description_html":"The <code>resize()</code> method of an <code>ArrayBuffer</code> and the <code>grow()</code> method of a <code>SharedArrayBuffer</code>, constructed with the <code>maxByteLength</code> option, changes the size of the buffer in place.","id":"resizable-buffers","name":"Resizable buffers","status":{"baseline":"low","baseline_low_date":"2024-07-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"128","firefox_android":"128","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>resize</code> CSS property sets whether an element can be resized by the user, and on which axes.","id":"resize","name":"resize (CSS property)","status":{"baseline":false,"support":{"chrome":"4","chrome_android":"18","edge":"79","firefox":"5","firefox_android":"5","safari":"4"}}},{"description_html":"The <code>ResizeObserver</code> API observes and reacts to changes in the size of DOM elements.","id":"resize-observer","name":"Resize observer","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"64","chrome_android":"64","edge":"79","firefox":"69","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>resolution</code> CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.","id":"resolution","name":"resolution media query","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"68","chrome_android":"68","edge":"79","firefox":"62","firefox_android":"62","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>-webkit-device-pixel-ratio</code>, <code>-webkit-min-device-pixel-ratio</code>, and <code>-webkit-max-device-pixel-ratio</code> CSS media queries are standardized compatibility alternatives to <code>resolution</code> media queries.","id":"resolution-compat","name":"resolution media query (compatibility prefixes)","status":{"baseline":"high","baseline_high_date":"2021-04-23","baseline_low_date":"2018-10-23","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"63","firefox_android":"63","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>decodedBodySize</code>, <code>encodedBodySize</code>, and <code>transferSize</code> properties of the <code>PerformanceResourceTiming</code> API reports the size of resources loaded.","id":"resource-size","name":"Resource size","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"54","chrome_android":"54","edge":"17","firefox":"45","firefox_android":"45","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"<code>PerformanceResourceTiming</code> 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.","id":"resource-timing","name":"Resource timing (initial support)","status":{"baseline":"high","baseline_high_date":"2020-03-19","baseline_low_date":"2017-09-19","support":{"chrome":"29","chrome_android":"29","edge":"12","firefox":"35","firefox_android":"35","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>revert</code> CSS keyword resets any property to its previous default, provided by either the user or browser stylesheets. For example, setting <code>display: revert</code> on a <code><div></code> will likely result in <code>display: block</code>, the browser default style. This is often confused with <code>initial</code>.","id":"revert-value","name":"revert","status":{"baseline":"high","baseline_high_date":"2023-01-27","baseline_low_date":"2020-07-27","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"67","firefox_android":"67","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>rex</code> CSS length unit is a font-relative length that is equal to the x-height of the root element.","id":"rex","name":"rex unit","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>rgb()</code>, rgba()<code>, and hexadecimal (as in </code>#004488ff`) notations pick colors using red, green, blue, and alpha (transparency) channels.","id":"rgb","name":"RGB","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"52","firefox_android":"52","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>line-height-step</code> 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.","id":"rhythmic-sizing","name":"Rhythmic sizing","status":{"baseline":false,"support":{}}},{"description_html":"The <code>ric</code> CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.","id":"ric","name":"ric unit","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"17.2","safari_ios":"17.2"}}},{"description_html":"The <code>rlh</code> CSS length unit is a font-relative length relative to the line height of root element.","id":"rlh","name":"rlh unit","status":{"baseline":"low","baseline_low_date":"2023-11-21","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>:root</code> pseudo-class matches the root element of the document, usually the <code><html></code> element.","id":"root","name":":root","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>round()</code>, <code>mod()</code>, and <code>rem()</code> CSS functions compute rounded values and the remainder after division.","id":"round-mod-rem","name":"round(), mod(), and rem()","status":{"baseline":"low","baseline_low_date":"2024-05-17","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code><ruby></code> element produces small annotations that are rendered with its base text.","id":"ruby","name":"<ruby>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"38","firefox_android":"38","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>ruby-align</code> CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.","id":"ruby-align","name":"ruby-align","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"128","chrome_android":"128","edge":"128","firefox":"38","firefox_android":"38","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>ruby-overhang</code> CSS property sets whether ruby annotations may overlap adjacent text.","id":"ruby-overhang","name":"ruby-overhang","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>ruby-position</code> 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.","id":"ruby-position","name":"ruby-position","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"38","firefox_android":"38","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code><s></code> HTML element indicates text that is no longer relevant or accurate, styling text as strikethrough by default.","id":"s","name":"<s>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>safe-area-inset-</code> CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, <code>top:\\ env(safe-area-inset-top);</code> positions the top of an element below the notch on an iPhone.","id":"safe-area-inset","name":"Safe area inset environment variables","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"65","firefox_android":"65","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code><samp></code> element represents a sample or quoted output from a computer program. Styled in a monospace font by default.","id":"samp","name":"<samp>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"Browsers send the <code>Save-Data</code> HTTP request header when the user turns on a data-saving mode. It is a hint to reduce data sent to the browser. Servers should respond with alternative content, such as smaller images and videos, or different markup and styling.","id":"savedata","name":"Save-Data","status":{"baseline":false,"support":{"chrome":"65","chrome_android":"65","edge":"79"}}},{"description_html":"The <code>scheduler</code> API provides a way to prioritize all tasks belonging to an application.","id":"scheduler","name":"Scheduler API","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"The <code>@scope</code> CSS at-rule sets the scope for a group of rules.","id":"scope","name":"@scope","status":{"baseline":false,"support":{"chrome":"118","chrome_android":"118","edge":"118","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>:scope</code> CSS pseudo-class matches the scoping root, for instance the element that <code>querySelector()</code> is called on, or the root of a DOM subtree specified with <code>@scope</code>.","id":"scope-pseudo","name":":scope (pseudo-class)","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"27","chrome_android":"27","edge":"79","firefox":"32","firefox_android":"32","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>window.screen</code> property contains information about the screen of the output device that the referenced <code>window</code> is being rendered on.","id":"screen","name":"Screen","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>navigator.mediaDevices.getDisplayMedia()</code> method asks the user to choose a screen or portion of a screen (such as a window) to capture as a media stream.","id":"screen-capture","name":"Screen capture","status":{"baseline":false,"support":{"chrome":"72","edge":"79","firefox":"33","safari":"13"}}},{"description_html":"The <code>screen.orientation</code> 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.","id":"screen-orientation","name":"Screen orientation","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"38","chrome_android":"39","edge":"79","firefox":"43","firefox_android":"43","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>screen.orientation.lock()</code> 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.","id":"screen-orientation-lock","name":"Screen orientation lock","status":{"baseline":false,"support":{"chrome_android":"38"}}},{"description_html":"The <code>navigator.wakeLock.request(\"screen\")</code> API prevents the device's screen from dimming or being turned off.","id":"screen-wake-lock","name":"Screen wake lock","status":{"baseline":false,"support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"126","firefox_android":"126","safari":"16.4"}}},{"description_html":"The <code><script></code> element contains or loads data or executable code. This is typically used to load JavaScript code. The <code><noscript></code> element represents alternative content to show when scripting is not allowed.","id":"script","name":"<script> and <noscript>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The <code>scripting</code> CSS media query sets styles based on whether scripting such as JavaScript is available. Values are <code>enabled</code> if scripting is available, <code>initial-only</code> if scripting is only available on page load (for example, printed content), or <code>none</code>.","id":"scripting","name":"scripting media query","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"113","firefox_android":"113","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>scroll-behavior</code> CSS property controls whether scrolling is smooth or snaps, for scroll actions not performed by the user such as those triggered by navigation.","id":"scroll-behavior","name":"scroll-behavior","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>animation-timeline</code>, <code>scroll-timeline</code>, and <code>view-timeline</code> CSS properties advance animations based on the user's scroll position.","id":"scroll-driven-animations","name":"Scroll-driven animations","status":{"baseline":false,"support":{"chrome":"115","chrome_android":"115","edge":"115"}}},{"description_html":"The <code>scroll()</code> and <code>scrollBy()</code> methods change the scroll position of overflow content within an element. Similar to setting <code>scrollTop</code> and <code>scrollLeft</code> properties, but with options setting whether the scroll should animate smoothly or jump. Note that <code>scrollTo()</code> is an alias for <code>scroll()</code>.","id":"scroll-elements","name":"Scroll methods on elements","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>scrollIntoView()</code> method scrolls an element's ancestor containers such that the element is visible to the user.","id":"scroll-into-view","name":"scrollIntoView()","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"14","safari_ios":"14"}}},{"description_html":"CSS scroll snap controls the panning and scrolling behavior within a scroll container.","id":"scroll-snap","name":"Scroll snap","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"68","firefox_android":"68","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>scrollsnapchanging</code> and <code>scrollsnapchange</code> events fire when a scroll gesture changes the selected scroll snap target.","id":"scroll-snap-events","name":"Scroll snap events","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"Text fragments are URL fragments on the form <code>#:~:text=snippet</code> 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.","id":"scroll-to-text-fragment","name":"Scroll to text fragment","status":{"baseline":"low","baseline_low_date":"2024-10-01","support":{"chrome":"80","chrome_android":"80","edge":"80","firefox":"131","firefox_android":"131","safari":"16.1","safari_ios":"16.1"}}},{"description_html":"The <code>scrollbar-color</code> CSS property sets the color of the scrollbar track and thumb.","id":"scrollbar-color","name":"scrollbar-color","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"64","firefox_android":"64"}}},{"description_html":"The <code>scrollbar-gutter</code> CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.","id":"scrollbar-gutter","name":"scrollbar-gutter","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"97","firefox_android":"97","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>scrollbar-width</code> CSS property sets the width of the scrollbar.","id":"scrollbar-width","name":"scrollbar-width","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"64","firefox_android":"64","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>scrollend</code> event fires when an element or document has finished scrolling.","id":"scrollend","name":"scrollend","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"109","firefox_android":"109"}}},{"description_html":"The <code><search></code> HTML element is a container that represents the parts of the web page with search functionality.","id":"search","name":"<search>","status":{"baseline":"low","baseline_low_date":"2023-10-13","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"118","firefox_android":"118","safari":"17","safari_ios":"17"}}},{"description_html":"The <code><input type=\"search\"></code> HTML element represents a text field for search queries.","id":"search-input-type","name":"<input type=\"search\">","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><section></code> element is a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.","id":"section","name":"<section>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code><select></code> element provides a menu of options for a user to pick from, typically rendered as a dropdown list.","id":"select","name":"<select>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>::selection</code> CSS pseudo-element selects text a user has highlighted.","id":"selection","name":"::selection","status":{"baseline":false,"support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"62","firefox_android":"62","safari":"1.1"}}},{"description_html":"The Selection API controls and modifies user text selections within the page.","id":"selection-api","name":"Selection","status":{"baseline":"high","baseline_high_date":"2019-09-07","baseline_low_date":"2017-03-07","support":{"chrome":"11","chrome_android":"18","edge":"12","firefox":"52","firefox_android":"52","safari":"5.1","safari_ios":"5"}}},{"description_html":"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.","id":"selectors","name":"Selectors (core)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>navigator.serial</code> API communicates with devices over serial ports, such as microcontrollers.","id":"serial","name":"Web serial","status":{"baseline":false,"support":{"chrome":"89","edge":"89"}}},{"description_html":"The <code>DOMException</code>, <code>Error</code>, <code>EvalError</code>, <code>RangeError</code>, <code>ReferenceError</code>, <code>SyntaxError</code>, <code>TypeError</code>, and <code>URIError</code> objects are serializable. You can call <code>structuredClone()</code> on an error object or pass it to a worker using <code>postMessage()</code>.","id":"serializable-errors","name":"Serializable errors","status":{"baseline":false,"support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"103","firefox_android":"103"}}},{"description_html":"The <code>EventSource</code> API creates a connection to a server and listens to a stream of events sent by the server.","id":"server-sent-events","name":"Server-sent events","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"6","chrome_android":"18","edge":"79","firefox":"6","firefox_android":"45","safari":"5","safari_ios":"5"}}},{"description_html":"The <code>serverTiming</code> property of the <code>PerformanceResourceTiming</code> API contains server timing information about network requests.","id":"server-timing","name":"Server timing","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"61","firefox_android":"61","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The service worker of a website is a script that runs in its own thread and which acts as local proxy that intercepts network requests from the website. Use a service worker to implement advanced caching strategies, offline support, background tasks, or push notification support on your website.","id":"service-workers","name":"Service workers","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"45","chrome_android":"45","edge":"17","firefox":"44","firefox_android":"44","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"Set objects store unique values of any type.","id":"set","name":"Set (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"13","firefox_android":"14","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>difference()</code>, <code>intersection()</code>, <code>isDisjointFrom()</code>, <code>isSubsetOf()</code>, <code>isSupersetOf()</code>, <code>symmetricDifference()</code>, and <code>union()</code> methods of the JavaScript <code>Set</code> object performs operations between two sets.","id":"set-methods","name":"Set methods","status":{"baseline":"low","baseline_low_date":"2024-06-11","support":{"chrome":"122","chrome_android":"122","edge":"122","firefox":"127","firefox_android":"127","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>setInterval()</code> global function repeatedly executes provided code on a given delay, and the accompanying <code>clearInterval()</code> cancels the interval.","id":"setinterval","name":"setInterval","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>setTimeout()</code> global function executes provided code after a given duration of time, and the accompanying <code>clearTimeout()</code> cancels the timer.","id":"settimeout","name":"setTimeout","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"1"}}},{"description_html":"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.","id":"shadow-dom","name":"Shadow DOM","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>part</code> and <code>exportparts</code> HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the <code>::part()</code> CSS pseudo-element for styling.","id":"shadow-parts","name":"Shadow parts","status":{"baseline":"high","baseline_high_date":"2023-01-28","baseline_low_date":"2020-07-28","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"72","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>shape-outside</code> CSS property, along with <code>shape-margin</code> and <code>shape-image-threshold</code>, sets the shape around which adjacent content will wrap.","id":"shape-outside","name":"shape-outside","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"62","firefox_android":"62","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code>, <code>rect()</code>, and <code>xywh()</code> CSS shape functions create shapes for use with <code>clip-path</code> and <code>shape-outside</code>.","id":"shapes","name":"shapes","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"54","firefox_android":"54","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>navigator.share()</code> method invokes the device's native sharing mechanism and passes text, links, files, and other content to share targets.","id":"share","name":"navigator.share()","status":{"baseline":false,"support":{"chrome_android":"61","edge":"93","firefox_android":"79","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>SharedArrayBuffer</code> object represents bytes shared between multiple workers and the main thread. The <code>Atomics</code> object safely accesses <code>SharedArrayBuffer</code> data to make sure predictable values are read and written and that operations are not interrupted.","id":"shared-memory","name":"SharedArrayBuffer and Atomics","status":{"baseline":"high","baseline_high_date":"2024-06-13","baseline_low_date":"2021-12-13","support":{"chrome":"68","chrome_android":"89","edge":"79","firefox":"79","firefox_android":"79","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"The <code>sharedStorage</code> 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.\"","id":"shared-storage","name":"Shared storage","status":{"baseline":false,"support":{"chrome":"126","chrome_android":"126","edge":"126"}}},{"description_html":"The <code>showPicker()</code> method for <code><input></code> elements shows the user interface for picking a value. For example, for <code><input type=\"date\"></code> it shows the interface for picking a date.","id":"show-picker-input","name":"showPicker() for <input>","status":{"baseline":false,"support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"101","firefox_android":"101","safari":"17.4"}}},{"description_html":"The <code>showPicker()</code> method for <code><select></code> elements shows the dropdown menu or other user interface for picking one of the options.","id":"show-picker-select","name":"showPicker() for <select>","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"122","firefox_android":"122"}}},{"description_html":"The <code><slot></code> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.","id":"slot","name":"<slot>","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>assign()</code> method for <code><slot></code> elements assigns nodes to the slot, as an alternative to using the <code>slot</code> and <code>name</code> HTML attributes. The nodes must be children of a shadow host and the shadow root must be created with the <code>slotAssignment</code> set to \"manual\". Also known as manual slot assignment.","id":"slot-assign","name":"Imperative slot assignment","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"92","firefox_android":"92","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code><small></code> 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.","id":"small","name":"<small>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code><animate></code>, <code><animateMotion></code>, and <code><animateTransform></code> SVG elements declaratively animate SVG elements. Also known as SMIL.","id":"smil-svg-animations","name":"SMIL SVG animations","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"19","chrome_android":"25","edge":"79","firefox":"4","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>image-rendering: smooth</code> CSS declaration scales images while retaining a gradual color blending that is useful for photos.","id":"smooth","name":"smooth","status":{"baseline":false,"support":{"firefox":"93","firefox_android":"93"}}},{"description_html":"The <code><source></code> element sets a media resource for the <code><picture></code>, <code><video></code>, and <code><audio></code> elements.","id":"source","name":"<source>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>Sourcemap</code> HTTP response header links generated code to a source map, so the browser shows the original source in a debugger. This makes it easier to work with minified or transpiled code.","id":"sourcemap-header","name":"Sourcemap header","status":{"baseline":"high","baseline_high_date":"≤2022-07-15","baseline_low_date":"≤2020-01-15","support":{"chrome":"18","chrome_android":"18","edge":"≤79","firefox":"55","firefox_android":"55","safari":"7","safari_ios":"7"}}},{"description_html":"The <code><span></code> HTML element is the generic inline container for content.","id":"span","name":"<span>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>speak</code> CSS property sets whether or not text should be spoken.","id":"speak","name":"speak","status":{"baseline":false,"support":{}}},{"description_html":"The <code>speak-as</code> CSS property sets how any element's content is spoken. Not to be confused with the <code>speak-as</code> descriptor of <code>@counter-style</code> at-rules.","id":"speak-as","name":"speak-as","status":{"baseline":false,"support":{"safari":"11.1","safari_ios":"11.3"}}},{"description_html":"Speculation rules are hints to the browser to proactively download pages in the background so they appear instantly when the user navigates to them.","id":"speculation-rules","name":"Speculation rules","status":{"baseline":false,"support":{}}},{"description_html":"The <code>SpeechRecognition</code> API converts audio into text using the device's speech recognition service.","id":"speech-recognition","name":"Speech recognition","status":{"baseline":false,"support":{}}},{"description_html":"The <code>SpeechSynthesis</code> API converts text to speech with artificial voices.","id":"speech-synthesis","name":"Speech synthesis","status":{"baseline":"high","baseline_high_date":"2021-03-05","baseline_low_date":"2018-09-05","support":{"chrome":"33","chrome_android":"33","edge":"14","firefox":"49","firefox_android":"62","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>spellcheck</code> global HTML attribute sets whether the browser may check an element for spelling errors.","id":"spellcheck","name":"Spellcheck","status":{"baseline":"high","baseline_high_date":"2020-05-28","baseline_low_date":"2017-11-28","support":{"chrome":"9","chrome_android":"47","edge":"12","firefox":"2","firefox_android":"57","safari":"5.1","safari_ios":"9.3"}}},{"description_html":"The <code>::spelling-error</code> and <code>::grammar-error</code> CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.","id":"spelling-grammar-error","name":"::spelling-error and ::grammar-error","status":{"baseline":false,"support":{"chrome":"121","chrome_android":"121","edge":"121","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The spread (<code>...</code>) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.","id":"spread","name":"Spread syntax","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"55","firefox_android":"55","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>srcset</code> and <code>sizes</code> attributes for <code><img></code> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display.","id":"srcset","name":"srcset and sizes","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"38","chrome_android":"38","edge":"13","firefox":"38","firefox_android":"38","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"Stable array sort() function","id":"stable-array-sort","name":"Stable array sort","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"70","chrome_android":"70","edge":"79","firefox":"3","firefox_android":"4","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>@starting-style</code> CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.","id":"starting-style","name":"@starting-style","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>:state()</code> CSS pseudo-class matches custom elements based on their custom state, set through the <code>ElementInternals.states</code> API.","id":"state","name":":state()","status":{"baseline":"low","baseline_low_date":"2024-05-17","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"126","firefox_android":"126","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>position: static</code> CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as <code>top</code> or <code>inset-block-start</code>.","id":"static-positioning","name":"Static positioning","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>steps()</code> CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The <code>step-start</code> and <code>step-end</code> keyword values are presets with a single interval.","id":"steps-easing","name":"steps() easing","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"65","firefox_android":"65","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>position: sticky</code> 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.","id":"sticky-positioning","name":"Sticky positioning","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"56","chrome_android":"56","edge":"16","firefox":"59","firefox_android":"59","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>document.requestStorageAccess()</code> method allows content in iframes to request storing and reading cookies and other site data, while the <code>document.hasStorageAccess()</code> method checks if such access is granted.","id":"storage-access","name":"Storage access","status":{"baseline":"low","baseline_low_date":"2023-12-05","support":{"chrome":"119","chrome_android":"120","edge":"85","firefox":"65","firefox_android":"65","safari":"11.1","safari_ios":"11.3"}}},{"description_html":"The <code>navigator.storageBuckets</code> 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.","id":"storage-buckets","name":"Storage buckets","status":{"baseline":false,"support":{"chrome":"122","chrome_android":"122","edge":"122"}}},{"description_html":"The <code>navigator.storage</code> 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.","id":"storage-manager","name":"Storage manager","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"57","firefox_android":"57","safari":"17","safari_ios":"17"}}},{"description_html":"The streams API creates, composes, and consumes continuously generated data.","id":"streams","name":"Streams","status":{"baseline":false,"support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"102","firefox_android":"102"}}},{"description_html":"The <code>stretch</code> CSS keyword expands a box as needed to fit its contents until the maximum size is reached, without preserving the content's preferred aspect ratio.","id":"stretch","name":"stretch","status":{"baseline":false,"support":{}}},{"description_html":"The <code>at()</code> 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.","id":"string-at","name":"String at()","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"92","chrome_android":"92","edge":"92","firefox":"90","firefox_android":"90","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>codePointAt()</code> method returns the numeric value of the UTF-16 code point at an index of the string. The <code>fromCodePoint()</code> method returns a string created from one or more code points.","id":"string-codepoint","name":"String codePointAt() and fromCodePoint()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"29","firefox_android":"29","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>includes()</code> method of strings returns whether a search string appears within the string.","id":"string-includes","name":"String includes()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"40","firefox_android":"40","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>matchAll()</code> method of strings matches a string against a regular expression and returns an iterator of all results, including capturing groups.","id":"string-matchall","name":"String matchAll()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"67","firefox_android":"67","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>normalize()</code> 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 <code>normalize()</code> method to find canonically or compatibly equivalent strings.","id":"string-normalize","name":"String normalize()","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"34","chrome_android":"34","edge":"12","firefox":"31","firefox_android":"31","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>padStart()</code> and <code>padEnd()</code> methods of strings return a string lengthened to a minimum number of characters by adding characters to the start or end of the string.","id":"string-pad","name":"String padStart() and padEnd()","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"57","chrome_android":"57","edge":"15","firefox":"48","firefox_android":"48","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>String.raw()</code> static method interpolates template literal substitutions, but ignores escape sequences. It is the tag function for template literals.","id":"string-raw","name":"String raw()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"34","firefox_android":"34","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>repeat()</code> method of strings returns the original string repeated a number of times.","id":"string-repeat","name":"String repeat()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"36","edge":"12","firefox":"24","firefox_android":"24","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>replaceAll()</code> 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.","id":"string-replaceall","name":"String replaceAll()","status":{"baseline":"high","baseline_high_date":"2023-02-27","baseline_low_date":"2020-08-27","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"77","firefox_android":"79","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>startsWith()</code> and <code>endsWith()</code> methods of strings returns whether a search string appears at the beginning or end of the provided string.","id":"string-startsends-with","name":"String startsWith() and endsWith()","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"41","chrome_android":"36","edge":"12","firefox":"17","firefox_android":"17","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>trimStart()</code> and <code>trimEnd()</code> methods of strings return a new string with whitespace removed from the beginning or end of the string.","id":"string-trim-startend","name":"String trimStart() and trimEnd()","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"66","chrome_android":"66","edge":"79","firefox":"61","firefox_android":"61","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>isWellFormed()</code> method of strings returns a boolean indicating if the string contains any Unicode lone surrogates. The <code>toWellFormed()</code> method returns a new string where all lone surrogates are replaced by the Unicode replacement character.","id":"string-wellformed","name":"String isWellFormed() and toWellFormed()","status":{"baseline":"low","baseline_low_date":"2023-10-24","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"119","firefox_android":"119","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The string type (and <code>String</code> object) represents a sequence of characters.","id":"strings","name":"String (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><strong></code> HTML element brings attention to the content, styling text as bold by default.","id":"strong","name":"<strong>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>structuredClone()</code> 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.","id":"structured-clone","name":"structuredClone()","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"94","firefox_android":"94","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code><style></code> element embeds an inline CSS stylesheet in a document.","id":"style","name":"<style>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>style</code> global HTML attribute applies inline CSS styling declarations to individual elements.","id":"style-attr","name":"style (attribute)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code><sub></code> and <code><sup></code> elements sets inline text to be displayed as subscript or superscript for solely typographical reasons.","id":"sub-sup","name":"<sub> and <sup>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.","id":"subgrid","name":"Subgrid","status":{"baseline":"low","baseline_low_date":"2023-09-15","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"71","firefox_android":"79","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>@supports</code> 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.","id":"supports","name":"@supports","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"28","chrome_android":"28","edge":"12","firefox":"22","firefox_android":"22","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>@supports (-webkit-transform-3d)</code> CSS media query is a standardized compatibility alternative to <code>@supports (transform-style)</code>.","id":"supports-compat","name":"@supports (compatibility prefix)","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"49","firefox_android":"49","safari":"4","safari_ios":"3.2"}}},{"description_html":"The SVG image format, represented by the <code><svg></code> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.","id":"svg","name":"SVG","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"3","firefox_android":"4","safari":"3","safari_ios":"2"}}},{"description_html":"The SVG 1.1 image format has several components that were excluded from SVG 2, such as fonts, alternate glyphs, and the <code>xlink</code> namespace.","id":"svg-discouraged","name":"SVG 1.1 (discouraged)","status":{"baseline":false,"support":{}}},{"description_html":"The <code><filter></code> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.","id":"svg-filters","name":"SVG filters","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"6","safari_ios":"6"}}},{"description_html":"A <code>Symbol</code> 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.","id":"symbol","name":"Symbol","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"36","firefox_android":"36","safari":"9","safari_ios":"9"}}},{"description_html":"The system color CSS keywords, such as <code>ButtonBorder</code> or <code>LinkText</code>, allow you to match default colors from the user agent.","id":"system-color","name":"System colors","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>tab-size</code> CSS property sets the width of the tab character.","id":"tab-size","name":"tab-size","status":{"baseline":"high","baseline_high_date":"2024-02-10","baseline_low_date":"2021-08-10","support":{"chrome":"42","chrome_android":"42","edge":"79","firefox":"91","firefox_android":"91","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>tabindex</code> HTML attribute make an element focusable, and sets the element's relative ordering for sequential focus navigation.","id":"tabindex","name":"tabindex","status":{"baseline":"high","baseline_high_date":"2021-04-02","baseline_low_date":"2018-10-02","support":{"chrome":"1","chrome_android":"18","edge":"18","firefox":"1.5","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code><table></code> HTML element, with several related elements, represents tabular data in rows and columns of cells.","id":"table","name":"Tables","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>:target</code> CSS pseudo-class matches the element with an ID matching the URL fragment.","id":"target","name":":target","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"2"}}},{"description_html":"The <code>::target-text</code> pseudo-element allows you to style text highlighted by a URL text fragment such as <code>#:~:text=snippet</code>.","id":"target-text","name":"::target-text","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"131","firefox_android":"131","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>:target-within</code> CSS pseudo-class matches the element with an ID matching the URL fragment and its ancestors.","id":"target-within","name":":target-within","status":{"baseline":false,"support":{}}},{"description_html":"The <code><template></code> HTML element holds HTML fragments which you can clone and insert into the document using JavaScript.","id":"template","name":"<template>","status":{"baseline":"high","baseline_high_date":"2018-05-12","baseline_low_date":"2015-11-12","support":{"chrome":"26","chrome_android":"26","edge":"13","firefox":"22","firefox_android":"22","safari":"8","safari_ios":"8"}}},{"description_html":"Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.","id":"template-literals","name":"Template literals","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"62","chrome_android":"62","edge":"79","firefox":"53","firefox_android":"53","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>Temporal</code> API allows you to work with dates, times, time zones, and durations. It is more powerful than the <code>Date</code> API.","id":"temporal","name":"Temporal","status":{"baseline":false,"support":{}}},{"description_html":"The <code>text-align</code> CSS property sets the horizontal placement of the inner content of a block element.","id":"text-align","name":"text-align","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-align-last</code> CSS property sets the alignment of the last line of text before a forced line break.","id":"text-align-last","name":"text-align-last","status":{"baseline":"low","baseline_low_date":"2022-09-12","support":{"chrome":"47","chrome_android":"47","edge":"12","firefox":"49","firefox_android":"49","safari":"16","safari_ios":"16"}}},{"description_html":"The <code>text-box</code> CSS property sets the spacing above and below text based on a font's typographic features. For example, <code>text-box: trim-both ex alphabetic</code> trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.","id":"text-box","name":"text-box","status":{"baseline":false,"support":{"safari":"18.2","safari_ios":"18.2"}}},{"description_html":"The <code>text-combine-upright</code> CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.","id":"text-combine-upright","name":"text-combine-upright","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"48","firefox_android":"48","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>text-decoration</code> CSS property sets the style and color of decorative lines including underline, overline, line-through, or a combination of lines.","id":"text-decoration","name":"text-decoration","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-decoration</code> CSS property in a <code>::selection</code> rule sets the underline and other text decoration styles on the text a user has highlighted.","id":"text-decoration-selection","name":"text-decoration in ::selection","status":{"baseline":false,"support":{"chrome":"105","chrome_android":"105","edge":"105"}}},{"description_html":"The <code>text-emphasis</code> CSS property sets position and style for text emphasis marks, especially for East Asian languages.","id":"text-emphasis","name":"text-emphasis","status":{"baseline":"high","baseline_high_date":"2024-09-03","baseline_low_date":"2022-03-03","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"46","firefox_android":"46","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>TextEncoder</code> API transforms a stream of code points into a byte stream with UTF-8 encoding, and <code>TextDecoder</code> does the reverse.","id":"text-encoding","name":"Text encoding and decoding","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"38","chrome_android":"38","edge":"79","firefox":"19","firefox_android":"19","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>text-indent</code> CSS property sets the size of the empty space (indentation) at the beginning of lines in a text.","id":"text-indent","name":"text-indent","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-indent: each-line</code> CSS declaration indents text after forced breaks as well as to the first line of a block.","id":"text-indent-each-line","name":"text-indent: each-line","status":{"baseline":false,"support":{"firefox":"121","firefox_android":"121","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>text-indent: hanging</code> CSS declaration indents all lines except the first.","id":"text-indent-hanging","name":"text-indent: hanging","status":{"baseline":false,"support":{"firefox":"121","firefox_android":"121","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>text-justify</code> CSS property sets the justification method of text when <code>text-align: justify</code> is set.","id":"text-justify","name":"text-justify","status":{"baseline":false,"support":{"firefox":"55","firefox_android":"55"}}},{"description_html":"The <code>text-orientation</code> CSS property sets the how text is typeset within a line when the writing mode is vertical.","id":"text-orientation","name":"text-orientation","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"41","firefox_android":"41","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>text-overflow</code> 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.","id":"text-overflow","name":"Text overflow","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"7","firefox_android":"7","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>text-shadow</code> CSS property sets the position and styles of shadow on text.","id":"text-shadow","name":"text-shadow","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"1.1","safari_ios":"1"}}},{"description_html":"The <code>text-size-adjust</code> CSS property disables or modifies the browser's default text size adjustment for small screen sizes.","id":"text-size-adjust","name":"text-size-adjust","status":{"baseline":false,"support":{"chrome":"54","chrome_android":"54","edge":"79"}}},{"description_html":"The <code>text-spacing-trim</code> CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.","id":"text-spacing-trim","name":"text-spacing-trim","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123"}}},{"description_html":"The <code>-webkit-text-stroke-width</code> and <code>-webkit-text-stroke-color</code> CSS properties set the thickness and color of text outlines. The <code>-webkit-text-fill-color</code> sets the color within text character outlines. Both default to the text color.","id":"text-stroke-fill","name":"Text stroke and fill (compatibility prefixes)","status":{"baseline":"high","baseline_high_date":"2019-10-05","baseline_low_date":"2017-04-05","support":{"chrome":"4","chrome_android":"18","edge":"15","firefox":"49","firefox_android":"49","safari":"3","safari_ios":"2"}}},{"description_html":"The <code><track></code> 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.","id":"text-tracks","name":"Text tracks","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"23","chrome_android":"25","edge":"12","firefox":"31","firefox_android":"31","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>text-transform</code> CSS property sets text case and capitalization.","id":"text-transform","name":"text-transform","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>text-underline-position</code> and <code>text-underline-offset</code> CSS properties set the position and distance from initial position of text underlines on text with <code>text-decoration: underline</code>.","id":"text-underline-position","name":"Text underline position","status":{"baseline":"high","baseline_high_date":"2023-05-19","baseline_low_date":"2020-11-19","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"70","firefox_android":"79","safari":"12.1","safari_ios":"12.2"}}},{"description_html":"The <code>text-wrap</code> CSS property sets how lines break in text that overflows the container. It is a shorthand for <code>text-wrap-style</code> and <code>text-wrap-mode</code>.","id":"text-wrap","name":"text-wrap","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>text-wrap: balance</code> CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.","id":"text-wrap-balance","name":"text-wrap: balance","status":{"baseline":"low","baseline_low_date":"2024-05-13","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"121","firefox_android":"121","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>text-wrap-mode</code> CSS property sets whether lines may wrap with the values <code>wrap</code> and <code>nowrap</code>. It is a longhand property for both <code>white-space</code> and <code>text-wrap</code>.","id":"text-wrap-mode","name":"text-wrap-mode","status":{"baseline":"low","baseline_low_date":"2024-10-17","support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>text-wrap: nowrap</code> CSS declaration prevents text breaking into multiple lines. Text that doesn't fit overflows instead.","id":"text-wrap-nowrap","name":"text-wrap: nowrap","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>text-wrap: pretty</code> CSS declaration prioritizes better layout over speed when text is broken into multiple lines.","id":"text-wrap-pretty","name":"text-wrap: pretty","status":{"baseline":false,"support":{"chrome":"117","chrome_android":"117","edge":"117"}}},{"description_html":"The <code>text-wrap: stable</code> CSS declaration wraps text using the default algorithm, but does not change wrapping on earlier lines while the text is being edited.","id":"text-wrap-stable","name":"text-wrap: stable","status":{"baseline":"low","baseline_low_date":"2024-10-17","support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"121","firefox_android":"121","safari":"17.5","safari_ios":"17.5"}}},{"description_html":"The <code>text-wrap-style</code> CSS property sets how lines break in text that overflows the container. It can also be set with the <code>text-wrap</code> shorthand.","id":"text-wrap-style","name":"text-wrap-style","status":{"baseline":false,"support":{"chrome":"130","chrome_android":"130","edge":"130"}}},{"description_html":"The <code><textarea></code> element represents an editing control that allows users to enter multi-line, free-form, plain text.","id":"textarea","name":"<textarea>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3"}}},{"description_html":"The <code><time></code> HTML element represents a time, such as a calendar date, clock time, or duration. It may include the <code>datetime</code> attribute to translate dates into machine-readable format.","id":"time","name":"<time>","status":{"baseline":"high","baseline_high_date":"2020-04-24","baseline_low_date":"2017-10-24","support":{"chrome":"62","chrome_android":"62","edge":"14","firefox":"22","firefox_android":"22","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>:future</code> and <code>:past</code> CSS pseudo-classes match upcoming or prior elements during media playback.","id":"time-relative-selectors","name":"Time-relative pseudo-selectors","status":{"baseline":false,"support":{"chrome":"23","chrome_android":"25","edge":"79","safari":"7","safari_ios":"7"}}},{"description_html":"The <code><title></code> 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.","id":"title","name":"<title>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>title</code> global HTML attribute sets information about an element, such as a name or description. The value is typically shown as a tooltip that appears on mouse over. Since it's not often available to touch-only, keyboard-only, or assistive technology users, it's not a substitute for other text.","id":"title-attr","name":"Title","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>await</code> keyword, when used at the top level of a module (outside of an async function), delays parent module execution until after a promise fulfills.","id":"top-level-await","name":"Top-level await","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"89","firefox_android":"89","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>touch-action</code> CSS property sets whether an element on a touch screen can be panned or pinched to zoom.","id":"touch-action","name":"touch-action","status":{"baseline":"high","baseline_high_date":"2022-03-19","baseline_low_date":"2019-09-19","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"52","firefox_android":"52","safari":"13","safari_ios":"9.3"}}},{"description_html":"Touch events <code>touchstart</code>, <code>touchmove</code>, <code>touchend</code>, and <code>touchcancel</code> fire when users interact with a touch-sensitive surface, such as a screen or drawing tablet. These events are similar to mouse events.","id":"touch-events","name":"Touch events","status":{"baseline":false,"support":{"chrome":"22","chrome_android":"25","edge":"12","firefox":"52","firefox_android":"6","safari_ios":"≤3"}}},{"description_html":"The <code>transfer()</code> and <code>transferToFixedLength()</code> methods of <code>ArrayBuffer</code> move a buffer from one context to another (for example, to a worker).","id":"transferable-arraybuffer","name":"Transferable ArrayBuffer","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"122","firefox_android":"122","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>transform-box</code> CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.","id":"transform-box","name":"transform-box","status":{"baseline":"low","baseline_low_date":"2024-04-16","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"125","firefox_android":"125","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>transform</code> 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.","id":"transforms2d","name":"2D transforms","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>transform</code> CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.","id":"transforms3d","name":"3D transforms","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"16","firefox_android":"16","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>transition-behavior: allow-discrete</code> 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%.","id":"transition-behavior","name":"transition-behavior","status":{"baseline":"low","baseline_low_date":"2024-08-06","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"129","firefox_android":"129","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>transition</code> 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.","id":"transitions","name":"Transitions (CSS)","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>translate</code> HTML attribute marks whether an element's text should be translated.","id":"translate","name":"translate attribute","status":{"baseline":"low","baseline_low_date":"2023-03-14","support":{"chrome":"19","chrome_android":"25","edge":"79","firefox":"111","firefox_android":"111","safari":"6","safari_ios":"6"}}},{"description_html":"The <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, and <code>atan2()</code> CSS functions compute various trigonometric functions.","id":"trig-functions","name":"sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)","status":{"baseline":"low","baseline_low_date":"2023-03-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"108","firefox_android":"108","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"Trusted types allow you to lock down insecure parts of the DOM API and prevent client-side cross-site scripting (XSS) attacks.","id":"trusted-types","name":"Trusted types","status":{"baseline":false,"support":{"chrome":"83","chrome_android":"83","edge":"83"}}},{"description_html":"The <code>display</code> CSS property accepts multiple keyword values, such as <code>inline flex</code> or <code>block flow</code>, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.","id":"two-value-display","name":"Two-value display property","status":{"baseline":"low","baseline_low_date":"2023-07-21","support":{"chrome":"115","chrome_android":"115","edge":"115","firefox":"70","firefox_android":"79","safari":"15","safari_ios":"15"}}},{"description_html":"Typed array iteration methods","id":"typed-array-iteration-methods","name":"Typed array iteration methods","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"38","firefox_android":"38","safari":"10","safari_ios":"10"}}},{"description_html":"Typed arrays are iterable with the <code>for … of</code> statement and enumerable with the methods <code>entries()</code>, <code>keys()</code>, and <code>values()</code>.","id":"typed-array-iterators","name":"Typed array iterators","status":{"baseline":"high","baseline_high_date":"2019-03-20","baseline_low_date":"2016-09-20","support":{"chrome":"45","chrome_android":"45","edge":"12","firefox":"37","firefox_android":"37","safari":"10","safari_ios":"10"}}},{"description_html":"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.","id":"typed-arrays","name":"Typed arrays (initial support)","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"4.2"}}},{"description_html":"The <code><u></code> HTML element makes non-textual annotations, styling text as underlined by default.","id":"u","name":"<u>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>Sec-CH-UA</code> HTTP request header and the <code>navigator.userAgentData</code> API expose browser and platform information used to vary responses and application logic. User agent client hints are similar to user agent strings but more privacy-preserving and safer to parse.","id":"ua-client-hints","name":"User agent client hints","status":{"baseline":false,"support":{"chrome":"98","chrome_android":"98","edge":"98"}}},{"description_html":"The <code>Uint8Array</code> object methods <code>fromBase64()</code>, <code>toBase64()</code>, and <code>setFromBase64()</code> convert to and from base64 strings. The <code>fromHex()</code>, <code>toHex()</code>, and <code>setFromHex()</code> methods convert to and from hex strings.","id":"uint8array-base64-hex","name":"Uint8Array base64 and hex conversion","status":{"baseline":false,"support":{"firefox":"133","firefox_android":"133","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"Unicode point escapes (<code>\\\\u{}</code>) represent Unicode characters within strings.","id":"unicode-point-escapes","name":"Unicode point escapes","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"44","chrome_android":"44","edge":"12","firefox":"40","firefox_android":"40","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>unset</code> keyword resets any CSS property, removing any values previously set by the author, user, or browser. Inherited properties (like <code>color</code>) reset to the parent element's computed value. Non-inherited properties (like <code>display</code>) reset to the specified initial value (<code>inline</code>).","id":"unset-value","name":"unset","status":{"baseline":"high","baseline_high_date":"2018-09-21","baseline_low_date":"2016-03-21","support":{"chrome":"41","chrome_android":"41","edge":"13","firefox":"27","firefox_android":"27","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>update</code> 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.","id":"update","name":"Update frequency media query","status":{"baseline":"low","baseline_low_date":"2023-09-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"102","firefox_android":"102","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>Upgrade-Insecure-Requests</code> HTTP request header tells the server that the response should redirect to a secure (HTTPS) resource.","id":"upgrade-insecure-requests","name":"Upgrade insecure requests","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"44","chrome_android":"44","edge":"17","firefox":"48","firefox_android":"48","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"A <code>URL</code> object represents a web address, like <code>https://example.com/</code>, and parts of the address, such as the domain, path, and query string (as <code>URLSearchParams</code>).","id":"url","name":"URL","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"32","chrome_android":"32","edge":"12","firefox":"19","firefox_android":"19","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>URL.canParse()</code> static method checks whether a URL can be parsed into a valid <code>URL</code> object. It's an alternative to calling <code>new URL()</code> in a <code>try … catch</code> statement.","id":"url-canparse","name":"URL.canParse()","status":{"baseline":"low","baseline_low_date":"2023-12-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"115","firefox_android":"115","safari":"17","safari_ios":"17"}}},{"description_html":"The <code>URLPattern</code> API creates patterns that can be matched against URLs or URL components.","id":"urlpattern","name":"URLPattern","status":{"baseline":false,"support":{"chrome":"95","chrome_android":"95","edge":"95"}}},{"description_html":"The <code>:active</code>, <code>:focus</code>, and <code>:hover</code> CSS pseudo-classes match elements based on how users are interacting with them.","id":"user-action-pseudos","name":"User action pseudo-classes","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"2","safari_ios":"1"}}},{"description_html":"The <code>navigator.userActivation</code> 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.","id":"user-activation","name":"User activation","status":{"baseline":"low","baseline_low_date":"2023-11-21","support":{"chrome":"72","chrome_android":"72","edge":"79","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>navigator.userAgent</code> read-only property returns the user agent string for the current browser. Selectively showing content based on the user agent string is unreliable. Consider using feature detection instead.","id":"user-agent-sniffing","name":"User agent sniffing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"4","safari_ios":"5"}}},{"description_html":"The <code>:user-valid</code> and <code>:user-invalid</code> pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.","id":"user-pseudos","name":":user-valid and :user-invalid","status":{"baseline":"low","baseline_low_date":"2023-11-02","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"88","firefox_android":"88","safari":"16.5","safari_ios":"16.5"}}},{"description_html":"The <code>user-select</code> CSS property controls which elements can be selected by the user.","id":"user-select","name":"user-select","status":{"baseline":false,"support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"69","firefox_android":"79"}}},{"description_html":"The <code><var></code> element represents the name of a variable in a mathematical expression or a programming context.","id":"var","name":"<var>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"}}},{"description_html":"The <code>vertical-align</code> CSS property sets the vertical alignment of inline, inline-block, and table cell elements. It has no effect on block-level elements.","id":"vertical-align","name":"vertical-align","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>writing-mode</code> CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is <code>vertical-lr</code> or <code>vertical-rl</code>. The <code>direction</code> CSS property sets whether inputs flow from top to bottom or bottom to top.","id":"vertical-form-controls","name":"Vertical form controls","status":{"baseline":"low","baseline_low_date":"2024-04-18","support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"120","firefox_android":"120","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>navigator.vibrate()</code> method makes a tactile alert, if the device is equipped with a haptic motor.","id":"vibration","name":"Vibration","status":{"baseline":false,"support":{"chrome":"32","chrome_android":"32","edge":"79"}}},{"description_html":"The <code><video></code> element plays videos or movies, optionally with controls provided by the browser.","id":"video","name":"<video>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"3","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"3"}}},{"description_html":"The <code>video-dynamic-range</code> CSS media query sets styles based on whether a device can display video with at least <code>standard</code> range colors or at least <code>high</code> range colors. Non-visual devices will match neither.","id":"video-dynamic-range","name":"video-dynamic-range media query","status":{"baseline":false,"support":{"firefox":"100","firefox_android":"100"}}},{"description_html":"The <code>view-transition-class</code> CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.","id":"view-transition-class","name":"view-transition-class","status":{"baseline":false,"support":{"chrome":"125","chrome_android":"125","edge":"125","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"View transitions allow you to create animated visual transitions between different states of a document.","id":"view-transitions","name":"View transitions","status":{"baseline":false,"support":{"chrome":"111","chrome_android":"111","edge":"111","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>sv*</code>, <code>lv*</code>, and <code>dv*</code> 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.","id":"viewport-unit-variants","name":"Small, large, and dynamic viewport units","status":{"baseline":"low","baseline_low_date":"2022-12-05","support":{"chrome":"108","chrome_android":"108","edge":"108","firefox":"101","firefox_android":"101","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>vw</code>, <code>vh</code>, <code>vmin</code>, and <code>vmax</code> CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.","id":"viewport-units","name":"Viewport units","status":{"baseline":"high","baseline_high_date":"2020-04-17","baseline_low_date":"2017-10-17","support":{"chrome":"26","chrome_android":"26","edge":"16","firefox":"19","firefox_android":"19","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>navigator.virtualKeyboard</code> 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.","id":"virtual-keyboard","name":"Virtual keyboard","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"94"}}},{"description_html":"The <code>CreateVirtualPressureSource</code> WebDriver command creates artificial sources of compute pressure for testing without the need real device sources of compute pressure.","id":"virtual-pressure-sources","name":"Virtual pressure sources","status":{"baseline":false,"support":{"chrome":"129","chrome_android":"129","edge":"129"}}},{"description_html":"The <code>CreateVirtualSensor</code> WebDriver command creates a virtual sensor for testing applications that use sensor APIs, without the need for real device sensors.","id":"virtual-sensors","name":"Virtual sensors","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120"}}},{"description_html":"The <code>visibility</code> CSS property sets whether an element is shown. Invisible elements still affect the document layout.","id":"visibility","name":"visibility","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>visualViewport</code> API provides a way to query and modify the user-visible viewport of a web page.","id":"visual-viewport","name":"Visual viewport API","status":{"baseline":"high","baseline_high_date":"2024-02-10","baseline_low_date":"2021-08-10","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"91","firefox_android":"68","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>WebAssembly.instantiate()</code> and <code>WebAssembly.instantiateStreaming()</code> global static methods load WebAssembly code (also known as Wasm), a portable binary instruction format.","id":"wasm","name":"WebAssembly","status":{"baseline":"high","baseline_high_date":"2020-04-17","baseline_low_date":"2017-10-17","support":{"chrome":"57","chrome_android":"57","edge":"16","firefox":"52","firefox_android":"52","safari":"11","safari_ios":"11"}}},{"description_html":"Integer values pass bidirectionally between JavaScript and WebAssembly, converted to i64 values in WebAssembly or BigInt values in JavaScript.","id":"wasm-bigint","name":"BigInt to i64 conversion (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"78","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"Bulk memory operations, such as <code>copy</code> and <code>init</code>, mirror the efficiency of native <code>memcpy</code> and <code>memmove</code> operations.","id":"wasm-bulk-memory","name":"Bulk memory operations (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-04-25","baseline_low_date":"2021-10-25","support":{"chrome":"75","chrome_android":"75","edge":"79","firefox":"78","firefox_android":"79","safari":"15.1","safari_ios":"15.1"}}},{"description_html":"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.","id":"wasm-exception-handling","name":"Exception handling (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-11-03","baseline_low_date":"2022-05-03","support":{"chrome":"95","chrome_android":"95","edge":"95","firefox":"100","firefox_android":"100","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"When caught, an exception is reified into an exception reference, a value of the new type <code>exnref</code>.","id":"wasm-exnref-exceptions","name":"Exception references with exnref (WebAssembly)","status":{"baseline":false,"support":{"firefox":"131","firefox_android":"131"}}},{"description_html":"The <code>i32.add</code>, <code>i32.sub</code>, <code>i32.mul</code>, <code>i64.add</code>, <code>i64.sub</code>, and <code>i64.mul</code> operations extend constant expressions to include arithmetic.","id":"wasm-extended-constant-expressions","name":"Extended constant expressions (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-03-05","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"112","firefox_android":"112","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"Garbage collection tracks references for better memory management with garbage-collected languages running in WebAssmbly.","id":"wasm-garbage-collection","name":"Garbage collection (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"120","firefox_android":"120","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"Instructions accept 64-bit memory indexes.","id":"wasm-memory64","name":"Memory64 (WebAssembly)","status":{"baseline":false,"support":{}}},{"description_html":"A single module in WebAssembly can have multiple memories.","id":"wasm-multi-memory","name":"Multi-memory (WebAssembly)","status":{"baseline":false,"support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"125","firefox_android":"125"}}},{"description_html":"Instructions and blocks can produce multiple result values.","id":"wasm-multi-value","name":"Multi-value (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2023-04-20","baseline_low_date":"2020-10-20","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"78","firefox_android":"79","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"Mutable global variables are importable and exportable.","id":"wasm-mutable-globals","name":"Import and export of mutable globals (WebAssembly)","status":{"baseline":"high","baseline_high_date":"≤2022-09-24","baseline_low_date":"≤2020-03-24","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"62","firefox_android":"62","safari":"≤13.1","safari_ios":"≤13.4"}}},{"description_html":"Saturating floating-point to integer conversion operators return the maximum or minimum integer value on overflow instead of trapping.","id":"wasm-non-trapping-float-to-int","name":"Non-trapping float-to-int conversion (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-04-25","baseline_low_date":"2021-10-25","support":{"chrome":"75","chrome_android":"75","edge":"18","firefox":"64","firefox_android":"64","safari":"15.1","safari_ios":"15.1"}}},{"description_html":"The <code>externref</code> type can be both a value type and a table element type, while <code>funcref</code> can be a value type.","id":"wasm-reference-types","name":"Reference types (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-05-19","baseline_low_date":"2021-11-19","support":{"chrome":"96","chrome_android":"96","edge":"96","firefox":"79","firefox_android":"79","safari":"15.1","safari_ios":"15.1"}}},{"description_html":"Sign-extension operator instructions extend the width of 8-bit, 16-bit, and 32-bit values to 32-bit and 64-bit values.","id":"wasm-sign-extension-operators","name":"Sign extension operators (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"69","chrome_android":"69","edge":"18","firefox":"62","firefox_android":"62","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"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.","id":"wasm-simd","name":"Fixed-width SIMD (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2023-03-27","support":{"chrome":"91","chrome_android":"91","edge":"91","firefox":"89","firefox_android":"89","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"Relaxed SIMD (Single Instruction Multiple Data) introduces local non-determinism, where the results of the instructions may vary based on hardware support.","id":"wasm-simd-relaxed","name":"Relaxed-width SIMD (WebAssembly)","status":{"baseline":false,"support":{"chrome":"114","chrome_android":"114","edge":"114"}}},{"description_html":"The WebAssembly builtin string functions mirror a subset of the JavaScript <code>String</code> API and adapt it to be efficiently callable without JavaScript glue code.","id":"wasm-string-builtins","name":"String builtins (WebAssembly)","status":{"baseline":false,"support":{"chrome":"130","edge":"130"}}},{"description_html":"Tail call optimization discards a caller frame and replaces the call with a jump instruction.","id":"wasm-tail-call-optimization","name":"Tail call optimization (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-12-11","support":{"chrome":"112","chrome_android":"112","edge":"112","firefox":"121","firefox_android":"121","safari":"18.2","safari_ios":"18.2"}}},{"description_html":"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.","id":"wasm-threads","name":"Threads and atomics (WebAssembly)","status":{"baseline":"high","baseline_high_date":"2024-06-13","baseline_low_date":"2021-12-13","support":{"chrome":"74","chrome_android":"88","edge":"79","firefox":"79","firefox_android":"79","safari":"15.2","safari_ios":"15.2"}}},{"description_html":"A typed function reference can be called directly.","id":"wasm-typed-fun-refs","name":"Typed function references (WebAssembly)","status":{"baseline":"low","baseline_low_date":"2024-09-16","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"120","firefox_android":"120","safari":"18","safari_ios":"18"}}},{"description_html":"The <code><wbr></code> HTML element represents a word break opportunity, to explicitly mark a place within a word where a line might be broken.","id":"wbr","name":"<wbr>","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"3.2"}}},{"description_html":"The <code>WeakRef</code> and <code>FinalizationRegistry</code> objects hold references to garbage-collectable objects without creating strong references that prevent their garbage collection.","id":"weak-references","name":"Weak references","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"79","firefox_android":"79","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"A <code>WeakMap</code> 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.","id":"weakmap","name":"WeakMap","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"6","firefox_android":"6","safari":"8","safari_ios":"8"}}},{"description_html":"A <code>WeakSet</code> 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.","id":"weakset","name":"WeakSet","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"34","firefox_android":"34","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>animate()</code> method of <code>Element</code> objects programmatically animates elements over time and can synchronize the animations of multiple elements.","id":"web-animations","name":"Web animations","status":{"baseline":"high","baseline_high_date":"2022-09-24","baseline_low_date":"2020-03-24","support":{"chrome":"36","chrome_android":"36","edge":"79","firefox":"48","firefox_android":"48","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The Web Audio API creates graphs of audio nodes that handle sound inputs, synthesize sounds, apply effects, create visualizations, and output to audio devices.","id":"web-audio","name":"Web Audio","status":{"baseline":"high","baseline_high_date":"2023-10-26","baseline_low_date":"2021-04-26","support":{"chrome":"35","chrome_android":"35","edge":"12","firefox":"25","firefox_android":"25","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The Web Bluetooth API enables selecting and communicating with nearby Bluetooth devices.","id":"web-bluetooth","name":"Web Bluetooth","status":{"baseline":false,"support":{"chrome":"70","chrome_android":"56","edge":"79"}}},{"description_html":"The Web Cryptography API performs low-level cryptographic operations, such as encryption, decryption, and signature verification. Also known as the Web Crypto API.","id":"web-cryptography","name":"Web Cryptography","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"11","chrome_android":"18","edge":"12","firefox":"21","firefox_android":"21","safari":"5","safari_ios":"5"}}},{"description_html":"The <code>navigator.locks</code> API coordinates work with shared resources through mutually exclusive ownership of a resource's name. Also known as web locks.","id":"web-locks","name":"Locks","status":{"baseline":"high","baseline_high_date":"2024-09-14","baseline_low_date":"2022-03-14","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"96","firefox_android":"96","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The Web MIDI API enables selecting MIDI input and output devices and sending and receiving MIDI messages.","id":"web-midi","name":"Web MIDI","status":{"baseline":false,"support":{"chrome":"43","chrome_android":"43","edge":"79","firefox":"108"}}},{"description_html":"The <code>NDEFReader</code> API reads and writes messages to near-field communication (NFC) tags.","id":"web-nfc","name":"Web NFC","status":{"baseline":false,"support":{"chrome_android":"100"}}},{"description_html":"The <code>OTPCredential</code> API represents a one-time-password (OTP).","id":"web-otp","name":"WebOTP","status":{"baseline":false,"support":{"chrome":"93","chrome_android":"84","edge":"93"}}},{"description_html":"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.","id":"webauthn","name":"Web authentication","status":{"baseline":"high","baseline_high_date":"2024-03-07","baseline_low_date":"2021-09-07","support":{"chrome":"67","chrome_android":"70","edge":"18","firefox":"60","firefox_android":"92","safari":"13","safari_ios":"13"}}},{"description_html":"The <code>getAuthenticatorData()</code>, <code>getPublicKey()</code>, and <code>getPublicKeyAlgorithm()</code> methods of <code>AuthenticatorAttestationResponse</code> access credential data inside <code>attestationObject</code> without the need to parse it.","id":"webauthn-public-key-easy","name":"Web authentication easy public key access","status":{"baseline":"low","baseline_low_date":"2023-10-24","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"119","firefox_android":"119","safari":"16","safari_ios":"16"}}},{"description_html":"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.","id":"webcodecs","name":"WebCodecs","status":{"baseline":false,"support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"130"}}},{"description_html":"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.","id":"webdriver","name":"WebDriver","status":{"baseline":false,"support":{"firefox":"66"}}},{"description_html":"WebDriver BiDi is a bidirectional protocol that allows a WebDriver client and a browser to communicate with each other.","id":"webdriver-bidi","name":"WebDriver BiDi","status":{"baseline":false,"support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"102","firefox_android":"102"}}},{"description_html":"The <code>WebGLRenderingContext</code> API is the <code>\"webgl\"</code> rendering context for the <code><canvas></code> element. It represents a space for drawing two- and three-dimensional graphics and animations.","id":"webgl","name":"WebGL","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"9","chrome_android":"25","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"8"}}},{"description_html":"The <code>WEBGL_color_buffer_float</code> extension for WebGL 1.0 contexts adds the 32-bit floating-point type <code>RGBA32F</code> as a color-renderable format.","id":"webgl-color-buffer-float","name":"WEBGL_color_buffer_float WebGL extension","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"63","chrome_android":"63","edge":"17","firefox":"30","firefox_android":"30","safari":"14","safari_ios":"15"}}},{"description_html":"The <code>drawingBufferColorSpace</code> and <code>unpackColorSpace</code> properties of <code>WebGLRenderingContext</code> sets the color representation for the buffer and imported textures, such as <code>\"srgb\"</code> or <code>\"display-p3\"</code>.","id":"webgl-color-management","name":"Color management for WebGL","status":{"baseline":"low","baseline_low_date":"2024-10-29","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"132","firefox_android":"132","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The <code>WEBGL_compressed_texture_astc</code> extension for WebGL 1.0 and 2.0 contexts adds the Adaptive Scalable Texture Compression format to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-astc","name":"WEBGL_compressed_texture_astc WebGL extension","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"53","firefox_android":"53","safari":"12","safari_ios":"12"}}},{"description_html":"The <code>WEBGL_compressed_texture_etc</code> extension for WebGL 1.0 and 2.0 contexts adds many ETC2 and EAC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-etc","name":"WEBGL_compressed_texture_etc WebGL extension","status":{"baseline":false,"support":{"chrome":"63","chrome_android":"63","edge":"79","firefox_android":"51","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>WEBGL_compressed_texture_etc1</code> extension for WebGL 1.0 and 2.0 contexts adds the ETC1 compressed texture format to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-etc1","name":"WEBGL_compressed_texture_etc1 WebGL extension","status":{"baseline":false,"support":{"chrome":"49","chrome_android":"49","edge":"79","firefox_android":"30","safari":"13.1","safari_ios":"13.4"}}},{"description_html":"The <code>WEBGL_compressed_texture_pvrtc</code> extension for WebGL 1.0 and 2.0 contexts adds PVRTC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-pvrtc","name":"WEBGL_compressed_texture_pvrtc WebGL extension","status":{"baseline":false,"support":{"chrome":"128","chrome_android":"28","edge":"128","safari":"7","safari_ios":"7"}}},{"description_html":"The <code>WEBGL_compressed_texture_s3tc</code> extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-s3tc","name":"WEBGL_compressed_texture_s3tc WebGL extension","status":{"baseline":false,"support":{"chrome":"26","edge":"12","firefox":"22","safari":"8"}}},{"description_html":"The <code>WEBGL_compressed_texture_s3tc_srgb</code> extension for WebGL 1.0 and 2.0 contexts adds S3TC compressed texture formats for the sRGB colorspace to <code>compressedTexImage2D()</code> and <code>compressedTexSubImage2D()</code>.","id":"webgl-compressed-texture-s3tc-srgb","name":"WEBGL_compressed_texture_s3tc_srgb WebGL extension","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"80","firefox":"55","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>WEBGL_debug_renderer_info</code> extension for WebGL 1.0 and 2.0 contexts exposes information about the graphics driver for debugging purposes.","id":"webgl-debug-renderer-info","name":"WEBGL_debug_renderer_info WebGL extension","status":{"baseline":"high","baseline_high_date":"2019-10-19","baseline_low_date":"2017-04-19","support":{"chrome":"33","chrome_android":"33","edge":"12","firefox":"53","firefox_android":"53","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>WEBGL_debug_shaders</code> extension for WebGL 1.0 and 2.0 contexts adds the <code>getTranslatedShaderSource()</code> method to debug shaders from privileged contexts.","id":"webgl-debug-shaders","name":"WEBGL_debug_shaders WebGL extension","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"56","firefox_android":"56","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>WEBGL_depth_texture</code> extension for WebGL 1.0 contexts defines 2D depth and depth-stencil textures.","id":"webgl-depth-texture","name":"WEBGL_depth_texture WebGL extension","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"22","firefox_android":"22","safari":"8","safari_ios":"8"}}},{"description_html":"The optional <code>desynchronized</code> parameter of a canvas's <code>getContext()</code> method permits the browser to draw a WebGL canvas independently of the event loop. This can reduce drawing latency.","id":"webgl-desynchronized","name":"Desynchronized WebGL canvas","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"75","edge":"79"}}},{"description_html":"The <code>WEBGL_draw_buffers</code> extension for WebGL 1.0 contexts enables a fragment shader to write to several textures, which is useful for deferred shading, for example.","id":"webgl-draw-buffers","name":"WEBGL_draw_buffers WebGL extension","status":{"baseline":false,"support":{"chrome":"36","edge":"17","firefox":"28","safari":"9","safari_ios":"15"}}},{"description_html":"The <code>WEBGL_lose_context</code> extension for WebGL 1.0 and 2.0 contexts simulates losing and restoring a <code>WebGLRenderingContext</code> or <code>WebGL2RenderingContext</code>.","id":"webgl-lose-context","name":"WEBGL_lose_context WebGL extension","status":{"baseline":"high","baseline_high_date":"2020-10-30","baseline_low_date":"2018-04-30","support":{"chrome":"26","chrome_android":"26","edge":"17","firefox":"22","firefox_android":"22","safari":"8","safari_ios":"8"}}},{"description_html":"The <code>WEBGL_multi_draw</code> extension for WebGL 1.0 and 2.0 contexts renders more than one primitive with a single function call.","id":"webgl-multi-draw","name":"WEBGL_multi_draw WebGL extension","status":{"baseline":false,"support":{"chrome":"86","chrome_android":"86","edge":"86","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>OES_draw_buffers_indexed</code> extension for WebGL 2.0 contexts allows you to control blending on a per-color basis when writing to multiple color buffers simultaneously.","id":"webgl-oes-draw-buffers-indexed","name":"OES_draw_buffers_indexed WebGL extension","status":{"baseline":"low","baseline_low_date":"2022-12-13","support":{"chrome":"100","chrome_android":"100","edge":"100","firefox":"108","firefox_android":"108","safari":"16","safari_ios":"16"}}},{"description_html":"<code>SharedArrayBuffer</code> objects can be used in WebGL APIs that previously only worked with <code>ArrayBuffer</code> objects.","id":"webgl-sab","name":"SharedArrayBuffer in WebGL","status":{"baseline":false,"support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"79","firefox_android":"79"}}},{"description_html":"The <code>WebGL2RenderingContext</code> API is the <code>\"webgl2\"</code> rendering context for the <code><canvas></code> element. It represents a space for drawing two- and three-dimensional graphics and animations. It corresponds to OpenGL ES 3.0.","id":"webgl2","name":"WebGL2","status":{"baseline":"high","baseline_high_date":"2024-03-20","baseline_low_date":"2021-09-20","support":{"chrome":"56","chrome_android":"58","edge":"79","firefox":"51","firefox_android":"51","safari":"15","safari_ios":"15"}}},{"description_html":"The <code>drawingBufferColorSpace</code> and <code>unpackColorSpace</code> properties of <code>WebGL2RenderingContext</code> sets the color representation for the buffer and imported textures, such as <code>\"srgb\"</code> or <code>\"display-p3\"</code>.","id":"webgl2-color-management","name":"Color management for WebGL2","status":{"baseline":"low","baseline_low_date":"2024-10-29","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"132","firefox_android":"132","safari":"16.4","safari_ios":"16.4"}}},{"description_html":"The optional <code>desynchronized</code> parameter of a canvas's <code>getContext()</code> method permits the browser to draw a WebGL2 canvas independently of the event loop. This can reduce drawing latency.","id":"webgl2-desynchronized","name":"Desynchronized WebGL2 canvas","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"75","edge":"79"}}},{"description_html":"The <code>navigator.gpu</code> API performs operations such as rendering and computation on dedicated graphics hardware (also known as a Graphics Processing Unit).","id":"webgpu","name":"WebGPU","status":{"baseline":false,"support":{"chrome":"113","edge":"113"}}},{"description_html":"The WebHID API provides access to Human Interface Devices (HID) that are connected to the user's device.","id":"webhid","name":"WebHID","status":{"baseline":false,"support":{"chrome":"89","edge":"89"}}},{"description_html":"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.","id":"webnn","name":"WebNN","status":{"baseline":false,"support":{}}},{"description_html":"The WebP image format is a raster graphics file format that supports animation, alpha transparency, and lossy as well as lossless compression.","id":"webp","name":"WebP","status":{"baseline":"high","baseline_high_date":"2023-03-16","baseline_low_date":"2020-09-16","support":{"chrome":"9","chrome_android":"18","edge":"18","firefox":"65","firefox_android":"65","safari":"14","safari_ios":"14"}}},{"description_html":"The WebRTC API establishes real-time communication channels directly between browsers. It is commonly used in video conferencing applications.","id":"webrtc","name":"WebRTC","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"22","firefox_android":"24","safari":"11","safari_ios":"11"}}},{"description_html":"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.","id":"webrtc-encoded-transform","name":"WebRTC encoded transform","status":{"baseline":false,"support":{"firefox":"117","firefox_android":"117","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>sctp</code> object on <code>RTCPeerConnection</code> represents the negotiated SCTP transport. SCTP (Stream Control Transmission Protocol) is the protocol that <code>RTCDataChannel</code> uses.","id":"webrtc-sctp","name":"WebRTC SCTP information","status":{"baseline":"low","baseline_low_date":"2023-05-09","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"113","firefox_android":"113","safari":"15.4","safari_ios":"15.4"}}},{"description_html":"The <code>RTCPeerConnection.getStats()</code>, <code>RTCRtpSender.getStats()</code>, and <code>RTCRtpReceiver.getStats()</code> methods return detailed information about the status, performance, network, and media for a given WebRTC connection.","id":"webrtc-stats","name":"WebRTC statistics","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"44","firefox_android":"44","safari":"11","safari_ios":"11"}}},{"description_html":"The <code>WebSocket</code> API opens a two-way communication channel between the user's browser and a server.","id":"websockets","name":"WebSockets","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"11","firefox_android":"14","safari":"5","safari_ios":"4.2"}}},{"description_html":"The <code>WebTransport</code> API transmits data between a client and a server, by using the HTTP/3 protocol.","id":"webtransport","name":"WebTransport","status":{"baseline":false,"support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"114","firefox_android":"114"}}},{"description_html":"The WebUSB API exposes USB compatible devices to web pages.","id":"webusb","name":"WebUSB","status":{"baseline":false,"support":{"chrome":"61","chrome_android":"61","edge":"79"}}},{"description_html":"WebVTT is a captions and subtitles format. WebVTT files are loaded using the <code><track></code> element, and the <code>VTTCue</code> API can be used to create or update cues dynamically.","id":"webvtt","name":"WebVTT","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"23","chrome_android":"25","edge":"12","firefox":"31","firefox_android":"31","safari":"6","safari_ios":"8"}}},{"description_html":"The WebVTT cue alignment settings control which part of the cue is aligned with the given line and position. Cue alignment is set using <code>line</code> and <code>position</code> settings in WebVTT files or the <code>lineAlign</code> and <code>positionAlign</code> properties of <code>VTTCue</code> using JavaScript.","id":"webvtt-cue-alignment","name":"WebVTT cue alignment","status":{"baseline":false,"support":{"firefox":"31","firefox_android":"31","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"The <code>VTTCue</code> API updates various aspects of cues dynamically, such as alignment, size and position.","id":"webvtt-cue-settings","name":"WebVTT cue settings","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"23","chrome_android":"25","edge":"79","firefox":"31","firefox_android":"31","safari":"6","safari_ios":"8"}}},{"description_html":"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.","id":"webvtt-regions","name":"WebVTT regions","status":{"baseline":false,"support":{"firefox":"59","firefox_android":"59","safari":"14.1","safari_ios":"14.5"}}},{"description_html":"An <code>XRAnchor</code> 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.","id":"webxr-anchors","name":"Anchors (WebXR)","status":{"baseline":false,"support":{"chrome":"85","chrome_android":"85","edge":"85"}}},{"description_html":"The <code>\"immersive-ar\"</code> value for <code>navigator.xr.requestSession()</code> starts an augmented reality WebXR session that renders content aligned with the visible environment.","id":"webxr-ar","name":"Augmented reality","status":{"baseline":false,"support":{"chrome":"86","chrome_android":"86","edge":"86"}}},{"description_html":"The <code>XRView.camera</code> property provides direct access to pose-synchronized camera images within a WebXR session.","id":"webxr-camera","name":"Raw camera access for WebXR","status":{"baseline":false,"support":{"chrome":"107","chrome_android":"107","edge":"107"}}},{"description_html":"An <code>XRDepthInformation</code> object represents a measurement of the distance from the user's device to the real-world geometry in the user's environment.","id":"webxr-depth-sensing","name":"Depth sensing","status":{"baseline":false,"support":{"chrome":"90","chrome_android":"90","edge":"90"}}},{"description_html":"The <code>navigator.xr</code> API represents the browser's virtual reality or augmented reality system. You can use to request a WebXR session.","id":"webxr-device","name":"WebXR","status":{"baseline":false,"support":{"chrome":"79","chrome_android":"79","edge":"79"}}},{"description_html":"A DOM overlay shows 2D DOM content as an interactive, transparent layer on top of a WebXR application's WebGL content and camera image.","id":"webxr-dom-overlays","name":"DOM overlays for WebXR","status":{"baseline":false,"support":{"chrome":"83","chrome_android":"83","edge":"83"}}},{"description_html":"The <code>gamepad</code> attribute of an <code>XRInputSource</code> represents an XR input device, such as a motion controller, that reports data from physical inputs (such as buttons, touch pads, and triggers).","id":"webxr-gamepads","name":"Gamepad (WebXR)","status":{"baseline":false,"support":{"chrome":"79","chrome_android":"79","edge":"79"}}},{"description_html":"An <code>XRHand</code> object, from the <code>hand</code> attribute of an <code>XRInputSource</code> object, represents a WebXR session's fully-articulated hand tracking model.","id":"webxr-hand-input","name":"Hand input","status":{"baseline":false,"support":{"chrome":"131","chrome_android":"131"}}},{"description_html":"The <code>getHitTestResults()</code> method of an <code>XRFrame</code> object helps place objects in an augmented reality session by finding where cast rays intersect with real-world geometry.","id":"webxr-hit-test","name":"Hit test","status":{"baseline":false,"support":{"chrome":"81","chrome_android":"81","edge":"81"}}},{"description_html":"WebXR layer types, such as <code>XRCylinderLayer</code>, <code>XRCylinderLayer</code>, <code>XREquirectLayer</code>, <code>XRProjectionLayer</code> or <code>XRQuadLayer</code>, are managed by the system compositor, to reduce latency or resampling.","id":"webxr-layers","name":"Layers (WebXR)","status":{"baseline":false,"support":{}}},{"description_html":"The <code>XRLightProbe</code> and <code>XRLightEstimate</code> objects represent real-world environmental lighting conditions during a WebXR session.","id":"webxr-lighting-estimation","name":"Lighting estimation","status":{"baseline":false,"support":{"chrome":"90","chrome_android":"90","edge":"90"}}},{"description_html":"The <code>wheel</code> event fires when the user moves a mouse wheel or similar spatially rotating input device.","id":"wheel-events","name":"Wheel events","status":{"baseline":false,"support":{"chrome":"31","chrome_android":"31","edge":"12","firefox":"17","firefox_android":"17","safari":"7"}}},{"description_html":"The <code>:where()</code> 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.","id":"where","name":":where()","status":{"baseline":"high","baseline_high_date":"2023-07-21","baseline_low_date":"2021-01-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"82","firefox_android":"82","safari":"14","safari_ios":"14"}}},{"description_html":"The <code>white-space</code> CSS property sets how white space is collapsed and how lines wrap. It is a shorthand for <code>white-space-collapse</code> and <code>text-wrap-mode</code>.","id":"white-space","name":"white-space","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>white-space-collapse</code> CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.","id":"white-space-collapse","name":"white-space-collapse","status":{"baseline":"low","baseline_low_date":"2024-03-19","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"}}},{"description_html":"The <code>widows</code> and <code>orphans</code> CSS properties set the minimum lines included in a text fragment created by page, column, or region breaks.","id":"widows-orphans","name":"Widows and orphans","status":{"baseline":false,"support":{"chrome":"25","chrome_android":"25","edge":"12","safari":"1.3","safari_ios":"1"}}},{"description_html":"The <code>width</code> and <code>height</code> CSS properties set the preferred physical size of an element.","id":"width-height","name":"Width and height","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>will-change</code> 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.","id":"will-change","name":"will-change","status":{"baseline":"high","baseline_high_date":"2022-07-15","baseline_low_date":"2020-01-15","support":{"chrome":"36","chrome_android":"36","edge":"79","firefox":"36","firefox_android":"36","safari":"9.1","safari_ios":"9.3"}}},{"description_html":"The <code>window</code> global object represents a browser tab or iframe and its relationship to the document and other tabs. It's also a generic global object, under which many other APIs are located.","id":"window","name":"Window","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>display_override:\\ [\"window-controls-overlay\"]</code> web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.","id":"window-controls-overlay","name":"Window Controls Overlay","status":{"baseline":false,"support":{"chrome":"105","edge":"105"}}},{"description_html":"The <code>window.getScreenDetails()</code> method gets information about the screens on a device, which you can use to place new windows on a specific screen with <code>window.open()</code>.","id":"window-management","name":"Window management","status":{"baseline":false,"support":{"chrome":"111","edge":"111"}}},{"description_html":"The <code>with</code> JavaScript statement adds a given object to the chain of scopes used to evaluate names.","id":"with","name":"with","status":{"baseline":false,"support":{"chrome":"38","chrome_android":"38","edge":"12","firefox":"48","firefox_android":"48","safari":"10","safari_ios":"10"}}},{"description_html":"The <code>word-break</code> CSS property sets how lines break within words.","id":"word-break","name":"word-break","status":{"baseline":"high","baseline_high_date":"2018-03-30","baseline_low_date":"2015-09-30","support":{"chrome":"44","chrome_android":"44","edge":"12","firefox":"15","firefox_android":"15","safari":"9","safari_ios":"9"}}},{"description_html":"The <code>word-break: auto-phrase</code> CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.","id":"word-break-auto-phrase","name":"word-break: auto-phrase","status":{"baseline":false,"support":{"chrome":"119","chrome_android":"119","edge":"119"}}},{"description_html":"The <code>word-spacing</code> CSS property sets the amount of white space between words.","id":"word-spacing","name":"word-spacing","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>writing-mode</code> CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.","id":"writing-mode","name":"writing-mode","status":{"baseline":"high","baseline_high_date":"2019-09-27","baseline_low_date":"2017-03-27","support":{"chrome":"48","chrome_android":"48","edge":"12","firefox":"41","firefox_android":"41","safari":"10.1","safari_ios":"10.3"}}},{"description_html":"The <code>writingsuggestions</code> 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.","id":"writingsuggestions","name":"writingsuggestions","status":{"baseline":false,"support":{"chrome":"124","chrome_android":"124","edge":"124","safari":"18","safari_ios":"18"}}},{"description_html":"The <code>XMLHttpRequest</code> API makes HTTP requests. It's the predecessor to <code>fetch()</code>. Also known as XHR.","id":"xhr","name":"XMLHttpRequest","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>XMLSerializer</code> API provides the <code>serializeToString()</code> method to construct an XML string representing a DOM tree.","id":"xml-serializer","name":"XMLSerializer","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>document.evaluate()</code> method selects elements in an HTML or XML document based on an expression of XPath, a domain specific language for querying XML documents. Also known as XML Path Language.","id":"xpath","name":"XPath","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"}}},{"description_html":"The <code>XSLTProcessor</code> API transforms XML documents into new XML or HTML documents, using XSLT stylesheets. You can use XSLT to convert data between different XML schemas or to convert XML data into web pages or PDF documents. Also known as Extensible Stylesheet Language Transformations.","id":"xslt","name":"XSLT","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"}}},{"description_html":"The <code>z-index</code> CSS property orders overlapping elements, with higher values appearing in front of or on top of lower values.","id":"z-index","name":"z-index","status":{"baseline":"high","baseline_high_date":"2018-01-29","baseline_low_date":"2015-07-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"1","safari_ios":"1"}}},{"description_html":"The <code>zoom</code> CSS property scales the size of an element. Unlike the <code>transform</code> property, a zoomed element affects page layout.","id":"zoom","name":"zoom","status":{"baseline":"low","baseline_low_date":"2024-05-14","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"126","firefox_android":"126","safari":"3.1","safari_ios":"3"}}},{"description_html":"Zstandard or <code>zstd</code> is fast lossless compression algorithm. When used as a content encoding, it is often faster and offers better compression than brotli.","id":"zstd","name":"Zstandard compression","status":{"baseline":false,"support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"126","firefox_android":"126"}}}];
const browserPicker = document.getElementById('browser');
const featuresList = document.getElementById('features');
diff --git a/groups/index.html b/groups/index.html
index 3ee9771fda..80862f1b79 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -630,6 +630,8 @@ <h1>Groups</h1>
+
+
@@ -2626,6 +2628,8 @@ <h1>Groups</h1>
+
+
@@ -4876,6 +4880,8 @@ <h1>Groups</h1>
+
+
@@ -7032,6 +7038,8 @@ <h1>Groups</h1>
+
+
@@ -9256,6 +9264,8 @@ <h1>Groups</h1>
+
+
@@ -11474,6 +11484,8 @@ <h1>Groups</h1>
+
+
@@ -13515,6 +13527,8 @@ <h1>Groups</h1>
+
+
@@ -16337,6 +16351,8 @@ <h1>Groups</h1>
+
+
@@ -17807,6 +17823,8 @@ <h1>Groups</h1>
+
+
@@ -20067,6 +20085,8 @@ <h1>Groups</h1>
+
+
@@ -22297,6 +22317,8 @@ <h1>Groups</h1>
+
+
@@ -24433,6 +24455,8 @@ <h1>Groups</h1>
+
+
@@ -26643,6 +26667,8 @@ <h1>Groups</h1>
+
+
@@ -28825,6 +28851,8 @@ <h1>Groups</h1>
+
+
@@ -31953,6 +31981,8 @@ <h1>Groups</h1>
+
+
@@ -33551,6 +33581,8 @@ <h1>Groups</h1>
+
+
@@ -35576,6 +35608,8 @@ <h1>Groups</h1>
+
+
@@ -37784,6 +37818,8 @@ <h1>Groups</h1>
+
+
@@ -39557,6 +39593,8 @@ <h1>Groups</h1>
+
+
@@ -41789,6 +41827,8 @@ <h1>Groups</h1>
+
+
@@ -44278,6 +44318,8 @@ <h1>Groups</h1>
+
+
@@ -46556,6 +46598,8 @@ <h1>Groups</h1>
+
+
@@ -48346,6 +48390,8 @@ <h1>Groups</h1>
+
+
@@ -50786,6 +50832,8 @@ <h1>Groups</h1>
+
+
@@ -52469,6 +52517,8 @@ <h1>Groups</h1>
+
+
@@ -54925,6 +54975,8 @@ <h1>Groups</h1>
+
+
@@ -56919,6 +56971,8 @@ <h1>Groups</h1>
+
+
@@ -59129,6 +59183,8 @@ <h1>Groups</h1>
+
+
@@ -62104,6 +62160,8 @@ <h1>Groups</h1>
+
+
@@ -63569,6 +63627,8 @@ <h1>Groups</h1>
+
+
@@ -66413,6 +66473,8 @@ <h1>Groups</h1>
+
+
@@ -68169,6 +68231,8 @@ <h1>Groups</h1>
+
+
@@ -70175,6 +70239,8 @@ <h1>Groups</h1>
+
+
@@ -73709,6 +73775,8 @@ <h1>Groups</h1>
+
+
@@ -74392,6 +74460,8 @@ <h1>Groups</h1>
+
+
@@ -77190,6 +77260,8 @@ <h1>Groups</h1>
+
+
@@ -79456,6 +79528,8 @@ <h1>Groups</h1>
+
+
@@ -81395,6 +81469,8 @@ <h1>Groups</h1>
+
+
@@ -83371,6 +83447,8 @@ <h1>Groups</h1>
+
+
@@ -85631,6 +85709,8 @@ <h1>Groups</h1>
+
+
@@ -88229,6 +88309,8 @@ <h1>Groups</h1>
+
+
@@ -90262,6 +90344,8 @@ <h1>Groups</h1>
+
+
@@ -92713,6 +92797,8 @@ <h1>Groups</h1>
+
+
@@ -94800,6 +94886,8 @@ <h1>Groups</h1>
+
+
@@ -98154,6 +98242,8 @@ <h1>Groups</h1>
+
+
@@ -99878,6 +99968,8 @@ <h1>Groups</h1>
+
+
@@ -102502,6 +102594,8 @@ <h1>Groups</h1>
+
+
@@ -103874,6 +103968,8 @@ <h1>Groups</h1>
+
+
@@ -107075,6 +107171,8 @@ <h1>Groups</h1>
+
+
@@ -108347,6 +108445,8 @@ <h1>Groups</h1>
+
+
@@ -110557,6 +110657,8 @@ <h1>Groups</h1>
+
+
@@ -112731,6 +112833,8 @@ <h1>Groups</h1>
+
+
@@ -115654,6 +115758,8 @@ <h1>Groups</h1>
+
+
@@ -116621,6 +116727,8 @@ <h1>Groups</h1>
+
+
@@ -119619,6 +119727,8 @@ <h1>Groups</h1>
+
+
@@ -120614,6 +120724,8 @@ <h1>Groups</h1>
+
+
@@ -123552,6 +123664,8 @@ <h1>Groups</h1>
+
+
@@ -125046,6 +125160,8 @@ <h1>Groups</h1>
+
+
@@ -127484,6 +127600,8 @@ <h1>Groups</h1>
+
+
@@ -130340,6 +130458,8 @@ <h1>Groups</h1>
+
+
@@ -131484,6 +131604,8 @@ <h1>Groups</h1>
+
+
@@ -134670,6 +134792,8 @@ <h1>Groups</h1>
+
+
@@ -136670,6 +136794,8 @@ <h1>Groups</h1>
+
+
@@ -138308,6 +138434,8 @@ <h1>Groups</h1>
+
+
@@ -141144,6 +141272,8 @@ <h1>Groups</h1>
+
+
@@ -142560,6 +142690,8 @@ <h1>Groups</h1>
+
+
@@ -144686,6 +144818,8 @@ <h1>Groups</h1>
+
+
@@ -146982,6 +147116,8 @@ <h1>Groups</h1>
+
+
@@ -150174,6 +150310,8 @@ <h1>Groups</h1>
+
+
@@ -151828,6 +151966,8 @@ <h1>Groups</h1>
+
+
@@ -154538,6 +154678,8 @@ <h1>Groups</h1>
+
+
@@ -155540,6 +155682,8 @@ <h1>Groups</h1>
+
+
@@ -158738,6 +158882,8 @@ <h1>Groups</h1>
+
+
@@ -159894,6 +160040,8 @@ <h1>Groups</h1>
+
+
@@ -162782,6 +162930,8 @@ <h1>Groups</h1>
+
+
@@ -164130,6 +164280,8 @@ <h1>Groups</h1>
+
+
@@ -167736,6 +167888,8 @@ <h1>Groups</h1>
+
+
@@ -169950,6 +170104,8 @@ <h1>Groups</h1>
+
+
@@ -171069,6 +171225,8 @@ <h1>Groups</h1>
+
+
@@ -174478,6 +174636,8 @@ <h1>Groups</h1>
+
+
@@ -176688,6 +176848,8 @@ <h1>Groups</h1>
+
+
@@ -178868,6 +179030,8 @@ <h1>Groups</h1>
+
+
@@ -181112,6 +181276,8 @@ <h1>Groups</h1>
+
+
@@ -181354,6 +181520,10 @@ <h2>Ungrouped features</h2>
+ <li><a href="/web-features-explorer/features/barcode/">Barcode detector</a></li>
+
+
+
<li><a href="/web-features-explorer/features/barprop/">BarProp</a></li>
diff --git a/ids/index.html b/ids/index.html
index 76857d77e6..8af5d9dbf9 100644
--- a/ids/index.html
+++ b/ids/index.html
@@ -2525,6 +2525,25 @@ <h1>Feature IDs and BCD keys</h1>
</td>
</tr>
+ <tr class="baseline-false">
+ <td>barcode</td>
+ <td>Barcode detector</td>
+ <td>The BarcodeDetector API recognizes various barcode formats in images.</td>
+ <td>
+ <ul>
+
+ <li>api.BarcodeDetector</li>
+
+ <li>api.BarcodeDetector.BarcodeDetector</li>
+
+ <li>api.BarcodeDetector.detect</li>
+
+ <li>api.BarcodeDetector.getSupportedFormats_static</li>
+
+ </ul>
+ </td>
+ </tr>
+
<tr class="baseline-false">
<td>barprop</td>
<td>BarProp</td>
diff --git a/limited-availability/index.html b/limited-availability/index.html
index a2ce4f9392..d96cd7636d 100644
--- a/limited-availability/index.html
+++ b/limited-availability/index.html
@@ -25194,6 +25194,117 @@ <h2><a href="/web-features-explorer/features/webxr-dom-overlays/">DOM overlays f
+ </li>
+
+</ul>
+</div>
+ </li>
+
+ <li>
+ <div id="barcode" class="feature short baseline-false">
+ <div class="header">
+ <h2><a href="/web-features-explorer/features/barcode/">Barcode detector</a></h2>
+ <div class="availability">
+
+ Limited availability
+
+
+
+</div>
+ </div>
+ <div class="tags">
+
+ Tags:
+
+ <span class="tag">api</span>
+
+
+
+</div>
+
+ <p>The <code>BarcodeDetector</code> API recognizes various barcode formats in images.</p>
+
+ <p><strong><a href="/web-features-explorer/features/barcode/">Learn more</a></strong></p>
+
+ <ul class="compat">
+
+ <li class="browser browser-chrome">
+ <span class="name">Chrome</span>
+
+
+ <span class="version">❌</span>
+
+
+ </li>
+
+ <li class="browser browser-chrome_android supported">
+ <span class="name">Chrome Android</span>
+
+
+ <span class="version">83</span>
+ <span class="date">Released on 2020-05-19</span>
+
+ </li>
+
+ <li class="browser browser-edge">
+ <span class="name">Edge</span>
+
+
+ <span class="version">❌</span>
+
+
+ </li>
+
+ <li class="browser browser-firefox">
+ <span class="name">Firefox</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-firefox_android">
+ <span class="name">Firefox for Android</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari">
+ <span class="name">Safari</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
+ </li>
+
+ <li class="browser browser-safari_ios">
+ <span class="name">Safari on iOS</span>
+
+
+ <span class="version">❌</span>
+
+
+
+
+
+
</li>
</ul>
diff --git a/pagefind/fragment/en_2e4e51b.pf_fragment b/pagefind/fragment/en_2e4e51b.pf_fragment
new file mode 100644
index 0000000000..6188063b4b
Binary files /dev/null and b/pagefind/fragment/en_2e4e51b.pf_fragment differ
diff --git a/pagefind/fragment/en_7353c2b.pf_fragment b/pagefind/fragment/en_7353c2b.pf_fragment
new file mode 100644
index 0000000000..d62b62dcb5
Binary files /dev/null and b/pagefind/fragment/en_7353c2b.pf_fragment differ
diff --git a/pagefind/fragment/en_95b4c35.pf_fragment b/pagefind/fragment/en_95b4c35.pf_fragment
new file mode 100644
index 0000000000..f743fac46b
Binary files /dev/null and b/pagefind/fragment/en_95b4c35.pf_fragment differ
diff --git a/pagefind/fragment/en_ec55525.pf_fragment b/pagefind/fragment/en_ec55525.pf_fragment
deleted file mode 100644
index 12dbe7d6f3..0000000000
Binary files a/pagefind/fragment/en_ec55525.pf_fragment and /dev/null differ
diff --git a/pagefind/fragment/en_ff873d2.pf_fragment b/pagefind/fragment/en_ff873d2.pf_fragment
deleted file mode 100644
index aa54ed64ba..0000000000
Binary files a/pagefind/fragment/en_ff873d2.pf_fragment and /dev/null differ
diff --git a/pagefind/index/en_53b5397.pf_index b/pagefind/index/en_53b5397.pf_index
new file mode 100644
index 0000000000..9e9bb8ae5a
Binary files /dev/null and b/pagefind/index/en_53b5397.pf_index differ
diff --git a/pagefind/index/en_5b6a1fd.pf_index b/pagefind/index/en_5b6a1fd.pf_index
deleted file mode 100644
index c64513911f..0000000000
Binary files a/pagefind/index/en_5b6a1fd.pf_index and /dev/null differ
diff --git a/pagefind/index/en_5c2b512.pf_index b/pagefind/index/en_5c2b512.pf_index
deleted file mode 100644
index 61f329d274..0000000000
Binary files a/pagefind/index/en_5c2b512.pf_index and /dev/null differ
diff --git a/pagefind/index/en_5f44fd4.pf_index b/pagefind/index/en_5f44fd4.pf_index
deleted file mode 100644
index 84cfd96a55..0000000000
Binary files a/pagefind/index/en_5f44fd4.pf_index and /dev/null differ
diff --git a/pagefind/index/en_794b5c7.pf_index b/pagefind/index/en_794b5c7.pf_index
deleted file mode 100644
index 5183884ce5..0000000000
Binary files a/pagefind/index/en_794b5c7.pf_index and /dev/null differ
diff --git a/pagefind/index/en_8aaf50d.pf_index b/pagefind/index/en_8aaf50d.pf_index
new file mode 100644
index 0000000000..2127e8e159
Binary files /dev/null and b/pagefind/index/en_8aaf50d.pf_index differ
diff --git a/pagefind/index/en_8fc3f93.pf_index b/pagefind/index/en_8fc3f93.pf_index
new file mode 100644
index 0000000000..e90e9ef7ed
Binary files /dev/null and b/pagefind/index/en_8fc3f93.pf_index differ
diff --git a/pagefind/index/en_9168296.pf_index b/pagefind/index/en_9168296.pf_index
new file mode 100644
index 0000000000..10c481fdf6
Binary files /dev/null and b/pagefind/index/en_9168296.pf_index differ
diff --git a/pagefind/index/en_b59b13e.pf_index b/pagefind/index/en_b59b13e.pf_index
deleted file mode 100644
index c4cf8f1d60..0000000000
Binary files a/pagefind/index/en_b59b13e.pf_index and /dev/null differ
diff --git a/pagefind/index/en_cc107a4.pf_index b/pagefind/index/en_cc107a4.pf_index
new file mode 100644
index 0000000000..201613ec37
Binary files /dev/null and b/pagefind/index/en_cc107a4.pf_index differ
diff --git a/pagefind/index/en_f447d02.pf_index b/pagefind/index/en_f447d02.pf_index
deleted file mode 100644
index 72d6b9ac15..0000000000
Binary files a/pagefind/index/en_f447d02.pf_index and /dev/null differ
diff --git a/pagefind/index/en_f8fa948.pf_index b/pagefind/index/en_f8fa948.pf_index
new file mode 100644
index 0000000000..c972b57a8e
Binary files /dev/null and b/pagefind/index/en_f8fa948.pf_index differ
diff --git a/pagefind/pagefind-entry.json b/pagefind/pagefind-entry.json
index a61ea2357d..5b78b15a17 100644
--- a/pagefind/pagefind-entry.json
+++ b/pagefind/pagefind-entry.json
@@ -1 +1 @@
-{"version":"1.3.0","languages":{"en":{"hash":"en_47783dd5e2","wasm":"en","page_count":980}}}
\ No newline at end of file
+{"version":"1.3.0","languages":{"en":{"hash":"en_6c5e7acf34","wasm":"en","page_count":981}}}
\ No newline at end of file
diff --git a/pagefind/pagefind.en_47783dd5e2.pf_meta b/pagefind/pagefind.en_47783dd5e2.pf_meta
deleted file mode 100644
index 91067c48f5..0000000000
Binary files a/pagefind/pagefind.en_47783dd5e2.pf_meta and /dev/null differ
diff --git a/pagefind/pagefind.en_6c5e7acf34.pf_meta b/pagefind/pagefind.en_6c5e7acf34.pf_meta
new file mode 100644
index 0000000000..7c055c019d
Binary files /dev/null and b/pagefind/pagefind.en_6c5e7acf34.pf_meta differ
diff --git a/release-notes.xml b/release-notes.xml
index 3058627ecf..6c55a46b65 100644
--- a/release-notes.xml
+++ b/release-notes.xml
@@ -4,7 +4,7 @@
<subtitle>Monthly updates on the web platform features.</subtitle>
<link href="https://web-platform-dx.github.io/web-features-explorer/release-notes.xml" rel="self"/>
<link href="https://web-platform-dx.github.io/web-features-explorer/"/>
- <updated>2025-01-09T11:09:13Z</updated>
+ <updated>2025-01-10T00:46:33Z</updated>
<id>https://web-platform-dx.github.io/web-features-explorer/</id>
<author>
<name>WebDX Community Group</name>
@@ -12527,6 +12527,11 @@
<p>The following features are now available in Chrome Android:</p>
<ul>
+ <li>
+ <strong><a href="https://web-platform-dx.github.io/web-features-explorer/features/barcode">Barcode detector</a></strong>:
+ The <code>BarcodeDetector</code> API recognizes various barcode formats in images.
+ </li>
+
<li>
<strong><a href="https://web-platform-dx.github.io/web-features-explorer/features/contain-intrinsic-size">contain-intrinsic-size</a></strong>:
The <code>contain-intrinsic-size</code> 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.
diff --git a/release-notes/index.html b/release-notes/index.html
index 06a0770666..51a288fab3 100644
--- a/release-notes/index.html
+++ b/release-notes/index.html
@@ -3498,6 +3498,10 @@ <h2><a href="may-2020">May 2020</a></h2>
+ <li>Barcode detector</li>
+
+
+
<li>contain-intrinsic-size</li>
diff --git a/release-notes/may-2020/index.html b/release-notes/may-2020/index.html
index a1645f8739..bf14c0085b 100644
--- a/release-notes/may-2020/index.html
+++ b/release-notes/may-2020/index.html
@@ -92,6 +92,11 @@ <h2>New in Chrome Android</h2>
<p>The following features are now available in Chrome Android:</p>
<ul>
+ <li>
+ <strong><a href="/web-features-explorer/features/barcode/">Barcode detector</a></strong>:
+ The <code>BarcodeDetector</code> API recognizes various barcode formats in images.
+ </li>
+
<li>
<strong><a href="/web-features-explorer/features/contain-intrinsic-size/">contain-intrinsic-size</a></strong>:
The <code>contain-intrinsic-size</code> 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.
diff --git a/timeline/index.html b/timeline/index.html
index 3cd44a81ce..71dc670ec6 100644
--- a/timeline/index.html
+++ b/timeline/index.html
@@ -578,6 +578,8 @@
+
+
{
feature: "base",
name: "<base>",