Comparing version 4.1.0 to 4.2.0
# Changes to cssdb | ||
### 4.2.0 (November 4, 2018) | ||
- Added: Documentation links to MDN | ||
- Added: `color-adjust` Property | ||
- Added: `overscroll-behavior` Property | ||
- Added: `prefers-color-scheme` Media Query | ||
- Added: `prefers-reduced-motion` Media Query | ||
- Added: `:in-range` and `:out-of-range` Pseudo-Classes | ||
- Added: `:read-only` and `:read-write` selectors | ||
This also updates the cssdb.org template and styles, using postcss-preset-env | ||
to create and minifying cross-browser compatible css, improving font loading | ||
and display, supporting RTL displays, and adding MDN documentation. | ||
### 4.1.1 (October 28, 2018) | ||
- Added: caniuse link for `overflow` shorthand property | ||
### 4.1.0 (October 28, 2018) | ||
@@ -4,0 +22,0 @@ |
156
cssdb.json
@@ -9,2 +9,5 @@ [ | ||
"caniuse": "css-all", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/all" | ||
}, | ||
"example": "a {\n all: initial;\n}", | ||
@@ -25,2 +28,5 @@ "polyfills": [ | ||
"caniuse": "css-any-link", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link" | ||
}, | ||
"example": "nav :any-link > span {\n background-color: yellow;\n}", | ||
@@ -41,2 +47,5 @@ "polyfills": [ | ||
"caniuse": "multicolumn", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-after" | ||
}, | ||
"example": "a {\n break-inside: avoid;\n break-before: avoid-column;\n break-after: always;\n}", | ||
@@ -57,2 +66,5 @@ "polyfills": [ | ||
"caniuse": "css-case-insensitive", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" | ||
}, | ||
"example": "[frame=hsides i] {\n border-style: solid none;\n}", | ||
@@ -67,2 +79,14 @@ "polyfills": [ | ||
{ | ||
"id": "color-adjust", | ||
"title": "`color-adjust` Property", | ||
"description": "The color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images", | ||
"specification": "https://www.w3.org/TR/css-color-4/#color-adjust", | ||
"stage": 2, | ||
"caniuse": "css-color-adjust", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust" | ||
}, | ||
"example": ".background {\n background-color:#ccc;\n}\n.background.color-adjust {\n color-adjust: economy;\n}\n.background.color-adjust-exact {\n color-adjust: exact;\n}" | ||
}, | ||
{ | ||
"id": "color-functional-notation", | ||
@@ -116,2 +140,5 @@ "title": "Color Functional Notation", | ||
"caniuse": "css-variables", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/var" | ||
}, | ||
"example": "img {\n --some-length: 32px;\n\n height: var(--some-length);\n width: var(--some-length);\n}", | ||
@@ -161,2 +188,5 @@ "polyfills": [ | ||
"caniuse": "css-dir-pseudo", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:dir" | ||
}, | ||
"example": "blockquote:dir(rtl) {\n margin-right: 10px;\n}\n\nblockquote:dir(ltr) {\n margin-left: 10px;\n}", | ||
@@ -212,2 +242,5 @@ "polyfills": [ | ||
}, | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/env" | ||
}, | ||
"example": "@media (max-width: env(--brand-small)) {\n body {\n padding: env(--brand-spacing);\n }\n}", | ||
@@ -228,2 +261,5 @@ "polyfills": [ | ||
"caniuse": "css-focus-visible", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible" | ||
}, | ||
"example": ":focus:not(:focus-visible) {\n outline: 0;\n}", | ||
@@ -248,2 +284,5 @@ "polyfills": [ | ||
"caniuse": "css-focus-within", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within" | ||
}, | ||
"example": "form:focus-within {\n background: rgba(0, 0, 0, 0.3);\n}", | ||
@@ -268,2 +307,5 @@ "polyfills": [ | ||
"caniuse": "font-variant-alternates", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" | ||
}, | ||
"example": "h2 {\n font-variant: small-caps;\n}", | ||
@@ -298,2 +340,5 @@ "polyfills": [ | ||
}, | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gap" | ||
}, | ||
"example": ".grid-1 {\n gap: 20px;\n}\n\n.grid-2 {\n column-gap: 40px;\n row-gap: 20px;\n}", | ||
@@ -328,2 +373,5 @@ "polyfills": [ | ||
"caniuse": "css-grid", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid" | ||
}, | ||
"example": "section {\n display: grid;\n grid-template-columns: 100px 100px 100px;\n grid-gap: 10px;\n}", | ||
@@ -343,2 +391,5 @@ "polyfills": [ | ||
"stage": 2, | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:has" | ||
}, | ||
"example": "a:has(> img) {\n display: block;\n}" | ||
@@ -353,2 +404,5 @@ }, | ||
"caniuse": "css-rrggbbaa", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Syntax_2" | ||
}, | ||
"example": "section {\n background-color: #f3f3f3f3;\n color: #0003;\n}", | ||
@@ -392,2 +446,14 @@ "polyfills": [ | ||
{ | ||
"id": "in-out-of-range-pseudo-class", | ||
"title": "`:in-range` and `:out-of-range` Pseudo-Classes", | ||
"description": "A pseudo-class for matching elements that have range limitations", | ||
"specification": "https://www.w3.org/TR/selectors-4/#range-pseudos", | ||
"stage": 2, | ||
"caniuse": "css-in-out-of-range", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range" | ||
}, | ||
"example": "input:in-range {\n background-color: rgba(0, 255, 0, 0.25);\n}\ninput:out-of-range {\n background-color: rgba(255, 0, 0, 0.25);\n border: 2px solid red;\n}" | ||
}, | ||
{ | ||
"id": "lab-function", | ||
@@ -427,2 +493,5 @@ "title": "`lab()` Function", | ||
"caniuse": "css-logical-props", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties" | ||
}, | ||
"example": "span:first-child {\n float: inline-start;\n margin-inline-start: 10px;\n}", | ||
@@ -443,2 +512,5 @@ "polyfills": [ | ||
"caniuse": "css-matches-pseudo", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:matches" | ||
}, | ||
"example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}", | ||
@@ -458,2 +530,5 @@ "polyfills": [ | ||
"stage": 3, | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4" | ||
}, | ||
"example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}", | ||
@@ -488,2 +563,5 @@ "polyfills": [ | ||
"caniuse": "css-not-sel-list", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:not" | ||
}, | ||
"example": "p:not(:first-child, .special) {\n margin-top: 1em;\n}", | ||
@@ -503,2 +581,3 @@ "polyfills": [ | ||
"stage": 2, | ||
"caniuse": "css-overflow", | ||
"caniuse-compat": { | ||
@@ -518,2 +597,5 @@ "and_chr": { | ||
}, | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow" | ||
}, | ||
"example": "html {\n overflow: hidden auto;\n}", | ||
@@ -534,2 +616,5 @@ "polyfills": [ | ||
"caniuse": "wordwrap", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" | ||
}, | ||
"example": "p {\n overflow-wrap: break-word;\n}", | ||
@@ -544,2 +629,14 @@ "polyfills": [ | ||
{ | ||
"id": "overscroll-behavior-property", | ||
"title": "`overscroll-behavior` Property", | ||
"description": "Properties for controlling when the scroll position of a scroll container reaches the edge of a scrollport", | ||
"specification": "https://drafts.csswg.org/css-overscroll-behavior", | ||
"stage": 1, | ||
"caniuse": "css-overscroll-behavior", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior" | ||
}, | ||
"example": ".messages {\n height: 220px;\n overflow: auto;\n overscroll-behavior-y: contain;\n}\n\nbody {\n margin: 0;\n overscroll-behavior: none;\n}" | ||
}, | ||
{ | ||
"id": "place-properties", | ||
@@ -558,2 +655,5 @@ "title": "Place Properties", | ||
}, | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/place-content" | ||
}, | ||
"example": ".example {\n place-content: flex-end;\n place-items: center / space-between;\n place-self: flex-start / center;\n}", | ||
@@ -568,2 +668,52 @@ "polyfills": [ | ||
{ | ||
"id": "prefers-color-scheme-query", | ||
"title": "`prefers-color-scheme` Media Query", | ||
"description": "A media query to detect if the user has requested the system use a light or dark color theme", | ||
"specification": "https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme", | ||
"stage": 1, | ||
"caniuse-compat": { | ||
"ios_saf": { | ||
"12.1": "y" | ||
}, | ||
"safari": { | ||
"12.1": "y" | ||
} | ||
}, | ||
"example": "body {\n background-color: white;\n color: black;\n}\n\n@media (prefers-color-scheme: dark) {\n body {\n background-color: black;\n color: white;\n }\n}", | ||
"polyfills": [ | ||
{ | ||
"type": "JavaScript Library", | ||
"link": "https://github.com/csstools/css-prefers-color-scheme" | ||
}, | ||
{ | ||
"type": "PostCSS Plugin", | ||
"link": "https://github.com/csstools/css-prefers-color-scheme" | ||
} | ||
] | ||
}, | ||
{ | ||
"id": "prefers-reduced-motion-query", | ||
"title": "`prefers-reduced-motion` Media Query", | ||
"description": "A media query to detect if the user has requested less animation and general motion on the page", | ||
"specification": "https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion", | ||
"stage": 1, | ||
"caniuse": "prefers-reduced-motion", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" | ||
}, | ||
"example": ".animation {\n animation: vibrate 0.3s linear infinite both; \n}\n\n@media (prefers-reduced-motion: reduce) {\n .animation {\n animation: none;\n }\n}" | ||
}, | ||
{ | ||
"id": "read-only-write-pseudo-class", | ||
"title": "`:read-only` and `:read-write` selectors", | ||
"description": "Pseudo-classes to match elements which are considered user-alterable", | ||
"specification": "https://www.w3.org/TR/selectors-4/#rw-pseudos", | ||
"stage": 2, | ||
"caniuse": "css-read-only-write", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only" | ||
}, | ||
"example": "input:read-only {\n background-color: #ccc;\n}" | ||
}, | ||
{ | ||
"id": "rebeccapurple-color", | ||
@@ -575,2 +725,5 @@ "title": "`rebeccapurple` Color", | ||
"caniuse": "css-rebeccapurple", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" | ||
}, | ||
"example": "html {\n color: rebeccapurple;\n}", | ||
@@ -591,2 +744,5 @@ "polyfills": [ | ||
"caniuse": "font-family-system-ui", | ||
"docs": { | ||
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Syntax" | ||
}, | ||
"example": "body {\n font-family: system-ui;\n}", | ||
@@ -593,0 +749,0 @@ "polyfills": [ |
{ | ||
"name": "cssdb", | ||
"version": "4.1.0", | ||
"version": "4.2.0", | ||
"description": "A comprehensive list of CSS features and their positions in the process of becoming implemented web standards", | ||
@@ -17,14 +17,26 @@ "author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
"start:nobadges": "node tasks/start --no-badges", | ||
"test": "node tasks/test" | ||
"test": "npm run test:css && npm run test:json", | ||
"test:css": "stylelint tasks/style-template.css", | ||
"test:json": "node tasks/test", | ||
"watch": "http-server gh-pages" | ||
}, | ||
"devDependencies": { | ||
"browserslist": "^4.3.4", | ||
"caniuse-lite": "^1.0.30000899", | ||
"caniuse-lite": "^1.0.30000905", | ||
"css-prefers-color-scheme": "^3.0.0", | ||
"cssnano": "^4.1.7", | ||
"eslit": "^5.0.0", | ||
"fse": "^4.0.1", | ||
"http-server": "^0.11.1", | ||
"marked": "^0.5.1", | ||
"node-fetch": "^2.2.0", | ||
"node-fetch": "^2.2.1", | ||
"postcss": "^7.0.5", | ||
"pre-commit": "^1.2.2" | ||
"postcss-preset-env": "^6.3.1", | ||
"pre-commit": "^1.2.2", | ||
"stylelint": "^9.7.1", | ||
"stylelint-config-dev": "^4.0.0" | ||
}, | ||
"stylelint": { | ||
"extends": "stylelint-config-dev" | ||
}, | ||
"keywords": [ | ||
@@ -31,0 +43,0 @@ "css", |
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
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
39361
744
14