CINXE.COM

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="robots" content="noodp"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover"> <meta name="theme-color" content="hsl(203.6, 100%, 12%)"> <title> CSS | WebKit</title> <meta name="application-name" content="WebKit"> <link rel="stylesheet" type="text/css" href="https://webkit.org/wp-content/themes/webkit/style.css?2022100501" media="all"> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css"> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Mono,v2" type="text/css"> <meta name="supported-color-schemes" content="light dark"> <noscript> <img src="https://shynet.webkit.org/ingress/561b9e53-fb8c-4297-ae4d-bde05e8daa59/pixel.gif"> </noscript> <script defer src="https://shynet.webkit.org/ingress/561b9e53-fb8c-4297-ae4d-bde05e8daa59/script.js"></script> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://webkit.org/feed/"> <link rel="alternate" type="text/xml" title="RSS .92" href="https://webkit.org/feed/rss/"> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="https://webkit.org/feed/atom/"> <link rel="pingback" href="https://webkit.org/wp/xmlrpc.php"> <link rel="shortcut icon" sizes="32x32" type="image/x-icon" href="/favicon.ico"> <meta name='robots' content='max-image-preview:large' /> <link rel="alternate" type="application/rss+xml" title="WebKit » CSS Category Feed" href="https://webkit.org/blog/category/css/feed/" /> <link rel='stylesheet' id='wp-block-library-css' href='https://webkit.org/wp/wp-includes/css/dist/block-library/style.min.css?ver=6.7' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://webkit.org/wp/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7" />  <meta itemprop="name" content="WebKit Blog Category: <span>CSS</span>"> <meta itemprop="description" content="A collection of WebKit blog posts.">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image:src" content="https://webkit.org/wp-content/themes/webkit/images/twitter-card.png"> <meta name="twitter:site" content="@webkit"> <meta name="twitter:title" content="WebKit Blog Category: <span>CSS</span>"> <meta name="twitter:description" content="A collection of WebKit blog posts.">  <meta property="og:title" content="WebKit Blog Category: <span>CSS</span>"> <meta property="og:type" content="website"> <meta property="og:url" content="https://webkit.org/blog/category/css/"> <meta property="og:description" content="A collection of WebKit blog posts."> <meta property="og:site_name" content="WebKit"> <meta property="fb:admins" content="1085088865"> </head> <body class="archive category category-css category-36">  <svg xmlns="http://www.w3.org/2000/svg"> <style> svg { display: block; width: 0; height: 0; } </style> <filter id="invertLightness" x="0" y="0" style="color-interpolation-filters: sRGB"> <feColorMatrix type="matrix" in="SourceGraphic" result="red" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1" /> <feColorMatrix type="matrix" in="SourceGraphic" result="green" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1" /> <feColorMatrix type="matrix" in="SourceGraphic" result="blue" values="0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1" /> <feBlend in="red" in2="green" mode="lighten" result="maxyellow" /> <feBlend in="maxyellow" in2="blue" mode="lighten" result="max" /> <feBlend in="red" in2="green" mode="darken" result="minyellow" /> <feBlend in="minyellow" in2="blue" mode="darken" result="min" /> <feComponentTransfer result="adjustment" in="min"> <feFuncR type="linear" intercept="1" slope="-1" /> <feFuncG type="linear" intercept="1" slope="-1" /> <feFuncB type="linear" intercept="1" slope="-1" /> </feComponentTransfer> <feComposite operator="arithmetic" in="SourceGraphic" in2="adjustment" k1="0" k2="1" k3="1" k4="-1" result="channelAdjustment" /> <feComposite operator="arithmetic" in="channelAdjustment" in2="max" k1="0" k2="1" k3="-1" k4="1" result="finalColors" /> <feComposite operator="in" in="finalColors" in2="SourceAlpha" /> </filter> </svg> <header aria-label="WebKit.org Header" id="header"> <div class="page-width"> <a href="/"><div id="logo" class="site-logo">WebKit</div></a> <nav id="site-nav" aria-label="Site Menu"> <div class="menu-main-menu-container"><input type="checkbox" id="menu-main-menu-toggle" class="menu-toggle" /><label for="menu-main-menu-toggle" class="label-toggle main-menu" data-open="Main Menu" data-close="Close Menu"></label><ul id="menu-main-menu" class="menu" role="menubar"><li id="menu-item-6091" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6091"><a href="https://webkit.org/downloads/" role="menuitem">Downloads</a></li> <li id="menu-item-4272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4272"><input type="checkbox" id="toggle-4272" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4272" aria-controls="sub-menu-for-4272" aria-expanded="true"><label for="toggle-4272" class="label-toggle">Feature Status</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4272"> <li id="menu-item-13052" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13052"><a href="https://webkit.org/css-status/" role="menuitem">CSS Features</a></li> <li id="menu-item-14388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14388"><a href="https://webkit.org/standards-positions/" role="menuitem">Standards Positions</a></li> </ul> </li> <li id="menu-item-9988" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9988"><input type="checkbox" id="toggle-9988" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-9988" aria-controls="sub-menu-for-9988" aria-expanded="true"><label for="toggle-9988" class="label-toggle">Documentation</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-9988"> <li id="menu-item-9989" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9989"><a href="/web-inspector" role="menuitem">Web Inspector</a></li> <li id="menu-item-10868" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10868"><a href="https://webkit.org/tracking-prevention/" role="menuitem">Tracking Prevention</a></li> </ul> </li> <li id="menu-item-4282" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-4282"><input type="checkbox" id="toggle-4282" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4282" aria-controls="sub-menu-for-4282" aria-expanded="true"><label for="toggle-4282" class="label-toggle">Policies</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4282"> <li id="menu-item-10037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10037"><a href="https://webkit.org/project/" role="menuitem">Project Goals</a></li> <li id="menu-item-13077" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13077"><a href="https://webkit.org/bug-prioritization/" role="menuitem">Bug Prioritization</a></li> <li id="menu-item-13076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13076"><a href="https://webkit.org/bug-report-guidelines/" role="menuitem">Bug Report Guidelines</a></li> <li id="menu-item-13075" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13075"><a href="https://webkit.org/code-style-guidelines/" role="menuitem">Code Style Guidelines</a></li> <li id="menu-item-13074" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13074"><a href="https://webkit.org/commit-and-review-policy/" role="menuitem">Commit and Review Policy</a></li> <li id="menu-item-13073" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13073"><a href="https://webkit.org/feature-policy/" role="menuitem">Feature Policy</a></li> <li id="menu-item-13072" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13072"><a href="https://webkit.org/security-policy/" role="menuitem">Security Policy</a></li> <li id="menu-item-13071" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13071"><a href="https://webkit.org/tracking-prevention-policy/" role="menuitem">Tracking Prevention Policy</a></li> </ul> </li> <li id="menu-item-4274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4274"><input type="checkbox" id="toggle-4274" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4274" aria-controls="sub-menu-for-4274" aria-expanded="true"><label for="toggle-4274" class="label-toggle">Contribute</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4274"> <li id="menu-item-4277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4277"><a href="https://webkit.org/getting-started/" role="menuitem">Getting Started</a></li> <li id="menu-item-4284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4284"><a href="https://webkit.org/contributing-code/" role="menuitem">Contributing Code</a></li> <li id="menu-item-4281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4281"><a href="https://webkit.org/testing-contributions/" role="menuitem">Testing Contributions</a></li> <li id="menu-item-4273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4273"><a href="https://webkit.org/reporting-bugs/" role="menuitem">How to Report Bugs</a></li> <li id="menu-item-4278" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4278"><a href="https://github.com/WebKit/WebKit" role="menuitem">GitHub Repository</a></li> </ul> </li> <li id="menu-item-4270" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent current-menu-ancestor current-menu-parent current_page_ancestor menu-item-has-children menu-item-4270"><input type="checkbox" id="toggle-4270" class="menu-toggle" /><a href="#nav-sub-menu" role="menuitem" aria-haspopup="true" aria-owns="sub-menu-for-4270" aria-controls="sub-menu-for-4270" aria-expanded="true"><label for="toggle-4270" class="label-toggle">Blog</label></a> <ul class="sub-menu sub-menu-layer" role="menu" id="sub-menu-for-4270"> <li id="menu-item-13057" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13057"><a href="https://webkit.org/blog/category/news/" role="menuitem">News Posts</a></li> <li id="menu-item-13058" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-13058"><a href="https://webkit.org/blog/category/css/" role="menuitem">CSS Posts</a></li> <li id="menu-item-13063" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13063"><a href="https://webkit.org/blog/category/contributing/" role="menuitem">Contributing Posts</a></li> <li id="menu-item-13062" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13062"><a href="https://webkit.org/blog/category/privacy/" role="menuitem">Privacy Posts</a></li> <li id="menu-item-13060" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13060"><a href="https://webkit.org/blog/category/performance/" role="menuitem">Performance Posts</a></li> <li id="menu-item-13061" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13061"><a href="https://webkit.org/blog/category/javascript/" role="menuitem">JavaScript Posts</a></li> <li id="menu-item-13056" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13056"><a href="https://webkit.org/blog/category/standards/" role="menuitem">Standards Posts</a></li> <li id="menu-item-13059" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13059"><a href="https://webkit.org/blog/category/web-inspector/" role="menuitem">Web Inspector Posts</a></li> <li id="menu-item-13055" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13055"><a href="https://webkit.org/blog/category/safari-technology-preview/" role="menuitem">Safari Technology Preview Posts</a></li> </ul> </li> <li><form action="/" method="get"><input type="search" name="s" class="search-input" value=""></form></li></ul></div></nav> </div> </header> <main id="content"> <div class="page-width">  <svg id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <style> svg,symbol { color: currentColor; } </style> <defs> <symbol id="default"> <path d="M 24 45.7600002 L 24 45.7600002 C 36.0177159 45.7600002 45.7599999 36.0177161 45.7599999 24.0000001 C 45.7599999 11.9822838 36.0177159 2.24000001 24 2.24000001 C 11.9822838 2.24000001 2.23999999 11.9822838 2.23999999 24.0000001 C 2.23999999 36.0177161 11.9822838 45.7600002 24 45.7600002 L 24 45.7600002 L 24 45.7600002 L 24 45.7600002 Z M 24 48 L 24 48 C 10.745166 48 8.52651283e-14 37.254834 8.52651283e-14 24.0000001 C 8.52651283e-14 10.745166 10.745166 0 24 0 C 37.254834 0 48 10.745166 48 24.0000001 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/> <path d="M 19.2141787 30.7527044 C 20.0566026 31.3582067 21.0164459 31.8087988 22.052466 32.0629879 L 24.0150243 38.3621108 L 25.9644157 32.0671275 C 28.9532689 31.3397602 31.304042 28.97474 32.0270276 25.9677724 L 38.2840894 24.0065666 L 32.38318 22.1457238 L 30.1049072 24.2136546 C 29.9995478 27.5073249 27.2907334 30.1510903 24.0134391 30.1359337 C 23.1661809 30.1431339 22.3840431 29.959524 21.6645278 29.6641888 L 19.2141787 30.7527044 L 19.2141787 30.7527044 L 19.2141787 30.7527044 Z M 28.8019182 17.2563866 C 27.4120183 16.2548466 25.9438825 15.9331447 25.9438825 15.9331447 L 23.9849759 9.63788916 L 22.0355845 15.9328727 C 19.0467312 16.6602398 16.695958 19.0252601 15.9729726 22.0322277 L 9.71591065 23.9934336 C 9.71591065 23.9934336 13.7573684 25.2679011 15.7780972 25.9051349 L 17.8923556 23.9486543 C 17.9116726 20.5783691 20.6200789 17.8803136 23.9912031 17.8674375 C 24.8266313 17.8130168 26.1806153 18.2277657 26.3381938 18.3358993 C 26.3381937 18.3358993 28.8019182 17.2563866 28.8019182 17.2563866 L 28.8019182 17.2563866 L 28.8019182 17.2563866 Z" fill="currentColor"/> <path d="M 22.4528571 21.5612813 L 10.1267612 32.8610634 L 25.4820204 26.3285511 L 37.8732388 15.1389366 L 22.4528571 21.5612813 L 22.4528571 21.5612813 L 22.4528571 21.5612813 Z" fill="currentColor"/> </symbol> <symbol id="performance"> <path d="M 24 45.76 L 24 45.76 C 36.0177161 45.76 45.76 36.0177162 45.76 24 C 45.76 11.9822838 36.0177161 2.24 24 2.24 C 11.9822838 2.24 2.24 11.9822838 2.24 24 C 2.24 36.0177162 11.9822838 45.76 24 45.76 L 24 45.76 L 24 45.76 L 24 45.76 Z M 24 48 L 24 48 C 10.745166 48 -1.77635684e-14 37.254834 -1.77635684e-14 24 C -1.77635684e-14 10.745166 10.745166 2.84217094e-14 24 2.84217094e-14 C 37.254834 2.84217094e-14 48 10.745166 48 24 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/> <path d="M 25.4586474 22.9633529 L 36.6273818 12.9367924 L 19.3784717 20.0882179 L 22.54035 25.0378408 L 11.3720064 35.0646845 L 28.6179627 27.9103051 L 25.4586474 22.9633529 L 25.4586474 22.9633529 Z" fill="currentColor"/> </symbol> <symbol id="web-inspector"> <path d="M 28.5 25.5 L 48 25.5 L 48 23 L 28.5 23 L 28.5 25.5" fill="currentColor"/> <path d="M 23 28.5 L 23 48 L 25.5 48 L 25.5 28.5 L 23 28.5" fill="currentColor"/> <path d="M 0 25.5 L 19.5 25.5 L 19.5 23 L 5.99520433e-15 23 L 0 25.5" fill="currentColor"/> <path d="M 23 0 L 23 19.5 L 25.5 19.5 L 25.5 0 L 23 0" fill="currentColor"/> <circle stroke="currentColor" fill="none" stroke-width="2.5" cx="24" cy="24" r="18"/> </symbol> <symbol id="javascript"> <path d="M 11.4057939 18.0146224 C 12.1528885 17.323319 13.14598 16.88131 14.2562501 16.88131 C 16.6587038 16.88131 18.5125003 18.9853621 18.5125003 21.1375602 C 18.5125003 21.1375602 20.178953 19.4758651 21.0121793 18.6450175 C 23.6138782 16.0507463 28.817276 10.8622038 28.817276 10.8622038 C 28.817276 10.8622038 39.1931445 22.2383022 39.5748423 22.7381568 C 40.0895548 23.4122017 41.2154452 24.6437363 41.2154452 26.8207002 C 41.2154452 27.9043457 40.7691081 28.9601004 40.0240604 29.7480538 C 39.2725506 30.5428415 23.5041804 46.2228621 24.256517 45.5146369 C 25.0871144 44.7325638 25.6062505 43.6260296 25.6062505 42.4188109 C 25.6062505 40.105895 24.4995839 38.9998346 23.9516194 38.3444074 C 23.9377433 38.32781 23.4369464 37.7753288 22.6469581 36.9043367 L 17.0937502 42.4188109 C 17.0937502 44.7694729 18.9993383 46.675061 21.3500004 46.675061 C 22.4737422 46.675061 23.4957691 46.2309411 24.256517 45.5146369 L 24.256517 45.5146368 C 24.2567055 45.5144594 24.256895 45.5142809 24.2570855 45.5141014 C 25.0873513 44.7320588 25.6062505 43.6257541 25.6062505 42.4188109 C 25.6062505 40.105895 24.4995839 38.9998346 23.9516194 38.3444074 C 23.4036549 37.6889802 12.6902909 25.9456715 11.9591809 25.1002579 C 11.2280709 24.2548443 10 23.3242225 10 21.1375602 C 10 19.9614421 10.5362909 18.819193 11.4057939 18.0146224 C 10.5362926 18.8191912 26.254167 3.0662162 27.2247918 2.26492532 C 27.9645636 1.65421303 28.8917931 1.2750595 29.8625007 1.2750595 C 32.1068344 1.2750595 34.1634331 3.37253043 34.1634331 5.53130965 L 18.5125003 21.1375602 C 18.5125003 18.9853621 16.6587038 16.88131 14.2562501 16.88131 C 13.1459801 16.88131 12.1528886 17.323319 11.405794 18.0146222 Z" stroke="currentColor" stroke-width="2.5" fill="none"/> </symbol> <symbol id="css"> <path d="M 34.3509426 18.7507162 C 32.564454 17.6916021 31.096954 15.1643395 31.0728076 13.0728197 L 30.9858202 5.538126 C 30.9618449 3.46142442 32.3778969 2.62894951 34.1771329 3.69562079 L 40.6588754 7.538301 C 42.445364 8.597415 43.912864 11.1246777 43.9370104 13.2161974 L 44.0239979 20.7508912 C 44.0479731 22.8275927 42.6319212 23.6600677 40.8326851 22.5933964 L 34.3509426 18.7507162 L 34.3509426 18.7507162 L 34.3509426 18.7507162 Z" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 22.3883659 25.2906441 C 20.6046264 24.23316 19.1392369 21.6969806 19.1152755 19.6214854 L 18.9412495 4.54767084 C 18.9173111 2.47416506 20.3422003 1.64950223 22.1276511 2.70800103 L 35.0949445 10.3956191 C 36.8786839 11.4531034 38.3440734 13.9892828 38.3680349 16.064778 L 38.5420608 31.1385925 C 38.5659993 33.2120983 37.14111 34.0367611 35.3556591 32.9782623 L 22.3883659 25.2906441 L 22.3883659 25.2906441 L 22.3883659 25.2906441 Z" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 8.57225363 34.8880373 C 6.19393433 33.4780584 4.24008165 30.0964858 4.2081331 27.3291589 L 3.97609854 7.2307395 C 3.94418061 4.46606514 5.84403281 3.36651469 8.224634 4.77784643 L 25.5143585 15.0280039 C 27.8926778 16.4379829 29.8465304 19.8195554 29.8784789 22.5868824 L 30.1105135 42.6853018 C 30.1424314 45.4499761 28.2425793 46.5495265 25.861978 45.1381948 L 8.57225363 34.8880373 L 8.57225363 34.8880373 L 8.57225363 34.8880373 Z" stroke="currentColor" stroke-width="2.5" fill="none"/> </symbol> <symbol id="standards"> <path d="M 8.20156221 41.7446204 L 4.60455725 1.39999998 L 44.1294427 1.39999998 L 40.5286241 41.7383005 L 24.34281 46.2255399 L 8.20156221 41.7446204 Z" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 42.0710239 24.0177617 C 39.1538386 16.9070258 32.1617573 11.8990479 24 11.8990479 C 16.3635634 11.8990479 9.75107907 16.2831086 6.54212676 22.6716502" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 30.9761247 44.4830419 C 32.2260967 41.0462637 32.9749756 36.6675422 32.9749756 31.8990479 C 32.9749756 20.8533529 28.9567421 11.8990479 24 11.8990479 C 19.0432579 11.8990479 15.0250244 20.8533529 15.0250244 31.8990479 C 15.0250244 36.5317055 15.7318455 40.7964804 16.9182797 44.1870585 L 16.9182797 44.1870585" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 6.58618164 23.392334 C 6.58618164 25.4881886 14.5338788 27.1872144 24.3378601 27.1872144 C 34.1418414 27.1872144 42.0895386 25.4881886 42.0895386 23.392334" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 7.57792629 35.5492537 C 10.9596878 37.443268 17.049483 38.7070228 24 38.7070228 C 31.5250917 38.7070228 38.041274 37.2256916 41.204187 35.0669761" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 24.25 12.9990234 L 24.25 45" stroke="currentColor" stroke-width="2.5" fill="none"/> </symbol> <symbol id="contributing"> <path d="M 24 45.76 L 24 45.76 C 36.0177161 45.76 45.76 36.0177162 45.76 24 C 45.76 11.9822838 36.0177161 2.24 24 2.24 C 11.9822838 2.24 2.24 11.9822838 2.24 24 C 2.24 36.0177162 11.9822838 45.76 24 45.76 L 24 45.76 L 24 45.76 L 24 45.76 Z M 24 48 L 24 48 C 10.745166 48 -1.77635684e-14 37.254834 -1.77635684e-14 24 C -1.77635684e-14 10.745166 10.745166 2.84217094e-14 24 2.84217094e-14 C 37.254834 2.84217094e-14 48 10.745166 48 24 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/> <path d="M 29.4897098 23.3065925 L 26.2706917 20.9393745 L 26.6482584 24.3031351 L 28.4802897 29.4247528 L 29.4897098 33.8205977 L 30.4989581 29.4247528 L 32.3309894 24.3031351 L 32.7087278 20.9393745 L 29.4897098 23.3065925 Z M 18.8503641 23.3065925 L 15.631346 20.9393745 L 16.0090845 24.3031351 L 17.8411157 29.4247528 L 18.8503641 33.8205977 L 19.8597841 29.4247528 L 21.6916437 24.3031351 L 22.0693821 20.9393745 L 18.8503641 23.3065925 Z M 37.2876041 24.3031351 L 39.1196354 29.4247528 L 40.3400738 34.740219 L 38.3454433 35 L 36.6368638 29.562799 C 36.6368638 29.562799 34.8092967 25.6310573 34.8092967 25.4866582 C 34.8092967 25.6310573 32.9819013 29.562799 32.9819013 29.562799 L 31.2733218 35 L 29.4897098 34.7676909 L 27.7060977 35 L 25.9975182 29.562799 C 25.9975182 29.562799 24.1701228 25.6310573 24.1701228 25.4866582 C 24.1701228 25.6310573 22.3425557 29.562799 22.3425557 29.562799 L 20.6339762 35 L 18.8503641 34.7676909 L 17.066752 35 L 15.3581725 29.562799 C 15.3581725 29.562799 13.5307771 25.6310573 13.5307771 25.4866582 C 13.5307771 25.6310573 11.7033817 29.562799 11.7033817 29.562799 L 9.9946305 35 L 8 34.740219 L 9.22043846 29.4247528 L 11.0524697 24.3031351 L 11.4302081 20.9393745 L 8.21101841 23.3065925 L 8.21101841 21.228001 L 11.6719607 18.326455 L 12.3810787 18.2218901 L 12.3810787 17.9233051 C 11.4619725 17.51054 10.825655 16.6183906 10.825655 15.5839024 C 10.825655 14.156738 12.0368217 13 13.5307771 13 C 15.0247325 13 16.2358992 14.156738 16.2358992 15.5839024 C 16.2358992 16.6183906 15.5995817 17.51054 14.6804755 17.9233051 L 14.6804755 18.2218901 L 15.3895935 18.326455 L 18.8503641 21.228001 L 22.3113064 18.326455 L 23.0204244 18.2218901 L 23.0204244 17.9233051 C 22.1013182 17.51054 21.4650007 16.6183906 21.4650007 15.5839024 C 21.4650007 14.156738 22.6761674 13 24.1701228 13 C 25.6640782 13 26.8750732 14.156738 26.8750732 15.5839024 C 26.8750732 16.6183906 26.2387556 17.51054 25.3198211 17.9233051 L 25.3198211 18.2218901 L 26.0289391 18.326455 L 29.4897098 21.228001 L 32.9504804 18.326455 L 33.6595984 18.2218901 L 33.6595984 17.9233051 C 32.7406639 17.51054 32.1043463 16.6183906 32.1043463 15.5839024 C 32.1043463 14.156738 33.3153413 13 34.8092967 13 C 36.3034238 13 37.5142471 14.156738 37.5144188 15.5839024 C 37.5144188 16.6183906 36.8781013 17.51054 35.9591668 17.9233051 L 35.9591668 18.2218901 L 36.6682848 18.326455 L 40.1290554 21.228001 L 40.1290554 23.3065925 L 36.9100374 20.9393745 L 37.2876041 24.3031351 Z" fill="currentColor"/> </symbol> <symbol id="storage"> <path d="M 39.9236499 31.5126111 C 41.869091 32.6498521 43 34.0625041 43 35.6923077 C 43 40.1632127 34.4896382 43 24 43 C 13.5103618 43 5 40.1632127 5 35.6923077 C 5 34.0625041 6.130909 32.6498521 8.07635005 31.5126111 C 9.14708175 31.9858647 10.3798534 32.4104194 11.7445378 32.7755154 C 9.22593316 33.7562269 7.92307692 34.9214488 7.92307692 35.6923077 C 7.92307692 36.4947878 9.3350136 37.7246485 12.0606138 38.728817 C 15.168606 39.8738668 19.433505 40.5384615 24 40.5384615 C 28.566495 40.5384615 32.831394 39.8738668 35.9393862 38.728817 C 38.6649864 37.7246485 40.0769231 36.4947878 40.0769231 35.6923077 C 40.0769231 34.9214488 38.7740668 33.7562269 36.2554622 32.7755154 C 37.6201466 32.4104194 38.8529182 31.9858647 39.9236499 31.5126111 Z M 39.9236499 19.8203034 C 41.869091 20.9575444 43 22.3701964 43 24 C 43 28.470905 34.4896382 31.3076923 24 31.3076923 C 13.5103618 31.3076923 5 28.470905 5 24 C 5 22.3701964 6.130909 20.9575444 8.07635005 19.8203034 C 9.06881359 20.2589632 10.2004933 20.6557834 11.4473978 21.0021956 C 9.12353139 22.0250817 7.92307692 23.2072017 7.92307692 24 C 7.92307692 24.8598001 9.3350136 26.177508 12.0606138 27.2534028 C 15.168606 28.4802419 19.433505 29.1923077 24 29.1923077 C 28.566495 29.1923077 32.831394 28.4802419 35.9393862 27.2534028 C 38.6649864 26.177508 40.0769231 24.8598001 40.0769231 24 C 40.0769231 23.2072017 38.8764686 22.0250817 36.5526022 21.0021956 C 37.7995067 20.6557834 38.9311864 20.2589632 39.9236499 19.8203034 Z M 43 12.3076923 C 43 7.83678727 34.4896382 5 24 5 C 13.5103618 5 5 7.83678727 5 12.3076923 C 5 16.7785973 13.5103618 19.6153846 24 19.6153846 C 34.4896382 19.6153846 43 16.7785973 43 12.3076923 Z M 12.0606138 15.3442016 C 9.3350136 14.3400331 7.92307692 13.1101724 7.92307692 12.3076923 C 7.92307692 11.5052122 9.3350136 10.2753515 12.0606138 9.27118298 C 15.168606 8.12613322 19.433505 7.46153846 24 7.46153846 C 28.566495 7.46153846 32.831394 8.12613322 35.9393862 9.27118298 C 38.6649864 10.2753515 40.0769231 11.5052122 40.0769231 12.3076923 C 40.0769231 13.1101724 38.6649864 14.3400331 35.9393862 15.3442016 C 32.831394 16.4892514 28.566495 17.1538462 24 17.1538462 C 19.433505 17.1538462 15.168606 16.4892514 12.0606138 15.3442016 Z" fill="currentColor"/> </symbol> <symbol id="layout"> <path d="M 44.5086986 24.2230775 L 24.1090229 24.2230775 L 24.1090229 4.50363839 L 24.1090229 4.50363839" stroke="currentColor" stroke-width="2.5" fill="none"/> <rect id="Rectangle-1-Copy" x="3.70934714" y="4.50363839" width="40.7993514" height="39.4388783" stroke="currentColor" stroke-width="2.5" fill="none"/> </symbol> <symbol id="accessibility"> <path d="M 24 45.76 L 24 45.76 C 36.0177161 45.76 45.76 36.0177162 45.76 24 C 45.76 11.9822838 36.0177161 2.24 24 2.24 C 11.9822838 2.24 2.24 11.9822838 2.24 24 C 2.24 36.0177162 11.9822838 45.76 24 45.76 L 24 45.76 L 24 45.76 L 24 45.76 Z M 24 48 L 24 48 C 10.745166 48 -1.77635684e-14 37.254834 -1.77635684e-14 24 C -1.77635684e-14 10.745166 10.745166 2.84217094e-14 24 2.84217094e-14 C 37.254834 2.84217094e-14 48 10.745166 48 24 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/> <path d="M 21.2941031 10.9732032C 21.2941031 9.47814808 22.5062404 8.2657032 24.0017464 8.2657032L 24.0017464 8.2657032 24.0056947 8.2657032 24.009643 8.2657032C 25.5054527 8.2657032 26.7180456 9.47814808 26.7180456 10.9732032L 26.7180456 10.9732032C 26.7180456 12.4699287 25.5054527 13.6817661 24.009643 13.6817661L 24.009643 13.6817661C 24.0087319 13.6817661 24.0072133 13.6817661 24.0056947 13.680855L 24.0056947 13.680855C 24.0044798 13.6817661 24.003265 13.6817661 24.0017464 13.6817661L 24.0017464 13.6817661C 22.5062404 13.6817661 21.2941031 12.4699287 21.2941031 10.9732032L 21.2941031 10.9732032zM 36.0001139 14.8094735C 36.5893262 14.8094735 37.0670742 15.2869192 37.0670742 15.8764371L 37.0670742 15.8764371C 37.0670742 16.3657279 36.7352626 16.7740776 36.2854567 16.8992097L 36.2854567 16.8992097C 36.2778637 16.9011839 29.0669982 17.7329174 29.0669982 17.7329174L 29.0669982 17.7329174C 29.0200738 17.7459773 28.9600896 17.7640486 28.8905382 17.7881942L 28.8905382 17.7881942C 28.6130921 17.8856879 28.1933543 18.082042 27.9395981 18.4301036L 27.9395981 18.4301036C 27.8733877 18.5288121 27.8196297 18.6340507 27.7781722 18.7465784L 27.7781722 18.7465784C 27.7692125 18.7754317 27.7581268 18.8026145 27.7509895 18.8326827L 27.7509895 18.8326827 27.7502302 18.8322271C 27.7013316 18.9912238 27.6732377 19.16161 27.6618483 19.3430819L 27.6618483 19.3430819 27.6618483 23.5734271 27.6633669 23.574642C 27.6633669 23.574642 27.6949535 25.3620263 28.019324 27.0936782L 28.019324 27.0936782C 28.0701968 27.3685436 30.0944752 37.1009042 30.0944752 37.1009042L 30.0944752 37.1009042 30.1055609 37.1526882 30.1063202 37.1554217 30.1058646 37.1554217C 30.1192282 37.2267956 30.1283397 37.3002955 30.1283397 37.3759214L 30.1283397 37.3759214C 30.1283397 38.0488101 29.582559 38.5945925 28.9098243 38.5945925L 28.9098243 38.5945925C 28.3578174 38.5945925 27.8973814 38.2255744 27.7470411 37.7227681L 27.7470411 37.7227681 27.7426372 37.7244386 24.9494974 28.2516056 24.9490419 28.2552502C 24.8633935 27.9793218 24.6456279 27.7639853 24.3690929 27.682285L 24.3690929 27.682285C 24.3476808 27.6756032 24.3209537 27.6684658 24.2873929 27.6613284L 24.2873929 27.6613284C 24.2763072 27.6590505 24.2656771 27.6578356 24.2550469 27.6558615L 24.2550469 27.6558615C 24.171069 27.641283 24.0600602 27.6341456 23.9274874 27.6519131L 23.9274874 27.6519131C 23.8465466 27.6598098 23.7695542 27.6783366 23.696662 27.7071899L 23.696662 27.7071899C 23.6860318 27.7106827 23.6757054 27.7128087 23.664316 27.7170608L 23.664316 27.7170608 23.6682643 27.7194905C 23.4406279 27.8200214 23.2634087 28.0140976 23.188846 28.2552502L 23.188846 28.2552502 23.1885422 28.2516056 20.3950988 37.7244386 20.3908467 37.7227681C 20.2405064 38.2255744 19.7800704 38.5945925 19.2283672 38.5945925L 19.2283672 38.5945925C 18.5553288 38.5945925 18.0100037 38.0488101 18.0100037 37.3759214L 18.0100037 37.3759214C 18.0100037 37.3002955 18.0186597 37.2267956 18.0320232 37.1554217L 18.0320232 37.1554217 18.0317195 37.1554217 18.0324788 37.1526882 18.0435645 37.1009042C 18.0435645 37.1009042 20.0672355 27.3685436 20.1190194 27.0936782L 20.1190194 27.0936782C 20.4429343 25.3620263 20.4745209 23.574642 20.4745209 23.574642L 20.4745209 23.574642 20.4760395 23.5734271 20.4760395 19.3430819C 20.4646501 19.16161 20.4367081 18.9912238 20.387354 18.8322271L 20.387354 18.8322271 20.3865947 18.8326827C 20.3799129 18.8026145 20.3688272 18.7754317 20.3597156 18.7465784L 20.3597156 18.7465784C 20.3182582 18.6340507 20.264652 18.5288121 20.1982897 18.4301036L 20.1982897 18.4301036C 19.9445336 18.082042 19.5252513 17.8856879 19.2470459 17.7881942L 19.2470459 17.7881942C 19.1771908 17.7640486 19.1175103 17.7459773 19.0713452 17.7329174L 19.0713452 17.7329174C 19.0713452 17.7329174 11.8600241 16.9011839 11.852583 16.8992097L 11.852583 16.8992097C 11.4032327 16.7740776 11.0712693 16.3657279 11.0712693 15.8764371L 11.0712693 15.8764371C 11.0712693 15.2869192 11.5487135 14.8094735 12.1377739 14.8094735L 12.1377739 14.8094735C 12.1875836 14.8094735 12.2348117 14.8173702 12.2826473 14.824052L 12.2826473 14.824052 12.2841659 14.8176739 35.853722 14.8176739 35.8553924 14.824052C 35.9030761 14.8173702 35.9504561 14.8094735 36.0001139 14.8094735L 36.0001139 14.8094735z" fill="currentColor"/> </symbol> <symbol id="safari-technology-preview"> <path fill="currentColor" d="M 24 45.7600002 L 24 45.7600002 C 36.0177159 45.7600002 45.7599999 36.0177161 45.7599999 24.0000001 C 45.7599999 11.9822838 36.0177159 2.24000001 24 2.24000001 C 11.9822838 2.24000001 2.23999999 11.9822838 2.23999999 24.0000001 C 2.23999999 36.0177161 11.9822838 45.7600002 24 45.7600002 L 24 45.7600002 L 24 45.7600002 L 24 45.7600002 Z M 24 48 L 24 48 C 10.745166 48 8.52651283e-14 37.254834 8.52651283e-14 24.0000001 C 8.52651283e-14 10.745166 10.745166 0 24 0 C 37.254834 0 48 10.745166 48 24.0000001 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z"/> <polygon fill="currentColor" points="22.453 21.561 10.127 32.861 25.482 26.329 37.873 15.139 22.453 21.561"/> </symbol> <symbol id="privacy"> <path fill="currentColor" d="M 15.1685425 22.4941973 L 15.1685425 12.388782 C 15.1685425 9.69393273 11.9195136 10.0438255 11.9195136 12.388782 C 11.9195136 14.7337385 11.4121047 32.9981208 12.5127398 36.791912 C 15.7058774 47.7983735 27.8522124 45.6566123 30.9533121 42.2509347 C 34.0544119 38.8452571 35.8653963 32.8762332 37.0588085 29.8327181 C 38.2522207 26.7892031 41.6333465 22.9334922 41.6333465 22.5465483 C 41.6333465 22.1596044 39.7727879 21.0338966 37.3194354 22.4340812 C 34.8660829 23.8342658 33.9888369 27.6603443 32.7864178 27.6603443 C 32.0030918 27.6603443 31.5285623 26.0635537 31.3628292 22.8699725 C 31.3874544 14.5599594 31.399767 9.3992148 31.399767 7.3877388 C 31.399767 4.37052481 27.5358136 4.795092 27.5358136 7.3877388 L 27.5358136 22.2770282 C 27.5358136 23.2870868 26.0021868 23.2870868 26.0021868 22.2770282 C 26.0021868 21.2669696 26.0103761 8.09132176 26.0103761 5.18199504 C 26.0103761 2.27266832 22.1464227 2.27266832 22.1464227 5.18199504 C 22.1464227 8.09132176 22.1382334 20.9905839 22.1382334 22.1596044 C 22.1382334 23.3286249 20.5935527 23.3286249 20.5935527 22.1596044 L 20.5935527 6.60705859 C 20.5935527 4.22138407 16.8868104 3.78049185 16.8868104 6.65940958 L 16.8868104 22.5465483 C 16.8868104 24.3345929 15.1685425 24.3345929 15.1685425 22.4941973 Z M 14.3868104 6.65940958 C 14.3868104 3.91189632 16.3888941 2.0323497 18.8710271 2.16243845 C 19.4064988 2.19050256 19.9212719 2.31118201 20.3960158 2.51120572 C 21.1877723 1.27053788 22.5338737 0.5 24.0783994 0.5 C 25.8329397 0.5 27.3314259 1.49432954 28.0521144 3.04262047 C 28.4563953 2.89966794 28.8859215 2.81223849 29.3306484 2.78780542 C 31.8648524 2.64857757 33.899767 4.5808987 33.899767 7.3877388 C 33.899767 9.34637369 33.8881312 14.2782337 33.864856 22.187356 C 34.5202025 21.3829967 35.2264688 20.7500823 36.0802432 20.2628137 C 39.436804 18.3471473 44.1333465 19.2889515 44.1333465 22.5465483 C 44.1333465 23.128154 44.0064029 23.4570378 43.7758938 23.8828557 C 43.696642 24.0292571 43.6066485 24.1738915 43.4964616 24.3384554 C 43.3490867 24.5585595 43.1729356 24.8042179 42.8700195 25.2170834 C 42.806542 25.3036015 42.553006 25.6483262 42.4922733 25.7310538 C 42.3365877 25.9431221 42.2077478 26.1195718 42.0809068 26.2947759 C 41.7586267 26.7399377 41.4753868 27.1414123 41.2083271 27.5344165 C 40.7821735 28.161543 40.415498 28.7410189 40.1080823 29.2802128 C 39.7959116 29.8277471 39.552971 30.3202329 39.3862735 30.7453553 C 39.1818924 31.266581 38.2603789 33.7727457 38.3029435 33.6585515 C 37.7697308 35.0890777 37.3098255 36.243653 36.8074885 37.3755123 C 35.6023636 40.090884 34.3213906 42.2652752 32.8018031 43.9341106 C 30.548363 46.4088748 25.8352037 47.8817882 21.4979867 47.4114012 C 16.0964787 46.825588 11.8453759 43.4641638 10.1117407 37.4884774 C 9.55240337 35.5604914 9.3355005 31.2870616 9.30591571 24.8221077 C 9.29392339 22.2015107 9.31516557 19.4953509 9.3614022 16.3674639 C 9.35539556 16.7738105 9.4195136 12.7514823 9.4195136 12.388782 C 9.4195136 9.97655668 11.1818898 8.12242436 13.4096084 8.00247119 C 13.7471824 7.98429426 14.0741531 8.00621829 14.3868104 8.06463687 L 14.3868104 6.65940958 Z"/> </symbol> <symbol id="security"> <path fill="currentColor" d="M 15.8033934 20.1726723 L 12.729666 20.1726723 C 11.5979508 20.1726723 10.6805143 21.0901087 10.6805143 22.2218239 L 10.6805143 40.6641887 C 10.6805143 41.7959039 11.5979508 42.7133403 12.729666 42.7133403 L 35.270334 42.7133403 C 36.4020492 42.7133403 37.3194857 41.7959039 37.3194857 40.6641887 L 37.3194857 22.2218239 C 37.3194857 21.0901087 36.4020492 20.1726723 35.270334 20.1726723 L 32.1966066 20.1726723 L 32.1966066 13.4832662 C 32.1966066 8.95640542 28.5268608 5.28665966 24 5.28665966 C 19.4731392 5.28665966 15.8033934 8.95640542 15.8033934 13.4832662 L 15.8033934 20.1726723 Z M 13.3033934 17.6726723 L 13.3033934 13.4832662 C 13.3033934 7.57569355 18.0924273 2.78665966 24 2.78665966 C 29.9075727 2.78665966 34.6966066 7.57569355 34.6966066 13.4832662 L 34.6966066 17.6726723 L 35.270334 17.6726723 C 37.7827611 17.6726723 39.8194857 19.7093968 39.8194857 22.2218239 L 39.8194857 40.6641887 C 39.8194857 43.1766158 37.7827611 45.2133403 35.270334 45.2133403 L 12.729666 45.2133403 C 10.2172389 45.2133403 8.18051432 43.1766158 8.18051432 40.6641887 L 8.18051432 22.2218239 C 8.18051432 19.7093968 10.2172389 17.6726723 12.729666 17.6726723 L 13.3033934 17.6726723 Z"/> <path fill="currentColor" d="M 21.21522 29.8126384C 21.21522 28.1150656 22.5913746 26.7389109 24.2889475 26.7389109 25.9865203 26.7389109 27.3626749 28.1150656 27.3626749 29.8126384 27.3626749 30.9503515 26.7445504 31.9436939 25.8258112 32.4751558L 25.8258112 35.9600933C 25.8258112 36.8088797 25.1377339 37.496957 24.2889475 37.496957 23.440161 37.496957 22.7520837 36.8088797 22.7520837 35.9600933L 22.7520837 32.4751558C 21.8333445 31.9436939 21.21522 30.9503515 21.21522 29.8126384zM 26.6228791 12.8501838C 26.6228791 11.8299912 25.5165562 10.8603871 24 10.8603871 22.4834438 10.8603871 21.3771209 11.8299912 21.3771209 12.8501838L 21.3771209 17.6726723 26.6228791 17.6726723 26.6228791 12.8501838zM 29.1228791 20.1726723L 18.8771209 20.1726723 18.8771209 12.8501838C 18.8771209 10.3705376 21.170712 8.36038712 24 8.36038712 26.829288 8.36038712 29.1228791 10.3705376 29.1228791 12.8501838L 29.1228791 20.1726723z"/> </symbol> <symbol id="console"> <rect x="5.03735352" y="5.03735352" width="37.925293" height="37.925293" rx="4" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 13.164202 13.164202 L 24 24 L 13.164202 34.835798" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 24 14 L 35 14" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 29.5 24 L 34.9999999 24" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 24 34 L 35 34" stroke="currentColor" stroke-width="2.5" fill="none"/> </symbol> <symbol id="debugger"> <path d="M 24.1320008 44.328125 C 32.1512251 44.328125 38.6520901 35.226914 38.6520901 24 C 38.6520901 12.773086 32.1512251 3.671875 24.1320008 3.671875 C 16.1127765 3.671875 9.61191153 12.773086 9.61191153 24 C 9.61191153 35.226914 16.1127765 44.328125 24.1320008 44.328125 Z" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 13.7861328 10.5 L 34.4768075 10.5 L 13.7861328 10.5 Z" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 24.25 11 L 24.25 44.328125" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 34.1640625 37.0680804 L 39.9720982 42.8761161" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 38.5200893 22.25 L 44.328125 22.25" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 9.47991071 22.25 L 3.671875 22.25" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 13.8359375 10.9319196 L 8.02790179 5.12388393" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 34.1640625 10.9319196 L 39.9720982 5.12388393" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 13.972 37.068 L 8.164 42.876" stroke="currentColor" stroke-width="2.5" fill="none"/> </symbol> <symbol id="shortcuts"> <path d="M 5 35.8242187 C 5 39.7527757 8.1847243 42.9375 12.1132812 42.9375 C 16.0418382 42.9375 19.2265625 39.7527757 19.2265625 35.8242187 L 19.2265625 11.9442883 C 19.2265625 8.1847243 16.0418382 5 12.1132812 5 C 8.1847243 5 5 8.1847243 5 12.1132812 C 5 16.0418382 8.1847243 19.2265625 12.1132812 19.2265625 L 35.8928161 19.2265625 C 39.7527757 19.2265625 42.9375 16.0418382 42.9375 12.1132812 C 42.9375 8.1847243 39.7527757 5 35.8242188 5 C 31.8956618 5 28.7109375 8.1847243 28.7109375 12.1132812 L 28.7109375 35.8190088 C 28.7109375 39.7527757 31.8956618 42.9375 35.8242187 42.9375 C 39.7527757 42.9375 42.9375 39.7527757 42.9375 35.8242188 C 42.9375 31.8956618 39.7527757 28.7109375 35.8242187 28.7109375 L 12.1184912 28.7109375 C 8.1847243 28.7109375 5 31.8956618 5 35.8242187 Z" stroke="currentColor" stroke-width="2.5" fill="none" /> </symbol> <symbol id="timeline"> <path d="M 24.625 7.57617187 L 24.625 24.5833333 L 15 24.5833333" stroke="currentColor" stroke-width="2.5" fill="none"/> <path d="M 24 45.76 L 24 45.76 C 36.0177161 45.76 45.76 36.0177162 45.76 24 C 45.76 11.9822838 36.0177161 2.24 24 2.24 C 11.9822838 2.24 2.24 11.9822838 2.24 24 C 2.24 36.0177162 11.9822838 45.76 24 45.76 L 24 45.76 L 24 45.76 L 24 45.76 Z M 24 48 L 24 48 C 10.745166 48 0 37.254834 0 24 C 0 10.745166 10.745166 0 24 0 C 37.254834 0 48 10.745166 48 24 C 48 37.254834 37.254834 48 24 48 L 24 48 L 24 48 L 24 48 Z" fill="currentColor"/> </symbol> </defs> </svg> <div id="posts" class="tiles"> <div class="tile third-tile post-16214 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/16214/background-clip-border-area/">Make creative borders with <span>background-clip</span> border-area</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Make creative borders with <span>background-clip</span> border-area</h1> <div class="summary"><p>How’d you like to use CSS to easily create a border from an image or gradient?</p> </div> <p><a href="https://webkit.org/blog/16214/background-clip-border-area/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-16026 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/16026/css-masonry-syntax/">Help us choose the final syntax for Masonry in CSS</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Help us choose the final syntax for Masonry in CSS</h1> <div class="summary"><p>Back in April 2024, we wrote about “Masonry” layout in CSS and the ongoing work to bring this feature to browsers.</p> </div> <p><a href="https://webkit.org/blog/16026/css-masonry-syntax/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-15269 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/">Help us invent CSS Grid Level 3, aka “Masonry” layout</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Help us invent CSS Grid Level 3, aka “Masonry” layout</h1> <div class="summary"><p>UPDATE October 2024: Since this article was published, members of the CSS Working Group have concluded that all of the grid abilities described here — variable-width tracks, explicit placement, spanning, and subgrids — are worth including in masonry layout, and are possible to implement performantly.</p> </div> <p><a href="https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-15190 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/15190/implementing-vertical-form-controls/">Implementing Vertical Form Controls</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Implementing Vertical Form Controls</h1> <div class="summary"><p>Safari 17.4 adds vertical writing mode support for form control elements across macOS, iOS, iPadOS, and visionOS.</p> </div> <p><a href="https://webkit.org/blog/15190/implementing-vertical-form-controls/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-14571 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/14571/css-nesting-and-the-cascade/">CSS Nesting and the Cascade</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>CSS Nesting and the Cascade</h1> <div class="summary"><p>You might have noticed that Safari Technology Preview 179 includes an update to CSS Nesting that adds support for the new “relaxed parsing behavior”.</p> </div> <p><a href="https://webkit.org/blog/14571/css-nesting-and-the-cascade/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-13813 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/">Try out CSS Nesting today</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Try out CSS Nesting today</h1> <div class="summary"><p>Back in December, we wrote an article detailing three different options for CSS Nesting.</p> </div> <p><a href="https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-13607 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/">Help choose the syntax for CSS Nesting</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Help choose the syntax for CSS Nesting</h1> <div class="summary"><p>The CSS Working Group is continuing a debate over the best way to define nesting in CSS.</p> </div> <p><a href="https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-13096 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/13096/css-has-pseudo-class/">Using :has() as a CSS Parent Selector and much more</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Using :has() as a CSS Parent Selector and much more</h1> <div class="summary"><p>It’s been a long-standing dream of front-end developers to have a way to apply CSS to an element based on what’s happening inside that element.</p> </div> <p><a href="https://webkit.org/blog/13096/css-has-pseudo-class/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-12662 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/">Customizing Color Fonts on the Web</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Customizing Color Fonts on the Web</h1> <div class="summary"><p>Color fonts provide a way to add richness to your designs without sacrificing any of the many benefits of using plain text.</p> </div> <p><a href="https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-12179 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/12179/the-focus-indicated-pseudo-class-focus-visible/">The Focus-Indicated Pseudo-class :focus-visible</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>The Focus-Indicated Pseudo-class :focus-visible</h1> <div class="summary"><p>The “focus indicator”, as its name suggests, visually indicates (often with a kind of an outline) that an element has focus.</p> </div> <p><a href="https://webkit.org/blog/12179/the-focus-indicated-pseudo-class-focus-visible/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-12058 post type-post status-publish format-standard hentry category-css category-javascript"> <a class="tile-link" href="https://webkit.org/blog/12058/wide-gamut-2d-graphics-using-html-canvas/">Wide Gamut 2D Graphics using HTML Canvas</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>Wide Gamut 2D Graphics using HTML Canvas</h1> <div class="summary"><p>Support for creating 2D canvases with Display P3 backing stores has been added to WebKit.</p> </div> <p><a href="https://webkit.org/blog/12058/wide-gamut-2d-graphics-using-html-canvas/" class="readmore">Read more</a></p> </div> </div> <div class="tile third-tile post-11420 post type-post status-publish format-standard hentry category-css"> <a class="tile-link" href="https://webkit.org/blog/11420/css-individual-transform-properties/">CSS Individual Transform Properties</a> <div class="background-image"> <div class="featured-image"></div> <svg viewbox="0 0 100 100"> <use xlink:href="#css" /> </svg> </div> <div class="tile-content"> <h1>CSS Individual Transform Properties</h1> <div class="summary"><p>CSS Transforms appeared on the Web along with CSS Animations and CSS Transitions to add visual effects and motion on the Web.</p> </div> <p><a href="https://webkit.org/blog/11420/css-individual-transform-properties/" class="readmore">Read more</a></p> </div> </div> </div> <nav class="navigation pagination" aria-label="Posts pagination"> <h2 class="screen-reader-text">Posts pagination</h2> <div class="nav-links"><span aria-current="page" class="page-numbers current"><span class="meta-nav screen-reader-text">Page </span>1</span> <a class="page-numbers" href="https://webkit.org/blog/category/css/page/2/"><span class="meta-nav screen-reader-text">Page </span>2</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://webkit.org/blog/category/css/page/4/"><span class="meta-nav screen-reader-text">Page </span>4</a> <a class="next page-numbers" href="https://webkit.org/blog/category/css/page/2/">Next page</a></div> </nav> </div> </main> <footer> <div class="page-width"> <nav id="footer-nav" aria-label="Footer menu"><div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-7617" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7617"><a rel="me" href="https://front-end.social/@webkit">@webkit@front-end.social</a></li> <li id="menu-item-5365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5365"><a href="https://webkit.org/sitemap/">Site Map</a></li> <li id="menu-item-4185" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4185"><a href="http://www.apple.com/legal/privacy/">Privacy Policy</a></li> <li id="menu-item-4287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4287"><a href="https://webkit.org/licensing-webkit/">Licensing WebKit</a></li> <li id="menu-item-4187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4187"><a href="https://webkit.org/terms-of-use/">WebKit and the WebKit logo are trademarks of Apple Inc.</a></li> </ul></div></nav> </div> </footer> <script type="text/javascript" src="https://webkit.org/wp-content/themes/webkit/scripts/global.js?ver=1.0" id="theme-global-js"></script> </body> </html>