Comparing version 1.6.0 to 2.0.0
# Changes to cssdb | ||
### 2.0.0 (April 7th, 2018) | ||
- Renamed: GitHub repository from `css-db` to `cssdb`, now aligning with npm. | ||
- Renamed: All feature IDs. | ||
- Updated: Documentation. | ||
Notes: The old feature IDs were problematic because they attempted to follow | ||
specification section IDs, but some specifications weren’t aren’t always | ||
covered by a single section, and many sections were inconsistently named. | ||
Because there was no pattern one could predict for any of the headings, a new | ||
system was created; to **name** the feature and provide **context**. This meant | ||
a feature ID like `css-cascade-all-shorthand` became `all-property`, and `css-fonts-propdef-font-variant` became `font-variant-property`, etc. This | ||
greatly simplified all of the feature IDs and allowed for more predictive | ||
naming moving forward. | ||
### 1.6.0 (February 18th, 2018) | ||
@@ -4,0 +19,0 @@ |
450
cssdb.json
[ | ||
{ | ||
"title": "Break Properties", | ||
"description": "Properties for defining the break behavior between and within boxes", | ||
"specification": "https://www.w3.org/TR/css-break-3/#breaking-controls", | ||
"specificationId": "break-properties", | ||
"stage": 4, | ||
"caniuse": "multicolumn", | ||
"example": "a {\n break-inside: avoid;\n break-before: avoid-column;\n break-after: always;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/shrpne/postcss-page-break" | ||
} | ||
] | ||
}, | ||
{ | ||
"title": "Cascade `all` Property", | ||
"id": "all-property", | ||
"title": "`all` Property", | ||
"description": "A property for defining the reset of all properties of an element", | ||
"specification": "https://www.w3.org/TR/css-cascade-3/#all-shorthand", | ||
"specificationId": "css-cascade-all-shorthand", | ||
"stage": 4, | ||
@@ -33,21 +18,13 @@ "caniuse": "css-all", | ||
{ | ||
"title": "Color Functional Notation", | ||
"description": "A space and slash separated notation specifying colors", | ||
"specification": "https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0", | ||
"specificationId": "css-color-functional-notation", | ||
"stage": 2, | ||
"example": "em {\n background-color: hsl(120deg 100% 25%);\n box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);\n color: rgb(0 255 0);\n}" | ||
}, | ||
{ | ||
"title": "Color `#RRGGBBAA` Notation", | ||
"description": "A 4 & 8 character hex notation for color to include the opacity level", | ||
"specification": "https://www.w3.org/TR/css-color-4/#hex-notation", | ||
"specificationId": "css-color-hex-notation", | ||
"id": "any-link-pseudo-class", | ||
"title": "`:any-link` Hyperlink Pseudo-Class", | ||
"description": "A pseudo-class for matching anchor elements independent of whether they have been visited", | ||
"specification": "https://www.w3.org/TR/selectors4/#any-link-pseudo", | ||
"stage": 3, | ||
"caniuse": "css-rrggbbaa", | ||
"example": "section {\n background-color: #f3f3f3f3;\n color: #0003;\n}", | ||
"caniuse": "css-any-link", | ||
"example": "nav :any-link > span {\n background-color: yellow;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-color-hex-alpha" | ||
"link": "https://github.com/jonathantneal/postcss-pseudo-class-any-link" | ||
} | ||
@@ -57,12 +34,27 @@ ] | ||
{ | ||
"title": "Color `color-mod()` Function", | ||
"description": "A function used to modify a color", | ||
"specification": "https://www.w3.org/TR/css-color-4/#modifying-colors", | ||
"specificationId": "css-color-modifying-colors", | ||
"stage": 3, | ||
"example": "p {\n color: color-mod(black alpha(50%));\n}", | ||
"id": "aspect-ratio-property", | ||
"title": "`aspect-ratio` Property", | ||
"description": "A property for defining the aspect ratio of an element", | ||
"specification": "https://tomhodgins.github.io/aspect-ratio-spec/aspect-ratio.html", | ||
"stage": 0, | ||
"example": "div {\n aspect-ratio: 16/9;\n width: 200px;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "JavaScript Library", | ||
"link": "https://github.com/tomhodgins/aspect-ratio-spec" | ||
} | ||
] | ||
}, | ||
{ | ||
"id": "break-properties", | ||
"title": "Break Properties", | ||
"description": "Properties for defining the break behavior between and within boxes", | ||
"specification": "https://www.w3.org/TR/css-break-3/#breaking-controls", | ||
"stage": 4, | ||
"caniuse": "multicolumn", | ||
"example": "a {\n break-inside: avoid;\n break-before: avoid-column;\n break-after: always;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-color-mod-function" | ||
"link": "https://github.com/shrpne/postcss-page-break" | ||
} | ||
@@ -72,12 +64,13 @@ ] | ||
{ | ||
"title": "Color `gray()` Function", | ||
"description": "A function used to create fully desaturated colors", | ||
"specification": "https://www.w3.org/TR/css-color-4/#grays", | ||
"specificationId": "css-color-grays", | ||
"id": "case-insensitive-attributes", | ||
"title": "Case-Insensitive Attributes", | ||
"description": "An attribute selector matching attribute values case-insensitively", | ||
"specification": "https://www.w3.org/TR/selectors4/#attribute-case", | ||
"stage": 3, | ||
"example": "p {\n color: gray(red);\n}", | ||
"caniuse": "css-case-insensitive", | ||
"example": "[frame=hsides i] {\n border-style: solid none;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-color-gray" | ||
"link": "https://github.com/Semigradsky/postcss-attribute-case-insensitive" | ||
} | ||
@@ -87,12 +80,20 @@ ] | ||
{ | ||
"title": "Color `hwb()` Function", | ||
"description": "A function used to specify colors, similar to HSL, but often even easier for humans to work with", | ||
"specification": "https://www.w3.org/TR/css-color-4/#the-hwb-notation", | ||
"specificationId": "css-color-hwb-notation", | ||
"id": "color-functional-notation", | ||
"title": "Color Functional Notation", | ||
"description": "A space and slash separated notation for specifying colors", | ||
"specification": "https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0", | ||
"stage": 2, | ||
"example": "em {\n background-color: hsl(120deg 100% 25%);\n box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);\n color: rgb(0 255 0);\n}" | ||
}, | ||
{ | ||
"id": "color-mod-function", | ||
"title": "`color-mod()` Function", | ||
"description": "A function for modifying colors", | ||
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-color-mod", | ||
"stage": 3, | ||
"example": "p {\n color: hwb(120, 44%, 50%);\n}", | ||
"example": "p {\n color: color-mod(black alpha(50%));\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-color-hwb" | ||
"link": "https://github.com/jonathantneal/postcss-color-mod-function" | ||
} | ||
@@ -102,13 +103,12 @@ ] | ||
{ | ||
"title": "Color `rebeccapurple`", | ||
"description": "A particularly lovely shade of purple in memory of Rebecca Alison Meyer", | ||
"specification": "https://www.w3.org/TR/css-color-4/#valdef-color-rebeccapurple", | ||
"specificationId": "css-color-valdef-color-rebeccapurple", | ||
"stage": 3, | ||
"caniuse": "css-rebeccapurple", | ||
"example": "html {\n color: rebeccapurple;\n}", | ||
"id": "custom-media-queries", | ||
"title": "Custom Media Queries", | ||
"description": "An at-rule for defining aliases that represent media queries", | ||
"specification": "https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media", | ||
"stage": 2, | ||
"example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-color-rebeccapurple" | ||
"link": "https://github.com/postcss/postcss-custom-media" | ||
} | ||
@@ -118,6 +118,6 @@ ] | ||
{ | ||
"id": "custom-properties", | ||
"title": "Custom Properties", | ||
"description": "A syntax for defining custom values accepted by all CSS properties", | ||
"specification": "https://www.w3.org/TR/css-variables-1/", | ||
"specificationId": "css-variables", | ||
"stage": 4, | ||
@@ -134,6 +134,6 @@ "caniuse": "css-variables", | ||
{ | ||
"id": "custom-property-sets", | ||
"title": "Custom Property Sets", | ||
"description": "A syntax for storing properties in a named variable, referenceable in other style rules", | ||
"description": "A syntax for storing properties in named variables, referenceable in other style rules", | ||
"specification": "https://tabatkins.github.io/specs/css-apply-rule/", | ||
"specificationId": "css-apply-rule", | ||
"stage": -1, | ||
@@ -150,6 +150,6 @@ "caniuse": "css-apply-rule", | ||
{ | ||
"id": "custom-selectors", | ||
"title": "Custom Selectors", | ||
"description": "An at-rule defining aliases representing selectors", | ||
"description": "An at-rule for defining aliases that represent selectors", | ||
"specification": "https://drafts.csswg.org/css-extensions/#custom-selectors", | ||
"specificationId": "css-extensions-custom-selectors", | ||
"stage": 2, | ||
@@ -165,6 +165,21 @@ "example": "@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\narticle :--heading + p {}", | ||
{ | ||
"id": "dir-pseudo-class", | ||
"title": "`:dir` Directionality Pseudo-Class", | ||
"description": "A pseudo-class for matching elements based on their directionality", | ||
"specification": "https://www.w3.org/TR/selectors4/#dir-pseudo", | ||
"stage": 3, | ||
"caniuse": "css-dir-pseudo", | ||
"example": ".example:dir(rtl) {\n margin-right: 10px;\n}\n\n.example:dir(ltr) {\n margin-left: 10px;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-dir-pseudo-class" | ||
} | ||
] | ||
}, | ||
{ | ||
"id": "element-queries", | ||
"title": "Element Queries", | ||
"description": "A syntax for container-style element queries", | ||
"specification": "https://tomhodgins.github.io/element-queries-spec/element-queries.html", | ||
"specificationId": "elementqueries", | ||
"stage": 0, | ||
@@ -180,13 +195,17 @@ "example": "@element html and (min-width: 500px) {\n body {\n background: lime;\n }\n}", | ||
{ | ||
"title": "Font `font-variant` Property", | ||
"description": "A property defining the usage of alternate glyphs in a font", | ||
"specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant", | ||
"specificationId": "css-fonts-propdef-font-variant", | ||
"stage": 4, | ||
"caniuse": "font-variant-alternates", | ||
"example": "h2 {\n font-variant-caps: small-caps;\n}", | ||
"id": "focus-visible-pseudo-class", | ||
"title": "`:focus-visible` Focus-Indicated Pseudo-Class", | ||
"description": "A pseudo-class for matching focused elements that indicate that focus to a user", | ||
"specification": "https://www.w3.org/TR/selectors-4/#focus-visible-pseudo", | ||
"stage": 3, | ||
"caniuse": "css-focus-visible", | ||
"example": ":focus:not(:focus-visible) {\n outline: 0;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "JavaScript Library", | ||
"link": "https://github.com/WICG/focus-visible" | ||
}, | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-font-variant" | ||
"link": "https://github.com/jonathantneal/postcss-focus-visible" | ||
} | ||
@@ -196,13 +215,17 @@ ] | ||
{ | ||
"title": "Font `system-ui` Family", | ||
"description": "A generic font intended to match the default user interface", | ||
"specification": "https://www.w3.org/TR/css-fonts-4/#system-ui-def", | ||
"specificationId": "css-fonts-system-ui-def", | ||
"id": "focus-within-pseudo-class", | ||
"title": "`:focus-within` Focus Container Pseudo-Class", | ||
"description": "A pseudo-class for matching elements that are either focused or that have focused descendants", | ||
"specification": "https://www.w3.org/TR/selectors-4/#focus-within-pseudo", | ||
"stage": 3, | ||
"caniuse": "font-family-system-ui", | ||
"example": "body {\n font-family: system-ui;\n}", | ||
"caniuse": "css-focus-within", | ||
"example": "form:focus-within {\n background: rgba(0, 0, 0, 0.3);\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "JavaScript Library", | ||
"link": "https://github.com/jonathantneal/focus-within" | ||
}, | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/JLHwung/postcss-font-family-system-ui" | ||
"link": "https://github.com/jonathantneal/postcss-focus-within" | ||
} | ||
@@ -212,22 +235,13 @@ ] | ||
{ | ||
"title": "Grid Layout", | ||
"description": "A syntax for using a grid concept to lay out content", | ||
"specification": "https://www.w3.org/TR/css-grid-1/", | ||
"specificationId": "css-grid", | ||
"id": "font-variant-property", | ||
"title": "`font-variant` Property", | ||
"description": "A property for defining the usage of alternate glyphs in a font", | ||
"specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant", | ||
"stage": 4, | ||
"caniuse": "css-grid", | ||
"example": "section {\n display: grid;\n grid-template-columns: 100px 100px 100px;\n grid-gap: 10px;\n}" | ||
}, | ||
{ | ||
"title": "Image `image-set()` Function", | ||
"description": "A function for delivering the most appropriate image for a user’s device", | ||
"specification": "https://www.w3.org/TR/css-images-4/#image-set-notation", | ||
"specificationId": "css-images-image-set-notation", | ||
"stage": 3, | ||
"caniuse": "css-image-set", | ||
"example": "p {\n background-image: image-set(\n \"foo.png\" 1x,\n \"foo-2x.png\" 2x,\n \"foo-print.png\" 600dpi\n );\n}", | ||
"caniuse": "font-variant-alternates", | ||
"example": "h2 {\n font-variant-caps: small-caps;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/SuperOl3g/postcss-image-set-polyfill" | ||
"link": "https://github.com/postcss/postcss-font-variant" | ||
} | ||
@@ -237,13 +251,12 @@ ] | ||
{ | ||
"title": "Logical Properties and Values", | ||
"description": "Flow-relative (LTR or RTL) properties and values", | ||
"specification": "https://www.w3.org/TR/css-logical/", | ||
"specificationId": "css-logical", | ||
"id": "gray-function", | ||
"title": "`gray()` Function", | ||
"description": "A function for specifying fully desaturated colors", | ||
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-gray", | ||
"stage": 3, | ||
"caniuse": "css-logical-props", | ||
"example": "span:first-child {\n float: inline-start;\n margin-inline-start: 10px;\n}", | ||
"example": "p {\n color: gray(50);\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-logical-properties" | ||
"link": "https://github.com/postcss/postcss-color-gray" | ||
} | ||
@@ -253,12 +266,13 @@ ] | ||
{ | ||
"title": "Media Queries Custom Media Queries", | ||
"description": "An at-rule defining aliases representing media queries", | ||
"specification": "https://drafts.csswg.org/mediaqueries-5/#custom-mq", | ||
"specificationId": "mediaqueries-custom-mq", | ||
"stage": 2, | ||
"example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}", | ||
"id": "grid-layout", | ||
"title": "Grid Layout", | ||
"description": "A syntax for using a grid concept to lay out content", | ||
"specification": "https://www.w3.org/TR/css-grid-1/", | ||
"stage": 4, | ||
"caniuse": "css-grid", | ||
"example": "section {\n display: grid;\n grid-template-columns: 100px 100px 100px;\n grid-gap: 10px;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-custom-media" | ||
"link": "https://github.com/postcss/autoprefixer" | ||
} | ||
@@ -268,12 +282,21 @@ ] | ||
{ | ||
"title": "Media Queries Ranges", | ||
"description": "A syntax defining media query ranges using ordinary mathematical comparison operators", | ||
"specification": "https://www.w3.org/TR/mediaqueries-4/#mq-ranges", | ||
"specificationId": "mediaqueries-mq-ranges", | ||
"id": "has-pseudo-class", | ||
"title": "`:has()` Relational Pseudo-Class", | ||
"description": "A pseudo-class for matching ancestor and sibling elements", | ||
"specification": "https://www.w3.org/TR/selectors-4/#has-pseudo", | ||
"stage": 3, | ||
"example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}", | ||
"example": "a:has(> img) {\n display: block;\n}" | ||
}, | ||
{ | ||
"id": "hexadecimal-alpha-notation", | ||
"title": "Hexadecimal Alpha Notation", | ||
"description": "A 4 & 8 character hex color notation for specifying the opacity level", | ||
"specification": "https://www.w3.org/TR/css-color-4/#hex-notation", | ||
"stage": 3, | ||
"caniuse": "css-rrggbbaa", | ||
"example": "section {\n background-color: #f3f3f3f3;\n color: #0003;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-media-minmax" | ||
"link": "https://github.com/postcss/postcss-color-hex-alpha" | ||
} | ||
@@ -283,12 +306,12 @@ ] | ||
{ | ||
"title": "Media Queries `media()` Function", | ||
"description": "A function matching media queries within values", | ||
"specification": "https://jonathantneal.github.io/media-expressions-spec/", | ||
"specificationId": "media-expressions", | ||
"stage": 0, | ||
"example": "p {\n font-size: media(\n 16px,\n (min-width: 600px) 20px,\n (min-width: 1000px) 40px,\n (min-width: 1400px) 60px\n );\n}", | ||
"id": "hwb-function", | ||
"title": "`hwb()` Function", | ||
"description": "A function for specifying colors by hue and then a degree of whiteness and blackness to mix into it", | ||
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-hwb", | ||
"stage": 3, | ||
"example": "p {\n color: hwb(120 44% 50%);\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-media-fn" | ||
"link": "https://github.com/postcss/postcss-color-hwb" | ||
} | ||
@@ -298,12 +321,13 @@ ] | ||
{ | ||
"title": "Nesting", | ||
"description": "A syntax for nesting relative rules inside another", | ||
"specification": "https://tabatkins.github.io/specs/css-nesting/", | ||
"specificationId": "css-nesting", | ||
"stage": 1, | ||
"example": "article {\n & p {\n color: #333;\n }\n}", | ||
"id": "image-set-function", | ||
"title": "`image-set()` Function", | ||
"description": "A function for specifying image sources based on the user’s resolution", | ||
"specification": "https://www.w3.org/TR/css-images-4/#image-set-notation", | ||
"stage": 3, | ||
"caniuse": "css-image-set", | ||
"example": "p {\n background-image: image-set(\n \"foo.png\" 1x,\n \"foo-2x.png\" 2x,\n \"foo-print.png\" 600dpi\n );\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-nesting" | ||
"link": "https://github.com/jonathantneal/postcss-image-set-function" | ||
} | ||
@@ -313,13 +337,29 @@ ] | ||
{ | ||
"title": "Selector Attribute Case-Sensitivity", | ||
"description": "An attribute selector matching attribute values case-insensitively", | ||
"specification": "https://www.w3.org/TR/selectors4/#attribute-case", | ||
"specificationId": "selectors-attribute-case", | ||
"id": "lab-function", | ||
"title": "`lab()` Function", | ||
"description": "A function for specifying colors expressed in the CIE Lab color space", | ||
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-lab", | ||
"stage": 3, | ||
"caniuse": "css-case-insensitive", | ||
"example": "[frame=hsides i] {\n border-style: solid none;\n}", | ||
"example": "example {\n color: lab(240 50 20)\n}" | ||
}, | ||
{ | ||
"id": "lch-function", | ||
"title": "`lch()` Function", | ||
"description": "A function for specifying colors expressed in the CIE Lab color space with chroma and hue", | ||
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-lch", | ||
"stage": 3, | ||
"example": "example {\n color: lch(53 105 40)\n}" | ||
}, | ||
{ | ||
"id": "logical-properties-and-values", | ||
"title": "Logical Properties and Values", | ||
"description": "Flow-relative (left-to-right or right-to-left) properties and values", | ||
"specification": "https://www.w3.org/TR/css-logical/", | ||
"stage": 3, | ||
"caniuse": "css-logical-props", | ||
"example": "span:first-child {\n float: inline-start;\n margin-inline-start: 10px;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/Semigradsky/postcss-attribute-case-insensitive" | ||
"link": "https://github.com/jonathantneal/postcss-logical-properties" | ||
} | ||
@@ -329,13 +369,13 @@ ] | ||
{ | ||
"title": "Selector `:any-link` Pseudo-Class", | ||
"description": "A pseudo-class matching anchor elements independent of whether they have been visited", | ||
"specification": "https://www.w3.org/TR/selectors4/#the-any-link-pseudo", | ||
"specificationId": "selectors-any-link-pseudo", | ||
"id": "matches-pseudo-class", | ||
"title": "`:matches()` Matches-Any Pseudo-Class", | ||
"description": "A pseudo-class for matching elements in a selector list", | ||
"specification": "https://www.w3.org/TR/selectors4/#matches-pseudo", | ||
"stage": 3, | ||
"caniuse": "css-any-link", | ||
"example": "nav :any-link > span {\n background-color: yellow;\n}", | ||
"caniuse": "css-matches-pseudo", | ||
"example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-pseudo-class-any-link" | ||
"link": "https://github.com/postcss/postcss-selector-matches" | ||
} | ||
@@ -345,13 +385,12 @@ ] | ||
{ | ||
"title": "Selector `:dir` Pseudo-Class", | ||
"description": "A pseudo-class matching elements based on their directionality", | ||
"specification": "https://www.w3.org/TR/selectors4/#the-dir-pseudo", | ||
"specificationId": "selectors-dir-pseudo", | ||
"stage": 3, | ||
"caniuse": "css-dir-pseudo", | ||
"example": ".example:dir(rtl) {\n margin-right: 10px;\n}\n\n.example:dir(ltr) {\n margin-left: 10px;\n}", | ||
"id": "media-function", | ||
"title": "`media()` Function", | ||
"description": "A function for specifying media queries within values", | ||
"specification": "https://jonathantneal.github.io/media-expressions-spec/", | ||
"stage": 0, | ||
"example": "p {\n font-size: media(\n 16px,\n (min-width: 600px) 20px,\n (min-width: 1000px) 40px,\n (min-width: 1400px) 60px\n );\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-dir-pseudo-class" | ||
"link": "https://github.com/jonathantneal/postcss-media-fn" | ||
} | ||
@@ -361,17 +400,12 @@ ] | ||
{ | ||
"title": "Selector `:focus-visible` Focus-Indicated Pseudo-Class", | ||
"description": "A pseudo-class matching elements with `:focus` that would also make focus evident", | ||
"specification": "https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo", | ||
"specificationId": "selectors-focus-visible-pseudo", | ||
"id": "media-query-ranges", | ||
"title": "Media Query Ranges", | ||
"description": "A syntax for defining media query ranges using ordinary comparison operators", | ||
"specification": "https://www.w3.org/TR/mediaqueries-4/#range-context", | ||
"stage": 3, | ||
"caniuse": "css-focus-visible", | ||
"example": ":focus:not(:focus-visible) {\n outline: 0;\n}", | ||
"example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}", | ||
"polyfills": [ | ||
{ | ||
"type": "JavaScript Library", | ||
"link": "https://github.com/WICG/focus-visible" | ||
}, | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-focus-visible" | ||
"link": "https://github.com/postcss/postcss-media-minmax" | ||
} | ||
@@ -381,17 +415,12 @@ ] | ||
{ | ||
"title": "Selector `:focus-within` Focus Container Pseudo-Class", | ||
"description": "A pseudo-class matching elements that either themselves match `:focus` or that have descendants which match `:focus`", | ||
"specification": "https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo", | ||
"specificationId": "selectors-focus-within-pseudo", | ||
"stage": 3, | ||
"caniuse": "css-focus-within", | ||
"example": "form:focus-within {\n background: rgba(0, 0, 0, 0.3);\n}", | ||
"id": "nesting-rules", | ||
"title": "Nesting Rules", | ||
"description": "A syntax for nesting relative rules within rules", | ||
"specification": "https://tabatkins.github.io/specs/css-nesting/", | ||
"stage": 1, | ||
"example": "article {\n & p {\n color: #333;\n }\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "JavaScript Library", | ||
"link": "https://github.com/jonathantneal/focus-within" | ||
}, | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/jonathantneal/postcss-focus-within" | ||
"link": "https://github.com/jonathantneal/postcss-nesting" | ||
} | ||
@@ -401,13 +430,13 @@ ] | ||
{ | ||
"title": "Selector `:matches()` Matches-Any Pseudo-Class", | ||
"description": "A pseudo-class matching elements in a selector list", | ||
"specification": "https://www.w3.org/TR/selectors4/#matches", | ||
"specificationId": "selectors-matches-pseudo", | ||
"id": "not-pseudo-class", | ||
"title": "`:not()` Negation Pseudo-Class", | ||
"description": "A pseudo-class for ignoring elements in a selector list", | ||
"specification": "https://www.w3.org/TR/selectors4/#negation-pseudo", | ||
"stage": 3, | ||
"caniuse": "css-matches-pseudo", | ||
"example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}", | ||
"caniuse": "css-not-sel-list", | ||
"example": "p:not(:first-child, .special) {\n margin-top: 1em;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-selector-matches" | ||
"link": "https://github.com/postcss/postcss-selector-not" | ||
} | ||
@@ -417,13 +446,13 @@ ] | ||
{ | ||
"title": "Selector `:not()` Selector List Negation Pseudo-Class", | ||
"description": "A pseudo-class ignoring elements in a selector list", | ||
"specification": "https://www.w3.org/TR/selectors4/#negation", | ||
"specificationId": "selectors-negation-pseudo", | ||
"id": "overflow-wrap-property", | ||
"title": "`overflow-wrap` Property", | ||
"description": "A property for defining whether to insert line breaks within words to prevent overflowing", | ||
"specification": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property", | ||
"stage": 3, | ||
"caniuse": "css-not-sel-list", | ||
"example": "p:not(:first-child, .special) {\n margin-top: 1em;\n}", | ||
"caniuse": "wordwrap", | ||
"example": "p {\n overflow-wrap: break-word;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-selector-not" | ||
"link": "https://github.com/mattdimu/postcss-replace-overflow-wrap" | ||
} | ||
@@ -433,12 +462,13 @@ ] | ||
{ | ||
"title": "Sizing `aspect-ratio` Property", | ||
"description": "A property for defining the aspect ratio of an element", | ||
"specification": "https://tomhodgins.github.io/aspect-ratio-spec/aspect-ratio.html", | ||
"specificationId": "aspect-ratio", | ||
"stage": 0, | ||
"example": "div {\n aspect-ratio: 16/9;\n width: 200px;\n}", | ||
"id": "rebeccapurple-color", | ||
"title": "`rebeccapurple` Color", | ||
"description": "A particularly lovely shade of purple in memory of Rebecca Alison Meyer", | ||
"specification": "https://www.w3.org/TR/css-color-4/#valdef-color-rebeccapurple", | ||
"stage": 3, | ||
"caniuse": "css-rebeccapurple", | ||
"example": "html {\n color: rebeccapurple;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "JavaScript Library", | ||
"link": "https://github.com/tomhodgins/aspect-ratio-spec" | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/postcss/postcss-color-rebeccapurple" | ||
} | ||
@@ -448,13 +478,21 @@ ] | ||
{ | ||
"title": "Text `overflow-wrap` Property", | ||
"description": "A property for defining whether to insert line breaks within words to prevent overflowing", | ||
"specification": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property", | ||
"specificationId": "css-text-overflow-wrap-property", | ||
"id": "something-pseudo-class", | ||
"title": "`:something()` Zero-Specificity Pseudo-Class", | ||
"description": "A pseudo-class for matching elements in a selector list without contributing specificity", | ||
"specification": "https://www.w3.org/TR/selectors-4/#something-pseudo", | ||
"stage": 3, | ||
"caniuse": "wordwrap", | ||
"example": "p {\n overflow-wrap: break-word;\n}", | ||
"example": "a:something(:not(:hover)) {\n text-decoration: none;\n}" | ||
}, | ||
{ | ||
"id": "system-ui-font-family", | ||
"title": "`system-ui` Font Family", | ||
"description": "A generic font used to match the user’s interface", | ||
"specification": "https://www.w3.org/TR/css-fonts-4/#system-ui-def", | ||
"stage": 3, | ||
"caniuse": "font-family-system-ui", | ||
"example": "body {\n font-family: system-ui;\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/mattdimu/postcss-replace-overflow-wrap" | ||
"link": "https://github.com/JLHwung/postcss-font-family-system-ui" | ||
} | ||
@@ -464,6 +502,6 @@ ] | ||
{ | ||
"id": "when-else-rules", | ||
"title": "When/Else Rules", | ||
"description": "At-rules defining conditional rules and unifying the disparate conditional rules into a single grammar", | ||
"description": "At-rules for specifying media queries and support queries in a single grammar", | ||
"specification": "https://tabatkins.github.io/specs/css-when-else/", | ||
"specificationId": "css-when-else", | ||
"stage": 1, | ||
@@ -470,0 +508,0 @@ "example": "@when media(width >= 640px) and (supports(display: flex) or supports(display: grid)) {\n /* A */\n} @else media(pointer: coarse) {\n /* B */\n} @else {\n /* C */\n}" |
{ | ||
"name": "cssdb", | ||
"version": "1.6.0", | ||
"version": "2.0.0", | ||
"description": "A comprehensive list of CSS features and their positions in the process of becoming implemented web standards", | ||
"author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"license": "CC0-1.0", | ||
"repository": "jonathantneal/css-db", | ||
"homepage": "https://github.com/jonathantneal/css-db#readme", | ||
"bugs": "https://github.com/jonathantneal/css-db/issues", | ||
"repository": "jonathantneal/cssdb", | ||
"homepage": "https://github.com/jonathantneal/cssdb#readme", | ||
"bugs": "https://github.com/jonathantneal/cssdb/issues", | ||
"main": "cssdb.json", | ||
@@ -19,9 +19,9 @@ "files": [ | ||
"devDependencies": { | ||
"browserslist": "^3.1.0", | ||
"caniuse-lite": "^1.0.30000809", | ||
"browserslist": "^3.2.4", | ||
"caniuse-lite": "^1.0.30000824", | ||
"eslit": "^5.0.0", | ||
"fse": "^4.0.0", | ||
"marked": "^0.3.14", | ||
"node-fetch": "^2.0.0", | ||
"postcss": "^6.0.19", | ||
"marked": "^0.3.19", | ||
"node-fetch": "^2.1.2", | ||
"postcss": "^6.0.21", | ||
"pre-commit": "^1.2.2" | ||
@@ -28,0 +28,0 @@ }, |
@@ -1,6 +0,5 @@ | ||
# cssdb [<img src="https://jonathantneal.github.io/css-db/cssdb.svg" alt="cssdb logo" width="90" height="90" align="right">][cssdb] | ||
# cssdb [<img src="https://jonathantneal.github.io/cssdb/cssdb.svg" alt="cssdb logo" width="90" height="90" align="right">][cssdb] | ||
[![NPM Version][npm-img]][npm-url] | ||
[![Build Status][cli-img]][cli-url] | ||
[![Licensing][lic-img]][lic-url] | ||
@@ -10,2 +9,4 @@ [cssdb] is a comprehensive list of CSS features and their positions in | ||
--- | ||
Did you come here to update the status of a CSS feature or add a new one? | ||
@@ -16,11 +17,21 @@ Quick, read [CONTRIBUTING.md](CONTRIBUTING.md). | ||
[cssdb]: https://github.com/jonathantneal/css-db | ||
--- | ||
[cssdb] ranks CSS features by stages that reflect the real-life stability of | ||
new CSS features. | ||
You can read an [inside view of the CSSWG] to learn about the official | ||
(and unofficial) development stages of CSS specifications. In reality, | ||
specifications and browser implementations happen out of sync. For example, | ||
there are stable CSS features missing in all browsers, while other CSS features | ||
developed outside the [CSSWG] have appeared in browsers behind flags. This is | ||
too ambiguous for the web development community, and a more accountable process | ||
is desired. | ||
[cli-img]: https://img.shields.io/travis/jonathantneal/cssdb.svg | ||
[cli-url]: https://travis-ci.org/jonathantneal/cssdb | ||
[cssdb]: https://github.com/jonathantneal/cssdb | ||
[CSSWG]: https://wiki.csswg.org/spec | ||
[inside view of the CSSWG]: http://fantasai.inkedblade.net/weblog/2011/inside-csswg/process | ||
[npm-img]: https://img.shields.io/npm/v/cssdb.svg | ||
[npm-url]: https://www.npmjs.com/package/cssdb | ||
[npm-img]: https://img.shields.io/npm/v/cssdb.svg | ||
[cli-url]: https://travis-ci.org/jonathantneal/css-db | ||
[cli-img]: https://img.shields.io/travis/jonathantneal/css-db.svg | ||
[lic-url]: LICENSE.md | ||
[lic-img]: https://img.shields.io/badge/license-CC0--1.0-blue.svg | ||
[git-url]: https://gitter.im/postcss/postcss | ||
[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
28700
483
36
1