cssdb - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

CHANGELOG.md

 # 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 @@

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": [

package.json

 {
   "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 <[e-mail]>",
     "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",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39361

increased by22.48%

Lines of code

744

increased by26.53%

Worsened metrics

Dev dependency count

14

increased by75%

No dependency changes