@schalkneethling/calavera-baseline-core 0.2.0-next.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Schalk Neethling
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# Baseline core
+
+Browser-safe Baseline data and recommendation APIs shared by Calavera's Explorer, Composer, CLI, MCP, and WebMCP surfaces.
+
+The build script consumes pinned `web-features` and `baseline-browser-mapping` versions and generates a compact CSS-focused dataset. `pnpm test` checks that the generated data is current before running target, feature, and Stylelint output tests.
+
+Stylelint detection coverage remains separate from the broader WebDX feature catalog: the package recommends compatibility targets, while `stylelint-plugin-use-baseline` determines which authored CSS declarations it can lint.

package/data/baseline.json

@@ -0,0 +1 @@
+{"schemaVersion":1,"generatedAt":"2026-07-25T00:00:00.000Z","sources":{"webFeatures":"3.34.0","baselineBrowserMapping":"2.10.43"},"firstBaselineYear":2015,"currentYear":2026,"browserTargets":{"widely":{"chrome":{"version":"121","releaseDate":"2024-01-25"},"chrome_android":{"version":"121","releaseDate":"2024-01-25"},"edge":{"version":"121","releaseDate":"2024-01-25"},"firefox":{"version":"122","releaseDate":"2024-01-23"},"firefox_android":{"version":"122","releaseDate":"2024-01-23"},"safari":{"version":"17.2","releaseDate":"2023-12-11"},"safari_ios":{"version":"17.2","releaseDate":"2023-12-11"}},"newly":{"chrome":{"version":"148","releaseDate":"2026-05-07"},"chrome_android":{"version":"148","releaseDate":"2026-05-07"},"edge":{"version":"148","releaseDate":"2026-05-07"},"firefox":{"version":"152","releaseDate":"2026-06-16"},"firefox_android":{"version":"152","releaseDate":"2026-06-16"},"safari":{"version":"26.5","releaseDate":"2026-05-11"},"safari_ios":{"version":"26.5","releaseDate":"2026-05-11"}},"years":{"2015":{"chrome":{"version":"44","releaseDate":"2015-09-30"},"chrome_android":{"version":"44","releaseDate":"2015-09-30"},"edge":{"version":"13","releaseDate":"2015-11-12"},"firefox":{"version":"41","releaseDate":"2015-09-22"},"firefox_android":{"version":"41","releaseDate":"2015-09-22"},"safari":{"version":"11","releaseDate":"2015-07-29"},"safari_ios":{"version":"11","releaseDate":"2015-07-29"}},"2016":{"chrome":{"version":"53","releaseDate":"2016-09-07"},"chrome_android":{"version":"53","releaseDate":"2016-09-07"},"edge":{"version":"14","releaseDate":"2016-09-20"},"firefox":{"version":"49","releaseDate":"2016-09-20"},"firefox_android":{"version":"49","releaseDate":"2016-09-20"},"safari":{"version":"11","releaseDate":"2015-07-29"},"safari_ios":{"version":"11","releaseDate":"2015-07-29"}},"2017":{"chrome":{"version":"62","releaseDate":"2017-10-24"},"chrome_android":{"version":"62","releaseDate":"2017-10-24"},"edge":{"version":"16","releaseDate":"2017-10-17"},"firefox":{"version":"53","releaseDate":"2017-04-19"},"firefox_android":{"version":"57","releaseDate":"2017-11-28"},"safari":{"version":"11","releaseDate":"2017-09-19"},"safari_ios":{"version":"11","releaseDate":"2017-09-19"}},"2018":{"chrome":{"version":"66","releaseDate":"2018-05-09"},"chrome_android":{"version":"66","releaseDate":"2018-05-09"},"edge":{"version":"18","releaseDate":"2018-12-11"},"firefox":{"version":"64","releaseDate":"2018-12-11"},"firefox_android":{"version":"64","releaseDate":"2018-12-11"},"safari":{"version":"11.1","releaseDate":"2018-04-12"},"safari_ios":{"version":"11.3","releaseDate":"2018-04-12"}},"2019":{"chrome":{"version":"66","releaseDate":"2019-03-25"},"chrome_android":{"version":"66","releaseDate":"2019-03-25"},"edge":{"version":"18","releaseDate":"2018-12-11"},"firefox":{"version":"65","releaseDate":"2019-01-29"},"firefox_android":{"version":"65","releaseDate":"2019-01-29"},"safari":{"version":"13","releaseDate":"2019-09-19"},"safari_ios":{"version":"13","releaseDate":"2019-09-19"}},"2020":{"chrome":{"version":"87","releaseDate":"2020-11-19"},"chrome_android":{"version":"87","releaseDate":"2020-11-19"},"edge":{"version":"87","releaseDate":"2020-11-19"},"firefox":{"version":"83","releaseDate":"2020-11-17"},"firefox_android":{"version":"83","releaseDate":"2020-11-17"},"safari":{"version":"14","releaseDate":"2020-09-16"},"safari_ios":{"version":"14","releaseDate":"2020-09-16"}},"2021":{"chrome":{"version":"96","releaseDate":"2021-11-19"},"chrome_android":{"version":"96","releaseDate":"2021-11-19"},"edge":{"version":"96","releaseDate":"2021-11-19"},"firefox":{"version":"95","releaseDate":"2021-12-07"},"firefox_android":{"version":"94","releaseDate":"2021-11-02"},"safari":{"version":"15.2","releaseDate":"2021-12-13"},"safari_ios":{"version":"15.2","releaseDate":"2021-12-13"}},"2022":{"chrome":{"version":"108","releaseDate":"2022-12-05"},"chrome_android":{"version":"108","releaseDate":"2022-12-05"},"edge":{"version":"108","releaseDate":"2022-12-05"},"firefox":{"version":"108","releaseDate":"2022-12-13"},"firefox_android":{"version":"108","releaseDate":"2022-12-13"},"safari":{"version":"16","releaseDate":"2022-09-12"},"safari_ios":{"version":"16","releaseDate":"2022-09-12"}},"2023":{"chrome":{"version":"120","releaseDate":"2023-12-07"},"chrome_android":{"version":"120","releaseDate":"2023-12-07"},"edge":{"version":"120","releaseDate":"2023-12-07"},"firefox":{"version":"121","releaseDate":"2023-12-19"},"firefox_android":{"version":"121","releaseDate":"2023-12-19"},"safari":{"version":"17.2","releaseDate":"2023-12-11"},"safari_ios":{"version":"17.2","releaseDate":"2023-12-11"}},"2024":{"chrome":{"version":"130","releaseDate":"2024-10-17"},"chrome_android":{"version":"130","releaseDate":"2024-10-17"},"edge":{"version":"130","releaseDate":"2024-10-17"},"firefox":{"version":"132","releaseDate":"2024-10-29"},"firefox_android":{"version":"132","releaseDate":"2024-10-29"},"safari":{"version":"18.2","releaseDate":"2024-12-11"},"safari_ios":{"version":"18.2","releaseDate":"2024-12-11"}},"2025":{"chrome":{"version":"143","releaseDate":"2025-12-12"},"chrome_android":{"version":"143","releaseDate":"2025-12-12"},"edge":{"version":"143","releaseDate":"2025-12-12"},"firefox":{"version":"146","releaseDate":"2025-12-12"},"firefox_android":{"version":"146","releaseDate":"2025-12-12"},"safari":{"version":"26.2","releaseDate":"2025-12-12"},"safari_ios":{"version":"26.2","releaseDate":"2025-12-12"}},"2026":{"chrome":{"version":"148","releaseDate":"2026-05-07"},"chrome_android":{"version":"148","releaseDate":"2026-05-07"},"edge":{"version":"148","releaseDate":"2026-05-07"},"firefox":{"version":"152","releaseDate":"2026-06-16"},"firefox_android":{"version":"152","releaseDate":"2026-06-16"},"safari":{"version":"26.5","releaseDate":"2026-05-11"},"safari_ios":{"version":"26.5","releaseDate":"2026-05-11"}}}},"features":[{"id":"backdrop","name":"::backdrop","description":"The ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.","groups":["selectors"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"47","firefox_android":"47","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"before-after","name":"::before and ::after","description":"The ::before and ::after CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the content property to generate cosmetic content.","groups":[],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"column-pseudo","name":"::column","description":"The ::column CSS pseudo-element represents the individual columns of a multi-column layout container. Columns can only be styled with scroll snap CSS properties and can also have a ::scroll-marker pseudo-element, which scrolls to the column when activated.","groups":["multi-column","scrolling"],"availability":"limited","support":{"chrome":"135","chrome_android":"135","edge":"135"},"stylelintDetectable":true},{"id":"details-content","name":"::details-content","description":"The ::details-content pseudo-element selects the expandable content of a <details> element, excluding the <summary>.","groups":["selectors"],"availability":"newly","baselineLowDate":"2025-09-16","support":{"chrome":"131","chrome_android":"131","edge":"131","firefox":"143","firefox_android":"143","safari":"18.4","safari_ios":"18.4"},"stylelintDetectable":true},{"id":"file-selector-button","name":"::file-selector-button","description":"The ::file-selector-button CSS pseudo-element selects the button of a <input type=\"file\"> element.","groups":["selectors"],"availability":"widely","baselineLowDate":"2021-04-26","baselineHighDate":"2023-10-26","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"82","firefox_android":"82","safari":"14.1","safari_ios":"14.5"},"stylelintDetectable":true},{"id":"first-letter","name":"::first-letter","description":"The ::first-letter CSS pseudo-element selects the first letter in an element for styling.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"first-line","name":"::first-line","description":"The ::first-line CSS pseudo-element selects the first line of text in an element for styling.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"marker","name":"::marker","description":"The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets.","groups":["lists"],"availability":"limited","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"80","firefox_android":"80"},"stylelintDetectable":true},{"id":"placeholder","name":"::placeholder","description":"The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.","groups":["selectors"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"57","chrome_android":"57","edge":"79","firefox":"51","firefox_android":"51","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"scroll-buttons","name":"::scroll-button","description":"The ::scroll-button(<dir>) CSS pseudo-element is a focusable button which scrolls its originating scroll container element in the specified direction.","groups":["scrolling"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"selection","name":"::selection","description":"The ::selection CSS pseudo-element selects text a user has highlighted.","groups":["selectors","selection"],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"62","firefox_android":"62","safari":"1.1"},"stylelintDetectable":true},{"id":"spelling-grammar-error","name":"::spelling-error and ::grammar-error","description":"The ::spelling-error and ::grammar-error CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.","groups":["selectors"],"availability":"limited","support":{"chrome":"121","chrome_android":"121","edge":"121","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":true},{"id":"target-text","name":"::target-text","description":"The ::target-text pseudo-element allows you to style text highlighted by a URL text fragment such as #:~:text=snippet.","groups":["text-fragments"],"availability":"newly","baselineLowDate":"2024-12-11","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"131","firefox_android":"131","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"autofill","name":":autofill","description":"The :autofill pseudo-class matches <input> elements that have been filled in automatically by the browser.","groups":["forms"],"availability":"limited","support":{"chrome":"110","chrome_android":"110","edge":"110","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"default","name":":default","description":"The :default CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the checked attribute.","groups":["selectors"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"10","chrome_android":"18","edge":"79","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"},"stylelintDetectable":true},{"id":"dir-pseudo","name":":dir()","description":"The :dir() CSS functional pseudo-class matches elements by text direction, either right to left (rtl) or left to right (ltr).","groups":["selectors"],"availability":"widely","baselineLowDate":"2023-12-07","baselineHighDate":"2026-06-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"49","firefox_android":"49","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"empty","name":":empty","description":"The :empty CSS pseudo-class matches elements without child elements.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"},"stylelintDetectable":true},{"id":"focus-visible","name":":focus-visible","description":"The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.","groups":["selectors"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"86","chrome_android":"86","edge":"86","firefox":"85","firefox_android":"85","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"focus-within","name":":focus-within","description":"The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.","groups":["selectors"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"has-slotted","name":":has-slotted","description":"The :has-slotted CSS pseudo-class matches <slot> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.","groups":["selectors","web-components"],"availability":"limited","support":{"firefox":"136","firefox_android":"136"},"stylelintDetectable":true},{"id":"has","name":":has()","description":"The :has() CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.","groups":["selectors"],"availability":"widely","baselineLowDate":"2023-12-19","baselineHighDate":"2026-06-19","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"121","firefox_android":"121","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"host-context","name":":host-context()","description":"The :host-context() CSS pseudo-class selects the containing element of the shadow tree in which it is used if that element or an ancestor matches the provided selector.","groups":["selectors","web-components"],"availability":"limited","support":{"chrome":"54","chrome_android":"54","edge":"79"},"stylelintDetectable":true},{"id":"indeterminate","name":":indeterminate","description":"The :indeterminate CSS pseudo-class selects any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, or radio buttons which are members of a group in which all radio buttons are unchecked.","groups":["forms"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"39","chrome_android":"39","edge":"79","firefox":"51","firefox_android":"51","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"is","name":":is()","description":"The :is() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list.","groups":["selectors"],"availability":"widely","baselineLowDate":"2021-01-21","baselineHighDate":"2023-07-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"82","firefox_android":"82","safari":"14","safari_ios":"14"},"stylelintDetectable":true},{"id":"lang","name":":lang()","description":"The :lang() CSS functional pseudo-class matches elements based on their content language.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"},"stylelintDetectable":true},{"id":"modal","name":":modal","description":"The :modal pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a <dialog> element used with showModal().","groups":["selectors"],"availability":"widely","baselineLowDate":"2022-09-02","baselineHighDate":"2025-03-02","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"103","firefox_android":"103","safari":"15.6","safari_ios":"15.6"},"stylelintDetectable":true},{"id":"not","name":":not()","description":"The :not() functional pseudo-class matches elements that do not match the selectors in its argument.","groups":["selectors"],"availability":"widely","baselineLowDate":"2021-01-21","baselineHighDate":"2023-07-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"84","firefox_android":"84","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"nth-child","name":":nth-child()","description":"The :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements based on their index within a list of elements. The :first-child and :last-child pseudo-classes match the first and last element in a list, and the :only-child pseudo-class matches an element with no siblings.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"},"stylelintDetectable":true},{"id":"nth-child-of","name":":nth-child() of <selector>","description":"The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.","groups":["selectors"],"availability":"widely","baselineLowDate":"2023-05-09","baselineHighDate":"2025-11-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"nth-of-type","name":":nth-of-type() pseudo-classes","description":"The :nth-of-type() and :nth-last-of-type() CSS functional pseudo-classes match elements based on their position among siblings of the same type. The :first-of-type, :last-of-type, and :only-of-type pseudo-classes match the first, last, and only elements of its type.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"3.1","safari_ios":"2"},"stylelintDetectable":true},{"id":"open-pseudo","name":":open","description":"The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.","groups":["selectors"],"availability":"newly","baselineLowDate":"2026-05-11","support":{"chrome":"133","chrome_android":"133","edge":"133","firefox":"136","firefox_android":"136","safari":"26.5","safari_ios":"26.5"},"stylelintDetectable":true},{"id":"placeholder-shown","name":":placeholder-shown","description":"The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.","groups":["selectors"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"47","chrome_android":"47","edge":"79","firefox":"51","firefox_android":"51","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"read-write-pseudos","name":":read-only and :read-write","description":"The :read-only and :read-write CSS pseudo-classes match elements that are read-only or read-write, respectively. For example, :read-only matches <input> and <textarea> elements with the readonly attribute.","groups":["forms"],"availability":"widely","baselineLowDate":"2020-07-28","baselineHighDate":"2023-01-28","support":{"chrome":"1","chrome_android":"18","edge":"13","firefox":"78","firefox_android":"79","safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"root","name":":root","description":"The :root pseudo-class matches the root element of the document, usually the <html> element.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"scope-pseudo","name":":scope (pseudo-class)","description":"The :scope CSS pseudo-class matches the scoping root, for instance the element that querySelector() is called on, or the root of a DOM subtree specified with @scope.","groups":["selectors"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"27","chrome_android":"27","edge":"79","firefox":"32","firefox_android":"32","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"state","name":":state()","description":"The :state() CSS pseudo-class matches custom elements based on their custom state, set through the ElementInternals.states API.","groups":["custom-elements"],"availability":"newly","baselineLowDate":"2024-05-17","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"126","firefox_android":"126","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":true},{"id":"target","name":":target","description":"The :target CSS pseudo-class matches the element with an ID matching the URL fragment.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"2"},"stylelintDetectable":true},{"id":"user-pseudos","name":":user-valid and :user-invalid","description":"The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.","groups":["selectors"],"availability":"widely","baselineLowDate":"2023-11-02","baselineHighDate":"2026-05-02","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"88","firefox_android":"88","safari":"16.5","safari_ios":"16.5"},"stylelintDetectable":true},{"id":"where","name":":where()","description":"The :where() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.","groups":["selectors"],"availability":"widely","baselineLowDate":"2021-01-21","baselineHighDate":"2023-07-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"82","firefox_android":"82","safari":"14","safari_ios":"14"},"stylelintDetectable":true},{"id":"charset","name":"@charset","description":"The @charset CSS at-rule specifies the character encoding of an external style sheet.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"4"},"stylelintDetectable":true},{"id":"counter-style","name":"@counter-style","description":"The @counter-style CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.","groups":["counters"],"availability":"widely","baselineLowDate":"2023-09-18","baselineHighDate":"2026-03-18","support":{"chrome":"91","chrome_android":"91","edge":"91","firefox":"33","firefox_android":"33","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"font-face","name":"@font-face","description":"The @font-face CSS at-rule creates a custom font-family value. The at-rule's descriptors set the font's name, source, and various display settings.","groups":["fonts"],"availability":"widely","baselineLowDate":"2016-09-20","baselineHighDate":"2019-03-20","support":{"chrome":"36","chrome_android":"36","edge":"14","firefox":"39","firefox_android":"39","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"function","name":"@function","description":"The @function CSS at-rule defines a custom function that takes CSS values or custom properties as arguments, and returns a CSS value. It can be based on conditional logic such as by using the @media at-rule.","groups":["css"],"availability":"limited","support":{"chrome":"139","chrome_android":"139","edge":"139"},"stylelintDetectable":true},{"id":"import","name":"@import","description":"The @import CSS at-rule loads styles from another stylesheet.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"mixin","name":"@mixin","description":"The @mixin and @apply CSS at-rules define reusable style declaration fragments and apply them inside rules, optionally passing arguments.","groups":["css"],"availability":"limited","support":{},"stylelintDetectable":false},{"id":"namespace","name":"@namespace","description":"The @namespace CSS rule sets a default namespace or namespace prefix. Namespace prefixes allow CSS selectors to distinguish elements with the same name but different document types, such as the HTML <a> element and the SVG <a> element.","groups":["css","selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"scope","name":"@scope","description":"The @scope CSS at-rule sets the scope for a group of rules.","groups":["css"],"availability":"newly","baselineLowDate":"2025-12-12","support":{"chrome":"143","chrome_android":"143","edge":"143","firefox":"146","firefox_android":"146","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"starting-style","name":"@starting-style","description":"The @starting-style CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.","groups":["css"],"availability":"newly","baselineLowDate":"2024-08-06","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"129","firefox_android":"129","safari":"17.5","safari_ios":"17.5"},"stylelintDetectable":true},{"id":"supports","name":"@supports","description":"The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.","groups":["css"],"availability":"widely","baselineLowDate":"2015-09-30","baselineHighDate":"2018-03-30","support":{"chrome":"28","chrome_android":"28","edge":"12","firefox":"22","firefox_android":"22","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"supports-compat","name":"@supports (compatibility prefix)","description":"The @supports (-webkit-transform-3d) CSS media query is a standardized compatibility alternative to @supports (transform-style).","groups":["media-queries"],"availability":"widely","baselineLowDate":"2016-09-20","baselineHighDate":"2019-03-20","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"49","firefox_android":"49","safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"meta-text-scale","name":"<meta name=\"text-scale\">","description":"The <meta name=\"text-scale\" content=\"scale\" /> HTML element allows the browser's initial font size to be affected by the operating system text scale settings. The <meta name=\"text-scale\" content=\"legacy\" /> element is the default behavior that respects only browser font-size settings.","groups":[],"availability":"limited","support":{"chrome":"146","chrome_android":"146","edge":"146"},"stylelintDetectable":false},{"id":"slot","name":"<slot>","description":"The <slot> HTML element is a placeholder inside a web component where consumers of the component can insert their own markup.","groups":["html-elements","web-components"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"transforms2d","name":"2D transforms","description":"The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.","groups":["transforms"],"availability":"widely","baselineLowDate":"2015-09-30","baselineHighDate":"2018-03-30","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"transforms3d","name":"3D transforms","description":"The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.","groups":["transforms"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"16","firefox_android":"16","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"abs-sign","name":"abs() and sign()","description":"The abs() and sign() CSS functions compute the absolute value or the sign of the input.","groups":["css"],"availability":"newly","baselineLowDate":"2025-06-26","support":{"chrome":"138","chrome_android":"138","edge":"138","firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"absolute-positioning","name":"Absolute positioning","description":"The position: absolute CSS declaration removes an element from the normal flow and positions it relative to its containing block, which is often the root element, or closest positioned ancestor.","groups":["positioning"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"accent-color","name":"accent-color","description":"The accent-color CSS property sets a color for checkboxes, radio buttons, and other form controls.","groups":["css"],"availability":"limited","support":{"chrome":"93","edge":"93","firefox":"92","firefox_android":"92","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"active-view-transition","name":"Active view transition","description":"The :active-view-transition CSS pseudo-class matches the root element when a view transition is active. The :active-view-transition-type() CSS pseudo-class matches only when the active view transition was started with the specified type.","groups":["view-transitions","selectors"],"availability":"newly","baselineLowDate":"2026-01-13","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"147","firefox_android":"147","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"align-content-block","name":"align-content in block layouts","description":"The align-content property vertically aligns content in block layouts, like it does in flex or grid layouts.","groups":["layout"],"availability":"newly","baselineLowDate":"2024-04-16","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"125","firefox_android":"125","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":true},{"id":"alignment-baseline","name":"alignment-baseline","description":"The alignment-baseline CSS property sets which baseline of an element is aligned with the corresponding baseline of its parent.","groups":["text"],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"79","safari":"5.1","safari_ios":"5"},"stylelintDetectable":true},{"id":"all","name":"all","description":"The all CSS property is a shorthand for all CSS properties, except for direction and unicode-bidi. It accepts only the keywords for explicit defaulting (such as initial and inherit), since they are the only values supported on all CSS properties.","groups":["explicit-defaults"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"27","firefox_android":"27","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"alt-text-generated-content","name":"Alt text for generated content","description":"The / notation in content CSS property values adds alternative text to generated content. For example, the content: url('upvote-icon.svg') / 'Upvote' declaration adds accessible 'Upvote' text to the SVG icon. Also known as alternate text.","groups":["css"],"availability":"newly","baselineLowDate":"2024-07-09","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"128","firefox_android":"128","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":true},{"id":"alternative-style-sheets","name":"Alternative style sheets","description":"The rel=\"alternate stylesheet\" attribute for the <link> HTML element offers an alternative style option to users.","groups":["css"],"availability":"limited","support":{"firefox":"3","firefox_android":"4"},"stylelintDetectable":false},{"id":"container-anchor-position-queries","name":"Anchor position container queries","description":"Anchor position container queries with the @container anchored(fallback: …) at-rule apply styles to an element based on the element's anchor position.","groups":[],"availability":"limited","support":{"chrome":"143","chrome_android":"143","edge":"143"},"stylelintDetectable":true},{"id":"anchor-positioning","name":"Anchor positioning","description":"Anchor positioning places an element based on the position of another element. For example, you can place a tooltip next to the content it references.","groups":[],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"anchor-positioning-transforms","name":"Anchor positioning transforms","description":"Anchor positioned elements take CSS transforms on their anchor elements into account.","groups":[],"availability":"limited","support":{"chrome":"144","chrome_android":"144","edge":"144"},"stylelintDetectable":true},{"id":"clip-path-animatable","name":"Animatable clipping paths","description":"The clip-path property can be animated using CSS transitions and animations.","groups":["clipping-shapes-masking"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"55","chrome_android":"55","edge":"79","firefox":"49","firefox_android":"49","safari":"12.1","safari_ios":"12.2"},"stylelintDetectable":true},{"id":"animation-composition","name":"animation-composition","description":"The animation-composition CSS property chooses how to combine animations that affect the same property.","groups":["animation"],"availability":"widely","baselineLowDate":"2023-07-04","baselineHighDate":"2026-01-04","support":{"chrome":"112","chrome_android":"112","edge":"112","firefox":"115","firefox_android":"115","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"animations-css","name":"Animations (CSS)","description":"The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.","groups":["animation","css"],"availability":"widely","baselineLowDate":"2015-09-30","baselineHighDate":"2018-03-30","support":{"chrome":"43","chrome_android":"43","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"appearance","name":"appearance","description":"The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.","groups":["css"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"80","firefox_android":"80","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"aspect-ratio","name":"aspect-ratio","description":"The aspect-ratio CSS property controls the width-to-height ratio of elements. For <img> and <video> elements, the width and height attributes used together with height: auto control the aspect ratio while the image/video is loading.","groups":["css"],"availability":"widely","baselineLowDate":"2021-09-20","baselineHighDate":"2024-03-20","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"89","firefox_android":"89","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"supports-at-rule","name":"at-rule()","description":"The at-rule() function, when used with @supports, checks if a CSS at-rule is supported. For example @supports at-rule(@starting-style) checks if the @starting-style at-rule is supported.","groups":["css"],"availability":"limited","support":{"chrome":"148","chrome_android":"148","edge":"148"},"stylelintDetectable":true},{"id":"attr","name":"attr()","description":"The attr() CSS function, in the context of any property, returns the value of an attribute of an HTML element, with the option to return it as a specific type or unit. You can set a default value for missing or invalid attributes.","groups":["css"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"attr-contents","name":"attr() (content only)","description":"The attr() CSS function, in content property declarations, sets a ::before or ::after pseudo-element's content to the value of the specified HTML attribute.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"},"stylelintDetectable":true},{"id":"autonomous-custom-elements","name":"Autonomous custom elements","description":"Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.","groups":["custom-elements"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"63","firefox_android":"63","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"backdrop-filter","name":"backdrop-filter","description":"The backdrop-filter CSS property applies graphical effects such as blurring or color shifting to the area behind an element.","groups":["css"],"availability":"newly","baselineLowDate":"2024-09-16","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"103","firefox_android":"103","safari":"18","safari_ios":"18"},"stylelintDetectable":true},{"id":"background","name":"background","description":"The background CSS property is a shorthand that sets several background properties at once.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"1.3","safari_ios":"1"},"stylelintDetectable":true},{"id":"background-attachment","name":"background-attachment","description":"The background-attachment CSS property sets whether an element's background image or gradient moves as the element scrolls.","groups":["background"],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"25","firefox_android":"25","safari":"15.4"},"stylelintDetectable":true},{"id":"background-blend-mode","name":"background-blend-mode","description":"The background-blend-mode CSS property blends an element's background image and background color using blend modes like multiply, difference, or color.","groups":["blend-mode"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"35","chrome_android":"59","edge":"79","firefox":"30","firefox_android":"54","safari":"8","safari_ios":"8"},"stylelintDetectable":true},{"id":"background-clip","name":"background-clip","description":"The background-clip CSS property sets the extent of the background: the padding box, the content box, or the default border box.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"22","firefox_android":"22","safari":"5.1","safari_ios":"5"},"stylelintDetectable":true},{"id":"background-clip-border-area","name":"background-clip: border-area","description":"The background-clip: border-area CSS declaration draws the background underneath only the border of an element.","groups":["background"],"availability":"limited","support":{"chrome":"150","chrome_android":"150","edge":"150","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"background-clip-text","name":"background-clip: text","description":"The background-clip: text CSS declaration draws the background underneath only the text in the element.","groups":["background"],"availability":"limited","support":{"chrome":"120","chrome_android":"120","edge":"120","safari":"14","safari_ios":"14"},"stylelintDetectable":true},{"id":"background-color","name":"background-color","description":"The background-color CSS property sets the fill color of an element, behind any content and background images or gradients.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"background-image","name":"background-image","description":"The background-image CSS property sets the graphics to display behind the content of an element and in front of the background color. Graphics may be any combination of images or gradients.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"1.3","safari_ios":"1"},"stylelintDetectable":true},{"id":"background-origin","name":"background-origin","description":"The background-origin CSS property sets the background starting position relative to the border and padding of an element.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"22","firefox_android":"22","safari":"5.1","safari_ios":"4"},"stylelintDetectable":true},{"id":"background-position","name":"background-position","description":"The background-position CSS property offsets the initial position of background images relative to the background origin.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"25","chrome_android":"25","edge":"12","firefox":"13","firefox_android":"14","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"background-repeat","name":"background-repeat","description":"The background-repeat CSS property sets how a background image is tiled.","groups":["background"],"availability":"widely","baselineLowDate":"2016-09-20","baselineHighDate":"2019-03-20","support":{"chrome":"30","chrome_android":"30","edge":"12","firefox":"49","firefox_android":"49","safari":"8","safari_ios":"8"},"stylelintDetectable":true},{"id":"background-size","name":"background-size","description":"The background-size CSS property scales or stretches a background based on the size of the element (with the contain and cover keywords), a length, or percentage.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"21","chrome_android":"25","edge":"12","firefox":"9","firefox_android":"18","safari":"5.1","safari_ios":"4.2"},"stylelintDetectable":true},{"id":"baseline-shift","name":"baseline-shift","description":"The baseline-shift CSS property sets the position of an element relative to its dominant baseline.","groups":["text"],"availability":"newly","baselineLowDate":"2026-03-24","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"149","firefox_android":"149","safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"baseline-source","name":"baseline-source","description":"The baseline-source CSS property controls how inline-level boxes with multiple lines of text are aligned with the surrounding text. By default, which typographic baseline is used depends on the display property value.","groups":[],"availability":"limited","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"115","firefox_android":"115"},"stylelintDetectable":true},{"id":"border-image","name":"Border images","description":"The border-image CSS property draws an image around an element.","groups":["borders-outlines"],"availability":"widely","baselineLowDate":"2017-02-01","baselineHighDate":"2019-08-01","support":{"chrome":"56","chrome_android":"56","edge":"12","firefox":"50","firefox_android":"50","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"border-radius","name":"border-radius","description":"The border-radius CSS property rounds the corners of the border drawn around an element.","groups":["borders-outlines"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"4.2"},"stylelintDetectable":true},{"id":"border-shape","name":"border-shape","description":"The border-shape CSS property sets the geometry of the border box, changing the shape of any applicable border, border image, focus outline, or shadow.","groups":[],"availability":"limited","support":{"chrome":"147","chrome_android":"147","edge":"147"},"stylelintDetectable":true},{"id":"borders","name":"Borders","description":"The border CSS property sets the color, style, and width of the line around an element.","groups":["borders-outlines"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"14","safari":"1","safari_ios":"3"},"stylelintDetectable":true},{"id":"box-decoration-break","name":"box-decoration-break","description":"The box-decoration-break CSS property sets whether box decorations, such as borders or backgrounds, of an element divided across a page, column, or region wraps each fragment or splits across the break.","groups":[],"availability":"limited","support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"32","firefox_android":"32"},"stylelintDetectable":true},{"id":"box-shadow","name":"box-shadow","description":"The box-shadow CSS property applies shadow effects around an element's frame. This can create drop shadow and inner shadow effects.","groups":["background"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"},"stylelintDetectable":true},{"id":"box-sizing","name":"box-sizing","description":"The box-sizing CSS property sets whether an element's width and height are calculated based on the content-box, which does not count the size of borders or padding, or border-box, which does count them.","groups":["layout"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"29","firefox_android":"29","safari":"5.1","safari_ios":"6"},"stylelintDetectable":true},{"id":"calc-size","name":"calc-size()","description":"The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.","groups":["css"],"availability":"limited","support":{"chrome":"129","chrome_android":"129","edge":"129"},"stylelintDetectable":true},{"id":"calc","name":"calc()","description":"The calc() CSS function computes mathematical expressions such a calc(100%/3 - 1em).","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"26","chrome_android":"28","edge":"12","firefox":"16","firefox_android":"16","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"calc-constants","name":"calc() keywords","description":"The e, pi, infinity, and NaN keywords represent well-defined constants accepted in CSS math functions such as calc().","groups":["css"],"availability":"widely","baselineLowDate":"2023-06-06","baselineHighDate":"2025-12-06","support":{"chrome":"110","chrome_android":"110","edge":"110","firefox":"114","firefox_android":"114","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"cap","name":"cap unit","description":"The cap CSS length unit corresponds to the height of Latin capital letters.","groups":["units"],"availability":"widely","baselineLowDate":"2023-12-11","baselineHighDate":"2026-06-11","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"97","firefox_android":"97","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"caret-color","name":"caret-color","description":"The caret-color CSS property sets the color of the text insertion pointer in a text input.","groups":["css"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"57","chrome_android":"57","edge":"79","firefox":"53","firefox_android":"53","safari":"11.1","safari_ios":"11.3"},"stylelintDetectable":true},{"id":"caret-shape","name":"caret-shape","description":"The caret-shape CSS property sets the shape of the insertion caret, the symbol that shows where the next character is to be inserted or deleted.","groups":[],"availability":"limited","support":{"chrome":"144","chrome_android":"144","edge":"144"},"stylelintDetectable":true},{"id":"cascade-layers","name":"Cascade layers","description":"The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.","groups":["css"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"case-insensitive-attributes","name":"Case-insensitive attribute selector","description":"The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.","groups":["selectors"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"49","chrome_android":"49","edge":"79","firefox":"47","firefox_android":"47","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"case-sensitive-attributes","name":"Case-sensitive attribute selector","description":"The s identifier in a CSS attribute selector matches attribute values case-sensitively in document languages like HTML where attribute values are case-insensitive.","groups":["selectors"],"availability":"limited","support":{"firefox":"66","firefox_android":"66"},"stylelintDetectable":true},{"id":"ch","name":"ch unit","description":"The ch CSS length unit is a font-relative length based on the width of the zero (0) character.","groups":["units"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"27","chrome_android":"27","edge":"12","firefox":"1","firefox_android":"4","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"check-visibility","name":"checkVisibility()","description":"The checkVisibility() method checks if an element is potentially visible, with optional parameters for the kinds of visibility to check. For example, it checks whether the element has the style display: none, but can also check for visibility: hidden.","groups":[],"availability":"newly","baselineLowDate":"2024-03-05","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"106","firefox_android":"106","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":false},{"id":"clip","name":"clip","description":"The clip CSS property sets the visible area of an absolutely positioned element.","groups":["clipping-shapes-masking"],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"1"},"stylelintDetectable":true},{"id":"clip-path-boxes","name":"Clip path boxes","description":"The fill-box, stroke-box, and view-box values for clip-path set an edge of the element's box to use as the clipping shape.","groups":["clipping-shapes-masking"],"availability":"widely","baselineLowDate":"2023-11-02","baselineHighDate":"2026-05-02","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"54","firefox_android":"54","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"clip-path","name":"clip-path","description":"The clip-path CSS property and SVG attribute set the visible area of an element. Everything outside the area will be hidden.","groups":["clipping-shapes-masking"],"availability":"widely","baselineLowDate":"2021-01-21","baselineHighDate":"2023-07-21","support":{"chrome":"88","chrome_android":"88","edge":"88","firefox":"71","firefox_android":"79","safari":"13.1","safari_ios":"13"},"stylelintDetectable":true},{"id":"color","name":"Color","description":"The color CSS property sets the primary foreground color of an element, which is used for text, the default border color, and text decorations.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"color-adjust","name":"color-adjust","description":"The color-adjust shorthand CSS property allows multiple performance related color adjustments to be set at once. Setting the print-color-adjust CSS property directly is preferred, as it is the only such adjustment so far defined.","groups":["print"],"availability":"limited","support":{"firefox":"48","firefox_android":"48","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"color-contrast","name":"color-contrast()","description":"The color-contrast() CSS function picks a color from a list that has the most contrast with another color.","groups":["color-types"],"availability":"limited","support":{},"stylelintDetectable":false},{"id":"color-gamut","name":"color-gamut media query","description":"The color-gamut media query sets styles based on the colors a device can display.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2023-02-14","baselineHighDate":"2025-08-14","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"110","firefox_android":"110","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"color-mix","name":"color-mix()","description":"The color-mix() function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black.","groups":["css"],"availability":"widely","baselineLowDate":"2023-05-09","baselineHighDate":"2025-11-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"16.2","safari_ios":"16.2"},"stylelintDetectable":true},{"id":"color-mix-variadic","name":"color-mix() with three or more colors","description":"The color-mix() CSS function accepts three or more colors.","groups":[],"availability":"limited","support":{"firefox":"150","firefox_android":"150"},"stylelintDetectable":true},{"id":"color-scheme","name":"color-scheme","description":"The color-scheme CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.","groups":["css"],"availability":"widely","baselineLowDate":"2022-02-03","baselineHighDate":"2024-08-03","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"96","firefox_android":"96","safari":"13","safari_ios":"13"},"stylelintDetectable":true},{"id":"color-function","name":"color()","description":"The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.","groups":["color-types"],"availability":"widely","baselineLowDate":"2023-05-09","baselineHighDate":"2025-11-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"colrv0","name":"COLRv0","description":"COLRv0 is a font format that supports multi-color glyphs. COLRv0 supports only solid colors.","groups":["fonts"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"53","chrome_android":"53","edge":"79","firefox":"31","firefox_android":"31","safari":"11.1","safari_ios":"11.3"},"stylelintDetectable":true},{"id":"colrv1","name":"COLRv1","description":"COLRv1 is a font format that supports multi-color glyphs. COLRv1 extends COLRv0 to support gradients, transforms, and blending modes.","groups":["fonts"],"availability":"limited","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"107","firefox_android":"107"},"stylelintDetectable":true},{"id":"column-breaks","name":"Column breaks","description":"In columnar layouts (created by the columns or column-count CSS properties), the break-after, break-before, break-inside properties control where columns start or end.","groups":["layout"],"availability":"limited","support":{"chrome":"102","chrome_android":"102","edge":"102"},"stylelintDetectable":true},{"id":"column-fill","name":"column-fill","description":"The column-fill CSS property sets the distribution of content across columns in a multi-column layout.","groups":["multi-column"],"availability":"widely","baselineLowDate":"2017-03-07","baselineHighDate":"2019-09-07","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"52","firefox_android":"52","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"column-span","name":"column-span","description":"The column-span CSS property controls whether a child element extends across all columns of a multi-column parent.","groups":["multi-column"],"availability":"widely","baselineLowDate":"2020-07-28","baselineHighDate":"2023-01-28","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"71","firefox_android":"79","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"conic-gradients","name":"Conic gradients","description":"The conic-gradient() and repeating-conic-gradient() CSS functions create backgrounds that progress between two or more colors around a center point.","groups":["gradients"],"availability":"widely","baselineLowDate":"2020-11-17","baselineHighDate":"2023-05-17","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"83","firefox_android":"83","safari":"12.1","safari_ios":"12.2"},"stylelintDetectable":true},{"id":"constructed-stylesheets","name":"Constructed stylesheets","description":"The CSSStyleSheet constructor creates a new stylesheet which can be shared between a document and multiple shadow roots using adoptedStyleSheets.","groups":[],"availability":"widely","baselineLowDate":"2023-03-27","baselineHighDate":"2025-09-27","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"101","firefox_android":"101","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":false},{"id":"contain","name":"contain","description":"The contain CSS property sets limits to the scope of styles, layout, and paint rendering for speed and efficiency. The none keyword value disables containment, strict is equivalent to contain: size layout style paint, and content is equivalent to contain: layout style paint.","groups":["containment"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"contain-intrinsic-size","name":"contain-intrinsic-size","description":"The contain-intrinsic-size CSS property sets the intrinsic size of an element. When using size containment, the browser will lay out the element as if it had a single child of this size.","groups":["containment"],"availability":"widely","baselineLowDate":"2023-09-18","baselineHighDate":"2026-03-18","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"107","firefox_android":"107","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"container-queries","name":"Container queries","description":"Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.","groups":["container-queries"],"availability":"widely","baselineLowDate":"2023-02-14","baselineHighDate":"2025-08-14","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"110","firefox_android":"110","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"container-scroll-state-queries","name":"Container scroll-state queries","description":"Container scroll-state queries with the @container scroll-state(...) at-rule apply styles to an element based on the sticky positioning, snapped, and scrollable state of the container.","groups":["container-queries"],"availability":"limited","support":{"chrome":"133","chrome_android":"133","edge":"133"},"stylelintDetectable":true},{"id":"container-style-queries","name":"Container style queries","description":"Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.","groups":["container-queries"],"availability":"newly","baselineLowDate":"2026-05-19","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"151","firefox_android":"151","safari":"18","safari_ios":"18"},"stylelintDetectable":true},{"id":"content","name":"Content","description":"The content CSS property sets the content inside of an element or pseudo-element, replacing the current value. It's often used with the ::before and ::after pseudo-elements to generate cosmetic content.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"content-visibility","name":"content-visibility","description":"The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed.","groups":["css"],"availability":"newly","baselineLowDate":"2025-09-15","support":{"chrome":"108","chrome_android":"108","edge":"108","firefox":"130","firefox_android":"130","safari":"26","safari_ios":"26"},"stylelintDetectable":true},{"id":"contrast-color","name":"contrast-color()","description":"The contrast-color() CSS function picks a color that has guaranteed contrast against a specified foreground or background color.","groups":["color-types"],"availability":"newly","baselineLowDate":"2026-04-10","support":{"chrome":"147","chrome_android":"147","edge":"147","firefox":"146","firefox_android":"146","safari":"26","safari_ios":"26"},"stylelintDetectable":true},{"id":"corner-shape","name":"corner-shape","description":"The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other than rounded corners. For example, corner-shape: squircle is a shape in between a square and rounded corner.","groups":[],"availability":"limited","support":{"chrome":"139","chrome_android":"139","edge":"139"},"stylelintDetectable":true},{"id":"counter-set","name":"counter-set","description":"The counter-set CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.","groups":["counters"],"availability":"widely","baselineLowDate":"2023-12-11","baselineHighDate":"2026-06-11","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"68","firefox_android":"68","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"counters","name":"Counters (CSS)","description":"The counter-reset and counter-increment CSS properties and the counter() and counters() functions automatically number headings or ordered list items.","groups":["counters"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"25","safari":"3","safari_ios":"1"},"stylelintDetectable":true},{"id":"crisp-edges","name":"crisp-edges","description":"The image-rendering: crisp-edges CSS declaration scales images to preserve lines without blurring.","groups":["image-scaling"],"availability":"newly","baselineLowDate":"2026-05-07","support":{"chrome":"148","chrome_android":"148","edge":"148","firefox":"65","firefox_android":"65","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"cross-document-view-transitions","name":"Cross-document view transitions","description":"The @view-transition CSS rule sets whether a document opts-in to transitions between documents in a multi-page application. Both the old and new document must opt-in for a transition to be triggered.","groups":["view-transitions"],"availability":"limited","support":{"chrome":"126","chrome_android":"126","edge":"126","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"cross-fade","name":"cross-fade()","description":"The cross-fade() CSS function generates an image by mixing two images.","groups":["images"],"availability":"limited","support":{"safari":"10","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"url-cross-origin","name":"cross-origin() for url()","description":"The url() CSS function accepts a cross-origin() modifier to control cross-origin resource sharing (CORS) when requesting the URL. For example, url(\"https://example.com\" cross-origin(anonymous))) does not send credentials to the URL.","groups":[],"availability":"limited","support":{"chrome":"150","chrome_android":"150","edge":"150","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"css-object-model","name":"CSS object model","description":"The CSS object model API reads, creates, and modifies CSS stylesheets and inline styles. Also known as CSSOM.","groups":["cssom"],"availability":"widely","baselineLowDate":"2015-09-30","baselineHighDate":"2018-03-30","support":{"chrome":"28","chrome_android":"28","edge":"12","firefox":"22","firefox_android":"22","safari":"9","safari_ios":"9"},"stylelintDetectable":false},{"id":"css-escape","name":"CSS.escape()","description":"The CSS.escape() static method escapes a string so that it can be used in a valid CSS selector.","groups":["cssom"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"31","firefox_android":"31","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":false},{"id":"css-supports","name":"CSS.supports()","description":"The CSS.supports() static method returns whether the browser supports a CSS declaration (given by two arguments, a property and value) or an @supports at-rule condition string.","groups":["css"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"55","firefox_android":"55","safari":"11","safari_ios":"11"},"stylelintDetectable":false},{"id":"cubic-bezier-easing","name":"cubic-bezier() easing","description":"The cubic-bezier() CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The ease, ease-in, ease-out, and ease-in-out keyword values are presets for common Bézier curves.","groups":["animation","transitions"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"16","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"6","safari_ios":"6"},"stylelintDetectable":true},{"id":"currentcolor","name":"currentColor","description":"The currentColor CSS value allows you to reuse an element's computed text color for other properties.","groups":["color-types"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1.5","firefox_android":"4","safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"cursor","name":"Cursor styles","description":"The cursor CSS property styles the pointer, allowing you to provide hints to the user on how to interact with the hovered element.","groups":["css"],"availability":"limited","support":{"chrome":"68","chrome_android":"68","edge":"79","firefox":"27","firefox_android":"95","safari":"11"},"stylelintDetectable":true},{"id":"custom-ellipses","name":"Custom ellipses","description":"The text-overflow CSS property with a string value sets the string representing clipped text.","groups":[],"availability":"limited","support":{"firefox":"9","firefox_android":"9"},"stylelintDetectable":true},{"id":"highlight","name":"Custom highlights","description":"Custom highlights style arbitrary text ranges, without adding extra elements to the DOM.","groups":[],"availability":"newly","baselineLowDate":"2026-03-24","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"149","firefox_android":"149","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"highlightsfrompoint","name":"Custom highlights from point","description":"The CSS.highlights.highlightsFromPoint() method returns an array of Highlight objects at a specified point.","groups":[],"availability":"limited","support":{"chrome":"140","chrome_android":"140","edge":"140","firefox":"150","firefox_android":"150"},"stylelintDetectable":false},{"id":"custom-media-queries","name":"Custom media queries","description":"The @custom-media CSS at-rule names a media query, which you can reuse in multiple @media rules.","groups":["media-queries"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"custom-properties","name":"Custom properties","description":"Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.","groups":["css"],"availability":"widely","baselineLowDate":"2017-04-05","baselineHighDate":"2019-10-05","support":{"chrome":"49","chrome_android":"49","edge":"15","firefox":"31","firefox_android":"31","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"customizable-select","name":"Customizable <select>","description":"The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS.","groups":["forms","html-elements"],"availability":"limited","support":{"chrome":"135","chrome_android":"135","edge":"135"},"stylelintDetectable":true},{"id":"device-queries","name":"Device media queries","description":"The device-aspect-ratio, device-height, and device-width media features describe physical properties of the displaying output device.","groups":["media-queries"],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"2","firefox_android":"4","safari":"3","safari_ios":"1"},"stylelintDetectable":true},{"id":"device-posture","name":"Device posture","description":"The device posture API and the device-posture CSS media feature reflect the physical posture of a device, such as whether a foldable device is folded or unfolded.","groups":[],"availability":"limited","support":{"chrome":"132","chrome_android":"132","edge":"132"},"stylelintDetectable":true},{"id":"devicepixelratio","name":"devicePixelRatio","description":"The window.devicePixelRatio property is the ratio of the size of one CSS pixel to the vertical size of one physical pixel on the current display device.","groups":[],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"18","firefox_android":"18"},"stylelintDetectable":false},{"id":"display","name":"Display","description":"The display CSS property sets the display behavior of an element's box within its layout and sets the layout behavior for its child elements.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"display-animation","name":"display animation","description":"You can animate elements between display: none and any other display value or animate between content-visibility: hidden and any other content-visibility value. This also applies to transitions.","groups":["css"],"availability":"limited","support":{"chrome":"117","chrome_android":"117","edge":"117","safari":"18","safari_ios":"18"},"stylelintDetectable":true},{"id":"display-mode","name":"display-mode media query","description":"The display-mode CSS media query sets styles based on whether the web page is in an ordinary browser tab mode or another mode, such as fullscreen, standalone, or minimal-ui.","groups":["media-queries"],"availability":"limited","support":{"chrome":"47","edge":"79","firefox_android":"116"},"stylelintDetectable":true},{"id":"display-contents","name":"display: contents","description":"The display: contents CSS declaration sets an element to display only its contents, not itself.","groups":["css"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"display-flow-root","name":"display: flow-root","description":"The display: flow-root CSS declaration sets an element as the root element of a new flow layout for its children, preventing margin collapse with sibling elements.","groups":["css"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"58","chrome_android":"58","edge":"79","firefox":"53","firefox_android":"53","safari":"13","safari_ios":"13"},"stylelintDetectable":true},{"id":"display-list-item","name":"display: list-item","description":"The display: list-item CSS declaration renders an element with the box layout of a <li> HTML element.","groups":["css","lists"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"display-ruby","name":"display: ruby","description":"The display: ruby CSS declaration renders an element with the box layout of a <ruby> HTML element. Child elements may use equivalents to <ruby> internal elements such as display: ruby-base for <rb>.","groups":["css","ruby"],"availability":"limited","support":{"firefox":"88","firefox_android":"88"},"stylelintDetectable":true},{"id":"display-table","name":"display: table","description":"The display: table CSS declaration renders an element with the box layout of a <table> HTML element. Child elements may use equivalents to <table> internal elements such as display: table-row for <tr>.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"≤4","safari_ios":"≤3.2"},"stylelintDetectable":true},{"id":"document-caretpositionfrompoint","name":"document.caretPositionFromPoint()","description":"The document.caretPositionFromPoint() method finds an insertion point, represented by a DOM node and an offset within that node, for given coordinates in the viewport.","groups":[],"availability":"newly","baselineLowDate":"2025-12-12","support":{"chrome":"128","chrome_android":"128","edge":"128","firefox":"20","firefox_android":"20","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":false},{"id":"element-from-point","name":"document.elementFromPoint() and document.elementsFromPoint()","description":"The document.elementFromPoint() and document.elementsFromPoint() methods find the top-most element at a given point in the viewport, or all elements at a given point in the viewport, respectively.","groups":[],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"43","chrome_android":"43","edge":"79","firefox":"46","firefox_android":"46","safari":"11.1","safari_ios":"11.3"},"stylelintDetectable":false},{"id":"dom-geometry","name":"DOM Geometry","description":"The DOMMatrix, DOMPoint, DOMQuad and DOMRect APIs represent points, rectangles, quadrilaterals and transformation matrices within JavaScript. They can be used in transformations in CSS, <canvas>, and SVG.","groups":[],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"33","firefox_android":"33","safari":"11","safari_ios":"11"},"stylelintDetectable":false},{"id":"webxr-dom-overlays","name":"DOM overlays for WebXR","description":"A DOM overlay shows 2D DOM content as an interactive, transparent layer on top of a WebXR application's WebGL content and camera image.","groups":["webxr"],"availability":"limited","support":{"chrome":"83","chrome_android":"83","edge":"83"},"stylelintDetectable":true},{"id":"dominant-baseline","name":"dominant-baseline","description":"The dominant-baseline CSS property sets the specific baseline used to align an elements's text and inline-level contents.","groups":["text"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"1","firefox_android":"4","safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"dynamic-range","name":"dynamic-range media query","description":"The dynamic-range CSS media query sets styles based on whether a device can display at least standard range colors or at least high range colors. Non-visual devices will match neither.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2022-05-03","baselineHighDate":"2024-11-03","support":{"chrome":"98","chrome_android":"98","edge":"98","firefox":"100","firefox_android":"100","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"dynamic-range-limit","name":"dynamic-range-limit","description":"The dynamic-range-limit CSS property controls the peak luminance of high dynamic range content. You can use this to coordinate the apparent brightness of HDR and SDR content.","groups":["css"],"availability":"limited","support":{"chrome":"136","chrome_android":"136","edge":"136"},"stylelintDetectable":true},{"id":"view-transitions-element-scoped","name":"Element-scoped view transitions","description":"The startViewTransition() method of an Element object starts a view transition that affects only that element's DOM tree. You can use this to run separate elements' transitions concurrently.","groups":["view-transitions"],"availability":"limited","support":{"chrome":"147","chrome_android":"147","edge":"147"},"stylelintDetectable":true},{"id":"element","name":"element()","description":"The element() CSS function creates a live-updating image from an HTML element that can be used as an image or background image.","groups":[],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"em-unit","name":"em unit","description":"The em CSS length unit is a font-relative length equal to the specified font size. In an element with a 2 inch font, 1em equals 2 inches.","groups":["units"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"ex","name":"ex unit","description":"The ex CSS length unit is a font-relative length equal to the used x-height of the first available font. X-height is often equal to the height of the lowercase x.","groups":["units"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"exp-functions","name":"Exponential functions (CSS)","description":"The pow(), sqrt(), hypot(), log(), and exp() CSS functions compute various exponential functions.","groups":["css"],"availability":"widely","baselineLowDate":"2023-12-07","baselineHighDate":"2026-06-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"118","firefox_android":"118","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"field-sizing","name":"field-sizing","description":"The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.","groups":["css"],"availability":"newly","baselineLowDate":"2026-06-16","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"152","firefox_android":"152","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"filter","name":"filter","description":"The filter CSS property applies one or more graphic effects to an element. You can use filter functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, filter: blur(2px).","groups":["css"],"availability":"widely","baselineLowDate":"2016-09-07","baselineHighDate":"2019-03-07","support":{"chrome":"53","chrome_android":"53","edge":"12","firefox":"35","firefox_android":"35","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"filter-function","name":"filter()","description":"The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For instance, background: filter(url(image.png), blur(2px)).","groups":["css"],"availability":"limited","support":{"safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"fit-content","name":"fit-content","description":"The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.","groups":["layout"],"availability":"widely","baselineLowDate":"2021-11-02","baselineHighDate":"2024-05-02","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"94","firefox_android":"94","safari":"11","safari_ios":"11"},"stylelintDetectable":true},{"id":"fit-content-function","name":"fit-content()","description":"The fit-content() CSS function, used outside of a grid layout property, clamps a length between min-content and max-content.","groups":["layout"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"fixed-positioning","name":"Fixed positioning","description":"The position: fixed CSS declaration removes an element from the normal flow and positions it relative to the viewport or page.","groups":["positioning"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"flexbox","name":"Flexbox","description":"Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.","groups":["flexbox"],"availability":"widely","baselineLowDate":"2015-09-30","baselineHighDate":"2018-03-30","support":{"chrome":"29","chrome_android":"29","edge":"12","firefox":"20","firefox_android":"20","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"flexbox-gap","name":"Flexbox gap","description":"The gap CSS property in a flexbox layout sets the size of the space between items.","groups":["flexbox"],"availability":"widely","baselineLowDate":"2021-04-26","baselineHighDate":"2023-10-26","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"63","firefox_android":"63","safari":"14.1","safari_ios":"14.5"},"stylelintDetectable":true},{"id":"float-clear","name":"float and clear","description":"The float CSS property aligns an element to either side of its container, allowing text and inline elements to flow around it. The clear CSS property sets whether an element is moved below floating elements that proceed it.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-loading","name":"Font loading","description":"The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.","groups":[],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"35","chrome_android":"35","edge":"79","firefox":"41","firefox_android":"41","safari":"10","safari_ios":"10"},"stylelintDetectable":false},{"id":"font-metric-overrides","name":"Font metric overrides","description":"The ascent-override, descent-override, and line-gap-override descriptors adjust the display of a font declared in an @font-face statement. This can help make fallback fonts look the same size.","groups":["fonts"],"availability":"limited","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"89","firefox_android":"89"},"stylelintDetectable":true},{"id":"font-shorthand","name":"Font shorthand","description":"The font CSS property shorthand sets multiple font properties, including style, weight, size, and font family.","groups":["fonts"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-display","name":"font-display","description":"The font-display CSS descriptor sets whether to show a substitute font or nothing while a font face loads. The property manages what's known as a flash of unstyled text or flash of invisible text.","groups":["fonts"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"60","chrome_android":"60","edge":"79","firefox":"58","firefox_android":"58","safari":"11.1","safari_ios":"11.3"},"stylelintDetectable":true},{"id":"font-family","name":"font-family","description":"The font-family CSS property sets the desired font face for text, along with optional fallback font faces.","groups":["fonts"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-feature-settings","name":"font-feature-settings","description":"The font-feature-settings CSS property sets low-level OpenType feature tags for a font. When possible, use font-variant instead.","groups":["font-features"],"availability":"widely","baselineLowDate":"2017-04-05","baselineHighDate":"2019-10-05","support":{"chrome":"48","chrome_android":"48","edge":"15","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"font-kerning","name":"font-kerning","description":"The font-kerning CSS property sets whether kerning data from a font is used to adjust the space between letters.","groups":["font-features"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"33","chrome_android":"33","edge":"79","firefox":"32","firefox_android":"32","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"font-language-override","name":"font-language-override","description":"The font-language-override CSS property sets which language-specific glyphs are displayed.","groups":["font-features"],"availability":"limited","support":{"chrome":"143","chrome_android":"143","edge":"143","firefox":"34","firefox_android":"34"},"stylelintDetectable":true},{"id":"font-optical-sizing","name":"font-optical-sizing","description":"The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.","groups":["fonts"],"availability":"widely","baselineLowDate":"2020-03-24","baselineHighDate":"2022-09-24","support":{"chrome":"79","chrome_android":"79","edge":"17","firefox":"62","firefox_android":"62","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"font-palette","name":"font-palette","description":"The font-palette CSS property selects a color palette from the font, optionally overriding individual colors in the @font-palette-values at-rule.","groups":["fonts"],"availability":"widely","baselineLowDate":"2022-11-15","baselineHighDate":"2025-05-15","support":{"chrome":"101","chrome_android":"101","edge":"101","firefox":"107","firefox_android":"107","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"font-palette-animation","name":"font-palette animation","description":"You can animate color fonts between two font-palette values.","groups":["fonts"],"availability":"limited","support":{"chrome":"121","chrome_android":"121","edge":"121"},"stylelintDetectable":true},{"id":"font-size","name":"font-size","description":"The font-size CSS property sets the text height.","groups":["fonts"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-size-adjust","name":"font-size-adjust","description":"The font-size-adjust CSS property preserves apparent text size, regardless of the font used, by scaling fonts to the same size with respect to a specific metric, such as x-height. This can help make fallback fonts look the same size.","groups":["fonts"],"availability":"newly","baselineLowDate":"2024-07-25","support":{"chrome":"127","chrome_android":"127","edge":"127","firefox":"118","firefox_android":"118","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"font-stretch","name":"font-stretch","description":"The font-stretch CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.","groups":["fonts"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"62","chrome_android":"62","edge":"79","firefox":"62","firefox_android":"62","safari":"11.1","safari_ios":"11.3"},"stylelintDetectable":true},{"id":"font-style","name":"font-style","description":"The font-style CSS property sets the text style, with normal, italic, and oblique options.","groups":["fonts"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-synthesis","name":"font-synthesis","description":"The font-synthesis CSS shorthand property disables all font synthesis except the given kinds. To disable a specific kind of font synthesis, instead use the longhand properties such as font-synthesis-style and font-synthesis-weight.","groups":["font-synthesis"],"availability":"widely","baselineLowDate":"2022-01-06","baselineHighDate":"2024-07-06","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"34","firefox_android":"34","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"font-synthesis-position","name":"font-synthesis-position","description":"The font-synthesis-position CSS property sets whether or not the browser should synthesize subscript and superscript typefaces when they're missing from the font.","groups":["font-synthesis"],"availability":"limited","support":{"firefox":"118","firefox_android":"118"},"stylelintDetectable":true},{"id":"font-synthesis-small-caps","name":"font-synthesis-small-caps","description":"The font-synthesis-small-caps CSS property sets whether or not the browser should synthesize small caps typefaces when they're missing from the font.","groups":["font-synthesis"],"availability":"widely","baselineLowDate":"2023-03-27","baselineHighDate":"2025-09-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"font-synthesis-style","name":"font-synthesis-style","description":"The font-synthesis-style CSS property sets whether or not the browser should synthesize italic and oblique typefaces when they're missing from the font.","groups":["font-synthesis"],"availability":"widely","baselineLowDate":"2023-03-27","baselineHighDate":"2025-09-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"font-synthesis-weight","name":"font-synthesis-weight","description":"The font-synthesis-weight CSS property sets whether or not the browser should synthesize bold typefaces when they're missing from the font.","groups":["font-synthesis"],"availability":"widely","baselineLowDate":"2023-03-27","baselineHighDate":"2025-09-27","support":{"chrome":"97","chrome_android":"97","edge":"97","firefox":"111","firefox_android":"111","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"font-variant","name":"font-variant","description":"The font-variant CSS property is a shorthand for font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-emoji, font-variant-ligatures, font-variant-numeric, and font-variant-position.","groups":["font-features"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-variant-alternates","name":"font-variant-alternates","description":"The font-variant-alternates CSS property, along with the @font-feature-values at-rule, chooses when to use a font's alternate glyphs.","groups":["fonts"],"availability":"widely","baselineLowDate":"2023-03-13","baselineHighDate":"2025-09-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"font-variant-caps","name":"font-variant-caps","description":"The font-variant-caps CSS property sets whether text should be displayed in small caps, petite caps, or with capital letters designed for titles.","groups":["font-features"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"font-variant-east-asian","name":"font-variant-east-asian","description":"The font-variant-east-asian CSS property controls glyph substitution and sizing in East Asian text.","groups":["font-features"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"font-variant-emoji","name":"font-variant-emoji","description":"The font-variant-emoji CSS property sets the default presentation for emoji characters.","groups":["font-features"],"availability":"limited","support":{"chrome":"131","chrome_android":"131","edge":"131","firefox":"141","firefox_android":"141"},"stylelintDetectable":true},{"id":"font-variant-ligatures","name":"font-variant-ligatures","description":"The font-variant-ligatures CSS property sets how characters can be visually combined for readability or stylistic reasons.","groups":["font-features"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"34","chrome_android":"34","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"font-variant-numeric","name":"font-variant-numeric","description":"The font-variant-numeric CSS property sets how numeric characters are displayed. For example, you can align columns of numbers or use zeroes that have a slash.","groups":["font-features"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"34","firefox_android":"34","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"font-variant-position","name":"font-variant-position","description":"The font-variant-position CSS property sets whether to use alternate glyphs for subscript and superscript text.","groups":["font-features"],"availability":"limited","support":{"firefox":"34","firefox_android":"34"},"stylelintDetectable":true},{"id":"font-variation-settings","name":"font-variation-settings","description":"The font-variation-settings CSS property sets an \"axis of variability\" on a variable font, such as weight, optical size, or a custom axis defined by the typeface designer. When possible, use other CSS font properties, such as font-weight: bold. Also known as variable fonts.","groups":["fonts"],"availability":"widely","baselineLowDate":"2018-09-05","baselineHighDate":"2021-03-05","support":{"chrome":"62","chrome_android":"62","edge":"17","firefox":"62","firefox_android":"62","safari":"11","safari_ios":"11"},"stylelintDetectable":true},{"id":"font-weight","name":"font-weight","description":"The font-weight CSS property controls the thickness of a font. It is set explicitly with the keyword bold or a number, or relative to the inherited thickness with the keywords bolder or lighter.","groups":["fonts"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-width","name":"font-width","description":"The font-width CSS property selects a font face from a font family based on width, either by a keyword such as condensed or a percentage.","groups":["fonts"],"availability":"limited","support":{"safari":"18.4"},"stylelintDetectable":true},{"id":"forced-colors","name":"Forced colors","description":"The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.","groups":["css"],"availability":"widely","baselineLowDate":"2022-09-12","baselineHighDate":"2025-03-12","support":{"chrome":"89","chrome_android":"89","edge":"79","firefox":"89","firefox_android":"89","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"form-validity-pseudos","name":"Form validity pseudo-classes","description":"The form validity CSS pseudo-classes match <form> elements based on the constraints of a form field, such as validity (:valid, :invalid, :in-range, :out-of-range) and necessity (:optional or :required).","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"10","chrome_android":"18","edge":"12","firefox":"4","firefox_android":"4","safari":"5","safari_ios":"5"},"stylelintDetectable":true},{"id":"fullscreen","name":"Fullscreen API","description":"The fullscreen API makes a specific element fill the whole screen and hides most browser UI.","groups":[],"availability":"limited","support":{"chrome":"71","chrome_android":"71","edge":"79","firefox":"64","firefox_android":"64","safari":"16.4"},"stylelintDetectable":true},{"id":"gap-decorations","name":"Gap decorations","description":"The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or multi-column layout. The rule-break, rule-outset, and rule-paint-order properties control the appearance of these lines.","groups":["grid","flexbox","multi-column"],"availability":"limited","support":{"chrome":"149","chrome_android":"149","edge":"149"},"stylelintDetectable":true},{"id":"getboxquads","name":"getBoxQuads()","description":"The getBoxQuads() method, when called on a document, element, pseudo-element, or text node, returns the list of DOMQuad objects that represent the CSS boxes used to render the node.","groups":[],"availability":"limited","support":{},"stylelintDetectable":false},{"id":"get-computed-style","name":"getComputedStyle()","description":"The getComputedStyle() global method returns an CSSStyleDeclaration object that represents all CSS declarations applied to a given element.","groups":["cssom"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"11","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"5.1","safari_ios":"5"},"stylelintDetectable":false},{"id":"glyph-orientation-vertical","name":"glyph-orientation-vertical","description":"The glyph-orientation-vertical CSS property sets the orientation of glyphs in text rendered in a vertical writing mode.","groups":["css"],"availability":"limited","support":{"safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"gradient-interpolation","name":"Gradient interpolation","description":"Gradient interpolation controls how the colors between gradient stops are calculated in CSS. For example, linear-gradient(to right in oklch longer hue, red, red); calculates in the oklch color space, with the hue going all the way around the hue circle from red back to red.","groups":["gradients"],"availability":"newly","baselineLowDate":"2024-06-11","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"127","firefox_android":"127","safari":"16.2","safari_ios":"16.2"},"stylelintDetectable":true},{"id":"gradients","name":"Gradients","description":"The linear-gradient() and radial-gradient() CSS functions and their repeating counterparts create backgrounds that progress smoothly between multiple colors.","groups":["gradients"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"3.6","firefox_android":"4","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"grid","name":"Grid","description":"CSS grid is a two-dimensional layout system, which lays content out in rows and columns.","groups":["grid"],"availability":"widely","baselineLowDate":"2017-10-17","baselineHighDate":"2020-04-17","support":{"chrome":"57","chrome_android":"57","edge":"16","firefox":"52","firefox_android":"52","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"grid-animation","name":"Grid animation","description":"Grid animation allows you to animate the grid-template-columns and grid-template-rows CSS properties.","groups":["grid"],"availability":"widely","baselineLowDate":"2022-10-27","baselineHighDate":"2025-04-27","support":{"chrome":"107","chrome_android":"107","edge":"107","firefox":"66","firefox_android":"66","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"hanging-punctuation","name":"Hanging punctuation","description":"The hanging-punctuation CSS property puts punctuation characters outside of the box to align the text with the rest of the document.","groups":[],"availability":"limited","support":{"safari":"26.5","safari_ios":"26.5"},"stylelintDetectable":true},{"id":"heading-selectors","name":"Heading pseudo-classes","description":"The :heading and :heading() CSS pseudo-classes match headings of varying levels. The :heading pseudo-class matches any heading (<h1> through <h6>). The :heading() selector matches any of the given levels. For example, :heading(1, 2) matches headings level 1 and 2.","groups":["selectors"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"host","name":"Host","description":"The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.","groups":["selectors","web-components"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"63","firefox_android":"63","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"hsl","name":"HSL","description":"The hsl() and hsla() CSS functions pick colors using hue, saturation, lightness, and alpha (transparency) channels.","groups":["color-types"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"52","firefox_android":"52","safari":"12.1","safari_ios":"12.2"},"stylelintDetectable":true},{"id":"hwb","name":"HWB","description":"The hwb() CSS function picks colors using hue, whiteness, and blackness channels.","groups":["color-types"],"availability":"widely","baselineLowDate":"2022-04-28","baselineHighDate":"2024-10-28","support":{"chrome":"101","chrome_android":"101","edge":"101","firefox":"96","firefox_android":"96","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"hyphenate-character","name":"Hyphenate character","description":"The hyphenate-character CSS property sets the character or string to use at the end of a line before a line break.","groups":["text-wrap"],"availability":"widely","baselineLowDate":"2023-09-18","baselineHighDate":"2026-03-18","support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"98","firefox_android":"98","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"hyphenate-limit-chars","name":"Hyphenate limit chars","description":"The hyphenate-limit-chars CSS property sets the number of characters in a word before it is hyphenated and the minimum number of characters on either side of the hyphen.","groups":["text-wrap"],"availability":"limited","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"137","firefox_android":"137"},"stylelintDetectable":true},{"id":"hyphens","name":"Hyphenation","description":"The hyphens CSS property controls when long words are broken by line wrapping. Although called hyphens, the property applies to word-splitting behavior across languages, such as customary spelling changes or the use of other characters. Support for non-English languages varies significantly.","groups":["css"],"availability":"widely","baselineLowDate":"2023-09-18","baselineHighDate":"2026-03-18","support":{"chrome":"88","chrome_android":"55","edge":"88","firefox":"43","firefox_android":"43","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"ic","name":"ic unit","description":"The ic CSS length unit corresponds to the width of CJK ideographic characters.","groups":["units"],"availability":"widely","baselineLowDate":"2022-10-03","baselineHighDate":"2025-04-03","support":{"chrome":"106","chrome_android":"106","edge":"106","firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"if","name":"if()","description":"The if() CSS function is an inline conditional value that returns a value based on a set of conditions.","groups":["css"],"availability":"limited","support":{"chrome":"137","chrome_android":"137","edge":"137"},"stylelintDetectable":true},{"id":"image-orientation","name":"image-orientation","description":"The image-orientation CSS property corrects the rotation of an image using the image's metadata, such as EXIF.","groups":["images"],"availability":"widely","baselineLowDate":"2020-04-13","baselineHighDate":"2022-10-13","support":{"chrome":"81","chrome_android":"81","edge":"81","firefox":"26","firefox_android":"26","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"image-rendering","name":"image-rendering","description":"The image-rendering CSS property sets how images are scaled, retaining smoothness for photos, or hard edges for pixel art and QR codes.","groups":["image-scaling"],"availability":"widely","baselineLowDate":"2021-10-05","baselineHighDate":"2024-04-05","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"93","firefox_android":"93","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"smooth","name":"image-rendering: smooth","description":"The image-rendering: smooth CSS declaration scales images while retaining a gradual color blending that is useful for photos.","groups":["image-scaling"],"availability":"limited","support":{"firefox":"93","firefox_android":"93"},"stylelintDetectable":true},{"id":"image-set","name":"image-set()","description":"The image-set() CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.","groups":["css"],"availability":"widely","baselineLowDate":"2023-09-18","baselineHighDate":"2026-03-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"89","firefox_android":"89","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"image-function","name":"image()","description":"The image() CSS function creates an image similar to url() but with additional functionality. It can create a solid color as an image, provide a fallback from an image URL to a solid color, or clip a sprite image using media fragments. Not to be confused with the Image() constructor.","groups":["images"],"availability":"limited","support":{},"stylelintDetectable":false},{"id":"ime-mode","name":"ime-mode","description":"The ime-mode CSS property sets the state of the input method editor for text fields.","groups":["css"],"availability":"limited","support":{"firefox":"3","firefox_android":"4"},"stylelintDetectable":true},{"id":"individual-transforms","name":"Individual transform properties","description":"The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.","groups":["transforms"],"availability":"widely","baselineLowDate":"2022-08-05","baselineHighDate":"2025-02-05","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"72","firefox_android":"79","safari":"14.1","safari_ios":"14.5"},"stylelintDetectable":true},{"id":"inherit-value","name":"inherit","description":"The inherit keyword resets any CSS property to the computed value of that property from the parent element.","groups":["explicit-defaults"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"initial-value","name":"initial","description":"The initial keyword resets any CSS property to its initial value as defined by the specification. For example, the initial value of the display property is inline, regardless of the element being styled. Not to be confused with revert, which resets to the user or browser default style.","groups":["explicit-defaults"],"availability":"widely","baselineLowDate":"2015-11-12","baselineHighDate":"2018-05-12","support":{"chrome":"1","chrome_android":"18","edge":"13","firefox":"19","firefox_android":"19","safari":"1.2","safari_ios":"1"},"stylelintDetectable":true},{"id":"initial-letter","name":"initial-letter","description":"The initial-letter CSS property sets the number of lines the first letter of an element occupies. You can use the property to make a raised capital or drop cap.","groups":["css"],"availability":"limited","support":{"chrome":"110","chrome_android":"110","edge":"110"},"stylelintDetectable":true},{"id":"contain-inline-size","name":"Inline-size containment","description":"The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.","groups":["containment"],"availability":"widely","baselineLowDate":"2022-09-12","baselineHighDate":"2025-03-12","support":{"chrome":"105","chrome_android":"105","edge":"105","firefox":"101","firefox_android":"101","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"input-selectors","name":"Input selectors","description":"The :checked, :disabled, and :enabled CSS pseudo-classes match form elements based on their state.","groups":["forms","selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3.1","safari_ios":"2"},"stylelintDetectable":true},{"id":"url-integrity","name":"integrity() for url()","description":"The url() CSS function accepts an integrity() modifier to use subresource integrity to verify the response from the requested URL.","groups":[],"availability":"limited","support":{"chrome":"150","chrome_android":"150","edge":"150"},"stylelintDetectable":true},{"id":"interaction","name":"Interaction media queries","description":"The pointer, any-pointer, hover, and any-hover CSS media queries set styles based on the presence of pointing devices and their ability to hover over elements. For example, most smartphones match the (hover: none) and (pointer: coarse) media query.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2018-12-11","baselineHighDate":"2021-06-11","support":{"chrome":"41","chrome_android":"41","edge":"12","firefox":"64","firefox_android":"64","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"interactivity","name":"interactivity","description":"The interactivity: inert CSS declaration makes an element and its descendants inert, like when using the inert HTML attribute. Inert elements can't be focused or clicked, their text can't be selected or found using the browser's find-in-page feature.","groups":[],"availability":"limited","support":{"chrome":"135","chrome_android":"135","edge":"135"},"stylelintDetectable":true},{"id":"interest-invokers","name":"Interest invokers","description":"Interest invokers, registered by the interestfor HTML attribute, trigger events and actions on a target element when a user shows interest in the element, through behaviors such as hover, focus, or long-press. Pseudo-elements apply styles to sources and targets of interest.","groups":["html"],"availability":"limited","support":{"chrome":"142","chrome_android":"142","edge":"142"},"stylelintDetectable":true},{"id":"interpolate-size","name":"interpolate-size","description":"The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.","groups":["transitions","animation"],"availability":"limited","support":{"chrome":"129","chrome_android":"129","edge":"129"},"stylelintDetectable":true},{"id":"inverted-colors","name":"inverted-colors media query","description":"The inverted-colors CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.","groups":["media-queries"],"availability":"limited","support":{"safari":"9.1","safari_ios":"10"},"stylelintDetectable":true},{"id":"isolation","name":"isolation","description":"The isolation CSS property creates a new stacking context, which impacts z-index ordering and blend modes.","groups":["blend-mode"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"36","firefox_android":"36","safari":"8","safari_ios":"8"},"stylelintDetectable":true},{"id":"web-animations-iterationcomposite","name":"iterationComposite","description":"The iterationComposite property of a KeyframeEffect object sets whether an animation's iterations are calculated independently (\"replace\") or are accumulated with the value of the previous iteration (\"accumulate\").","groups":[],"availability":"limited","support":{"firefox":"80","firefox_android":"80","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":false},{"id":"justify-self-block","name":"justify-self in block layouts","description":"The justify-self CSS property aligns an item along a container's inline axis in block layouts, like it does in grid layouts. Likewise, the justify-items property sets a default justify-self value for all items in a container in a block layout.","groups":["layout"],"availability":"limited","support":{"chrome":"130","chrome_android":"130","edge":"130"},"stylelintDetectable":true},{"id":"lab","name":"Lab and LCH","description":"The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.","groups":["color-types"],"availability":"widely","baselineLowDate":"2023-05-09","baselineHighDate":"2025-11-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"contain-layout","name":"Layout containment","description":"The contain: layout CSS declaration isolates the inside of an element such that it cannot affect the layout of the rest of the page or be affected by the rest of the page. This permits the browser to avoid slower layout calculations.","groups":["containment"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"layout-direction-override","name":"Layout direction override","description":"The unicode-bidi and direction CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use the dir global HTML attribute and <bdo> HTML element instead.","groups":["css"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"50","firefox_android":"50","safari":"11","safari_ios":"11"},"stylelintDetectable":true},{"id":"letter-spacing","name":"letter-spacing","description":"The letter-spacing CSS property controls the amount of space between each letter in an element or block of text.","groups":["text"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"lh","name":"lh unit","description":"The lh CSS length unit corresponds to the requested line height, the computed value of the line-height property. Some lines may be higher than this based on their content.","groups":["units"],"availability":"widely","baselineLowDate":"2023-11-21","baselineHighDate":"2026-05-21","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"light-dark","name":"light-dark()","description":"The light-dark() CSS function accepts two colors and uses one depending on the current color scheme.","groups":["css"],"availability":"newly","baselineLowDate":"2024-05-13","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"120","firefox_android":"120","safari":"17.5","safari_ios":"17.5"},"stylelintDetectable":true},{"id":"light-dark-image","name":"light-dark() image values","description":"The light-dark() CSS function accepts, in addition to colors, two <image> values, such as a gradient or URL, and uses one depending on the current color scheme.","groups":[],"availability":"limited","support":{"chrome":"150","chrome_android":"150","edge":"150","firefox":"150","firefox_android":"150"},"stylelintDetectable":true},{"id":"line-break","name":"line-break","description":"The line-break CSS property sets how strictly to apply rules for wrapping text to new lines, especially for symbols and punctuation.","groups":["text-wrap"],"availability":"widely","baselineLowDate":"2020-07-28","baselineHighDate":"2023-01-28","support":{"chrome":"83","chrome_android":"83","edge":"83","firefox":"69","firefox_android":"79","safari":"13","safari_ios":"13"},"stylelintDetectable":true},{"id":"line-clamp","name":"line-clamp","description":"The line-clamp CSS property limits the text in a block container to a certain number of lines. The prefixed -webkit-line-clamp is widely supported but only works with -webkit-box-orient: vertical in combination with display: -webkit-box or display: -webkit-inline-box.","groups":["css"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"line-height","name":"line-height","description":"The line-height CSS property sets the spacing between text baselines, oriented to the horizontal or vertical writing mode.","groups":["text"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"linear-easing","name":"linear() easing","description":"The linear() easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.","groups":["css"],"availability":"widely","baselineLowDate":"2023-12-11","baselineHighDate":"2026-06-11","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"112","firefox_android":"112","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"link-selectors","name":"Link selectors","description":"The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.","groups":["selectors"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"50","firefox_android":"50","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"list-style","name":"List style","description":"The list-style shorthand CSS property and the list-style-image, list-style-position, and list-style-type longhand properties set the position and appearance of a list item's marker.","groups":["lists"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"logical-properties","name":"Logical properties","description":"CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.","groups":["css"],"availability":"widely","baselineLowDate":"2021-09-20","baselineHighDate":"2024-03-20","support":{"chrome":"89","chrome_android":"89","edge":"89","firefox":"66","firefox_android":"66","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"margin","name":"margin","description":"The margin CSS property sets space around an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.","groups":["layout"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"margin-trim","name":"margin-trim","description":"The margin-trim CSS property removes the margins of child elements when they meet the edges of the container.","groups":["css"],"availability":"limited","support":{"safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"mask-border","name":"mask-border","description":"The mask-border CSS property sets how the edges of an element are masked. It is a shorthand for mask-border-outset, mask-border-repeat, mask-border-slice, mask-border-source, and mask-border-width.","groups":["clipping-shapes-masking"],"availability":"limited","support":{"safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"mask-type","name":"mask-type","description":"The mask-type CSS property on an SVG <mask> element sets whether the mask is a luminance or alpha mask.","groups":["clipping-shapes-masking"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"24","chrome_android":"25","edge":"79","firefox":"35","firefox_android":"35","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"masks","name":"Masks","description":"The mask CSS property (and several longhand properties) partially or completely hides an element according to the shape and depth of an image.","groups":["clipping-shapes-masking"],"availability":"widely","baselineLowDate":"2023-12-07","baselineHighDate":"2026-06-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"53","firefox_android":"53","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"masonry","name":"Masonry","description":"The display: grid-lanes or display: inline-grid-lanes CSS declaration creates a layout where items are tightly packed, like brickwork, in parallel lanes. Items are placed one by one in the lane that has the most available space.","groups":["layout"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"matchmedia","name":"matchMedia","description":"The window.matchMedia() method checks whether a media query applies to the document.","groups":[],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"9","chrome_android":"18","edge":"12","firefox":"6","firefox_android":"6","safari":"5.1","safari_ios":"5"},"stylelintDetectable":false},{"id":"font-family-math","name":"Math font family","description":"The font-family: math CSS declaration uses the browser default font face for displaying mathematical expressions.","groups":["mathml","css"],"availability":"newly","baselineLowDate":"2026-03-24","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"149","firefox_android":"149","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"mathml","name":"MathML","description":"MathML, or the Mathematical Markup Language, describes mathematical notation, such as expressions and formulas. Also known as MathML Core.","groups":["mathml"],"availability":"widely","baselineLowDate":"2023-01-12","baselineHighDate":"2025-07-12","support":{"chrome":"109","chrome_android":"109","edge":"109","firefox":"4","firefox_android":"4","safari":"5.1","safari_ios":"5"},"stylelintDetectable":true},{"id":"media-pseudos","name":"Media element pseudo-classes","description":"The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.","groups":["media-elements"],"availability":"limited","support":{"firefox":"150","firefox_android":"150","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"media-queries","name":"Media queries","description":"The @media CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as screen or print, and one or more mandatory media features, such as prefers-reduced-animations.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"},"stylelintDetectable":true},{"id":"media-query-range-syntax","name":"Media query range syntax","description":"The range syntax of CSS media queries allows you to use mathematical comparison operators such as <, >, <=, and >= to define a range of values for a media query. For example, (400px < width < 1000px) returns true if the viewport width is between 400px and 1000px.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2023-03-27","baselineHighDate":"2025-09-27","support":{"chrome":"104","chrome_android":"104","edge":"104","firefox":"102","firefox_android":"102","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"min-max-width-height","name":"Min and max width and height","description":"The min-width, min-height, max-width, and max-height CSS properties set the minimum and maximum size of an element.","groups":[],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"18","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"1"},"stylelintDetectable":true},{"id":"min-max-content","name":"min-content and max-content","description":"The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.","groups":["layout"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"46","chrome_android":"46","edge":"79","firefox":"66","firefox_android":"66","safari":"11","safari_ios":"11"},"stylelintDetectable":true},{"id":"min-max-clamp","name":"min(), max(), and clamp()","description":"The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.","groups":["css"],"availability":"widely","baselineLowDate":"2020-07-28","baselineHighDate":"2023-01-28","support":{"chrome":"79","chrome_android":"79","edge":"79","firefox":"75","firefox_android":"79","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"mix-blend-mode","name":"mix-blend-mode","description":"The mix-blend-mode CSS property blends an element's content with its background or parent elements using blend modes like multiply, difference, or color.","groups":["blend-mode"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"41","chrome_android":"41","edge":"79","firefox":"32","firefox_android":"32","safari":"8","safari_ios":"8"},"stylelintDetectable":true},{"id":"motion-path","name":"Motion path","description":"The offset CSS property animates an element along a defined motion path.","groups":["css"],"availability":"widely","baselineLowDate":"2022-09-12","baselineHighDate":"2025-03-12","support":{"chrome":"55","chrome_android":"55","edge":"79","firefox":"72","firefox_android":"79","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"multi-column","name":"Multi-column layout","description":"Multi-column layout flows an element's content across one or more columns in a single row, without affecting the display property of its children.","groups":["multi-column"],"availability":"widely","baselineLowDate":"2017-03-07","baselineHighDate":"2019-09-07","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"52","firefox_android":"52","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"named-color","name":"Named colors","description":"Some CSS color values can be referenced by name, such as red or limegreen. They stand in for specific RGB color values.","groups":["color-types"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"nesting","name":"Nesting","description":"CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.","groups":["css"],"availability":"widely","baselineLowDate":"2023-12-11","baselineHighDate":"2026-06-11","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"117","firefox_android":"117","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"object-fit","name":"object-fit","description":"The object-fit CSS property sets how images, videos, and other replaced elements are scaled within their container.","groups":[],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"32","chrome_android":"32","edge":"79","firefox":"36","firefox_android":"36","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"object-position","name":"object-position","description":"The object-position CSS property places images, videos, and other replaced elements within their boxes.","groups":[],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"32","chrome_android":"32","edge":"79","firefox":"36","firefox_android":"36","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"object-view-box","name":"object-view-box","description":"The object-view-box CSS property crops and zooms to an inset area of an image.","groups":["css"],"availability":"limited","support":{"chrome":"104","chrome_android":"104","edge":"104"},"stylelintDetectable":true},{"id":"oklab","name":"Oklab and OkLCh","description":"The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. OkLCh is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS oklab() and oklch() functions.","groups":["color-types"],"availability":"widely","baselineLowDate":"2023-05-09","baselineHighDate":"2025-11-09","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"113","firefox_android":"113","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"opacity","name":"opacity","description":"The opacity CSS property sets the transparency of an element.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"2","safari_ios":"1"},"stylelintDetectable":true},{"id":"opacity-svg","name":"Opacity (SVG)","description":"The fill-opacity, and stroke-opacity SVG attributes and CSS properties control the transparency of a stroke or fill of an SVG element.","groups":["svg"],"availability":"widely","baselineLowDate":"≤2020-03-24","baselineHighDate":"≤2022-09-24","support":{"chrome":"≤80","chrome_android":"≤80","edge":"≤80","firefox":"1.5","firefox_android":"4","safari":"≤13.1","safari_ios":"≤13.4"},"stylelintDetectable":true},{"id":"outline","name":"outline","description":"The outline CSS shorthand sets the color, style, and width of a line around an element, outside of the border.","groups":[],"availability":"widely","baselineLowDate":"2023-03-27","baselineHighDate":"2025-09-27","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"88","firefox_android":"88","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"outlines","name":"Outlines","description":"The outline-color, outline-style, and outline-width and outline-offset CSS properties style a line around an element, outside of the border.","groups":[],"availability":"widely","baselineLowDate":"2017-04-05","baselineHighDate":"2019-10-05","support":{"chrome":"1","chrome_android":"18","edge":"15","firefox":"1.5","firefox_android":"4","safari":"1.2","safari_ios":"1"},"stylelintDetectable":true},{"id":"overflow-shorthand","name":"overflow","description":"The overflow CSS property sets the behavior for when content doesn't fit in an element.","groups":["css"],"availability":"widely","baselineLowDate":"2020-03-24","baselineHighDate":"2022-09-24","support":{"chrome":"68","chrome_android":"68","edge":"79","firefox":"61","firefox_android":"61","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"overflow","name":"Overflow media queries","description":"The overflow-block and overflow-inline CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2023-09-18","baselineHighDate":"2026-03-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"66","firefox_android":"66","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"overflow-anchor","name":"overflow-anchor","description":"The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.","groups":["scrolling"],"availability":"limited","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"66","firefox_android":"66"},"stylelintDetectable":true},{"id":"overflow-clip-margin","name":"overflow-clip-margin","description":"The overflow-clip-margin CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as overflow: clip.","groups":["css"],"availability":"limited","support":{"firefox":"148","firefox_android":"148"},"stylelintDetectable":true},{"id":"overflow-wrap","name":"overflow-wrap","description":"The overflow-wrap CSS property breaks a line of text onto multiple lines inside the targeted element in an otherwise unbreakable place to prevent overflow. The legacy property is word-wrap.","groups":["text-wrap"],"availability":"widely","baselineLowDate":"2018-10-02","baselineHighDate":"2021-04-02","support":{"chrome":"23","chrome_android":"25","edge":"18","firefox":"49","firefox_android":"49","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"overflow-clip","name":"overflow: clip","description":"The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.","groups":["css"],"availability":"widely","baselineLowDate":"2022-09-12","baselineHighDate":"2025-03-12","support":{"chrome":"90","chrome_android":"90","edge":"90","firefox":"81","firefox_android":"81","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"overflow-overlay","name":"overflow: overlay","description":"The overflow: overlay CSS declaration is an alias to overflow: auto. Historically, it caused non-standard behavior, allowing scrollbars to overlay content without taking up layout space.","groups":["css"],"availability":"limited","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"112","firefox_android":"112","safari":"12","safari_ios":"12"},"stylelintDetectable":true},{"id":"overlay","name":"overlay","description":"The overlay CSS property, used as an allow-discrete CSS transition, prevents a top layer element, such as a popover or a <dialog>, from being removed from the top layer before it has finished animating. You can't set the value of the overlay property; only use it as transition property.","groups":["css"],"availability":"limited","support":{"chrome":"117","chrome_android":"117","edge":"117"},"stylelintDetectable":true},{"id":"overscroll-behavior","name":"overscroll-behavior","description":"The overscroll-behavior CSS property disables default scrolling behaviors when the edges of a scrolling area are reached.","groups":["scrolling"],"availability":"limited","support":{"chrome":"144","chrome_android":"144","edge":"144","firefox":"150","firefox_android":"150"},"stylelintDetectable":true},{"id":"padding","name":"padding","description":"The padding CSS property sets space between an element's edge and its contents. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.","groups":["layout"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"page-break-aliases","name":"Page break aliases","description":"The page-break-before, page-break-inside, and page-break-after CSS properties are aliases to the break-before, break-inside, and break-after properties.","groups":["layout"],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"12"},"stylelintDetectable":true},{"id":"page-breaks","name":"Page breaks","description":"In printed page layouts, the break-after, break-before, break-inside CSS properties control where printed pages start and end. Also known as pagination or page breaking.","groups":["layout"],"availability":"widely","baselineLowDate":"2019-01-29","baselineHighDate":"2021-07-29","support":{"chrome":"50","chrome_android":"50","edge":"12","firefox":"65","firefox_android":"65","safari":"10","safari_ios":"10"},"stylelintDetectable":true},{"id":"page-selectors","name":"Page selectors","description":"The :first, :left, and :right pseudo-classes select pages based on their position in sequence after pagination.","groups":["selectors","print"],"availability":"limited","support":{"chrome":"18","chrome_android":"18","edge":"12","safari":"6","safari_ios":"6"},"stylelintDetectable":true},{"id":"page-setup","name":"Page setup","description":"The @page CSS at-rule sets the page-specific dimensions and margins for content such as printed documents, ebooks, or slides.","groups":["layout","print"],"availability":"newly","baselineLowDate":"2024-12-11","support":{"chrome":"15","chrome_android":"18","edge":"79","firefox":"95","firefox_android":"95","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"page-orientation","name":"page-orientation","description":"The page-orientation CSS property sets the rotation of a page after pagination. This allows pages with the same size declaration to display with different orientations.","groups":["layout","print"],"availability":"limited","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"122","firefox_android":"122"},"stylelintDetectable":true},{"id":"contain-paint","name":"Paint containment","description":"The contain: paint CSS declaration prevents an element's descendants from being drawn outside the boundaries of the containing element, with any overflow clipped. This permits the browser to avoid slower painting calculations.","groups":["containment"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"paint-order","name":"paint-order","description":"The paint-order CSS property sets the z-order of strokes, fills, and (in SVG content) markers. For example, paint-order: markers stroke fill; draws the markers, then stroke on top of markers, then fill on top of both markers and stroke.","groups":["css"],"availability":"newly","baselineLowDate":"2024-03-22","support":{"chrome":"123","chrome_android":"123","edge":"123","firefox":"≤66","firefox_android":"≤66","safari":"≤12","safari_ios":"≤12"},"stylelintDetectable":true},{"id":"paint","name":"paint()","description":"The paint() CSS function creates a custom image, drawn using a paint worklet, for an element's background or border.","groups":["css","worklets"],"availability":"limited","support":{"chrome":"65","chrome_android":"65","edge":"79"},"stylelintDetectable":true},{"id":"path-shape","name":"path()","description":"The path() CSS shape function creates a shape for clip-path, shape-outside, and the SVG attribute d.","groups":[],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"physical-properties","name":"Physical properties","description":"The physical CSS properties, top, right, bottom, and left, set the inset position of an element relative to the corresponding side of a container determined by the element's position property.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"picture-in-picture","name":"Picture-in-picture (video)","description":"The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video.","groups":[],"availability":"limited","support":{"chrome":"69","chrome_android":"105","edge":"79","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"pointer-events","name":"pointer-events","description":"The pointer-events CSS property sets whether a user can interact with an element using a mouse, touch, or other pointing input device.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"4","safari_ios":"3.2"},"stylelintDetectable":true},{"id":"popover","name":"Popover","description":"The popover HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the showPopover() method.","groups":["html"],"availability":"newly","baselineLowDate":"2025-01-27","support":{"chrome":"116","chrome_android":"116","edge":"116","firefox":"125","firefox_android":"125","safari":"17","safari_ios":"18.3"},"stylelintDetectable":true},{"id":"position","name":"Position","description":"The position CSS property sets the origin position of an element to an element, the element's scrollport, or the viewport.","groups":["positioning"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"prefers-color-scheme","name":"prefers-color-scheme media query","description":"The prefers-color-scheme CSS media query sets styles based on the requested color scheme, light or dark.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"76","chrome_android":"76","edge":"79","firefox":"67","firefox_android":"67","safari":"12.1","safari_ios":"13"},"stylelintDetectable":true},{"id":"prefers-contrast","name":"prefers-contrast media query","description":"The prefers-contrast CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2022-05-31","baselineHighDate":"2024-11-30","support":{"chrome":"96","chrome_android":"96","edge":"96","firefox":"101","firefox_android":"101","safari":"14.1","safari_ios":"14.5"},"stylelintDetectable":true},{"id":"prefers-reduced-data","name":"prefers-reduced-data media query","description":"The prefers-reduced-data CSS media query detects whether the user has a preference for using less network traffic. For example, you can use this media query to avoid loading large font files and use a system font instead.","groups":["media-queries"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"prefers-reduced-motion","name":"prefers-reduced-motion media query","description":"The prefers-reduced-motion CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device, such as scrolling, panning, zooming, and strobing.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"74","chrome_android":"74","edge":"79","firefox":"63","firefox_android":"64","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"prefers-reduced-transparency","name":"prefers-reduced-transparency media query","description":"The prefers-reduced-transparency CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility.","groups":["media-queries"],"availability":"limited","support":{"chrome":"119","chrome_android":"119","edge":"119"},"stylelintDetectable":true},{"id":"print-color-adjust","name":"print-color-adjust","description":"The print-color-adjust CSS property sets whether styles of printed pages should be adjusted to use less ink, in cases such as light text on a dark background.","groups":["print"],"availability":"newly","baselineLowDate":"2025-05-01","support":{"chrome":"136","chrome_android":"136","edge":"136","firefox":"97","firefox_android":"97","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"progress-function","name":"progress()","description":"The progress() CSS function returns a ratio for the relative position of one value between two other values, clamped between 0 and 1. You can use it to interpolate a value for other calculations.","groups":["css"],"availability":"limited","support":{"chrome":"138","chrome_android":"138","edge":"138","safari":"26","safari_ios":"26"},"stylelintDetectable":true},{"id":"q-unit","name":"Q unit","description":"The Q CSS length unit is an absolute length anchored to the physical measurement of quarter-millimeters. 1Q is equivalent to 1/40 of 1 centimeter.","groups":["units"],"availability":"widely","baselineLowDate":"2020-03-24","baselineHighDate":"2022-09-24","support":{"chrome":"63","chrome_android":"63","edge":"79","firefox":"49","firefox_android":"49","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"quotes","name":"Quotes","description":"The quotes CSS property sets the quotation marks inserted via the content CSS property or <q> element.","groups":["css"],"availability":"widely","baselineLowDate":"2021-04-26","baselineHighDate":"2023-10-26","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"70","firefox_android":"79","safari":"14.1","safari_ios":"14.5"},"stylelintDetectable":true},{"id":"random-function","name":"random()","description":"The random() CSS function chooses a random numeric value within a specified range. This allows for dynamic, randomized styling using CSS.","groups":["css"],"availability":"limited","support":{"safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"style-query-range-syntax","name":"Range syntax for style queries","description":"The @container style() CSS at-rule and if(style()) CSS function queries accept a range syntax, such as >, <, >=, <=, to query for inexact values.","groups":["container-queries"],"availability":"limited","support":{"chrome":"142","chrome_android":"142","edge":"142"},"stylelintDetectable":true},{"id":"rcap","name":"rcap unit","description":"The rcap CSS length unit is a font-relative length equal to the value of the cap unit on the root element. Cap-height is approximately equal to the height of a capital Latin letter.","groups":["units"],"availability":"newly","baselineLowDate":"2026-01-13","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"147","firefox_android":"147","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"rch","name":"rch unit","description":"The rch CSS length unit is a font-relative length equal to the value of the ch unit on the root element. ch length is based on the width of the zero (0) character.","groups":["units"],"availability":"newly","baselineLowDate":"2026-01-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"147","firefox_android":"147","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"reading-flow","name":"reading-flow","description":"The reading-flow CSS property sets the order in which flex or grid elements are rendered to speech or reached via focus navigation. The reading-order property overrides this order.","groups":["css","reading-order"],"availability":"limited","support":{"chrome":"137","chrome_android":"137","edge":"137"},"stylelintDetectable":true},{"id":"rect-xywh","name":"rect() and xywh()","description":"The rect() CSS function creates a rectangle shape with insets from the edges of an element. The xywh() CSS function creates a rectangle shifted by an x and y distance. They can be used with clip-path and shape-outside.","groups":["clipping-shapes-masking"],"availability":"newly","baselineLowDate":"2024-01-23","support":{"chrome":"119","chrome_android":"119","edge":"119","firefox":"122","firefox_android":"122","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"url-referrer-policy","name":"referrer-policy() for url()","description":"The url() CSS function accepts a referrer-policy() modifier to choose which referrer to send when requesting the URL.  For example, `url(\"https://example.com\" referrer-policy(no-referrer)) does not send a referrer to the URL.","groups":[],"availability":"limited","support":{"chrome":"150","chrome_android":"150","edge":"150","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"registered-custom-properties","name":"Registered custom properties","description":"The CSS.registerProperty() static method and the @property CSS at-rule register custom properties for which types and behaviors can be defined.","groups":[],"availability":"newly","baselineLowDate":"2024-07-09","support":{"chrome":"85","chrome_android":"85","edge":"85","firefox":"128","firefox_android":"128","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"relative-color","name":"Relative colors","description":"The from keyword for color functions (color(), hsl(), oklch(), etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS).","groups":["css"],"availability":"newly","baselineLowDate":"2024-09-16","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"128","firefox_android":"128","safari":"18","safari_ios":"18"},"stylelintDetectable":true},{"id":"relative-positioning","name":"Relative positioning","description":"The position: relative CSS declaration offsets the position of an element relative to its position in the normal flow.","groups":["positioning"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"rem","name":"rem","description":"The rem CSS length unit is a font-relative length that is equal to the font size of the root HTML element which for most browsers is 16px.","groups":["units"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"4","chrome_android":"18","edge":"12","firefox":"3.6","firefox_android":"4","safari":"5","safari_ios":"4"},"stylelintDetectable":true},{"id":"resize","name":"resize (CSS property)","description":"The resize CSS property sets whether an element can be resized by the user, and on which axes.","groups":["css"],"availability":"limited","support":{"chrome":"4","chrome_android":"18","edge":"79","firefox":"5","safari":"4"},"stylelintDetectable":true},{"id":"resize-observer","name":"Resize observer","description":"The ResizeObserver API observes and reacts to changes in the size of DOM elements.","groups":[],"availability":"widely","baselineLowDate":"2020-07-28","baselineHighDate":"2023-01-28","support":{"chrome":"64","chrome_android":"64","edge":"79","firefox":"69","firefox_android":"79","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":false},{"id":"resolution","name":"resolution media query","description":"The resolution CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2022-09-12","baselineHighDate":"2025-03-12","support":{"chrome":"68","chrome_android":"68","edge":"79","firefox":"62","firefox_android":"62","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"resolution-compat","name":"resolution media query (compatibility prefixes)","description":"The -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, and -webkit-max-device-pixel-ratio CSS media queries are standardized compatibility alternatives to resolution media queries.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2018-10-23","baselineHighDate":"2021-04-23","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"63","firefox_android":"63","safari":"3","safari_ios":"1"},"stylelintDetectable":true},{"id":"counter-reset-reversed","name":"Reversed counter-reset","description":"The reversed() CSS function for counter-reset creates a counter that counts down.","groups":["counters"],"availability":"limited","support":{"firefox":"96","firefox_android":"96"},"stylelintDetectable":true},{"id":"revert-value","name":"revert","description":"The revert CSS keyword resets any property to its previous default, provided by either the user or browser stylesheets. For example, setting display: revert on a <div> will likely result in display: block, the browser default style. This is often confused with initial.","groups":["explicit-defaults"],"availability":"widely","baselineLowDate":"2020-07-27","baselineHighDate":"2023-01-27","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"67","firefox_android":"67","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"rex","name":"rex unit","description":"The rex CSS length unit is a font-relative length that is equal to the x-height of the root element.","groups":["units"],"availability":"newly","baselineLowDate":"2026-01-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"147","firefox_android":"147","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"rgb","name":"RGB","description":"The rgb(), rgba(), and hexadecimal (as in #004488ff) notations pick colors using red, green, blue, and alpha (transparency) channels.","groups":["color-types"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"65","chrome_android":"65","edge":"79","firefox":"52","firefox_android":"52","safari":"12.1","safari_ios":"12.2"},"stylelintDetectable":true},{"id":"rhythmic-sizing","name":"Rhythmic sizing","description":"The line-height-step CSS property creates consistent vertical rhythm by setting the spacing between body text baselines. It rounds taller lines like headings up to the next multiple of the body text spacing.","groups":["text"],"availability":"limited","support":{},"stylelintDetectable":false},{"id":"ric","name":"ric unit","description":"The ric CSS length unit, or root international character, is a font-relative length equal to the width of CJK character relative to the root element.","groups":["units"],"availability":"newly","baselineLowDate":"2026-01-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"147","firefox_android":"147","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"rlh","name":"rlh unit","description":"The rlh CSS length unit is a font-relative length relative to the line height of root element.","groups":["units"],"availability":"widely","baselineLowDate":"2023-11-21","baselineHighDate":"2026-05-21","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"120","firefox_android":"120","safari":"16.4","safari_ios":"16.4"},"stylelintDetectable":true},{"id":"round-mod-rem","name":"round(), mod(), and rem()","description":"The round(), mod(), and rem() CSS functions compute rounded values and the remainder after division.","groups":["css"],"availability":"newly","baselineLowDate":"2024-05-17","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"118","firefox_android":"118","safari":"17.2","safari_ios":"17.2"},"stylelintDetectable":true},{"id":"ruby-align","name":"ruby-align","description":"The ruby-align CSS property sets the spacing and alignment of ruby annotation text when it does not fill its available space.","groups":["ruby"],"availability":"newly","baselineLowDate":"2024-12-11","support":{"chrome":"128","chrome_android":"128","edge":"128","firefox":"38","firefox_android":"38","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"ruby-overhang","name":"ruby-overhang","description":"The ruby-overhang CSS property sets whether ruby annotations may overlap adjacent text.","groups":["ruby"],"availability":"limited","support":{"safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"ruby-position","name":"ruby-position","description":"The ruby-position CSS property sets the position of a ruby annotation in relation to its base text. Annotations can display over, under, or interleaved with the base text.","groups":["ruby"],"availability":"newly","baselineLowDate":"2024-12-11","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"38","firefox_android":"38","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"safe-area-inset","name":"Safe area inset environment variables","description":"The safe-area-inset- CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, top:\\ env(safe-area-inset-top); positions the top of an element below the notch on an iPhone.","groups":["environment-variables"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"65","firefox_android":"65","safari":"11.1","safari_ios":"11.3"},"stylelintDetectable":true},{"id":"screen","name":"Screen","description":"The window.screen property contains information about the screen of the output device that the referenced window is being rendered on.","groups":[],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":false},{"id":"scripting","name":"scripting media query","description":"The scripting CSS media query sets styles based on whether scripting such as JavaScript is available. Values are enabled if scripting is available, initial-only if scripting is only available on page load (for example, printed content), or none.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2023-12-07","baselineHighDate":"2026-06-07","support":{"chrome":"120","chrome_android":"120","edge":"120","firefox":"113","firefox_android":"113","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"scroll-marker-targets","name":"Scroll marker target pseudo-classes","description":"The :target-current CSS pseudo-class selects the active scroll marker (as in ::scroll-marker), while the :target-after and :target-before pseudo-classes select the inactive markers preceding and following the active scroll marker.","groups":["scroll-markers"],"availability":"limited","support":{"chrome":"142","chrome_android":"142","edge":"142"},"stylelintDetectable":true},{"id":"scroll-markers","name":"Scroll markers","description":"A scroll marker scrolls a container to a scroll target. The ::scroll-marker CSS pseudo-element selects a scroll marker in a ::scroll-marker-group pseudo-element, generated before or after the scroll container. You can use them to navigate and style tables of contents, tab panels, and carousels.","groups":["scroll-markers"],"availability":"limited","support":{"chrome":"135","chrome_android":"135","edge":"135"},"stylelintDetectable":true},{"id":"scroll-elements","name":"Scroll methods on elements","description":"The scroll() and scrollBy() methods change the scroll position of overflow content within an element. Similar to setting scrollTop and scrollLeft properties, but with options setting whether the scroll should animate smoothly or jump. Note that scrollTo() is an alias for scroll().","groups":[],"availability":"widely","baselineLowDate":"2020-09-16","baselineHighDate":"2023-03-16","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"14","safari_ios":"14"},"stylelintDetectable":false},{"id":"scroll-snap","name":"Scroll snap","description":"CSS scroll snap controls the panning and scrolling behavior within a scroll container.","groups":["scrolling"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"69","chrome_android":"69","edge":"79","firefox":"68","firefox_android":"68","safari":"11","safari_ios":"11"},"stylelintDetectable":true},{"id":"scroll-snap-events","name":"Scroll snap events","description":"The scrollsnapchanging and scrollsnapchange events fire when a scroll gesture changes the selected scroll snap target.","groups":["scrolling"],"availability":"limited","support":{"chrome":"129","chrome_android":"129","edge":"129"},"stylelintDetectable":false},{"id":"scroll-behavior","name":"scroll-behavior","description":"The scroll-behavior CSS property controls whether scrolling is smooth or snaps, for scroll actions not performed by the user such as those triggered by navigation.","groups":["scrolling"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"36","firefox_android":"36","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"scroll-driven-animations","name":"Scroll-driven animations","description":"The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user's scroll position.","groups":["scrolling","animation"],"availability":"limited","support":{"chrome":"115","chrome_android":"115","edge":"115","safari":"26","safari_ios":"26"},"stylelintDetectable":true},{"id":"scroll-initial-target","name":"scroll-initial-target","description":"The scroll-initial-target: nearest CSS declaration sets the initial scroll position of its scroll container to the top of the element, much like scrolling to a URL fragment.","groups":[],"availability":"limited","support":{"chrome":"133","chrome_android":"133","edge":"133"},"stylelintDetectable":true},{"id":"scroll-target-group","name":"scroll-target-group","description":"The scroll-target-group CSS property sets the container where anchor links act as scroll markers. Using selectors such as :target-current, you can style elements when a target has scrolled into view. It's an alternative to the ::scroll-marker-group pseudo-element, which generates scroll markers.","groups":["scroll-markers"],"availability":"limited","support":{"chrome":"140","chrome_android":"140","edge":"140"},"stylelintDetectable":true},{"id":"scrollbar-color","name":"scrollbar-color","description":"The scrollbar-color CSS property sets the color of the scrollbar track and thumb.","groups":["scrolling"],"availability":"newly","baselineLowDate":"2025-12-12","support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"64","firefox_android":"64","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"scrollbar-gutter","name":"scrollbar-gutter","description":"The scrollbar-gutter CSS property reserves space for the scrollbar, preventing unwanted layout changes as the scrollbar appears and disappears.","groups":["scrolling"],"availability":"newly","baselineLowDate":"2024-12-11","support":{"chrome":"94","chrome_android":"94","edge":"94","firefox":"97","firefox_android":"97","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"scrollbar-width","name":"scrollbar-width","description":"The scrollbar-width CSS property sets the width of the scrollbar.","groups":["scrolling"],"availability":"newly","baselineLowDate":"2024-12-11","support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"64","firefox_android":"64","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"scrollend","name":"scrollend","description":"The scrollend event fires when an element or document has finished scrolling.","groups":["scrolling"],"availability":"newly","baselineLowDate":"2025-12-12","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"109","firefox_android":"109","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":false},{"id":"scroll-into-view","name":"scrollIntoView()","description":"The scrollIntoView() method scrolls an element's ancestor containers such that the element is visible to the user.","groups":["scrolling"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"},"stylelintDetectable":false},{"id":"scroll-into-view-container","name":"scrollIntoView() container","description":"The container option of the scrollIntoView() method sets which ancestor scroll container to scroll. The \"nearest\" value scrolls only the nearest ancestor, instead of the default \"all\".","groups":["scrolling"],"availability":"limited","support":{"chrome":"140","chrome_android":"140","edge":"140"},"stylelintDetectable":false},{"id":"selectors","name":"Selectors (core)","description":"CSS selectors match elements based on their type, attributes, and relationship to other elements. They define the specific elements to which a block of styles will be applied. This feature represents the oldest selectors of CSS.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"3","safari_ios":"1"},"stylelintDetectable":true},{"id":"shadow-parts","name":"Shadow parts","description":"The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.","groups":["selectors","web-components"],"availability":"widely","baselineLowDate":"2020-07-28","baselineHighDate":"2023-01-28","support":{"chrome":"73","chrome_android":"73","edge":"79","firefox":"72","firefox_android":"79","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"shape-outside","name":"shape-outside","description":"The shape-outside CSS property, along with shape-margin and shape-image-threshold, sets the shape around which adjacent content will wrap.","groups":["clipping-shapes-masking"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"62","firefox_android":"62","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"shape-function","name":"shape()","description":"The shape() CSS function creates shapes with a series of commands like line, move, and curve. It can be used with clip-path and shape-outside.","groups":["clipping-shapes-masking"],"availability":"newly","baselineLowDate":"2026-02-24","support":{"chrome":"135","chrome_android":"135","edge":"135","firefox":"148","firefox_android":"148","safari":"18.4","safari_ios":"18.4"},"stylelintDetectable":true},{"id":"shapes","name":"shapes","description":"The circle(), ellipse(), inset(), and polygon() CSS shape functions create shapes for use with clip-path and shape-outside.","groups":["clipping-shapes-masking"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"37","chrome_android":"37","edge":"79","firefox":"54","firefox_android":"54","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"sibling-count","name":"sibling-count() and sibling-index()","description":"The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a calc() expression.","groups":["css"],"availability":"limited","support":{"chrome":"138","chrome_android":"138","edge":"138","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"contain-size","name":"Size containment","description":"The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.","groups":["containment"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"69","firefox_android":"79","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"viewport-unit-variants","name":"Small, large, and dynamic viewport units","description":"The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.","groups":[],"availability":"widely","baselineLowDate":"2022-12-05","baselineHighDate":"2025-06-05","support":{"chrome":"108","chrome_android":"108","edge":"108","firefox":"101","firefox_android":"101","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"speak","name":"speak","description":"The speak CSS property sets whether or not text should be spoken.","groups":["speech","css"],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"speak-as","name":"speak-as","description":"The speak-as CSS property sets how any element's content is spoken. Not to be confused with the speak-as descriptor of @counter-style at-rules.","groups":["speech","css"],"availability":"limited","support":{"safari":"11.1","safari_ios":"11.3"},"stylelintDetectable":true},{"id":"text-decoration-spelling-grammar","name":"Spelling and grammar text decorations","description":"The text-decoration-line: spelling-error and text-decoration-line: grammar-error CSS declarations apply the browser's marking for spelling and grammatical mistakes. This is typically a wavy underline in red or green.","groups":[],"availability":"newly","baselineLowDate":"2025-12-12","support":{"chrome":"121","chrome_android":"121","edge":"121","firefox":"137","firefox_android":"137","safari":"26.2","safari_ios":"26.2"},"stylelintDetectable":true},{"id":"static-positioning","name":"Static positioning","description":"The position: static CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as top or inset-block-start.","groups":["positioning"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"steps-easing","name":"steps() easing","description":"The steps() CSS easing function divides an animation or transition into equidistant intervals, jumping from value to value. The step-start and step-end keyword values are presets with a single interval.","groups":["animation","transitions"],"availability":"widely","baselineLowDate":"2020-09-16","baselineHighDate":"2023-03-16","support":{"chrome":"77","chrome_android":"77","edge":"79","firefox":"65","firefox_android":"65","safari":"14","safari_ios":"14"},"stylelintDetectable":true},{"id":"sticky-positioning","name":"Sticky positioning","description":"The position: sticky CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position.","groups":["positioning"],"availability":"widely","baselineLowDate":"2019-09-19","baselineHighDate":"2022-03-19","support":{"chrome":"56","chrome_android":"56","edge":"16","firefox":"59","firefox_android":"59","safari":"13","safari_ios":"13"},"stylelintDetectable":true},{"id":"stretch","name":"stretch","description":"The stretch CSS keyword expands a box as needed to fit its contents until the maximum size is reached, without preserving the content's preferred aspect ratio.","groups":["layout"],"availability":"limited","support":{"chrome":"138","chrome_android":"138","edge":"138"},"stylelintDetectable":true},{"id":"style-attr","name":"style (attribute)","description":"The style global HTML attribute applies inline CSS styling declarations to individual elements.","groups":["css","html"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":false},{"id":"contain-style","name":"Style containment","description":"The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.","groups":["containment"],"availability":"widely","baselineLowDate":"2022-07-26","baselineHighDate":"2025-01-26","support":{"chrome":"52","chrome_android":"52","edge":"79","firefox":"103","firefox_android":"103","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"subgrid","name":"Subgrid","description":"The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.","groups":["grid"],"availability":"widely","baselineLowDate":"2023-09-15","baselineHighDate":"2026-03-15","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"71","firefox_android":"79","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"svg","name":"SVG","description":"The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.","groups":["svg","image-formats"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"1","chrome_android":"18","edge":"79","firefox":"3","firefox_android":"4","safari":"3","safari_ios":"2"},"stylelintDetectable":true},{"id":"svg-discouraged","name":"SVG 1.1","description":"The SVG 1.1 image format has several components that were excluded from SVG 2, such as fonts, alternate glyphs, and the xlink namespace.","groups":["svg","image-formats"],"availability":"limited","support":{"safari":"≤13.1","safari_ios":"≤13.4"},"stylelintDetectable":true},{"id":"svg-filters","name":"SVG filters","description":"The <filter> SVG element applies custom effects such as color manipulation, blurring, or morphing to SVG elements.","groups":["svg"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"5","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"6","safari_ios":"6"},"stylelintDetectable":true},{"id":"system-color","name":"System colors","description":"The system color CSS keywords, such as ButtonBorder or LinkText, allow you to match default colors from the user agent.","groups":["color-types"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"font-family-system","name":"System font","description":"The font-family: system-ui CSS declaration uses the operating system default font for text.","groups":[],"availability":"widely","baselineLowDate":"2021-09-07","baselineHighDate":"2024-03-07","support":{"chrome":"56","chrome_android":"56","edge":"79","firefox":"92","firefox_android":"92","safari":"11","safari_ios":"11"},"stylelintDetectable":true},{"id":"tab-size","name":"tab-size","description":"The tab-size CSS property sets the width of the tab character.","groups":["white-space"],"availability":"widely","baselineLowDate":"2021-08-10","baselineHighDate":"2024-02-10","support":{"chrome":"42","chrome_android":"42","edge":"79","firefox":"91","firefox_android":"91","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"table","name":"Tables","description":"The <table> HTML element, with several related elements, represents tabular data in rows and columns of cells.","groups":["html-elements"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"text-overflow","name":"Text overflow","description":"The text-overflow CSS property sets how hidden overflow content appears to users. The property can clip content, truncate content with an ellipsis (…), or truncate with a custom string.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"7","firefox_android":"7","safari":"1.3","safari_ios":"1"},"stylelintDetectable":true},{"id":"text-stroke-fill","name":"Text stroke and fill  (compatibility prefixes)","description":"The -webkit-text-stroke-width and -webkit-text-stroke-color CSS properties set the thickness and color of text outlines. The -webkit-text-fill-color sets the color within text character outlines. Both default to the text color.","groups":["css"],"availability":"widely","baselineLowDate":"2017-04-05","baselineHighDate":"2019-10-05","support":{"chrome":"4","chrome_android":"18","edge":"15","firefox":"49","firefox_android":"49","safari":"3","safari_ios":"2"},"stylelintDetectable":true},{"id":"text-align","name":"text-align","description":"The text-align CSS property sets the horizontal placement of the inner content of a block element.","groups":["text"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"text-align-last","name":"text-align-last","description":"The text-align-last CSS property sets the alignment of the last line of text before a forced line break.","groups":["text"],"availability":"widely","baselineLowDate":"2022-09-12","baselineHighDate":"2025-03-12","support":{"chrome":"47","chrome_android":"47","edge":"12","firefox":"49","firefox_android":"49","safari":"16","safari_ios":"16"},"stylelintDetectable":true},{"id":"text-autospace","name":"text-autospace","description":"The text-autospace CSS property sets whether and how to insert spaces in inter-script text (such as when mixing Latin and Chinese characters) and around punctuation.","groups":[],"availability":"limited","support":{},"stylelintDetectable":true},{"id":"text-box","name":"text-box","description":"The text-box CSS property sets the spacing above and below text based on a font's typographic features. For example, text-box: trim-both ex alphabetic trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.","groups":["text"],"availability":"limited","support":{"chrome":"133","chrome_android":"133","edge":"133","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"text-combine-upright","name":"text-combine-upright","description":"The text-combine-upright CSS property displays multiple characters in the space of a single character in vertical text. This is used in East Asian documents to display Latin-based strings such as components of a date or letters of an initialism.","groups":["text"],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"48","firefox_android":"48","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"text-decoration","name":"text-decoration","description":"The text-decoration CSS property sets the style and color of decorative lines including underline, overline, line-through, or a combination of lines.","groups":[],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"text-decoration-selection","name":"text-decoration in ::selection","description":"The text-decoration CSS property in a ::selection rule sets the underline and other text decoration styles on the text a user has highlighted.","groups":["selectors","selection"],"availability":"limited","support":{"chrome":"105","chrome_android":"105","edge":"105"},"stylelintDetectable":true},{"id":"text-decoration-line-blink","name":"text-decoration-line: blink","description":"The text-decoration: blink CSS declaration flashes text between visible and invisible.","groups":["animation","css"],"availability":"limited","support":{"chrome":"57","chrome_android":"57","edge":"79","firefox":"36","firefox_android":"36","safari":"12.1","safari_ios":"12.2"},"stylelintDetectable":true},{"id":"text-decoration-skip-ink","name":"text-decoration-skip-ink","description":"The text-decoration-skip-ink CSS property sets whether underlines and overlines may be interrupted where the line would cross a glyph.","groups":[],"availability":"widely","baselineLowDate":"2022-03-14","baselineHighDate":"2024-09-14","support":{"chrome":"64","chrome_android":"64","edge":"79","firefox":"70","firefox_android":"79","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"text-decoration-skip-ink-all","name":"text-decoration-skip-ink: all","description":"The text-decoration-skip-ink: all CSS declaration forces interruptions in underlines and overlines where the line would cross a glyph. This contrasts with auto, which does not skip for CJK glyphs.","groups":[],"availability":"newly","baselineLowDate":"2026-05-07","support":{"chrome":"148","chrome_android":"148","edge":"148","firefox":"75","firefox_android":"79","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"text-emphasis","name":"text-emphasis","description":"The text-emphasis CSS property sets position and style for text emphasis marks, especially for East Asian languages.","groups":[],"availability":"widely","baselineLowDate":"2022-03-03","baselineHighDate":"2024-09-03","support":{"chrome":"99","chrome_android":"99","edge":"99","firefox":"46","firefox_android":"46","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"text-fit","name":"text-fit","description":"The text-fit CSS property scales text to fill the inline size of its container. You can use this to grow or shrink headlines, captions, or pull quotes to fit a container.","groups":[],"availability":"limited","support":{"chrome":"150","chrome_android":"150","edge":"150"},"stylelintDetectable":true},{"id":"text-indent","name":"text-indent","description":"The text-indent CSS property sets the size of the empty space (indentation) at the beginning of lines in a text.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"text-indent-each-line","name":"text-indent: each-line","description":"The text-indent: each-line CSS declaration indents text after forced breaks as well as to the first line of a block.","groups":["text"],"availability":"newly","baselineLowDate":"2026-03-13","support":{"chrome":"146","chrome_android":"146","edge":"146","firefox":"121","firefox_android":"121","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"text-indent-hanging","name":"text-indent: hanging","description":"The text-indent: hanging CSS declaration indents all lines except the first.","groups":["text"],"availability":"newly","baselineLowDate":"2026-03-13","support":{"chrome":"146","chrome_android":"146","edge":"146","firefox":"121","firefox_android":"121","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"text-justify","name":"text-justify","description":"The text-justify CSS property sets the justification method of text when text-align: justify is set.","groups":["text"],"availability":"limited","support":{"chrome":"145","chrome_android":"145","edge":"145","firefox":"55","firefox_android":"55"},"stylelintDetectable":true},{"id":"text-orientation","name":"text-orientation","description":"The text-orientation CSS property sets the how text is typeset within a line when the writing mode is vertical.","groups":["text"],"availability":"widely","baselineLowDate":"2020-09-16","baselineHighDate":"2023-03-16","support":{"chrome":"48","chrome_android":"48","edge":"79","firefox":"41","firefox_android":"41","safari":"14","safari_ios":"14"},"stylelintDetectable":true},{"id":"text-shadow","name":"text-shadow","description":"The text-shadow CSS property sets the position and styles of shadow on text.","groups":["text"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"2","chrome_android":"18","edge":"12","firefox":"3.5","firefox_android":"4","safari":"1.1","safari_ios":"1"},"stylelintDetectable":true},{"id":"text-size-adjust","name":"text-size-adjust","description":"The text-size-adjust CSS property disables or modifies the browser's default text size adjustment for small screen sizes.","groups":[],"availability":"limited","support":{"chrome":"54","chrome_android":"54","edge":"79"},"stylelintDetectable":true},{"id":"text-spacing-trim","name":"text-spacing-trim","description":"The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.","groups":["css"],"availability":"limited","support":{"chrome":"123","chrome_android":"123","edge":"123"},"stylelintDetectable":true},{"id":"text-transform","name":"text-transform","description":"The text-transform CSS property sets text case and capitalization.","groups":["text"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"text-underline-offset","name":"text-underline-offset","description":"The text-underline-offset CSS property shifts underlines on text from the initial position by a given distance. The initial position is affected by the text-underline-position property.","groups":["text"],"availability":"widely","baselineLowDate":"2020-11-19","baselineHighDate":"2023-05-19","support":{"chrome":"87","chrome_android":"87","edge":"87","firefox":"70","firefox_android":"79","safari":"12.1","safari_ios":"12.2"},"stylelintDetectable":true},{"id":"text-underline-position","name":"text-underline-position","description":"The text-underline-position CSS property sets the position of underlines on text. For example, text-underline-position: under places the underline below the text, avoiding crossing descenders. The underline may be further adjusted by the text-underline-offset property.","groups":["text"],"availability":"widely","baselineLowDate":"2020-07-28","baselineHighDate":"2023-01-28","support":{"chrome":"33","chrome_android":"33","edge":"12","firefox":"74","firefox_android":"79","safari":"12.1","safari_ios":"12.2"},"stylelintDetectable":true},{"id":"text-wrap","name":"text-wrap","description":"The text-wrap CSS property sets how lines break in text that overflows the container. It is a shorthand for text-wrap-style and text-wrap-mode.","groups":["text-wrap"],"availability":"newly","baselineLowDate":"2024-10-17","support":{"chrome":"130","chrome_android":"130","edge":"130","firefox":"124","firefox_android":"124","safari":"17.5","safari_ios":"17.5"},"stylelintDetectable":true},{"id":"text-wrap-balance","name":"text-wrap: balance","description":"The text-wrap: balance CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing.","groups":["text-wrap"],"availability":"newly","baselineLowDate":"2024-05-13","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"121","firefox_android":"121","safari":"17.5","safari_ios":"17.5"},"stylelintDetectable":true},{"id":"text-wrap-pretty","name":"text-wrap: pretty","description":"The text-wrap: pretty CSS declaration prioritizes better layout over speed when text is broken into multiple lines.","groups":["text-wrap"],"availability":"limited","support":{"chrome":"117","chrome_android":"117","edge":"117","safari":"26","safari_ios":"26"},"stylelintDetectable":true},{"id":"time-relative-selectors","name":"Time-relative pseudo-selectors","description":"The :past and :future CSS pseudo-classes match prior or upcoming text track cues during media playback.","groups":["selectors"],"availability":"limited","support":{"chrome":"23","chrome_android":"25","edge":"79","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"touch-action","name":"touch-action","description":"The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.","groups":[],"availability":"widely","baselineLowDate":"2019-09-19","baselineHighDate":"2022-03-19","support":{"chrome":"36","chrome_android":"36","edge":"12","firefox":"52","firefox_android":"52","safari":"13","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"transform-box","name":"transform-box","description":"The transform-box CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated.","groups":[],"availability":"newly","baselineLowDate":"2024-04-16","support":{"chrome":"118","chrome_android":"118","edge":"118","firefox":"125","firefox_android":"125","safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"transition-behavior","name":"transition-behavior","description":"The transition-behavior: allow-discrete CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%.","groups":["transitions"],"availability":"newly","baselineLowDate":"2024-08-06","support":{"chrome":"117","chrome_android":"117","edge":"117","firefox":"129","firefox_android":"129","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":true},{"id":"transitions","name":"Transitions (CSS)","description":"The transition shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none.","groups":["transitions"],"availability":"widely","baselineLowDate":"2015-09-30","baselineHighDate":"2018-03-30","support":{"chrome":"26","chrome_android":"26","edge":"12","firefox":"16","firefox_android":"16","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"trig-functions","name":"Trigonometric functions (CSS)","description":"The sin(), cos(), tan(), asin(), acos(), atan(), and atan2() CSS functions compute various trigonometric functions.","groups":["css"],"availability":"widely","baselineLowDate":"2023-03-13","baselineHighDate":"2025-09-13","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"108","firefox_android":"108","safari":"15.4","safari_ios":"15.4"},"stylelintDetectable":true},{"id":"two-value-display","name":"Two-value display property","description":"The display CSS property accepts multiple keyword values, such as inline flex or block flow, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.","groups":["css"],"availability":"widely","baselineLowDate":"2023-07-21","baselineHighDate":"2026-01-21","support":{"chrome":"115","chrome_android":"115","edge":"115","firefox":"70","firefox_android":"79","safari":"15","safari_ios":"15"},"stylelintDetectable":true},{"id":"font-family-ui","name":"UI fonts","description":"The ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for the font-family CSS property use device-default user interface fonts for text.","groups":["fonts"],"availability":"limited","support":{"safari":"13.1","safari_ios":"13.4"},"stylelintDetectable":true},{"id":"unset-value","name":"unset","description":"The unset keyword resets any CSS property, removing any values previously set by the author, user, or browser. Inherited properties (like color) reset to the parent element's computed value. Non-inherited properties (like display) reset to the specified initial value (inline).","groups":["explicit-defaults"],"availability":"widely","baselineLowDate":"2016-03-21","baselineHighDate":"2018-09-21","support":{"chrome":"41","chrome_android":"41","edge":"13","firefox":"27","firefox_android":"27","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"update","name":"Update frequency media query","description":"The update CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. For example, you can avoid animations on devices that aren't fast enough to display them smoothly.","groups":["media-queries"],"availability":"widely","baselineLowDate":"2023-09-18","baselineHighDate":"2026-03-18","support":{"chrome":"113","chrome_android":"113","edge":"113","firefox":"102","firefox_android":"102","safari":"17","safari_ios":"17"},"stylelintDetectable":true},{"id":"user-action-pseudos","name":"User action pseudo-classes","description":"The :active, :focus, and :hover CSS pseudo-classes match elements based on how users are interacting with them.","groups":["selectors"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"2","safari_ios":"1"},"stylelintDetectable":true},{"id":"user-select","name":"user-select","description":"The user-select CSS property controls which elements can be selected by the user.","groups":["css"],"availability":"limited","support":{"chrome":"54","chrome_android":"54","edge":"79","firefox":"69","firefox_android":"79"},"stylelintDetectable":true},{"id":"vertical-form-controls","name":"Vertical form controls","description":"The writing-mode CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is vertical-lr or vertical-rl. The direction CSS property sets whether inputs flow from top to bottom or bottom to top.","groups":["css"],"availability":"newly","baselineLowDate":"2024-04-18","support":{"chrome":"124","chrome_android":"124","edge":"124","firefox":"120","firefox_android":"120","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":true},{"id":"vertical-align","name":"vertical-align","description":"The vertical-align CSS property sets the vertical alignment of inline, inline-block, and table cell elements. It has no effect on block-level elements.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"video-dynamic-range","name":"video-dynamic-range media query","description":"The video-dynamic-range CSS media query sets styles based on whether a device can display video with at least standard range colors or at least high range colors. Non-visual devices will match neither.","groups":["media-queries"],"availability":"limited","support":{"firefox":"100","firefox_android":"100"},"stylelintDetectable":true},{"id":"view-transitions","name":"View transitions","description":"View transitions allow you to create animated visual transitions between different states of a document.","groups":["view-transitions"],"availability":"newly","baselineLowDate":"2025-10-14","support":{"chrome":"111","chrome_android":"111","edge":"111","firefox":"144","firefox_android":"144","safari":"18","safari_ios":"18"},"stylelintDetectable":true},{"id":"view-transition-class","name":"view-transition-class","description":"The view-transition-class CSS property sets a name that can be used to apply styles to multiple named view transition pseudo-elements.","groups":["view-transitions"],"availability":"newly","baselineLowDate":"2025-10-14","support":{"chrome":"125","chrome_android":"125","edge":"125","firefox":"144","firefox_android":"144","safari":"18.2","safari_ios":"18.2"},"stylelintDetectable":true},{"id":"viewport-segments","name":"Viewport segments","description":"The viewport segment CSS environment variables and media features, and the viewport.segments API, allow you to adapt your layout to devices where the display is split, such as on foldable devices.","groups":[],"availability":"limited","support":{"chrome":"138","chrome_android":"138","edge":"138"},"stylelintDetectable":true},{"id":"viewport-units","name":"Viewport units","description":"The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.","groups":["units"],"availability":"widely","baselineLowDate":"2017-10-17","baselineHighDate":"2020-04-17","support":{"chrome":"26","chrome_android":"26","edge":"16","firefox":"19","firefox_android":"19","safari":"7","safari_ios":"7"},"stylelintDetectable":true},{"id":"visibility","name":"visibility","description":"The visibility CSS property sets whether an element is shown. Invisible elements still affect the document layout.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1.3","safari_ios":"1"},"stylelintDetectable":true},{"id":"visual-viewport","name":"Visual viewport API","description":"The visualViewport API provides a way to query and modify the user-visible viewport of a web page.","groups":[],"availability":"widely","baselineLowDate":"2021-08-10","baselineHighDate":"2024-02-10","support":{"chrome":"61","chrome_android":"61","edge":"79","firefox":"91","firefox_android":"68","safari":"13","safari_ios":"13"},"stylelintDetectable":false},{"id":"web-animations","name":"Web animations","description":"The web animation API programmatically creates, inspects, and controls element animations, to change and synchronize appearance over time.","groups":["animation"],"availability":"widely","baselineLowDate":"2020-09-16","baselineHighDate":"2023-03-16","support":{"chrome":"84","chrome_android":"84","edge":"84","firefox":"75","firefox_android":"79","safari":"14","safari_ios":"14"},"stylelintDetectable":false},{"id":"webvtt","name":"WebVTT","description":"WebVTT is a captions and subtitles format. WebVTT files are loaded using the <track> element, and the VTTCue API can be used to create or update cues dynamically.","groups":[],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"23","chrome_android":"25","edge":"12","firefox":"31","firefox_android":"31","safari":"6","safari_ios":"8"},"stylelintDetectable":true},{"id":"white-space","name":"white-space","description":"The white-space CSS property sets how white space is collapsed and how lines wrap. It is a shorthand for white-space-collapse and text-wrap-mode.","groups":["white-space"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"white-space-collapse","name":"white-space-collapse","description":"The white-space-collapse CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.","groups":["white-space"],"availability":"newly","baselineLowDate":"2024-03-19","support":{"chrome":"114","chrome_android":"114","edge":"114","firefox":"124","firefox_android":"124","safari":"17.4","safari_ios":"17.4"},"stylelintDetectable":true},{"id":"widows-orphans","name":"Widows and orphans","description":"The widows and orphans CSS properties set the minimum lines included in a text fragment created by page, column, or region breaks.","groups":["layout"],"availability":"limited","support":{"chrome":"25","chrome_android":"25","edge":"12","safari":"1.3","safari_ios":"1"},"stylelintDetectable":true},{"id":"width-height","name":"Width and height","description":"The width and height CSS properties set the preferred physical size of an element.","groups":["layout"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"will-change","name":"will-change","description":"The will-change CSS property gives hints to the browser about expected changes to an element's scroll position, contents, or style. These hints allow browsers to optimize for upcoming style changes.","groups":["css"],"availability":"widely","baselineLowDate":"2020-01-15","baselineHighDate":"2022-07-15","support":{"chrome":"36","chrome_android":"36","edge":"79","firefox":"36","firefox_android":"36","safari":"9.1","safari_ios":"9.3"},"stylelintDetectable":true},{"id":"window-controls-overlay","name":"Window Controls Overlay","description":"The display_override: [\"window-controls-overlay\"] web application manifest member shows content in the title bar area of a progressive web app that is installed on a desktop device.","groups":["progressive-web-app"],"availability":"limited","support":{"chrome":"105","edge":"105"},"stylelintDetectable":true},{"id":"word-break","name":"word-break","description":"The word-break CSS property sets how lines break within words.","groups":["text-wrap"],"availability":"widely","baselineLowDate":"2015-09-30","baselineHighDate":"2018-03-30","support":{"chrome":"44","chrome_android":"44","edge":"12","firefox":"15","firefox_android":"15","safari":"9","safari_ios":"9"},"stylelintDetectable":true},{"id":"word-break-auto-phrase","name":"word-break: auto-phrase","description":"The word-break: auto-phrase CSS declaration specifies that wrapping should occur at natural phrase boundaries, especially in CJK languages.","groups":["text-wrap"],"availability":"limited","support":{"chrome":"119","chrome_android":"119","edge":"119"},"stylelintDetectable":true},{"id":"word-break-break-word","name":"word-break: break-word","description":"The word-break: break-word CSS declaration sets word breaks to occur according to their customary rules.","groups":["css"],"availability":"limited","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"67","firefox_android":"67","safari":"3","safari_ios":"2"},"stylelintDetectable":true},{"id":"word-spacing","name":"word-spacing","description":"The word-spacing CSS property sets the amount of white space between words.","groups":["text"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"1","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"writing-mode","name":"writing-mode","description":"The writing-mode CSS property sets whether text is laid out horizontally or vertically, and left to right, or right to left.","groups":["css"],"availability":"widely","baselineLowDate":"2017-03-27","baselineHighDate":"2019-09-27","support":{"chrome":"48","chrome_android":"48","edge":"12","firefox":"41","firefox_android":"41","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"writing-mode-svg-values","name":"writing-mode SVG 1.1 values","description":"The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents.","groups":["css"],"availability":"limited","support":{"chrome":"48","chrome_android":"48","edge":"12","firefox":"43","firefox_android":"43","safari":"10.1","safari_ios":"10.3"},"stylelintDetectable":true},{"id":"z-index","name":"z-index","description":"The z-index CSS property orders overlapping elements, with higher values appearing in front of or on top of lower values.","groups":["css"],"availability":"widely","baselineLowDate":"2015-07-29","baselineHighDate":"2018-01-29","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"3","firefox_android":"4","safari":"1","safari_ios":"1"},"stylelintDetectable":true},{"id":"zoom","name":"zoom","description":"The zoom CSS property scales the size of an element. Unlike the transform property, a zoomed element affects page layout.","groups":[],"availability":"newly","baselineLowDate":"2024-05-14","support":{"chrome":"1","chrome_android":"18","edge":"12","firefox":"126","firefox_android":"126","safari":"3.1","safari_ios":"3"},"stylelintDetectable":true}]}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@schalkneethling/calavera-baseline-core",
+  "version": "0.2.0-next.2",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/schalkneethling/create-project-calavera.git",
+    "directory": "packages/baseline-core"
+  },
+  "files": [
+    "data",
+    "src"
+  ],
+  "type": "module",
+  "exports": "./src/index.js",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "baseline-browser-mapping": "2.10.43",
+    "web-features": "3.34.0"
+  },
+  "scripts": {
+    "build:data": "node scripts/build-data.mjs",
+    "test": "node scripts/build-data.mjs --check && node --test test/*.test.mjs"
+  }
+}

package/src/index.js

@@ -0,0 +1,247 @@
+// @ts-check
+import baselineData from "../data/baseline.json" with { type: "json" };
+
+const MOVING_TARGETS = new Set(["widely", "newly"]);
+
+/**
+ * @param {unknown} target
+ * @param {{ firstBaselineYear: number, currentYear: number }} data
+ * @returns {"widely" | "newly" | number}
+ */
+export function normalizeBaselineTarget(target, data = baselineData) {
+  if (typeof target === "string" && MOVING_TARGETS.has(target)) {
+    return /** @type {"widely" | "newly"} */ (target);
+  }
+
+  const year = typeof target === "string" && /^\d{4}$/.test(target) ? Number(target) : target;
+
+  if (
+    Number.isInteger(year) &&
+    Number(year) >= data.firstBaselineYear &&
+    Number(year) <= data.currentYear
+  ) {
+    return Number(year);
+  }
+
+  throw new Error(
+    `Baseline target must be widely, newly, or a year from ${data.firstBaselineYear} through ${data.currentYear}.`,
+  );
+}
+
+/**
+ * @param {unknown} value
+ * @returns {asserts value is typeof baselineData}
+ */
+function assertDataset(value) {
+  const data = /** @type {Record<string, unknown>} */ (value);
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !Array.isArray(data.features) ||
+    typeof data.firstBaselineYear !== "number" ||
+    typeof data.currentYear !== "number" ||
+    !data.browserTargets
+  ) {
+    throw new Error("Expected a generated Baseline dataset.");
+  }
+}
+
+/**
+ * @param {typeof baselineData} [data]
+ */
+export function createBaselineEngine(data = baselineData) {
+  assertDataset(data);
+  const featuresById = new Map(data.features.map((feature) => [feature.id, feature]));
+
+  /** @param {unknown} target */
+  function featuresForTarget(target) {
+    const normalized = normalizeBaselineTarget(target, data);
+
+    if (normalized === "widely") {
+      return data.features.filter(({ availability }) => availability === "widely");
+    }
+
+    if (normalized === "newly") {
+      return data.features.filter(({ availability }) => availability !== "limited");
+    }
+
+    return data.features.filter(({ baselineLowDate }) => {
+      return baselineLowDate && Number(baselineLowDate.slice(0, 4)) <= normalized;
+    });
+  }
+
+  /** @param {unknown} target */
+  function browserVersionsForTarget(target) {
+    const normalized = normalizeBaselineTarget(target, data);
+    const years = /** @type {Record<string, typeof data.browserTargets.widely>} */ (
+      data.browserTargets.years
+    );
+    return typeof normalized === "number"
+      ? years[String(normalized)]
+      : data.browserTargets[normalized];
+  }
+
+  /** @param {unknown} target */
+  function describeTarget(target) {
+    const normalized = normalizeBaselineTarget(target, data);
+    const fixed = typeof normalized === "number";
+
+    return {
+      target: normalized,
+      fixed,
+      evolving:
+        normalized === "widely" || normalized === "newly" || normalized === data.currentYear,
+      description: fixed
+        ? `A fixed cumulative target containing features that became Baseline Newly available by the end of ${normalized}.`
+        : normalized === "widely"
+          ? "A moving target containing features that have been interoperable across the core browser set for at least 30 months."
+          : "A moving target containing features currently interoperable across the core browser set.",
+      browserVersions: browserVersionsForTarget(normalized),
+      featureCount: featuresForTarget(normalized).length,
+    };
+  }
+
+  function listTargets() {
+    const years = Array.from(
+      { length: data.currentYear - data.firstBaselineYear + 1 },
+      (_, index) => data.firstBaselineYear + index,
+    );
+    return [describeTarget("widely"), describeTarget("newly"), ...years.map(describeTarget)];
+  }
+
+  /**
+   * @param {unknown} query
+   * @param {{ limit?: number }} [options]
+   */
+  function searchFeatures(query, options = {}) {
+    const normalizedQuery = String(query ?? "")
+      .trim()
+      .toLowerCase();
+    const requestedLimit = options.limit;
+    const limit =
+      Number.isInteger(requestedLimit) && Number(requestedLimit) > 0 ? Number(requestedLimit) : 20;
+
+    return data.features
+      .filter((feature) => {
+        if (!normalizedQuery) {
+          return true;
+        }
+
+        return [feature.id, feature.name, feature.description, ...feature.groups]
+          .join(" ")
+          .toLowerCase()
+          .includes(normalizedQuery);
+      })
+      .slice(0, limit);
+  }
+
+  /** @param {string[]} featureIds */
+  function recommendTarget(featureIds) {
+    if (!Array.isArray(featureIds) || featureIds.length === 0) {
+      throw new Error("Select at least one Baseline feature.");
+    }
+
+    const selected = [...new Set(featureIds)].map((id) => {
+      const feature = featuresById.get(id);
+      if (!feature) {
+        throw new Error(`Unknown Baseline feature: ${id}.`);
+      }
+      return feature;
+    });
+    const limitedFeatures = selected.filter(({ availability }) => availability === "limited");
+
+    if (limitedFeatures.length > 0) {
+      return {
+        recommendedTarget: null,
+        compatibleWithNewly: false,
+        compatibleWithWidely: false,
+        limitingFeatures: limitedFeatures,
+        limitedFeatures,
+        browserVersions: null,
+        integrationOptions: null,
+      };
+    }
+
+    const latestYear = Math.max(
+      data.firstBaselineYear,
+      ...selected.map(({ baselineLowDate }) =>
+        baselineLowDate ? Number(baselineLowDate.slice(0, 4)) : data.currentYear,
+      ),
+    );
+    const limitingFeatures = selected.filter(
+      ({ baselineLowDate }) =>
+        (baselineLowDate ? Number(baselineLowDate.slice(0, 4)) : data.currentYear) === latestYear,
+    );
+
+    return {
+      recommendedTarget: latestYear,
+      compatibleWithNewly: true,
+      compatibleWithWidely: selected.every(({ availability }) => availability === "widely"),
+      limitingFeatures,
+      limitedFeatures: [],
+      browserVersions: browserVersionsForTarget(latestYear),
+      integrationOptions: {
+        "stylelint-baseline": {
+          available: latestYear,
+          severity: "warning",
+        },
+      },
+    };
+  }
+
+  return {
+    metadata: {
+      generatedAt: data.generatedAt,
+      sources: data.sources,
+      featureCount: data.features.length,
+      firstBaselineYear: data.firstBaselineYear,
+      currentYear: data.currentYear,
+    },
+    listTargets,
+    describeTarget,
+    searchFeatures,
+    recommendTarget,
+  };
+}
+
+/**
+ * @param {unknown} target
+ * @param {string} [severity]
+ */
+export function stylelintBaselineRule(target, severity = "warning") {
+  const available = normalizeBaselineTarget(target);
+  if (severity !== "warning" && severity !== "error") {
+    throw new Error("Stylelint Baseline severity must be warning or error.");
+  }
+
+  return [true, { available, severity }];
+}
+
+/**
+ * @param {unknown} target
+ * @param {string} [severity]
+ */
+export function baselineConfiguration(target, severity = "warning") {
+  const rule = stylelintBaselineRule(target, severity);
+  return {
+    stylelintRule: { "plugin/use-baseline": rule },
+    stylelintConfig: {
+      plugins: ["stylelint-plugin-use-baseline"],
+      rules: { "plugin/use-baseline": rule },
+    },
+    calaveraRecipe: {
+      integrations: ["stylelint", "stylelint-standard", "stylelint-baseline"],
+      integrationOptions: {
+        "stylelint-baseline": rule[1],
+      },
+    },
+  };
+}
+
+const defaultEngine = createBaselineEngine();
+
+export const baselineMetadata = defaultEngine.metadata;
+export const listBaselineTargets = defaultEngine.listTargets;
+export const describeBaselineTarget = defaultEngine.describeTarget;
+export const searchBaselineFeatures = defaultEngine.searchFeatures;
+export const recommendBaselineTarget = defaultEngine.recommendTarget;

package/src/specification-url.js

@@ -0,0 +1,13 @@
+const CSS_SPECIFICATION_HOSTS = new Set(["drafts.csswg.org"]);
+
+/**
+ * @param {string} value
+ * @returns {boolean}
+ */
+export function isCssSpecificationUrl(value) {
+  try {
+    return CSS_SPECIFICATION_HOSTS.has(new URL(value).hostname);
+  } catch {
+    return false;
+  }
+}