- Scan ID:
- 19c3d304-0df3-495d-93f6-0c8786c58375Finished
- Submitted URL:
- https://polyfill-fastly.net
- Report Finished:
Links · 3 found
The outgoing links identified from the page
| Link | Text |
|---|---|
| https://www.fastly.com/terms/ | Terms& Conditions |
| https://www.fastly.com/privacy/ | Privacy Policy |
| https://github.com/fastly/polyfill-service/ | GitHub repository |
JavaScript Variables · 7 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| featureNodes | function |
| resetFeaturesList | function |
| filterFeatures | function |
| updateCallback | function |
Console log messages · 0 found
Messages logged to the web console
HTML
The raw HTML body of the page
<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="Fastly Polyfill is a service which accepts a request for a set of browser features and returns only the polyfills that are needed by the requesting browser."><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Fastly Polyfill</title><link rel="icon" href="/img/fastly-favicon.svg"><style>@charset "UTF-8";
@layer pico {
/*!
* Pico CSS v1.5.10 (https://picocss.com)
* Copyright 2019-2023 - Licensed under MIT
*/
:root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
--typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--nav-element-spacing-vertical: 1rem;
--nav-element-spacing-horizontal: 0.5rem;
--nav-link-spacing-vertical: 0.5rem;
--nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
--font-size: 17px;
}
}
@media (min-width: 768px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 992px) {
:root {
--font-size: 19px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
}
}
@media (min-width: 576px) {
body > footer,
body > header,
body > main,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > footer,
body > header,
body > main,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > footer,
body > header,
body > main,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > footer,
body > header,
body > main,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@media (min-width: 576px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@media (min-width: 768px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 992px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@media (min-width: 1200px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
}
@media (min-width: 576px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@media (min-width: 768px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
a {
--text-decoration: none;
}
a.contrast,
a.secondary {
--text-decoration: underline;
}
small {
--font-size: 0.875em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
--font-weight: 700;
}
h1 {
--font-size: 2rem;
--typography-spacing-vertical: 3rem;
}
h2 {
--font-size: 1.75rem;
--typography-spacing-vertical: 2.625rem;
}
h3 {
--font-size: 1.5rem;
--typography-spacing-vertical: 2.25rem;
}
h4 {
--font-size: 1.25rem;
--typography-spacing-vertical: 1.874rem;
}
h5 {
--font-size: 1.125rem;
--typography-spacing-vertical: 1.6875rem;
}
[type="checkbox"],
[type="radio"] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
--border-width: 3px;
}
tfoot td,
tfoot th,
thead td,
thead th {
--border-width: 3px;
}
:not(thead, tfoot) > * > td {
--font-size: 0.875em;
}
code,
kbd,
pre,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
kbd {
--font-weight: bolder;
}
:root:not([data-theme="dark"]),
[data-theme="light"] {
--background-color: #fff;
--color: hsl(205, 20%, 32%);
--h1-color: hsl(205, 30%, 15%);
--h2-color: #24333e;
--h3-color: hsl(205, 25%, 23%);
--h4-color: #374956;
--h5-color: hsl(205, 20%, 32%);
--h6-color: #4d606d;
--muted-color: hsl(205, 10%, 50%);
--muted-border-color: hsl(205, 20%, 94%);
--primary: hsl(195, 85%, 41%);
--primary-hover: hsl(195, 90%, 32%);
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #fff;
--secondary: hsl(205, 15%, 41%);
--secondary-hover: hsl(205, 20%, 32%);
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #fff;
--contrast: hsl(205, 30%, 15%);
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #fff;
--mark-background-color: #fff2ca;
--mark-color: #543a26;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: transparent;
--form-element-border-color: hsl(205, 14%, 68%);
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: transparent;
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: hsl(205, 18%, 86%);
--form-element-disabled-border-color: hsl(205, 14%, 68%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #d32f2f;
--form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #43a047;
--form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
--switch-background-color: hsl(205, 16%, 77%);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: hsl(205, 18%, 86%);
--range-active-border-color: hsl(205, 16%, 77%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: hsl(205, 20%, 94%);
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: hsl(330, 40%, 50%);
--code-property-color: hsl(185, 40%, 40%);
--code-value-color: hsl(40, 20%, 50%);
--code-comment-color: hsl(205, 14%, 68%);
--accordion-border-color: var(--muted-border-color);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--progress-background-color: hsl(205, 18%, 86%);
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: light;
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--background-color: #11191f;
--color: hsl(205, 16%, 77%);
--h1-color: hsl(205, 20%, 94%);
--h2-color: #e1e6eb;
--h3-color: hsl(205, 18%, 86%);
--h4-color: #c8d1d8;
--h5-color: hsl(205, 16%, 77%);
--h6-color: #afbbc4;
--muted-color: hsl(205, 10%, 50%);
--muted-border-color: #1f2d38;
--primary: hsl(195, 85%, 41%);
--primary-hover: hsl(195, 80%, 50%);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #fff;
--secondary: hsl(205, 15%, 41%);
--secondary-hover: hsl(205, 10%, 50%);
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #fff;
--contrast: hsl(205, 20%, 94%);
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f;
--form-element-border-color: #374956;
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(
--form-element-background-color
);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: hsl(205, 25%, 23%);
--form-element-disabled-border-color: hsl(205, 20%, 32%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #24333e;
--range-active-border-color: hsl(205, 25%, 23%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: hsl(330, 30%, 50%);
--code-property-color: hsl(185, 30%, 50%);
--code-value-color: hsl(40, 10%, 50%);
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: var(--card-background-color);
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205, 30%, 15%);
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: dark;
}
}
[data-theme="dark"] {
--background-color: #11191f;
--color: hsl(205, 16%, 77%);
--h1-color: hsl(205, 20%, 94%);
--h2-color: #e1e6eb;
--h3-color: hsl(205, 18%, 86%);
--h4-color: #c8d1d8;
--h5-color: hsl(205, 16%, 77%);
--h6-color: #afbbc4;
--muted-color: hsl(205, 10%, 50%);
--muted-border-color: #1f2d38;
--primary: hsl(195, 85%, 41%);
--primary-hover: hsl(195, 80%, 50%);
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #fff;
--secondary: hsl(205, 15%, 41%);
--secondary-hover: hsl(205, 10%, 50%);
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #fff;
--contrast: hsl(205, 20%, 94%);
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--form-element-background-color: #11191f;
--form-element-border-color: #374956;
--form-element-color: var(--color);
--form-element-placeholder-color: var(--muted-color);
--form-element-active-background-color: var(
--form-element-background-color
);
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: hsl(205, 25%, 23%);
--form-element-disabled-border-color: hsl(205, 20%, 32%);
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #24333e;
--range-active-border-color: hsl(205, 25%, 23%);
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: hsl(330, 30%, 50%);
--code-property-color: hsl(185, 30%, 50%);
--code-value-color: hsl(40, 10%, 50%);
--code-comment-color: #4d606d;
--accordion-border-color: var(--muted-border-color);
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: var(--card-background-color);
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: hsl(205, 30%, 15%);
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
color-scheme: dark;
}
[type="checkbox"],
[type="radio"],
[type="range"],
progress {
accent-color: var(--primary);
}
*,
::after,
::before {
box-sizing: border-box;
background-repeat: no-repeat;
}
::after,
::before {
text-decoration: inherit;
vertical-align: inherit;
}
:where(:root) {
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
background-color: var(--background-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
line-height: var(--line-height);
font-family: var(--font-family);
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
cursor: default;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
main {
display: block;
}
body {
width: 100%;
margin: 0;
}
body > footer,
body > header,
body > main {
width: 100%;
margin-right: auto;
margin-left: auto;
padding: var(--block-spacing-vertical) 0;
}
.container,
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--spacing);
padding-left: var(--spacing);
}
@media (min-width: 576px) {
.container {
max-width: 510px;
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 768px) {
.container {
max-width: 700px;
}
}
@media (min-width: 992px) {
.container {
max-width: 920px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1130px;
}
}
section {
margin-bottom: var(--block-spacing-vertical);
}
.grid {
grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical);
display: grid;
grid-template-columns: 1fr;
margin: 0;
}
@media (min-width: 992px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
.grid > * {
min-width: 0;
}
figure {
display: block;
margin: 0;
padding: 0;
overflow-x: auto;
}
figure figcaption {
padding: calc(var(--spacing) * 0.5) 0;
color: var(--muted-color);
}
b,
strong {
font-weight: bolder;
}
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-style: normal;
font-weight: var(--font-weight);
font-size: var(--font-size);
}
[role="link"],
a {
--color: var(--primary);
--background-color: transparent;
outline: 0;
background-color: var(--background-color);
color: var(--color);
-webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration);
transition: background-color var(--transition), color var(--transition),
box-shadow var(--transition), -webkit-text-decoration var(--transition);
transition: background-color var(--transition), color var(--transition),
text-decoration var(--transition), box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition),
text-decoration var(--transition), box-shadow var(--transition),
-webkit-text-decoration var(--transition);
}
[role="link"]:is([aria-current], :hover, :active, :focus),
a:is([aria-current], :hover, :active, :focus) {
--color: var(--primary-hover);
--text-decoration: underline;
}
[role="link"]:focus,
a:focus {
--background-color: var(--primary-focus);
}
[role="link"].secondary,
a.secondary {
--color: var(--secondary);
}
[role="link"].secondary:is([aria-current], :hover, :active, :focus),
a.secondary:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
[role="link"].secondary:focus,
a.secondary:focus {
--background-color: var(--secondary-focus);
}
[role="link"].contrast,
a.contrast {
--color: var(--contrast);
}
[role="link"].contrast:is([aria-current], :hover, :active, :focus),
a.contrast:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
[role="link"].contrast:focus,
a.contrast:focus {
--background-color: var(--contrast-focus);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
font-family: var(--font-family);
}
h1 {
--color: var(--h1-color);
}
h2 {
--color: var(--h2-color);
}
h3 {
--color: var(--h3-color);
}
h4 {
--color: var(--h4-color);
}
h5 {
--color: var(--h5-color);
}
h6 {
--color: var(--h6-color);
}
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul)
~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--typography-spacing-vertical);
}
.headings,
hgroup {
margin-bottom: var(--typography-spacing-vertical);
}
.headings > *,
hgroup > * {
margin-bottom: 0;
}
.headings > :last-child,
hgroup > :last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
}
p {
margin-bottom: var(--typography-spacing-vertical);
}
small {
font-size: var(--font-size);
}
:where(dl, ol, ul) {
padding-right: 0;
padding-left: var(--spacing);
-webkit-padding-start: var(--spacing);
padding-inline-start: var(--spacing);
-webkit-padding-end: 0;
padding-inline-end: 0;
}
:where(dl, ol, ul) li {
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}
:where(dl, ol, ul) :is(dl, ol, ul) {
margin: 0;
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}
ul li {
list-style: square;
}
mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: baseline;
}
blockquote {
display: block;
margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing);
border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color);
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color);
-webkit-border-end: none;
border-inline-end: none;
}
blockquote footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
color: var(--blockquote-footer-color);
}
abbr[title] {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
ins {
color: var(--ins-color);
text-decoration: none;
}
del {
color: var(--del-color);
}
::-moz-selection {
background-color: var(--primary-focus);
}
::selection {
background-color: var(--primary-focus);
}
:where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
audio,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
:where(iframe) {
border-style: none;
}
img {
max-width: 100%;
height: auto;
border-style: none;
}
:where(svg:not([fill])) {
fill: currentColor;
}
svg:not(:root) {
overflow: hidden;
}
button {
margin: 0;
overflow: visible;
font-family: inherit;
text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
}
button {
display: block;
width: 100%;
margin-bottom: var(--spacing);
}
[role="button"] {
display: inline-block;
text-decoration: none;
}
[role="button"],
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: 0;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
[role="button"]:is([aria-current], :hover, :active, :focus),
button:is([aria-current], :hover, :active, :focus),
input[type="button"]:is([aria-current], :hover, :active, :focus),
input[type="reset"]:is([aria-current], :hover, :active, :focus),
input[type="submit"]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
[role="button"]:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="reset"] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary:is([aria-current], :hover, :active, :focus),
input[type="reset"]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary:focus,
input[type="reset"]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
input[type="reset"].outline {
--background-color: transparent;
--color: var(--primary);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline:is([aria-current], :hover, :active, :focus),
input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
--background-color: transparent;
--color: var(--primary-hover);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="reset"].outline {
--color: var(--secondary);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus),
input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
--color: var(--contrast);
}
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
:where(fieldset[disabled])
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
a[role="button"]:not([href]) {
opacity: 0.5;
pointer-events: none;
}
input,
optgroup,
select,
textarea {
margin: 0;
font-size: 1rem;
line-height: var(--line-height);
font-family: inherit;
letter-spacing: inherit;
}
input {
overflow: visible;
}
select {
text-transform: none;
}
legend {
max-width: 100%;
padding: 0;
color: inherit;
white-space: normal;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
padding: 0;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
::-moz-focus-inner {
padding: 0;
border-style: none;
}
:-moz-focusring {
outline: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
::-ms-expand {
display: none;
}
[type="file"],
[type="range"] {
padding: 0;
border-width: 0;
}
input:not([type="checkbox"], [type="radio"], [type="range"]) {
height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2
);
}
fieldset {
margin: 0;
margin-bottom: var(--spacing);
padding: 0;
border: 0;
}
fieldset legend,
label {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: var(--form-label-font-weight, var(--font-weight));
}
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
width: 100%;
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
}
input,
select,
textarea {
--background-color: var(--form-element-background-color);
--border-color: var(--form-element-border-color);
--color: var(--form-element-color);
--box-shadow: none;
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: 0;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
:where(select, textarea):is(:active, :focus),
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
:where(select, textarea):is(:active, :focus),
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus,
select:focus,
textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
:where(fieldset[disabled])
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea),
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
select[disabled],
textarea[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: var(--form-element-disabled-opacity);
pointer-events: none;
}
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"])[aria-invalid] {
padding-right: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
-webkit-padding-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"])[aria-invalid="false"] {
background-image: var(--icon-valid);
}
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"])[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
:where(input, select, textarea)[aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
}
:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
--border-color: var(--form-element-valid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width)
var(--form-element-valid-focus-color) !important;
}
:where(input, select, textarea)[aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
}
:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
--border-color: var(--form-element-invalid-active-border-color) !important;
--box-shadow: 0 0 0 var(--outline-width)
var(--form-element-invalid-focus-color) !important;
}
[dir="rtl"]
:where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
background-position: center left 0.75rem;
}
input::-webkit-input-placeholder,
input::placeholder,
select:invalid,
textarea::-webkit-input-placeholder,
textarea::placeholder {
color: var(--form-element-placeholder-color);
opacity: 1;
}
input:not([type="checkbox"], [type="radio"]),
select,
textarea {
margin-bottom: var(--spacing);
}
select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple], [size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
[dir="rtl"] select:not([multiple], [size]) {
background-position: center left 0.75rem;
}
:where(input, select, textarea, .grid) + small {
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);
margin-bottom: var(--spacing);
color: var(--muted-color);
}
label > :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25);
}
[type="checkbox"],
[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0.375em;
margin-inline-end: 0.375em;
border-width: var(--border-width);
font-size: inherit;
vertical-align: middle;
cursor: pointer;
}
[type="checkbox"]::-ms-check,
[type="radio"]::-ms-check {
display: none;
}
[type="checkbox"]:checked,
[type="checkbox"]:checked:active,
[type="checkbox"]:checked:focus,
[type="radio"]:checked,
[type="radio"]:checked:active,
[type="radio"]:checked:focus {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
[type="checkbox"] ~ label,
[type="radio"] ~ label {
display: inline-block;
margin-right: 0.375em;
margin-bottom: 0;
cursor: pointer;
}
[type="checkbox"]:indeterminate {
--background-color: var(--primary);
--border-color: var(--primary);
background-image: var(--icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
}
[type="radio"] {
border-radius: 50%;
}
[type="radio"]:checked,
[type="radio"]:checked:active,
[type="radio"]:checked:focus {
--background-color: var(--primary-inverse);
border-width: 0.35em;
background-image: none;
}
[type="checkbox"][role="switch"] {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
width: 2.25em;
height: 1.25em;
border: var(--border-width) solid var(--border-color);
border-radius: 1.25em;
background-color: var(--background-color);
line-height: 1.25em;
}
[type="checkbox"][role="switch"]:focus {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
}
[type="checkbox"][role="switch"]:checked {
--background-color: var(--switch-checked-background-color);
--border-color: var(--switch-checked-background-color);
}
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1.25em - (var(--border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(--color);
content: "";
transition: margin 0.1s ease-in-out;
}
[type="checkbox"][role="switch"]:checked {
background-image: none;
}
[type="checkbox"][role="switch"]:checked::before {
margin-left: calc(1.125em - var(--border-width));
-webkit-margin-start: calc(1.125em - var(--border-width));
margin-inline-start: calc(1.125em - var(--border-width));
}
[type="checkbox"]:checked[aria-invalid="false"],
[type="checkbox"][aria-invalid="false"],
[type="checkbox"][role="switch"]:checked[aria-invalid="false"],
[type="checkbox"][role="switch"][aria-invalid="false"],
[type="radio"]:checked[aria-invalid="false"],
[type="radio"][aria-invalid="false"] {
--border-color: var(--form-element-valid-border-color);
}
[type="checkbox"]:checked[aria-invalid="true"],
[type="checkbox"][aria-invalid="true"],
[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
[type="checkbox"][role="switch"][aria-invalid="true"],
[type="radio"]:checked[aria-invalid="true"],
[type="radio"][aria-invalid="true"] {
--border-color: var(--form-element-invalid-border-color);
}
[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
[type="color"]::-moz-focus-inner {
padding: 0;
}
[type="color"]::-webkit-color-swatch {
border: 0;
border-radius: calc(var(--border-radius) * 0.5);
}
[type="color"]::-moz-color-swatch {
border: 0;
border-radius: calc(var(--border-radius) * 0.5);
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
--icon-position: 0.75rem;
--icon-width: 1rem;
padding-right: calc(var(--icon-width) + var(--icon-position));
background-image: var(--icon-date);
background-position: center right var(--icon-position);
background-size: var(--icon-width) auto;
background-repeat: no-repeat;
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
background-image: var(--icon-time);
}
[type="date"]::-webkit-calendar-picker-indicator,
[type="datetime-local"]::-webkit-calendar-picker-indicator,
[type="month"]::-webkit-calendar-picker-indicator,
[type="time"]::-webkit-calendar-picker-indicator,
[type="week"]::-webkit-calendar-picker-indicator {
width: var(--icon-width);
margin-right: calc(var(--icon-width) * -1);
margin-left: var(--icon-position);
opacity: 0;
}
[dir="rtl"]
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
text-align: right;
}
@-moz-document url-prefix() {
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"] {
padding-right: var(--form-element-spacing-horizontal) !important;
background-image: none !important;
}
}
[type="file"] {
--color: var(--muted-color);
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
border: 0;
border-radius: 0;
background: 0 0;
}
[type="file"]::file-selector-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: 0;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
[type="file"]::file-selector-button:is(:hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type="file"]::-webkit-file-upload-button {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) / 2);
margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: 0;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-webkit-transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
[type="file"]::-webkit-file-upload-button:is(:hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type="file"]::-ms-browse {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) / 2);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: 0;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
line-height: var(--line-height);
text-align: center;
cursor: pointer;
-ms-transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
[type="file"]::-ms-browse:is(:hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 1.25rem;
background: 0 0;
}
[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 0.25rem;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
-webkit-transition: background-color var(--transition),
box-shadow var(--transition);
transition: background-color var(--transition), box-shadow var(--transition);
}
[type="range"]::-moz-range-track {
width: 100%;
height: 0.25rem;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
-moz-transition: background-color var(--transition),
box-shadow var(--transition);
transition: background-color var(--transition), box-shadow var(--transition);
}
[type="range"]::-ms-track {
width: 100%;
height: 0.25rem;
border-radius: var(--border-radius);
background-color: var(--range-border-color);
-ms-transition: background-color var(--transition),
box-shadow var(--transition);
transition: background-color var(--transition), box-shadow var(--transition);
}
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 2px solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
-webkit-transition: background-color var(--transition),
transform var(--transition);
transition: background-color var(--transition), transform var(--transition);
}
[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 2px solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
-moz-transition: background-color var(--transition),
transform var(--transition);
transition: background-color var(--transition), transform var(--transition);
}
[type="range"]::-ms-thumb {
-webkit-appearance: none;
width: 1.25rem;
height: 1.25rem;
margin-top: -0.5rem;
border: 2px solid var(--range-thumb-border-color);
border-radius: 50%;
background-color: var(--range-thumb-color);
cursor: pointer;
-ms-transition: background-color var(--transition),
transform var(--transition);
transition: background-color var(--transition), transform var(--transition);
}
[type="range"]:focus,
[type="range"]:hover {
--range-border-color: var(--range-active-border-color);
--range-thumb-color: var(--range-thumb-hover-color);
}
[type="range"]:active {
--range-thumb-color: var(--range-thumb-active-color);
}
[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.25);
}
[type="range"]:active::-moz-range-thumb {
transform: scale(1.25);
}
[type="range"]:active::-ms-thumb {
transform: scale(1.25);
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
-webkit-padding-start: calc(
var(--form-element-spacing-horizontal) + 1.75rem
);
padding-inline-start: calc(
var(--form-element-spacing-horizontal) + 1.75rem
);
border-radius: 5rem;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
-webkit-padding-start: calc(
var(--form-element-spacing-horizontal) + 1.75rem
) !important;
padding-inline-start: calc(
var(--form-element-spacing-horizontal) + 1.75rem
) !important;
background-position: center left 1.125rem, center right 0.75rem;
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
background-image: var(--icon-search), var(--icon-valid);
}
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
background-image: var(--icon-search), var(--icon-invalid);
}
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
display: none;
}
[dir="rtl"]
:where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
background-position: center right 1.125rem;
}
[dir="rtl"]
:where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
background-position: center right 1.125rem, center left 0.75rem;
}
:where(table) {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
text-indent: 0;
}
td,
th {
padding: calc(var(--spacing) / 2) var(--spacing);
border-bottom: var(--border-width) solid var(--table-border-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
text-align: left;
text-align: start;
}
tfoot td,
tfoot th {
border-top: var(--border-width) solid var(--table-border-color);
border-bottom: 0;
}
table[role="grid"] tbody tr:nth-child(odd) {
background-color: var(--table-row-stripped-background-color);
}
code,
kbd,
pre,
samp {
font-size: 0.875em;
font-family: var(--font-family);
}
pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
code,
kbd,
pre {
border-radius: var(--border-radius);
background: var(--code-background-color);
color: var(--code-color);
font-weight: var(--font-weight);
line-height: initial;
}
code,
kbd {
display: inline-block;
padding: 0.375rem 0.5rem;
}
pre {
display: block;
margin-bottom: var(--spacing);
overflow-x: auto;
}
pre > code {
display: block;
padding: var(--spacing);
background: 0 0;
font-size: 14px;
line-height: var(--line-height);
}
code b {
color: var(--code-tag-color);
font-weight: var(--font-weight);
}
code i {
color: var(--code-property-color);
font-style: normal;
}
code u {
color: var(--code-value-color);
text-decoration: none;
}
code em {
color: var(--code-comment-color);
font-style: normal;
}
kbd {
background-color: var(--code-kbd-background-color);
color: var(--code-kbd-color);
vertical-align: baseline;
}
hr {
height: 0;
border: 0;
border-top: 1px solid var(--muted-border-color);
color: inherit;
}
[hidden],
template {
display: none !important;
}
canvas {
display: inline-block;
}
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
line-height: 1rem;
list-style-type: none;
cursor: pointer;
transition: color var(--transition);
}
details summary:not([role]) {
color: var(--accordion-close-summary-color);
}
details summary::-webkit-details-marker {
display: none;
}
details summary::marker {
display: none;
}
details summary::-moz-list-bullet {
list-style-type: none;
}
details summary::after {
display: block;
width: 1rem;
height: 1rem;
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
transition: transform var(--transition);
}
details summary:focus {
outline: 0;
}
details summary:focus:not([role="button"]) {
color: var(--accordion-active-summary-color);
}
details summary[role="button"] {
width: 100%;
text-align: left;
}
details summary[role="button"]::after {
height: calc(1rem * var(--line-height, 1.5));
background-image: var(--icon-chevron-button);
}
details summary[role="button"]:not(.outline).contrast::after {
background-image: var(--icon-chevron-button-inverse);
}
details[open] > summary {
margin-bottom: calc(var(--spacing));
}
details[open] > summary:not([role]):not(:focus) {
color: var(--accordion-open-summary-color);
}
details[open] > summary::after {
transform: rotate(0);
}
[dir="rtl"] details summary {
text-align: right;
}
[dir="rtl"] details summary::after {
float: left;
background-position: left center;
}
article {
margin: var(--block-spacing-vertical) 0;
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
border-radius: var(--border-radius);
background: var(--card-background-color);
box-shadow: var(--card-box-shadow);
}
article > footer,
article > header {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) * 0.66)
var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
}
article > header {
margin-top: calc(var(--block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical);
border-bottom: var(--border-width) solid var(--card-border-color);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
}
article > footer {
margin-top: var(--block-spacing-vertical);
margin-bottom: calc(var(--block-spacing-vertical) * -1);
border-top: var(--border-width) solid var(--card-border-color);
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
}
:root {
--scrollbar-width: 0px;
}
dialog {
display: flex;
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
padding: var(--spacing);
border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color);
color: var(--color);
}
dialog article {
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
}
@media (min-width: 576px) {
dialog article {
max-width: 510px;
}
}
@media (min-width: 768px) {
dialog article {
max-width: 700px;
}
}
dialog article > footer,
dialog article > header {
padding: calc(var(--block-spacing-vertical) * 0.5)
var(--block-spacing-horizontal);
}
dialog article > header .close {
margin: 0;
margin-left: var(--spacing);
float: right;
}
dialog article > footer {
text-align: right;
}
dialog article > footer [role="button"] {
margin-bottom: 0;
}
dialog article > footer [role="button"]:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
dialog article p:last-of-type {
margin: 0;
}
dialog article .close {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--block-spacing-vertical) * -0.5);
margin-bottom: var(--typography-spacing-vertical);
margin-left: auto;
background-image: var(--icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
opacity: 0.5;
transition: opacity var(--transition);
}
dialog article .close:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
dialog:not([open]),
dialog[open="false"] {
display: none;
}
.modal-is-open {
padding-right: var(--scrollbar-width, 0);
overflow: hidden;
pointer-events: none;
touch-action: none;
}
.modal-is-open dialog {
pointer-events: auto;
}
:where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
:where(.modal-is-opening, .modal-is-closing) dialog {
animation-duration: 0.8s;
animation-name: modal-overlay;
}
:where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-delay: 0.2s;
animation-name: modal;
}
.modal-is-closing dialog,
.modal-is-closing dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
@keyframes modal-overlay {
from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
:where(nav li)::before {
float: left;
content: "";
}
nav,
nav ul {
display: flex;
}
nav {
justify-content: space-between;
}
nav ol,
nav ul {
align-items: center;
margin-bottom: 0;
padding: 0;
list-style: none;
}
nav ol:first-of-type,
nav ul:first-of-type {
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
}
nav ol:last-of-type,
nav ul:last-of-type {
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
}
nav li {
display: inline-block;
margin: 0;
padding: var(--nav-element-spacing-vertical)
var(--nav-element-spacing-horizontal);
}
nav li > * {
--spacing: 0;
}
nav :where(a, [role="link"]) {
display: inline-block;
margin: calc(var(--nav-link-spacing-vertical) * -1)
calc(var(--nav-link-spacing-horizontal) * -1);
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
border-radius: var(--border-radius);
text-decoration: none;
}
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
text-decoration: none;
}
nav[aria-label="breadcrumb"] {
align-items: center;
justify-content: start;
}
nav[aria-label="breadcrumb"] ul li:not(:first-child) {
-webkit-margin-start: var(--nav-link-spacing-horizontal);
margin-inline-start: var(--nav-link-spacing-horizontal);
}
nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
position: absolute;
width: calc(var(--nav-link-spacing-horizontal) * 2);
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
content: "/";
color: var(--muted-color);
text-align: center;
}
nav[aria-label="breadcrumb"] a[aria-current] {
background-color: transparent;
color: inherit;
text-decoration: none;
pointer-events: none;
}
nav [role="button"] {
margin-right: inherit;
margin-left: inherit;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
aside li,
aside nav,
aside ol,
aside ul {
display: block;
}
aside li {
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
var(--nav-element-spacing-horizontal);
}
aside li a {
display: block;
}
aside li [role="button"] {
margin: inherit;
}
[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
content: "\\";
}
progress {
display: inline-block;
vertical-align: baseline;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(--spacing) * 0.5);
overflow: hidden;
border: 0;
border-radius: var(--border-radius);
background-color: var(--progress-background-color);
color: var(--progress-color);
}
progress::-webkit-progress-bar {
border-radius: var(--border-radius);
background: 0 0;
}
progress[value]::-webkit-progress-value {
background-color: var(--progress-color);
}
progress::-moz-progress-bar {
background-color: var(--progress-color);
}
@media (prefers-reduced-motion: no-preference) {
progress:indeterminate {
background: var(--progress-background-color)
linear-gradient(
to right,
var(--progress-color) 30%,
var(--progress-background-color) 30%
)
top left/150% 150% no-repeat;
animation: progress-indeterminate 1s linear infinite;
}
progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent;
}
progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
}
@media (prefers-reduced-motion: no-preference) {
[dir="rtl"] progress:indeterminate {
animation-direction: reverse;
}
}
@keyframes progress-indeterminate {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
details[role="list"],
li[role="list"] {
position: relative;
}
details[role="list"] summary + ul,
li[role="list"] > ul {
display: flex;
z-index: 99;
position: absolute;
top: auto;
right: 0;
left: 0;
flex-direction: column;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--dropdown-border-color);
border-radius: var(--border-radius);
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: var(--dropdown-background-color);
box-shadow: var(--card-box-shadow);
color: var(--dropdown-color);
white-space: nowrap;
}
details[role="list"] summary + ul li,
li[role="list"] > ul li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
}
details[role="list"] summary + ul li:first-of-type,
li[role="list"] > ul li:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role="list"] summary + ul li:last-of-type,
li[role="list"] > ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role="list"] summary + ul li a,
li[role="list"] > ul li a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
}
details[role="list"] summary + ul li a:hover,
li[role="list"] > ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role="list"] summary::after,
li[role="list"] > a::after {
display: block;
width: 1rem;
height: calc(1rem * var(--line-height, 1.5));
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
float: right;
transform: rotate(0);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
}
details[role="list"] {
padding: 0;
border-bottom: none;
}
details[role="list"] summary {
margin-bottom: 0;
}
details[role="list"] summary:not([role]) {
height: calc(
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
var(--border-width) * 2
);
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius);
background-color: var(--form-element-background-color);
color: var(--form-element-placeholder-color);
line-height: inherit;
cursor: pointer;
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
details[role="list"] summary:not([role]):active,
details[role="list"] summary:not([role]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role="list"] summary:not([role]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role="list"][open] summary {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
details[role="list"][open] summary::before {
display: block;
z-index: 1;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: 0 0;
content: "";
cursor: default;
}
nav details[role="list"] summary,
nav li[role="list"] a {
display: flex;
direction: ltr;
}
nav details[role="list"] summary + ul,
nav li[role="list"] > ul {
min-width: -moz-fit-content;
min-width: fit-content;
border-radius: var(--border-radius);
}
nav details[role="list"] summary + ul li a,
nav li[role="list"] > ul li a {
border-radius: 0;
}
nav details[role="list"] summary,
nav details[role="list"] summary:not([role]) {
height: auto;
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
}
nav details[role="list"][open] summary {
border-radius: var(--border-radius);
}
nav details[role="list"] summary + ul {
margin-top: var(--outline-width);
-webkit-margin-start: 0;
margin-inline-start: 0;
}
nav details[role="list"] summary[role="link"] {
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
line-height: var(--line-height);
}
nav details[role="list"] summary[role="link"] + ul {
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
}
li[role="list"] a:active ~ ul,
li[role="list"] a:focus ~ ul,
li[role="list"]:hover > ul {
display: flex;
}
li[role="list"] > ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
-webkit-margin-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
);
margin-inline-start: calc(
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
);
}
li[role="list"] > a::after {
background-image: var(--icon-chevron);
}
label > details[role="list"] {
margin-top: calc(var(--spacing) * 0.25);
margin-bottom: var(--spacing);
}
[aria-busy="true"] {
cursor: progress;
}
[aria-busy="true"]:not(input, select, textarea, html)::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: "";
vertical-align: text-bottom;
vertical-align: -0.125em;
animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity);
}
[aria-busy="true"]:not(input, select, textarea, html):not(:empty)::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: calc(var(--spacing) * 0.5);
margin-inline-end: calc(var(--spacing) * 0.5);
}
[aria-busy="true"]:not(input, select, textarea, html):empty {
text-align: center;
}
a[aria-busy="true"],
button[aria-busy="true"],
input[type="button"][aria-busy="true"],
input[type="reset"][aria-busy="true"],
input[type="submit"][aria-busy="true"] {
pointer-events: none;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
[data-tooltip] {
position: relative;
}
[data-tooltip]:not(a, button, input) {
border-bottom: 1px dotted;
text-decoration: none;
cursor: help;
}
[data-tooltip]::after,
[data-tooltip]::before,
[data-tooltip][data-placement="top"]::after,
[data-tooltip][data-placement="top"]::before {
display: block;
z-index: 99;
position: absolute;
bottom: 100%;
left: 50%;
padding: 0.25rem 0.5rem;
overflow: hidden;
transform: translate(-50%, -0.25rem);
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
content: attr(data-tooltip);
color: var(--tooltip-color);
font-style: normal;
font-weight: var(--font-weight);
font-size: 0.875rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
[data-tooltip]::after,
[data-tooltip][data-placement="top"]::after {
padding: 0;
transform: translate(-50%, 0);
border-top: 0.3rem solid;
border-right: 0.3rem solid transparent;
border-left: 0.3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: "";
color: var(--tooltip-background-color);
}
[data-tooltip][data-placement="bottom"]::after,
[data-tooltip][data-placement="bottom"]::before {
top: 100%;
bottom: auto;
transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement="bottom"]:after {
transform: translate(-50%, -0.3rem);
border: 0.3rem solid transparent;
border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement="left"]::after,
[data-tooltip][data-placement="left"]::before {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement="left"]:after {
transform: translate(0.3rem, -50%);
border: 0.3rem solid transparent;
border-left: 0.3rem solid;
}
[data-tooltip][data-placement="right"]::after,
[data-tooltip][data-placement="right"]::before {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement="right"]:after {
transform: translate(-0.3rem, -50%);
border: 0.3rem solid transparent;
border-right: 0.3rem solid;
}
[data-tooltip]:focus::after,
[data-tooltip]:focus::before,
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip][data-placement="bottom"]:focus::after,
[data-tooltip][data-placement="bottom"]:focus::before,
[data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
[data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::before {
animation-duration: 0.2s;
animation-name: tooltip-slide-top;
}
[data-tooltip]:hover::after,
[data-tooltip][data-placement="bottom"]:focus::after,
[data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after {
animation-name: tooltip-caret-slide-top;
}
[data-tooltip][data-placement="bottom"]:focus::after,
[data-tooltip][data-placement="bottom"]:focus::before,
[data-tooltip][data-placement="bottom"]:hover::after,
[data-tooltip][data-placement="bottom"]:hover::before {
animation-duration: 0.2s;
animation-name: tooltip-slide-bottom;
}
[data-tooltip][data-placement="bottom"]:focus::after,
[data-tooltip][data-placement="bottom"]:hover::after {
animation-name: tooltip-caret-slide-bottom;
}
[data-tooltip][data-placement="left"]:focus::after,
[data-tooltip][data-placement="left"]:focus::before,
[data-tooltip][data-placement="left"]:hover::after,
[data-tooltip][data-placement="left"]:hover::before {
animation-duration: 0.2s;
animation-name: tooltip-slide-left;
}
[data-tooltip][data-placement="left"]:focus::after,
[data-tooltip][data-placement="left"]:hover::after {
animation-name: tooltip-caret-slide-left;
}
[data-tooltip][data-placement="right"]:focus::after,
[data-tooltip][data-placement="right"]:focus::before,
[data-tooltip][data-placement="right"]:hover::after,
[data-tooltip][data-placement="right"]:hover::before {
animation-duration: 0.2s;
animation-name: tooltip-slide-right;
}
[data-tooltip][data-placement="right"]:focus::after,
[data-tooltip][data-placement="right"]:hover::after {
animation-name: tooltip-caret-slide-right;
}
}
@keyframes tooltip-slide-top {
from {
transform: translate(-50%, 0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-top {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.25rem);
opacity: 0;
}
to {
transform: translate(-50%, 0);
opacity: 1;
}
}
@keyframes tooltip-slide-bottom {
from {
transform: translate(-50%, -0.75rem);
opacity: 0;
}
to {
transform: translate(-50%, 0.25rem);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-bottom {
from {
opacity: 0;
}
50% {
transform: translate(-50%, -0.5rem);
opacity: 0;
}
to {
transform: translate(-50%, -0.3rem);
opacity: 1;
}
}
@keyframes tooltip-slide-left {
from {
transform: translate(0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-left {
from {
opacity: 0;
}
50% {
transform: translate(0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(0.3rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-slide-right {
from {
transform: translate(-0.75rem, -50%);
opacity: 0;
}
to {
transform: translate(0.25rem, -50%);
opacity: 1;
}
}
@keyframes tooltip-caret-slide-right {
from {
opacity: 0;
}
50% {
transform: translate(-0.05rem, -50%);
opacity: 0;
}
to {
transform: translate(-0.3rem, -50%);
opacity: 1;
}
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
[tabindex],
a,
area,
button,
input,
label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
}
[dir="rtl"] {
direction: rtl;
}
@media (prefers-reduced-motion: reduce) {
:not([aria-busy="true"]),
:not([aria-busy="true"])::after,
:not([aria-busy="true"])::before {
background-attachment: initial !important;
animation-duration: 1ms !important;
animation-delay: -1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
}
}
}
body > nav {
--nav-link-spacing-vertical: 1rem;
-webkit-backdrop-filter: saturate(180%) blur(20px);
z-index: 99;
position: fixed;
top: 0;
right: 0;
left: 0;
backdrop-filter: saturate(180%) blur(20px);
background-color: var(--nav-background-color);
box-shadow: 0 1px 0 var(--nav-border-color);
}
body > nav.container-fluid {
padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));
}
body > nav a {
border-radius: 0;
}
body > nav svg {
vertical-align: text-bottom;
}
body > nav ul:first-of-type {
margin-left: calc(var(--spacing) * -1);
}
body > nav ul:first-of-type li {
padding: 0 10px;
}
body > nav ul:first-of-type li:first-of-type a {
display: block;
margin: 0;
padding: 0;
color: var(--nav-logo-color);
}
body > nav ul:first-of-type li:first-of-type a svg {
display: block;
width: 3.5rem;
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: calc(var(--spacing) * 1.5);
color: var(--h1-color);
}
@media (min-width: 992px) {
body > nav ul:first-of-type li:nth-of-type(2) {
display: inline;
}
}
header h1,
header p {
text-align: center;
}
header h1 {
margin-bottom: var(--spacing);
}
header h1 ~ p {
color: var(--muted-color);
}
header a:not(:last-of-type) {
margin-right: calc(var(--spacing) * 0.5);
}
header p:last-of-type {
margin-bottom: 0;
}
.switcher {
position: fixed;
right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: 0.75rem;
border-radius: 2rem;
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
}
.switcher::after {
display: inline-block;
width: 1rem;
height: 1rem;
border: 0.15rem solid currentColor;
border-radius: 50%;
background: linear-gradient(
to right,
currentColor 0,
currentColor 50%,
transparent 50%
);
content: "";
vertical-align: bottom;
transition: transform var(--transition);
}
.switcher i {
display: inline-block;
max-width: 0;
padding: 0;
overflow: hidden;
font-style: normal;
font-size: 0.875rem;
white-space: nowrap;
}
.switcher:focus,
.switcher:hover {
max-width: 100%;
transition: background-color var(--transition), border-color var(--transition),
color var(--transition), box-shadow var(--transition);
}
.switcher:hover::after {
transform: rotate(180deg);
}
.switcher:hover i {
max-width: 100%;
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), padding var(--transition);
}
.switcher:focus {
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
}
@media (min-width: 576px) {
.switcher {
right: calc(var(--spacing) + var(--scrollbar-width, 0px));
}
}
.feature {
display: grid;
grid-template-columns: 2fr 1fr;
margin-bottom: var(--spacing);
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
.feature label,
.feature details {
display: inline-block;
margin-bottom: revert;
padding-bottom: revert;
border-bottom: revert;
}
body {
width: 100%;
margin: 0;
}
footer,
header,
main > section {
--block-spacing-vertical: 4rem;
width: 100%;
margin: 0;
padding: var(--block-spacing-vertical) 0;
}
@media (min-width: 768px) {
footer,
header,
main > section {
--block-spacing-vertical: 5rem;
}
}
@media (min-width: 992px) {
footer,
header,
main > section {
--block-spacing-vertical: 6rem;
}
}
@media (min-width: 1200px) {
footer,
header,
main > section {
--block-spacing-vertical: 7rem;
}
}
header {
padding-bottom: 0;
}
</style></head><body><nav class="container-fluid"><ul><li><a href="/" aria-label="Back home"><img focusable="false" style="height: 56px;" src="/img/fastly.svg"></a></li><li>Fastly Polyfill</li></ul><ul><li><a href="https://www.fastly.com/terms/" class="secondary">Terms & Conditions</a></li><li><a href="https://www.fastly.com/privacy/" class="secondary">Privacy Policy</a></li><li><a href="https://github.com/fastly/polyfill-service/" class="contrast" aria-label="GitHub repository"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></li></ul></nav><header><div class="container"><h1>Upgrade the web. Automatically.</h1><p>Delivers only the polyfills required by the user's web browser.</p></div></header><main class="container"><form><label for="bundle">Your polyfill bundle<output><pre><code id="polyfill-bundle-url">https://polyfill-fastly.net/v3/polyfill.min.js</code></pre></output></label><div class="grid"><label for="library-version">Polyfill Library Version<select id="library-version"><option value="3.111.0" selected="">3.111.0</option><option value="3.110.1">3.110.1</option><option value="3.109.0">3.109.0</option><option value="3.108.0">3.108.0</option><option value="3.104.0">3.104.0</option><option value="3.103.0">3.103.0</option><option value="3.101.0">3.101.0</option><option value="3.98.0">3.98.0</option><option value="3.96.0">3.96.0</option><option value="3.89.4">3.89.4</option><option value="3.53.1">3.53.1</option><option value="3.52.3">3.52.3</option><option value="3.52.2">3.52.2</option><option value="3.52.1">3.52.1</option><option value="3.52.0">3.52.0</option><option value="3.51.0">3.51.0</option><option value="3.50.2">3.50.2</option><option value="3.48.0">3.48.0</option><option value="3.46.0">3.46.0</option><option value="3.42.0">3.42.0</option><option value="3.41.0">3.41.0</option><option value="3.40.0">3.40.0</option><option value="3.39.0">3.39.0</option><option value="3.34.0">3.34.0</option><option value="3.27.4">3.27.4</option></select></label><label for="callback">Callback<input type="text" id="callback" name="callback"></label></div><label for="filter-polyfills">Filter Polyfills</label><input type="text" id="filter-polyfills" name="filter-polyfills"><small>Filter the polyfills in the "Available Polyfills" list.</small><fieldset><legend>Available Polyfills</legend><small>Check the boxes of the polyfills or polyfill-sets you want to have in your bundle.</small><div id="features-list"><div class="feature"><label for="default"><input type="checkbox" id="default" name="default">default</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.from</li><li>Array.isArray</li><li>Array.of</li><li>Array.prototype.every</li><li>Array.prototype.fill</li><li>Array.prototype.filter</li><li>Array.prototype.forEach</li><li>Array.prototype.indexOf</li><li>Array.prototype.lastIndexOf</li><li>Array.prototype.map</li><li>Array.prototype.reduce</li><li>Array.prototype.reduceRight</li><li>Array.prototype.some</li><li>CustomEvent</li><li>DOMTokenList</li><li>Date.now</li><li>Date.prototype.toISOString</li><li>DocumentFragment.prototype.append</li><li>DocumentFragment.prototype.prepend</li><li>Element.prototype.after</li><li>Element.prototype.append</li><li>Element.prototype.before</li><li>Element.prototype.classList</li><li>Element.prototype.cloneNode</li><li>Element.prototype.closest</li><li>Element.prototype.matches</li><li>Element.prototype.prepend</li><li>Element.prototype.remove</li><li>Element.prototype.replaceWith</li><li>Element</li><li>Event.focusin</li><li>Event.hashchange</li><li>Event</li><li>Function.prototype.bind</li><li>JSON</li><li>Map</li><li>Node.prototype.contains</li><li>Node.prototype.isSameNode</li><li>Number.isNaN</li><li>Object.assign</li><li>Object.create</li><li>Object.defineProperties</li><li>Object.defineProperty</li><li>Object.getOwnPropertyDescriptor</li><li>Object.getOwnPropertyNames</li><li>Object.getPrototypeOf</li><li>Object.keys</li><li>Promise</li><li>Set</li><li>String.prototype.endsWith</li><li>String.prototype.includes</li><li>String.prototype.startsWith</li><li>String.prototype.trim</li><li>URL</li><li>Window</li><li>XMLHttpRequest</li><li>atob</li><li>document.querySelector</li><li>document.visibilityState</li><li>document</li><li>location.origin</li><li>requestAnimationFrame</li><li>~html5-elements</li></ul></details></div><div class="feature"><label for="dom4"><input type="checkbox" id="dom4" name="dom4">dom4</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Node.prototype.contains</li><li>Node.prototype.isSameNode</li></ul></details></div><div class="feature"><label for="es2015"><input type="checkbox" id="es2015" name="es2015">es2015</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.from</li><li>Array.of</li><li>Array.prototype.@@iterator</li><li>Array.prototype.copyWithin</li><li>Array.prototype.entries</li><li>Array.prototype.fill</li><li>Array.prototype.find</li><li>Array.prototype.findIndex</li><li>Array.prototype.keys</li><li>Array.prototype.sort</li><li>Array.prototype.values</li><li>Function.prototype.name</li><li>Map</li><li>Math.acosh</li><li>Math.asinh</li><li>Math.atanh</li><li>Math.cbrt</li><li>Math.clz32</li><li>Math.cosh</li><li>Math.expm1</li><li>Math.fround</li><li>Math.hypot</li><li>Math.imul</li><li>Math.log10</li><li>Math.log1p</li><li>Math.log2</li><li>Math.sign</li><li>Math.sinh</li><li>Math.tanh</li><li>Math.trunc</li><li>Number.Epsilon</li><li>Number.MAX_SAFE_INTEGER</li><li>Number.MIN_SAFE_INTEGER</li><li>Number.isFinite</li><li>Number.isInteger</li><li>Number.isNaN</li><li>Number.isSafeInteger</li><li>Number.parseFloat</li><li>Number.parseInt</li><li>Object.assign</li><li>Object.is</li><li>Object.seal</li><li>Object.setPrototypeOf</li><li>Promise</li><li>RegExp.prototype.flags</li><li>Set</li><li>String.fromCodePoint</li><li>String.prototype.@@iterator</li><li>String.prototype.codePointAt</li><li>String.prototype.endsWith</li><li>String.prototype.includes</li><li>String.prototype.repeat</li><li>String.prototype.startsWith</li><li>Symbol.hasInstance</li><li>Symbol.isConcatSpreadable</li><li>Symbol.iterator</li><li>Symbol.match</li><li>Symbol.replace</li><li>Symbol.search</li><li>Symbol.species</li><li>Symbol.split</li><li>Symbol.toPrimitive</li><li>Symbol.toStringTag</li><li>Symbol.unscopables</li><li>Symbol</li><li>WeakMap</li><li>WeakSet</li></ul></details></div><div class="feature"><label for="es2016"><input type="checkbox" id="es2016" name="es2016">es2016</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.prototype.includes</li><li>String.prototype.padEnd</li><li>String.prototype.padStart</li></ul></details></div><div class="feature"><label for="es2017"><input type="checkbox" id="es2017" name="es2017">es2017</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Object.entries</li><li>Object.getOwnPropertyDescriptors</li><li>Object.values</li><li>String.prototype.padEnd</li><li>String.prototype.padStart</li></ul></details></div><div class="feature"><label for="es2018"><input type="checkbox" id="es2018" name="es2018">es2018</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Promise.prototype.finally</li><li>Symbol.asyncIterator</li></ul></details></div><div class="feature"><label for="es2019"><input type="checkbox" id="es2019" name="es2019">es2019</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.prototype.flat</li><li>Array.prototype.flatMap</li><li>Object.fromEntries</li><li>String.prototype.trimEnd</li><li>String.prototype.trimStart</li></ul></details></div><div class="feature"><label for="es2020"><input type="checkbox" id="es2020" name="es2020">es2020</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Promise.allSettled</li><li>RegExp.prototype.@@matchAll</li><li>String.prototype.matchAll</li><li>Symbol.matchAll</li></ul></details></div><div class="feature"><label for="es2021"><input type="checkbox" id="es2021" name="es2021">es2021</label><details class="alias"><summary>Included Polyfills</summary><ul><li>AggregateError</li><li>Promise.any</li><li>String.prototype.replaceAll</li></ul></details></div><div class="feature"><label for="es2022"><input type="checkbox" id="es2022" name="es2022">es2022</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.prototype.at</li><li>String.prototype.at</li><li>TypedArray.prototype.at</li></ul></details></div><div class="feature"><label for="es5"><input type="checkbox" id="es5" name="es5">es5</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.isArray</li><li>Array.prototype.every</li><li>Array.prototype.filter</li><li>Array.prototype.forEach</li><li>Array.prototype.indexOf</li><li>Array.prototype.lastIndexOf</li><li>Array.prototype.map</li><li>Array.prototype.reduce</li><li>Array.prototype.reduceRight</li><li>Array.prototype.some</li><li>Date.now</li><li>Date.prototype.toISOString</li><li>Function.prototype.bind</li><li>Object.create</li><li>Object.defineProperties</li><li>Object.defineProperty</li><li>Object.freeze</li><li>Object.getOwnPropertyDescriptor</li><li>Object.getOwnPropertyNames</li><li>Object.getPrototypeOf</li><li>Object.keys</li><li>String.prototype.trim</li></ul></details></div><div class="feature"><label for="es6"><input type="checkbox" id="es6" name="es6">es6</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.from</li><li>Array.of</li><li>Array.prototype.@@iterator</li><li>Array.prototype.copyWithin</li><li>Array.prototype.entries</li><li>Array.prototype.fill</li><li>Array.prototype.find</li><li>Array.prototype.findIndex</li><li>Array.prototype.keys</li><li>Array.prototype.sort</li><li>Array.prototype.values</li><li>Function.prototype.name</li><li>Map</li><li>Math.acosh</li><li>Math.asinh</li><li>Math.atanh</li><li>Math.cbrt</li><li>Math.clz32</li><li>Math.cosh</li><li>Math.expm1</li><li>Math.fround</li><li>Math.hypot</li><li>Math.imul</li><li>Math.log10</li><li>Math.log1p</li><li>Math.log2</li><li>Math.sign</li><li>Math.sinh</li><li>Math.tanh</li><li>Math.trunc</li><li>Number.Epsilon</li><li>Number.MAX_SAFE_INTEGER</li><li>Number.MIN_SAFE_INTEGER</li><li>Number.isFinite</li><li>Number.isInteger</li><li>Number.isNaN</li><li>Number.isSafeInteger</li><li>Number.parseFloat</li><li>Number.parseInt</li><li>Object.assign</li><li>Object.is</li><li>Object.seal</li><li>Object.setPrototypeOf</li><li>Promise</li><li>RegExp.prototype.flags</li><li>Set</li><li>String.fromCodePoint</li><li>String.prototype.@@iterator</li><li>String.prototype.codePointAt</li><li>String.prototype.endsWith</li><li>String.prototype.includes</li><li>String.prototype.repeat</li><li>String.prototype.startsWith</li><li>Symbol.hasInstance</li><li>Symbol.isConcatSpreadable</li><li>Symbol.iterator</li><li>Symbol.match</li><li>Symbol.replace</li><li>Symbol.search</li><li>Symbol.species</li><li>Symbol.split</li><li>Symbol.toPrimitive</li><li>Symbol.toStringTag</li><li>Symbol.unscopables</li><li>Symbol</li><li>WeakMap</li><li>WeakSet</li></ul></details></div><div class="feature"><label for="es7"><input type="checkbox" id="es7" name="es7">es7</label><details class="alias"><summary>Included Polyfills</summary><ul><li>Array.prototype.includes</li><li>String.prototype.padEnd</li><li>String.prototype.padStart</li></ul></details></div><div class="feature"><label for="AbortController"><input type="checkbox" id="AbortController" name="AbortController">AbortController</label></div><div class="feature"><label for="AggregateError"><input type="checkbox" id="AggregateError" name="AggregateError">AggregateError</label></div><div class="feature"><label for="Array.from"><input type="checkbox" id="Array.from" name="Array.from">Array.from</label></div><div class="feature"><label for="Array.isArray"><input type="checkbox" id="Array.isArray" name="Array.isArray">Array.isArray</label></div><div class="feature"><label for="Array.of"><input type="checkbox" id="Array.of" name="Array.of">Array.of</label></div><div class="feature"><label for="Array.prototype.@@iterator"><input type="checkbox" id="Array.prototype.@@iterator" name="Array.prototype.@@iterator">Array.prototype.@@iterator</label></div><div class="feature"><label for="Array.prototype.at"><input type="checkbox" id="Array.prototype.at" name="Array.prototype.at">Array.prototype.at</label></div><div class="feature"><label for="Array.prototype.copyWithin"><input type="checkbox" id="Array.prototype.copyWithin" name="Array.prototype.copyWithin">Array.prototype.copyWithin</label></div><div class="feature"><label for="Array.prototype.entries"><input type="checkbox" id="Array.prototype.entries" name="Array.prototype.entries">Array.prototype.entries</label></div><div class="feature"><label for="Array.prototype.every"><input type="checkbox" id="Array.prototype.every" name="Array.prototype.every">Array.prototype.every</label></div><div class="feature"><label for="Array.prototype.fill"><input type="checkbox" id="Array.prototype.fill" name="Array.prototype.fill">Array.prototype.fill</label></div><div class="feature"><label for="Array.prototype.filter"><input type="checkbox" id="Array.prototype.filter" name="Array.prototype.filter">Array.prototype.filter</label></div><div class="feature"><label for="Array.prototype.find"><input type="checkbox" id="Array.prototype.find" name="Array.prototype.find">Array.prototype.find</label></div><div class="feature"><label for="Array.prototype.findIndex"><input type="checkbox" id="Array.prototype.findIndex" name="Array.prototype.findIndex">Array.prototype.findIndex</label></div><div class="feature"><label for="Array.prototype.flat"><input type="checkbox" id="Array.prototype.flat" name="Array.prototype.flat">Array.prototype.flat</label></div><div class="feature"><label for="Array.prototype.flatMap"><input type="checkbox" id="Array.prototype.flatMap" name="Array.prototype.flatMap">Array.prototype.flatMap</label></div><div class="feature"><label for="Array.prototype.forEach"><input type="checkbox" id="Array.prototype.forEach" name="Array.prototype.forEach">Array.prototype.forEach</label></div><div class="feature"><label for="Array.prototype.includes"><input type="checkbox" id="Array.prototype.includes" name="Array.prototype.includes">Array.prototype.includes</label></div><div class="feature"><label for="Array.prototype.indexOf"><input type="checkbox" id="Array.prototype.indexOf" name="Array.prototype.indexOf">Array.prototype.indexOf</label></div><div class="feature"><label for="Array.prototype.keys"><input type="checkbox" id="Array.prototype.keys" name="Array.prototype.keys">Array.prototype.keys</label></div><div class="feature"><label for="Array.prototype.lastIndexOf"><input type="checkbox" id="Array.prototype.lastIndexOf" name="Array.prototype.lastIndexOf">Array.prototype.lastIndexOf</label></div><div class="feature"><label for="Array.prototype.map"><input type="checkbox" id="Array.prototype.map" name="Array.prototype.map">Array.prototype.map</label></div><div class="feature"><label for="Array.prototype.reduce"><input type="checkbox" id="Array.prototype.reduce" name="Array.prototype.reduce">Array.prototype.reduce</label></div><div class="feature"><label for="Array.prototype.reduceRight"><input type="checkbox" id="Array.prototype.reduceRight" name="Array.prototype.reduceRight">Array.prototype.reduceRight</label></div><div class="feature"><label for="Array.prototype.some"><input type="checkbox" id="Array.prototype.some" name="Array.prototype.some">Array.prototype.some</label></div><div class="feature"><label for="Array.prototype.sort"><input type="checkbox" id="Array.prototype.sort" name="Array.prototype.sort">Array.prototype.sort</label></div><div class="feature"><label for="Array.prototype.values"><input type="checkbox" id="Array.prototype.values" name="Array.prototype.values">Array.prototype.values</label></div><div class="feature"><label for="ArrayBuffer"><input type="checkbox" id="ArrayBuffer" name="ArrayBuffer">ArrayBuffer</label></div><div class="feature"><label for="ArrayBuffer.isView"><input type="checkbox" id="ArrayBuffer.isView" name="ArrayBuffer.isView">ArrayBuffer.isView</label></div><div class="feature"><label for="AudioContext"><input type="checkbox" id="AudioContext" name="AudioContext">AudioContext</label></div><div class="feature"><label for="Blob"><input type="checkbox" id="Blob" name="Blob">Blob</label></div><div class="feature"><label for="CSS.supports"><input type="checkbox" id="CSS.supports" name="CSS.supports">CSS.supports</label></div><div class="feature"><label for="CustomEvent"><input type="checkbox" id="CustomEvent" name="CustomEvent">CustomEvent</label></div><div class="feature"><label for="DOMRect"><input type="checkbox" id="DOMRect" name="DOMRect">DOMRect</label></div><div class="feature"><label for="DOMRect.fromRect"><input type="checkbox" id="DOMRect.fromRect" name="DOMRect.fromRect">DOMRect.fromRect</label></div><div class="feature"><label for="DOMTokenList"><input type="checkbox" id="DOMTokenList" name="DOMTokenList">DOMTokenList</label></div><div class="feature"><label for="DOMTokenList.prototype.@@iterator"><input type="checkbox" id="DOMTokenList.prototype.@@iterator" name="DOMTokenList.prototype.@@iterator">DOMTokenList.prototype.@@iterator</label></div><div class="feature"><label for="DOMTokenList.prototype.forEach"><input type="checkbox" id="DOMTokenList.prototype.forEach" name="DOMTokenList.prototype.forEach">DOMTokenList.prototype.forEach</label></div><div class="feature"><label for="DOMTokenList.prototype.replace"><input type="checkbox" id="DOMTokenList.prototype.replace" name="DOMTokenList.prototype.replace">DOMTokenList.prototype.replace</label></div><div class="feature"><label for="Date.now"><input type="checkbox" id="Date.now" name="Date.now">Date.now</label></div><div class="feature"><label for="Date.prototype.toISOString"><input type="checkbox" id="Date.prototype.toISOString" name="Date.prototype.toISOString">Date.prototype.toISOString</label></div><div class="feature"><label for="DocumentFragment"><input type="checkbox" id="DocumentFragment" name="DocumentFragment">DocumentFragment</label></div><div class="feature"><label for="DocumentFragment.prototype.append"><input type="checkbox" id="DocumentFragment.prototype.append" name="DocumentFragment.prototype.append">DocumentFragment.prototype.append</label></div><div class="feature"><label for="DocumentFragment.prototype.prepend"><input type="checkbox" id="DocumentFragment.prototype.prepend" name="DocumentFragment.prototype.prepend">DocumentFragment.prototype.prepend</label></div><div class="feature"><label for="Element"><input type="checkbox" id="Element" name="Element">Element</label></div><div class="feature"><label for="Element.prototype.after"><input type="checkbox" id="Element.prototype.after" name="Element.prototype.after">Element.prototype.after</label></div><div class="feature"><label for="Element.prototype.append"><input type="checkbox" id="Element.prototype.append" name="Element.prototype.append">Element.prototype.append</label></div><div class="feature"><label for="Element.prototype.before"><input type="checkbox" id="Element.prototype.before" name="Element.prototype.before">Element.prototype.before</label></div><div class="feature"><label for="Element.prototype.classList"><input type="checkbox" id="Element.prototype.classList" name="Element.prototype.classList">Element.prototype.classList</label></div><div class="feature"><label for="Element.prototype.cloneNode"><input type="checkbox" id="Element.prototype.cloneNode" name="Element.prototype.cloneNode">Element.prototype.cloneNode</label></div><div class="feature"><label for="Element.prototype.closest"><input type="checkbox" id="Element.prototype.closest" name="Element.prototype.closest">Element.prototype.closest</label></div><div class="feature"><label for="Element.prototype.dataset"><input type="checkbox" id="Element.prototype.dataset" name="Element.prototype.dataset">Element.prototype.dataset</label></div><div class="feature"><label for="Element.prototype.getAttributeNames"><input type="checkbox" id="Element.prototype.getAttributeNames" name="Element.prototype.getAttributeNames">Element.prototype.getAttributeNames</label></div><div class="feature"><label for="Element.prototype.inert"><input type="checkbox" id="Element.prototype.inert" name="Element.prototype.inert">Element.prototype.inert</label></div><div class="feature"><label for="Element.prototype.matches"><input type="checkbox" id="Element.prototype.matches" name="Element.prototype.matches">Element.prototype.matches</label></div><div class="feature"><label for="Element.prototype.nextElementSibling"><input type="checkbox" id="Element.prototype.nextElementSibling" name="Element.prototype.nextElementSibling">Element.prototype.nextElementSibling</label></div><div class="feature"><label for="Element.prototype.placeholder"><input type="checkbox" id="Element.prototype.placeholder" name="Element.prototype.placeholder">Element.prototype.placeholder</label></div><div class="feature"><label for="Element.prototype.prepend"><input type="checkbox" id="Element.prototype.prepend" name="Element.prototype.prepend">Element.prototype.prepend</label></div><div class="feature"><label for="Element.prototype.previousElementSibling"><input type="checkbox" id="Element.prototype.previousElementSibling" name="Element.prototype.previousElementSibling">Element.prototype.previousElementSibling</label></div><div class="feature"><label for="Element.prototype.remove"><input type="checkbox" id="Element.prototype.remove" name="Element.prototype.remove">Element.prototype.remove</label></div><div class="feature"><label for="Element.prototype.replaceWith"><input type="checkbox" id="Element.prototype.replaceWith" name="Element.prototype.replaceWith">Element.prototype.replaceWith</label></div><div class="feature"><label for="Element.prototype.toggleAttribute"><input type="checkbox" id="Element.prototype.toggleAttribute" name="Element.prototype.toggleAttribute">Element.prototype.toggleAttribute</label></div><div class="feature"><label for="Event"><input type="checkbox" id="Event" name="Event">Event</label></div><div class="feature"><label for="Event.focusin"><input type="checkbox" id="Event.focusin" name="Event.focusin">Event.focusin</label></div><div class="feature"><label for="Event.hashchange"><input type="checkbox" id="Event.hashchange" name="Event.hashchange">Event.hashchange</label></div><div class="feature"><label for="EventSource"><input type="checkbox" id="EventSource" name="EventSource">EventSource</label></div><div class="feature"><label for="Function.prototype.bind"><input type="checkbox" id="Function.prototype.bind" name="Function.prototype.bind">Function.prototype.bind</label></div><div class="feature"><label for="Function.prototype.name"><input type="checkbox" id="Function.prototype.name" name="Function.prototype.name">Function.prototype.name</label></div><div class="feature"><label for="HTMLCanvasElement.prototype.toBlob"><input type="checkbox" id="HTMLCanvasElement.prototype.toBlob" name="HTMLCanvasElement.prototype.toBlob">HTMLCanvasElement.prototype.toBlob</label></div><div class="feature"><label for="HTMLDocument"><input type="checkbox" id="HTMLDocument" name="HTMLDocument">HTMLDocument</label></div><div class="feature"><label for="HTMLInputElement.prototype.valueAsDate"><input type="checkbox" id="HTMLInputElement.prototype.valueAsDate" name="HTMLInputElement.prototype.valueAsDate">HTMLInputElement.prototype.valueAsDate</label></div><div class="feature"><label for="HTMLPictureElement"><input type="checkbox" id="HTMLPictureElement" name="HTMLPictureElement">HTMLPictureElement</label></div><div class="feature"><label for="HTMLSelectElement.prototype.selectedOptions"><input type="checkbox" id="HTMLSelectElement.prototype.selectedOptions" name="HTMLSelectElement.prototype.selectedOptions">HTMLSelectElement.prototype.selectedOptions</label></div><div class="feature"><label for="HTMLTemplateElement"><input type="checkbox" id="HTMLTemplateElement" name="HTMLTemplateElement">HTMLTemplateElement</label></div><div class="feature"><label for="IntersectionObserver"><input type="checkbox" id="IntersectionObserver" name="IntersectionObserver">IntersectionObserver</label></div><div class="feature"><label for="IntersectionObserverEntry"><input type="checkbox" id="IntersectionObserverEntry" name="IntersectionObserverEntry">IntersectionObserverEntry</label></div><div class="feature"><label for="Intl.DateTimeFormat"><input type="checkbox" id="Intl.DateTimeFormat" name="Intl.DateTimeFormat">Intl.DateTimeFormat</label></div><div class="feature"><label for="Intl.DateTimeFormat.~timeZone.all"><input type="checkbox" id="Intl.DateTimeFormat.~timeZone.all" name="Intl.DateTimeFormat.~timeZone.all">Intl.DateTimeFormat.~timeZone.all</label></div><div class="feature"><label for="Intl.DateTimeFormat.~timeZone.golden"><input type="checkbox" id="Intl.DateTimeFormat.~timeZone.golden" name="Intl.DateTimeFormat.~timeZone.golden">Intl.DateTimeFormat.~timeZone.golden</label></div><div class="feature"><label for="Intl.DisplayNames"><input type="checkbox" id="Intl.DisplayNames" name="Intl.DisplayNames">Intl.DisplayNames</label></div><div class="feature"><label for="Intl.ListFormat"><input type="checkbox" id="Intl.ListFormat" name="Intl.ListFormat">Intl.ListFormat</label></div><div class="feature"><label for="Intl.Locale"><input type="checkbox" id="Intl.Locale" name="Intl.Locale">Intl.Locale</label></div><div class="feature"><label for="Intl.NumberFormat"><input type="checkbox" id="Intl.NumberFormat" name="Intl.NumberFormat">Intl.NumberFormat</label></div><div class="feature"><label for="Intl.PluralRules"><input type="checkbox" id="Intl.PluralRules" name="Intl.PluralRules">Intl.PluralRules</label></div><div class="feature"><label for="Intl.RelativeTimeFormat"><input type="checkbox" id="Intl.RelativeTimeFormat" name="Intl.RelativeTimeFormat">Intl.RelativeTimeFormat</label></div><div class="feature"><label for="Intl.getCanonicalLocales"><input type="checkbox" id="Intl.getCanonicalLocales" name="Intl.getCanonicalLocales">Intl.getCanonicalLocales</label></div><div class="feature"><label for="JSON"><input type="checkbox" id="JSON" name="JSON">JSON</label></div><div class="feature"><label for="Map"><input type="checkbox" id="Map" name="Map">Map</label></div><div class="feature"><label for="Math.acosh"><input type="checkbox" id="Math.acosh" name="Math.acosh">Math.acosh</label></div><div class="feature"><label for="Math.asinh"><input type="checkbox" id="Math.asinh" name="Math.asinh">Math.asinh</label></div><div class="feature"><label for="Math.atanh"><input type="checkbox" id="Math.atanh" name="Math.atanh">Math.atanh</label></div><div class="feature"><label for="Math.cbrt"><input type="checkbox" id="Math.cbrt" name="Math.cbrt">Math.cbrt</label></div><div class="feature"><label for="Math.clz32"><input type="checkbox" id="Math.clz32" name="Math.clz32">Math.clz32</label></div><div class="feature"><label for="Math.cosh"><input type="checkbox" id="Math.cosh" name="Math.cosh">Math.cosh</label></div><div class="feature"><label for="Math.expm1"><input type="checkbox" id="Math.expm1" name="Math.expm1">Math.expm1</label></div><div class="feature"><label for="Math.fround"><input type="checkbox" id="Math.fround" name="Math.fround">Math.fround</label></div><div class="feature"><label for="Math.hypot"><input type="checkbox" id="Math.hypot" name="Math.hypot">Math.hypot</label></div><div class="feature"><label for="Math.imul"><input type="checkbox" id="Math.imul" name="Math.imul">Math.imul</label></div><div class="feature"><label for="Math.log10"><input type="checkbox" id="Math.log10" name="Math.log10">Math.log10</label></div><div class="feature"><label for="Math.log1p"><input type="checkbox" id="Math.log1p" name="Math.log1p">Math.log1p</label></div><div class="feature"><label for="Math.log2"><input type="checkbox" id="Math.log2" name="Math.log2">Math.log2</label></div><div class="feature"><label for="Math.sign"><input type="checkbox" id="Math.sign" name="Math.sign">Math.sign</label></div><div class="feature"><label for="Math.sinh"><input type="checkbox" id="Math.sinh" name="Math.sinh">Math.sinh</label></div><div class="feature"><label for="Math.tanh"><input type="checkbox" id="Math.tanh" name="Math.tanh">Math.tanh</label></div><div class="feature"><label for="Math.trunc"><input type="checkbox" id="Math.trunc" name="Math.trunc">Math.trunc</label></div><div class="feature"><label for="MediaQueryList.prototype.addEventListener"><input type="checkbox" id="MediaQueryList.prototype.addEventListener" name="MediaQueryList.prototype.addEventListener">MediaQueryList.prototype.addEventListener</label></div><div class="feature"><label for="MutationObserver"><input type="checkbox" id="MutationObserver" name="MutationObserver">MutationObserver</label></div><div class="feature"><label for="Node.prototype.contains"><input type="checkbox" id="Node.prototype.contains" name="Node.prototype.contains">Node.prototype.contains</label></div><div class="feature"><label for="Node.prototype.isSameNode"><input type="checkbox" id="Node.prototype.isSameNode" name="Node.prototype.isSameNode">Node.prototype.isSameNode</label></div><div class="feature"><label for="NodeList.prototype.@@iterator"><input type="checkbox" id="NodeList.prototype.@@iterator" name="NodeList.prototype.@@iterator">NodeList.prototype.@@iterator</label></div><div class="feature"><label for="NodeList.prototype.forEach"><input type="checkbox" id="NodeList.prototype.forEach" name="NodeList.prototype.forEach">NodeList.prototype.forEach</label></div><div class="feature"><label for="Number.Epsilon"><input type="checkbox" id="Number.Epsilon" name="Number.Epsilon">Number.Epsilon</label></div><div class="feature"><label for="Number.MAX_SAFE_INTEGER"><input type="checkbox" id="Number.MAX_SAFE_INTEGER" name="Number.MAX_SAFE_INTEGER">Number.MAX_SAFE_INTEGER</label></div><div class="feature"><label for="Number.MIN_SAFE_INTEGER"><input type="checkbox" id="Number.MIN_SAFE_INTEGER" name="Number.MIN_SAFE_INTEGER">Number.MIN_SAFE_INTEGER</label></div><div class="feature"><label for="Number.isFinite"><input type="checkbox" id="Number.isFinite" name="Number.isFinite">Number.isFinite</label></div><div class="feature"><label for="Number.isInteger"><input type="checkbox" id="Number.isInteger" name="Number.isInteger">Number.isInteger</label></div><div class="feature"><label for="Number.isNaN"><input type="checkbox" id="Number.isNaN" name="Number.isNaN">Number.isNaN</label></div><div class="feature"><label for="Number.isSafeInteger"><input type="checkbox" id="Number.isSafeInteger" name="Number.isSafeInteger">Number.isSafeInteger</label></div><div class="feature"><label for="Number.parseFloat"><input type="checkbox" id="Number.parseFloat" name="Number.parseFloat">Number.parseFloat</label></div><div class="feature"><label for="Number.parseInt"><input type="checkbox" id="Number.parseInt" name="Number.parseInt">Number.parseInt</label></div><div class="feature"><label for="Object.assign"><input type="checkbox" id="Object.assign" name="Object.assign">Object.assign</label></div><div class="feature"><label for="Object.create"><input type="checkbox" id="Object.create" name="Object.create">Object.create</label></div><div class="feature"><label for="Object.defineProperties"><input type="checkbox" id="Object.defineProperties" name="Object.defineProperties">Object.defineProperties</label></div><div class="feature"><label for="Object.defineProperty"><input type="checkbox" id="Object.defineProperty" name="Object.defineProperty">Object.defineProperty</label></div><div class="feature"><label for="Object.entries"><input type="checkbox" id="Object.entries" name="Object.entries">Object.entries</label></div><div class="feature"><label for="Object.freeze"><input type="checkbox" id="Object.freeze" name="Object.freeze">Object.freeze</label></div><div class="feature"><label for="Object.fromEntries"><input type="checkbox" id="Object.fromEntries" name="Object.fromEntries">Object.fromEntries</label></div><div class="feature"><label for="Object.getOwnPropertyDescriptor"><input type="checkbox" id="Object.getOwnPropertyDescriptor" name="Object.getOwnPropertyDescriptor">Object.getOwnPropertyDescriptor</label></div><div class="feature"><label for="Object.getOwnPropertyDescriptors"><input type="checkbox" id="Object.getOwnPropertyDescriptors" name="Object.getOwnPropertyDescriptors">Object.getOwnPropertyDescriptors</label></div><div class="feature"><label for="Object.getOwnPropertyNames"><input type="checkbox" id="Object.getOwnPropertyNames" name="Object.getOwnPropertyNames">Object.getOwnPropertyNames</label></div><div class="feature"><label for="Object.getPrototypeOf"><input type="checkbox" id="Object.getPrototypeOf" name="Object.getPrototypeOf">Object.getPrototypeOf</label></div><div class="feature"><label for="Object.is"><input type="checkbox" id="Object.is" name="Object.is">Object.is</label></div><div class="feature"><label for="Object.isExtensible"><input type="checkbox" id="Object.isExtensible" name="Object.isExtensible">Object.isExtensible</label></div><div class="feature"><label for="Object.isFrozen"><input type="checkbox" id="Object.isFrozen" name="Object.isFrozen">Object.isFrozen</label></div><div class="feature"><label for="Object.isSealed"><input type="checkbox" id="Object.isSealed" name="Object.isSealed">Object.isSealed</label></div><div class="feature"><label for="Object.keys"><input type="checkbox" id="Object.keys" name="Object.keys">Object.keys</label></div><div class="feature"><label for="Object.preventExtensions"><input type="checkbox" id="Object.preventExtensions" name="Object.preventExtensions">Object.preventExtensions</label></div><div class="feature"><label for="Object.seal"><input type="checkbox" id="Object.seal" name="Object.seal">Object.seal</label></div><div class="feature"><label for="Object.setPrototypeOf"><input type="checkbox" id="Object.setPrototypeOf" name="Object.setPrototypeOf">Object.setPrototypeOf</label></div><div class="feature"><label for="Object.values"><input type="checkbox" id="Object.values" name="Object.values">Object.values</label></div><div class="feature"><label for="Promise"><input type="checkbox" id="Promise" name="Promise">Promise</label></div><div class="feature"><label for="Promise.allSettled"><input type="checkbox" id="Promise.allSettled" name="Promise.allSettled">Promise.allSettled</label></div><div class="feature"><label for="Promise.any"><input type="checkbox" id="Promise.any" name="Promise.any">Promise.any</label></div><div class="feature"><label for="Promise.prototype.finally"><input type="checkbox" id="Promise.prototype.finally" name="Promise.prototype.finally">Promise.prototype.finally</label></div><div class="feature"><label for="Reflect"><input type="checkbox" id="Reflect" name="Reflect">Reflect</label></div><div class="feature"><label for="Reflect.apply"><input type="checkbox" id="Reflect.apply" name="Reflect.apply">Reflect.apply</label></div><div class="feature"><label for="Reflect.construct"><input type="checkbox" id="Reflect.construct" name="Reflect.construct">Reflect.construct</label></div><div class="feature"><label for="Reflect.defineProperty"><input type="checkbox" id="Reflect.defineProperty" name="Reflect.defineProperty">Reflect.defineProperty</label></div><div class="feature"><label for="Reflect.deleteProperty"><input type="checkbox" id="Reflect.deleteProperty" name="Reflect.deleteProperty">Reflect.deleteProperty</label></div><div class="feature"><label for="Reflect.get"><input type="checkbox" id="Reflect.get" name="Reflect.get">Reflect.get</label></div><div class="feature"><label for="Reflect.getOwnPropertyDescriptor"><input type="checkbox" id="Reflect.getOwnPropertyDescriptor" name="Reflect.getOwnPropertyDescriptor">Reflect.getOwnPropertyDescriptor</label></div><div class="feature"><label for="Reflect.getPrototypeOf"><input type="checkbox" id="Reflect.getPrototypeOf" name="Reflect.getPrototypeOf">Reflect.getPrototypeOf</label></div><div class="feature"><label for="Reflect.has"><input type="checkbox" id="Reflect.has" name="Reflect.has">Reflect.has</label></div><div class="feature"><label for="Reflect.isExtensible"><input type="checkbox" id="Reflect.isExtensible" name="Reflect.isExtensible">Reflect.isExtensible</label></div><div class="feature"><label for="Reflect.ownKeys"><input type="checkbox" id="Reflect.ownKeys" name="Reflect.ownKeys">Reflect.ownKeys</label></div><div class="feature"><label for="Reflect.preventExtensions"><input type="checkbox" id="Reflect.preventExtensions" name="Reflect.preventExtensions">Reflect.preventExtensions</label></div><div class="feature"><label for="Reflect.set"><input type="checkbox" id="Reflect.set" name="Reflect.set">Reflect.set</label></div><div class="feature"><label for="Reflect.setPrototypeOf"><input type="checkbox" id="Reflect.setPrototypeOf" name="Reflect.setPrototypeOf">Reflect.setPrototypeOf</label></div><div class="feature"><label for="RegExp.prototype.@@matchAll"><input type="checkbox" id="RegExp.prototype.@@matchAll" name="RegExp.prototype.@@matchAll">RegExp.prototype.@@matchAll</label></div><div class="feature"><label for="RegExp.prototype.flags"><input type="checkbox" id="RegExp.prototype.flags" name="RegExp.prototype.flags">RegExp.prototype.flags</label></div><div class="feature"><label for="ResizeObserver"><input type="checkbox" id="ResizeObserver" name="ResizeObserver">ResizeObserver</label></div><div class="feature"><label for="Set"><input type="checkbox" id="Set" name="Set">Set</label></div><div class="feature"><label for="String.fromCodePoint"><input type="checkbox" id="String.fromCodePoint" name="String.fromCodePoint">String.fromCodePoint</label></div><div class="feature"><label for="String.prototype.@@iterator"><input type="checkbox" id="String.prototype.@@iterator" name="String.prototype.@@iterator">String.prototype.@@iterator</label></div><div class="feature"><label for="String.prototype.anchor"><input type="checkbox" id="String.prototype.anchor" name="String.prototype.anchor">String.prototype.anchor</label></div><div class="feature"><label for="String.prototype.at"><input type="checkbox" id="String.prototype.at" name="String.prototype.at">String.prototype.at</label></div><div class="feature"><label for="String.prototype.big"><input type="checkbox" id="String.prototype.big" name="String.prototype.big">String.prototype.big</label></div><div class="feature"><label for="String.prototype.blink"><input type="checkbox" id="String.prototype.blink" name="String.prototype.blink">String.prototype.blink</label></div><div class="feature"><label for="String.prototype.bold"><input type="checkbox" id="String.prototype.bold" name="String.prototype.bold">String.prototype.bold</label></div><div class="feature"><label for="String.prototype.codePointAt"><input type="checkbox" id="String.prototype.codePointAt" name="String.prototype.codePointAt">String.prototype.codePointAt</label></div><div class="feature"><label for="String.prototype.endsWith"><input type="checkbox" id="String.prototype.endsWith" name="String.prototype.endsWith">String.prototype.endsWith</label></div><div class="feature"><label for="String.prototype.fixed"><input type="checkbox" id="String.prototype.fixed" name="String.prototype.fixed">String.prototype.fixed</label></div><div class="feature"><label for="String.prototype.fontcolor"><input type="checkbox" id="String.prototype.fontcolor" name="String.prototype.fontcolor">String.prototype.fontcolor</label></div><div class="feature"><label for="String.prototype.fontsize"><input type="checkbox" id="String.prototype.fontsize" name="String.prototype.fontsize">String.prototype.fontsize</label></div><div class="feature"><label for="String.prototype.includes"><input type="checkbox" id="String.prototype.includes" name="String.prototype.includes">String.prototype.includes</label></div><div class="feature"><label for="String.prototype.italics"><input type="checkbox" id="String.prototype.italics" name="String.prototype.italics">String.prototype.italics</label></div><div class="feature"><label for="String.prototype.link"><input type="checkbox" id="String.prototype.link" name="String.prototype.link">String.prototype.link</label></div><div class="feature"><label for="String.prototype.matchAll"><input type="checkbox" id="String.prototype.matchAll" name="String.prototype.matchAll">String.prototype.matchAll</label></div><div class="feature"><label for="String.prototype.normalize"><input type="checkbox" id="String.prototype.normalize" name="String.prototype.normalize">String.prototype.normalize</label></div><div class="feature"><label for="String.prototype.padEnd"><input type="checkbox" id="String.prototype.padEnd" name="String.prototype.padEnd">String.prototype.padEnd</label></div><div class="feature"><label for="String.prototype.padStart"><input type="checkbox" id="String.prototype.padStart" name="String.prototype.padStart">String.prototype.padStart</label></div><div class="feature"><label for="String.prototype.repeat"><input type="checkbox" id="String.prototype.repeat" name="String.prototype.repeat">String.prototype.repeat</label></div><div class="feature"><label for="String.prototype.replaceAll"><input type="checkbox" id="String.prototype.replaceAll" name="String.prototype.replaceAll">String.prototype.replaceAll</label></div><div class="feature"><label for="String.prototype.small"><input type="checkbox" id="String.prototype.small" name="String.prototype.small">String.prototype.small</label></div><div class="feature"><label for="String.prototype.startsWith"><input type="checkbox" id="String.prototype.startsWith" name="String.prototype.startsWith">String.prototype.startsWith</label></div><div class="feature"><label for="String.prototype.strike"><input type="checkbox" id="String.prototype.strike" name="String.prototype.strike">String.prototype.strike</label></div><div class="feature"><label for="String.prototype.sub"><input type="checkbox" id="String.prototype.sub" name="String.prototype.sub">String.prototype.sub</label></div><div class="feature"><label for="String.prototype.sup"><input type="checkbox" id="String.prototype.sup" name="String.prototype.sup">String.prototype.sup</label></div><div class="feature"><label for="String.prototype.trim"><input type="checkbox" id="String.prototype.trim" name="String.prototype.trim">String.prototype.trim</label></div><div class="feature"><label for="String.prototype.trimEnd"><input type="checkbox" id="String.prototype.trimEnd" name="String.prototype.trimEnd">String.prototype.trimEnd</label></div><div class="feature"><label for="String.prototype.trimStart"><input type="checkbox" id="String.prototype.trimStart" name="String.prototype.trimStart">String.prototype.trimStart</label></div><div class="feature"><label for="String.raw"><input type="checkbox" id="String.raw" name="String.raw">String.raw</label></div><div class="feature"><label for="Symbol"><input type="checkbox" id="Symbol" name="Symbol">Symbol</label></div><div class="feature"><label for="Symbol.asyncIterator"><input type="checkbox" id="Symbol.asyncIterator" name="Symbol.asyncIterator">Symbol.asyncIterator</label></div><div class="feature"><label for="Symbol.hasInstance"><input type="checkbox" id="Symbol.hasInstance" name="Symbol.hasInstance">Symbol.hasInstance</label></div><div class="feature"><label for="Symbol.isConcatSpreadable"><input type="checkbox" id="Symbol.isConcatSpreadable" name="Symbol.isConcatSpreadable">Symbol.isConcatSpreadable</label></div><div class="feature"><label for="Symbol.iterator"><input type="checkbox" id="Symbol.iterator" name="Symbol.iterator">Symbol.iterator</label></div><div class="feature"><label for="Symbol.match"><input type="checkbox" id="Symbol.match" name="Symbol.match">Symbol.match</label></div><div class="feature"><label for="Symbol.matchAll"><input type="checkbox" id="Symbol.matchAll" name="Symbol.matchAll">Symbol.matchAll</label></div><div class="feature"><label for="Symbol.prototype.description"><input type="checkbox" id="Symbol.prototype.description" name="Symbol.prototype.description">Symbol.prototype.description</label></div><div class="feature"><label for="Symbol.replace"><input type="checkbox" id="Symbol.replace" name="Symbol.replace">Symbol.replace</label></div><div class="feature"><label for="Symbol.search"><input type="checkbox" id="Symbol.search" name="Symbol.search">Symbol.search</label></div><div class="feature"><label for="Symbol.species"><input type="checkbox" id="Symbol.species" name="Symbol.species">Symbol.species</label></div><div class="feature"><label for="Symbol.split"><input type="checkbox" id="Symbol.split" name="Symbol.split">Symbol.split</label></div><div class="feature"><label for="Symbol.toPrimitive"><input type="checkbox" id="Symbol.toPrimitive" name="Symbol.toPrimitive">Symbol.toPrimitive</label></div><div class="feature"><label for="Symbol.toStringTag"><input type="checkbox" id="Symbol.toStringTag" name="Symbol.toStringTag">Symbol.toStringTag</label></div><div class="feature"><label for="Symbol.unscopables"><input type="checkbox" id="Symbol.unscopables" name="Symbol.unscopables">Symbol.unscopables</label></div><div class="feature"><label for="TextEncoder"><input type="checkbox" id="TextEncoder" name="TextEncoder">TextEncoder</label></div><div class="feature"><label for="TypedArray.prototype.at"><input type="checkbox" id="TypedArray.prototype.at" name="TypedArray.prototype.at">TypedArray.prototype.at</label></div><div class="feature"><label for="URL"><input type="checkbox" id="URL" name="URL">URL</label></div><div class="feature"><label for="URL.prototype.toJSON"><input type="checkbox" id="URL.prototype.toJSON" name="URL.prototype.toJSON">URL.prototype.toJSON</label></div><div class="feature"><label for="UserTiming"><input type="checkbox" id="UserTiming" name="UserTiming">UserTiming</label></div><div class="feature"><label for="WeakMap"><input type="checkbox" id="WeakMap" name="WeakMap">WeakMap</label></div><div class="feature"><label for="WeakSet"><input type="checkbox" id="WeakSet" name="WeakSet">WeakSet</label></div><div class="feature"><label for="WebAnimations"><input type="checkbox" id="WebAnimations" name="WebAnimations">WebAnimations</label></div><div class="feature"><label for="Window"><input type="checkbox" id="Window" name="Window">Window</label></div><div class="feature"><label for="XMLHttpRequest"><input type="checkbox" id="XMLHttpRequest" name="XMLHttpRequest">XMLHttpRequest</label></div><div class="feature"><label for="atob"><input type="checkbox" id="atob" name="atob">atob</label></div><div class="feature"><label for="console"><input type="checkbox" id="console" name="console">console</label></div><div class="feature"><label for="console.assert"><input type="checkbox" id="console.assert" name="console.assert">console.assert</label></div><div class="feature"><label for="console.clear"><input type="checkbox" id="console.clear" name="console.clear">console.clear</label></div><div class="feature"><label for="console.count"><input type="checkbox" id="console.count" name="console.count">console.count</label></div><div class="feature"><label for="console.debug"><input type="checkbox" id="console.debug" name="console.debug">console.debug</label></div><div class="feature"><label for="console.dir"><input type="checkbox" id="console.dir" name="console.dir">console.dir</label></div><div class="feature"><label for="console.dirxml"><input type="checkbox" id="console.dirxml" name="console.dirxml">console.dirxml</label></div><div class="feature"><label for="console.error"><input type="checkbox" id="console.error" name="console.error">console.error</label></div><div class="feature"><label for="console.exception"><input type="checkbox" id="console.exception" name="console.exception">console.exception</label></div><div class="feature"><label for="console.group"><input type="checkbox" id="console.group" name="console.group">console.group</label></div><div class="feature"><label for="console.groupCollapsed"><input type="checkbox" id="console.groupCollapsed" name="console.groupCollapsed">console.groupCollapsed</label></div><div class="feature"><label for="console.groupEnd"><input type="checkbox" id="console.groupEnd" name="console.groupEnd">console.groupEnd</label></div><div class="feature"><label for="console.info"><input type="checkbox" id="console.info" name="console.info">console.info</label></div><div class="feature"><label for="console.log"><input type="checkbox" id="console.log" name="console.log">console.log</label></div><div class="feature"><label for="console.markTimeline"><input type="checkbox" id="console.markTimeline" name="console.markTimeline">console.markTimeline</label></div><div class="feature"><label for="console.profile"><input type="checkbox" id="console.profile" name="console.profile">console.profile</label></div><div class="feature"><label for="console.profileEnd"><input type="checkbox" id="console.profileEnd" name="console.profileEnd">console.profileEnd</label></div><div class="feature"><label for="console.profiles"><input type="checkbox" id="console.profiles" name="console.profiles">console.profiles</label></div><div class="feature"><label for="console.table"><input type="checkbox" id="console.table" name="console.table">console.table</label></div><div class="feature"><label for="console.time"><input type="checkbox" id="console.time" name="console.time">console.time</label></div><div class="feature"><label for="console.timeEnd"><input type="checkbox" id="console.timeEnd" name="console.timeEnd">console.timeEnd</label></div><div class="feature"><label for="console.timeStamp"><input type="checkbox" id="console.timeStamp" name="console.timeStamp">console.timeStamp</label></div><div class="feature"><label for="console.timeline"><input type="checkbox" id="console.timeline" name="console.timeline">console.timeline</label></div><div class="feature"><label for="console.timelineEnd"><input type="checkbox" id="console.timelineEnd" name="console.timelineEnd">console.timelineEnd</label></div><div class="feature"><label for="console.trace"><input type="checkbox" id="console.trace" name="console.trace">console.trace</label></div><div class="feature"><label for="console.warn"><input type="checkbox" id="console.warn" name="console.warn">console.warn</label></div><div class="feature"><label for="devicePixelRatio"><input type="checkbox" id="devicePixelRatio" name="devicePixelRatio">devicePixelRatio</label></div><div class="feature"><label for="document"><input type="checkbox" id="document" name="document">document</label></div><div class="feature"><label for="document.currentScript"><input type="checkbox" id="document.currentScript" name="document.currentScript">document.currentScript</label></div><div class="feature"><label for="document.elementsFromPoint"><input type="checkbox" id="document.elementsFromPoint" name="document.elementsFromPoint">document.elementsFromPoint</label></div><div class="feature"><label for="document.getElementsByClassName"><input type="checkbox" id="document.getElementsByClassName" name="document.getElementsByClassName">document.getElementsByClassName</label></div><div class="feature"><label for="document.head"><input type="checkbox" id="document.head" name="document.head">document.head</label></div><div class="feature"><label for="document.querySelector"><input type="checkbox" id="document.querySelector" name="document.querySelector">document.querySelector</label></div><div class="feature"><label for="document.visibilityState"><input type="checkbox" id="document.visibilityState" name="document.visibilityState">document.visibilityState</label></div><div class="feature"><label for="fetch"><input type="checkbox" id="fetch" name="fetch">fetch</label></div><div class="feature"><label for="getComputedStyle"><input type="checkbox" id="getComputedStyle" name="getComputedStyle">getComputedStyle</label></div><div class="feature"><label for="globalThis"><input type="checkbox" id="globalThis" name="globalThis">globalThis</label></div><div class="feature"><label for="localStorage"><input type="checkbox" id="localStorage" name="localStorage">localStorage</label></div><div class="feature"><label for="location.origin"><input type="checkbox" id="location.origin" name="location.origin">location.origin</label></div><div class="feature"><label for="matchMedia"><input type="checkbox" id="matchMedia" name="matchMedia">matchMedia</label></div><div class="feature"><label for="navigator.geolocation"><input type="checkbox" id="navigator.geolocation" name="navigator.geolocation">navigator.geolocation</label></div><div class="feature"><label for="navigator.sendBeacon"><input type="checkbox" id="navigator.sendBeacon" name="navigator.sendBeacon">navigator.sendBeacon</label></div><div class="feature"><label for="performance.now"><input type="checkbox" id="performance.now" name="performance.now">performance.now</label></div><div class="feature"><label for="queueMicrotask"><input type="checkbox" id="queueMicrotask" name="queueMicrotask">queueMicrotask</label></div><div class="feature"><label for="requestAnimationFrame"><input type="checkbox" id="requestAnimationFrame" name="requestAnimationFrame">requestAnimationFrame</label></div><div class="feature"><label for="requestIdleCallback"><input type="checkbox" id="requestIdleCallback" name="requestIdleCallback">requestIdleCallback</label></div><div class="feature"><label for="screen.orientation"><input type="checkbox" id="screen.orientation" name="screen.orientation">screen.orientation</label></div><div class="feature"><label for="setImmediate"><input type="checkbox" id="setImmediate" name="setImmediate">setImmediate</label></div><div class="feature"><label for="smoothscroll"><input type="checkbox" id="smoothscroll" name="smoothscroll">smoothscroll</label></div><div class="feature"><label for="~html5-elements"><input type="checkbox" id="~html5-elements" name="~html5-elements">~html5-elements</label></div><div class="feature"><label for="~viewport"><input type="checkbox" id="~viewport" name="~viewport">~viewport</label></div></div></fieldset></form><button class="contrast switcher theme-switcher" aria-label="Turn on dark mode"><i>Turn on dark mode</i></button></main><script>/* eslint-env browser */
const createPolyfillBundleURL = options => {
const parameters = {};
const gated = options.gated ? true : false;
const always = options.always ? true : false;
if (gated && always) {
parameters.flags = "gated,always";
} else if (gated) {
parameters.flags = "gated";
} else if (always) {
parameters.flags = "always";
}
if (options.version) {
parameters.version = options.version;
}
if (options.callback) {
parameters.callback = options.callback;
}
if (options.rum) {
parameters.rum = options.rum;
}
if (options.features.length > 0) {
parameters.features = options.features.join(",");
}
const minified = options.minified ? true : false;
const extension = minified ? ".min.js" : ".js";
return Object.keys(parameters).length > 0 ? `${location.protocol}//${location.host}/v3/polyfill${extension}?${new URLSearchParams(parameters).toString()}` : `${location.protocol}//${location.host}/v3/polyfill${extension}`;
};
const updatePolyfillBundle = options => {
const bundleURLNode = document.querySelector("#polyfill-bundle-url");
bundleURLNode.textContent = createPolyfillBundleURL(options);
};
const defaultPolyfillBundleOptions = {
minified: true,
gated: false,
always: false,
rum: 0,
features: [],
callback: "",
version: ""
};
const polyfillBundleOptions = Object.assign({}, defaultPolyfillBundleOptions);
const renderFeatureList = ({ polyfillAliases, polyfills }) => {
let html = "";
for (const [alias, polyfills] of Object.entries(polyfillAliases)) {
html += `<div class="feature">
<label for="${alias}">
<input type="checkbox" id="${alias}" name="${alias}">
${alias}
</label>
<details class="alias">
<summary>Included Polyfills</summary>
<ul>
${polyfills.map(polyfill => `<li>${polyfill}</li>`).join('')}
</ul>
</details>
</div>`;
}
for (const polyfill of polyfills) {
html += `<div class="feature">
<label for="${polyfill}">
<input type="checkbox" id="${polyfill}" name="${polyfill}">
${polyfill}
</label>
</div>`;
}
return html;
};
const libraryVersionInput = document.querySelector("#library-version");
if (libraryVersionInput) {
libraryVersionInput.addEventListener("change", async event => {
const version = event.target.value;
// if version is not selected, get the data for the latest version
const response = await fetch(`/v3/json/library-${version || event.target.options[1].value}.json`);
if (response.ok) {
const data = await response.json();
featuresList.innerHTML = renderFeatureList(data);
[...featuresList.querySelectorAll("input")].forEach(node => {
node.addEventListener("change", updateFeaturesListFromEvent);
});
polyfillBundleOptions.features = [];
polyfillBundleOptions.version = version;
updatePolyfillBundle(polyfillBundleOptions);
// reset the polyfill name filter.
document.querySelector("#filter-polyfills").value = '';
}
});
}
function featureNodes() {
return [...document.querySelectorAll("#features-list .feature")]
}
function resetFeaturesList() {
return featureNodes().forEach(function(node) {
node.style.display="";
});
}
function filterFeatures(event) {
let inputValue = event.target.value;
if (event.type === "paste") {
const clipboardData = event.clipboardData || window.clipboardData;
inputValue = clipboardData.getData("Text");
}
if (inputValue === "") {
resetFeaturesList();
} else {
const featuresByName = {}
const featuresRows = featureNodes();
featuresRows.forEach(node => {
featuresByName[node.children[0].getAttribute('for')] = node;
});
Object.entries(featuresByName).forEach(function([key, node]) {
if (key.toLowerCase().includes(inputValue.toLowerCase())) {
node.style.display="";
} else {
node.style.display="none";
}
});
}
}
const filterInput = document.querySelector("#filter-polyfills");
filterInput?.addEventListener("keyup", filterFeatures);
filterInput?.addEventListener("paste", filterFeatures);
const callbackInput = document.querySelector("#callback");
callbackInput?.addEventListener("keyup", updateCallback);
callbackInput?.addEventListener("paste", updateCallback);
function updateCallback(event) {
let inputValue = event.target.value;
if (event.type === "paste") {
const clipboardData = event.clipboardData || window.clipboardData;
inputValue = clipboardData.getData("Text");
}
polyfillBundleOptions.callback = inputValue;
updatePolyfillBundle(polyfillBundleOptions);
}
const addFeatureToList = (list, feature) => {
if (!list.includes(feature)) {
list.push(feature);
}
};
const removeFeatureToList = (list, feature) => {
const index = list.indexOf(feature);
if (index !== -1) {
list.splice(index, 1);
}
};
const updateFeaturesListFromEvent = event => {
if (event.target.checked) {
addFeatureToList(polyfillBundleOptions.features, event.target.name);
} else {
removeFeatureToList(polyfillBundleOptions.features, event.target.name);
}
updatePolyfillBundle(polyfillBundleOptions);
};
const featuresList = document.querySelector("#features-list");
if (featuresList) {
[...featuresList.querySelectorAll("input")].forEach(node => {
node.addEventListener("change", updateFeaturesListFromEvent);
});
}
</script><script defer="">'use strict';
!function () {
var e = {
_scheme: 'auto',
change: {
light: '<i>Turn on dark mode</i>',
dark: '<i>Turn off dark mode</i>'
},
buttonsTarget: '.theme-switcher',
localStorageKey: 'picoPreferredColorScheme',
init() {
this.scheme = this.schemeFromLocalStorage,
this.initSwitchers()
},
get schemeFromLocalStorage() {
return void 0 !== window.localStorage &&
null !== window.localStorage.getItem(this.localStorageKey) ? window.localStorage.getItem(this.localStorageKey) : this._scheme
},
get preferredColorScheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
},
initSwitchers() {
document.querySelectorAll(this.buttonsTarget).forEach(e => {
e.addEventListener('click', () => {
'dark' == this.scheme ? this.scheme = 'light' : this.scheme = 'dark'
}, !1)
})
},
addButton(e) {
var t = document.createElement(e.tag);
t.className = e.class,
document.querySelector(e.target).appendChild(t)
},
set scheme(e) {
'auto' == e ? 'dark' == this.preferredColorScheme ? this._scheme = 'dark' : this._scheme = 'light' : 'dark' != e &&
'light' != e ||
(this._scheme = e),
this.applyScheme(),
this.schemeToLocalStorage()
},
get scheme() {
return this._scheme
},
applyScheme() {
document.querySelector('html').setAttribute('data-theme', this.scheme),
document.querySelectorAll(this.buttonsTarget).forEach(e => {
var t = 'dark' == this.scheme ? this.change.dark : this.change.light;
e.innerHTML = t,
e.setAttribute('aria-label', t.replace(/<[^>]*>?/gm, ''))
})
},
schemeToLocalStorage() {
void 0 !== window.localStorage &&
window.localStorage.setItem(this.localStorageKey, this.scheme)
}
};
e.addButton({
tag: 'BUTTON',
class: 'contrast switcher theme-switcher',
target: 'body'
}),
e.init()
}();</script><button class="contrast switcher theme-switcher" aria-label="Turn on dark mode"><i>Turn on dark mode</i></button></body></html>