12 | 
][cssdb]
2 |
3 | [![NPM Version][npm-img]][npm-url]
4 | [![Build Status][cli-img]][cli-url]
5 |
6 | [cssdb] is a list of CSS features and their positions in
7 | the process of becoming implemented web standards.
8 |
9 | ---
10 |
11 | Did you come here to update the status of a CSS feature or add a new one?
12 | Quick, read [CONTRIBUTING.md](CONTRIBUTING.md).
13 |
14 | Did you come here to learn about the stages? Quick, read [STAGES.md](STAGES.md).
15 |
16 | ---
17 |
18 | [cssdb] ranks CSS features by stages that reflect the real-life stability of
19 | new CSS features.
20 |
21 | You can read an [inside view of the CSSWG] to learn about the official
22 | (and unofficial) development stages of CSS specifications. In reality,
23 | specifications and browser implementations happen out of sync. For example,
24 | there are stable CSS features missing in all browsers, while other CSS features
25 | developed outside the [CSSWG] have appeared in browsers behind flags. This is
26 | too ambiguous for the web development community, and a more accountable process
27 | is desired.
28 |
29 | [cli-img]: https://github.com/csstools/cssdb/actions/workflows/test.yml/badge.svg
30 | [cli-url]: https://github.com/csstools/cssdb/actions/workflows/test.yml
31 | [cssdb]: https://github.com/csstools/cssdb
32 | [CSSWG]: https://wiki.csswg.org/spec
33 | [inside view of the CSSWG]: https://fantasai.inkedblade.net/weblog/2011/inside-csswg/process
34 | [npm-img]: https://img.shields.io/npm/v/cssdb.svg
35 | [npm-url]: https://www.npmjs.com/package/cssdb
36 |
--------------------------------------------------------------------------------
/src/components/feature-support-stats.mjs:
--------------------------------------------------------------------------------
1 | import { escapeHTML, html } from "../util/html.mjs";
2 |
3 | const browsers = {
4 | 'ios_saf': 'iOS Safari',
5 | 'op_mob': 'Opera Mobile',
6 | 'and_uc': 'UC Mobile for Android',
7 | 'and_chr': 'Chrome for Android',
8 | 'and_ff': 'Firefox for Android',
9 | 'and_qq': 'QQ Browser',
10 | 'webview_ios': 'WKWebview on iOS',
11 | 'webview_android': 'Android WebView'
12 | };
13 |
14 | // Similar order as MDN
15 | const browser_order = [
16 | // Desktop
17 | "chrome",
18 | "edge",
19 | "firefox",
20 | "ie",
21 | "opera",
22 | "safari",
23 | // Mobile
24 | "and_chr",
25 | "and_ff",
26 | "op_mob",
27 | "ios_saf",
28 | "samsung",
29 | "android",
30 | // Headset
31 | "oculus",
32 | // Webviews
33 | 'webview_android',
34 | 'webview_ios',
35 | ];
36 |
37 | export function renderFeatureSupportStats(title, feature) {
38 | let link = '';
39 | if (feature.docs && feature.docs.mdn) {
40 | link = `${feature.docs.mdn}#browser_compatibility`;
41 | }
42 |
43 | const feature_browsers = Object.keys(feature.browser_support);
44 | feature_browsers.sort((a, b) => {
45 | const a_index = browser_order.indexOf(a);
46 | const b_index = browser_order.indexOf(b);
47 | if (a_index === -1) {
48 | return 1;
49 | }
50 | if (b_index === -1) {
51 | return -1;
52 | }
53 | return a_index - b_index;
54 | });
55 |
56 | return html`
57 | 30 | 31 | ${backTicksToCodeTags(escapeHTML(feature.title))} 32 | 33 |
34 |35 | ${backTicksToCodeTags(escapeHTML(feature.description))} 36 |
37 |
39 |
43 |
52 |
53 | ${feature.docs?.mdn ? (
54 | html`
60 |
68 | `
69 | ) : ''}
70 |
74 |
95 |
96 |
${parseExample(feature.example)}
98 |
99 | ${renderFeatureSupportStats(cleanTitle, feature)}
100 | ${renderFeaturePolyfills(feature.polyfills, feature.id, cleanTitle)}
101 | 
19 |
20 | > “This is a silly idea.”
21 |
22 | An **Unofficial Draft** or **Editor’s Draft** [championed] by a
23 | [W3C Working Group] Member. It should be considered highly unstable and subject
24 | to change. Stage 0 features are open to ideas and discussion, but may not be
25 | considered serious.
26 |
27 | ---
28 |
29 | ### Stage 1: Experimental
30 |
31 | 
32 |
33 | > “This idea might not be silly.”
34 |
35 | An **Editor’s Draft** or early **Working Draft** [championed] by a
36 | [W3C Working Group]. It should be considered highly unstable and subject to
37 | change. Stage 1 features are recognized as a real problem, but they may not be
38 | tied to any particular solution.
39 |
40 | ---
41 |
42 | ### Stage 2: Allowable
43 |
44 | 
45 |
46 | > “This idea is not silly.”
47 |
48 | A **Working Draft** [championed] by a [W3C Working Group]. It should be
49 | considered relatively unstable and subject to change. Stage 2 features are tied
50 | to a particular way of solving a problem.
51 |
52 | ---
53 |
54 | ### Stage 3: Embraced
55 |
56 | 
57 |
58 | > “This idea is becoming part of the web.”
59 |
60 | A **Candidate Recommendation** [championed] by a [W3C Working Group], usually
61 | implemented by at least 2 [recognized browser vendors], possibly behind a flag.
62 | It should be considered stable and subject to little change. Stage 3 features
63 | will likely become a standard.
64 |
65 | ---
66 |
67 | ### Stage 4: Standardized
68 |
69 | 
70 |
71 | > “This idea is part of the web.”
72 |
73 | A **Recommendation** [championed] by the [W3C]. It should be implemented by all
74 | [recognized browser vendors]. Stage 4 features are web standards.
75 |
76 | ---
77 |
78 | ### Rejected
79 |
80 | 
81 |
82 | > “I had no idea what I was doing.”
83 |
84 | Any specification that has been rejected or neglected by its editor, or
85 | formally rejected by a [W3C Working Group].
86 |
87 | ---
88 |
89 | ## Terminology
90 |
91 | ### Recognized Browser Vendors
92 |
93 | Recognized browser vendors include, in alphabetical order; Apple (Safari/Webkit), Google (Chrome/Chromium) and Mozilla (Firefox/Gecko).
94 |
95 | ### What is a champion?
96 |
97 | A champion is the person or group responsible for advocating a new feature to
98 | completion, performing the legwork necessary to ensure the concerns of
99 | interested parties are identified and incorporated into the proposal.
100 |
101 | [championed]: #what-is-a-champion
102 | [hosted]: #what-is-a-champion
103 | [inside view of the CSSWG]: https://fantasai.inkedblade.net/weblog/2011/inside-csswg/process
104 | [recognized browser vendors]: #recognized-browser-vendors
105 | [W3C]: https://www.w3.org/
106 | [W3C Working Group]: https://wiki.csswg.org/spec
107 |
--------------------------------------------------------------------------------
/utils/supported-browsers-from-mdn.mjs:
--------------------------------------------------------------------------------
1 | import bcd from '@mdn/browser-compat-data' with { type: 'json' };
2 | import semver from 'semver';
3 | import { get } from './get.mjs';
4 | import { MDNToBrowserlist } from './mdn-to-browserslist.mjs';
5 |
6 | function getBrowsersFromFeature(mdnConfigPath, feature) {
7 | const mdnFeature = get(bcd, mdnConfigPath);
8 | if (!mdnFeature) {
9 | throw new Error(`Invalid mdn config path "${mdnConfigPath}" in feature "${feature.id}"`);
10 | }
11 |
12 | // We assume users also have autoprefixer.
13 | // If autoprefixer adds prefixes for this feature we count it as supported.
14 | const supportsPrefixes = Object(feature.mdn_count_prefixed_as_supported)[mdnConfigPath];
15 | const result = {};
16 |
17 | const { __compat: { support } } = mdnFeature;
18 |
19 | Object.keys(support).forEach(browserKey => {
20 | const browserSupport = support[browserKey];
21 | let version;
22 |
23 | if (Array.isArray(browserSupport)) {
24 | const versions = browserSupport.sort((a, b) => {
25 | const aa = semver.coerce(a.version_added);
26 | const bb = semver.coerce(b.version_added);
27 | if (!aa || !bb) {
28 | return 0;
29 | }
30 |
31 | return semver.compare(aa, bb);
32 | });
33 |
34 | version = versions.find(browserEntry => {
35 | const hasAlternativeName = typeof browserEntry.alternative_name !== 'undefined';
36 | const isPrefixed = typeof browserEntry.prefix !== 'undefined';
37 | const isAllowedPrefix = isPrefixed && browserEntry.prefix !== '-khtml-' && !browserEntry.partial_implementation;
38 | const hasFlags = Array.isArray(browserEntry.flags);
39 |
40 | if (hasAlternativeName || hasFlags) {
41 | return false;
42 | }
43 |
44 | if (browserEntry.partial_implementation) {
45 | return false;
46 | }
47 |
48 | if (supportsPrefixes && isAllowedPrefix) {
49 | return true;
50 | }
51 |
52 | return !isPrefixed;
53 | })?.version_added;
54 | } else {
55 | const hasFlags = Array.isArray(browserSupport.flags);
56 | version = browserSupport.version_added;
57 |
58 | if (hasFlags) {
59 | return;
60 | }
61 |
62 | if (browserSupport.partial_implementation) {
63 | return false;
64 | }
65 |
66 | const isPrefixed = typeof browserSupport.prefix !== 'undefined';
67 | const isAllowedPrefix = isPrefixed && browserSupport.prefix !== '-khtml-' && !browserSupport.partial_implementation;
68 | if (isPrefixed && !(supportsPrefixes && isAllowedPrefix)) {
69 | return;
70 | }
71 |
72 | if (browserSupport.alternative_name) {
73 | return;
74 | }
75 | }
76 |
77 | if (version) {
78 | // see : https://github.com/mdn/browser-compat-data/issues/17336
79 | // Ranged values means that a feature may have been added in a version earlier than "37",
80 | // but we don't know exactly when.
81 | if (version.startsWith('≤')) {
82 | version = version.substring(1);
83 | }
84 |
85 | const browser = MDNToBrowserlist(browserKey);
86 | result[browser] = version;
87 | }
88 | });
89 |
90 | return result;
91 | }
92 |
93 | export default function supportedBrowsersFromMdn(path, feature) {
94 | const result = {};
95 |
96 | const paths = Array.isArray(path) ? path : [path];
97 | if (!paths.length) {
98 | return result;
99 | }
100 |
101 | const supports = paths.map(mdnPath => getBrowsersFromFeature(mdnPath, feature));
102 |
103 | Object.keys(supports[0]).forEach(browserKey => {
104 | const isInAllFeatures = supports.every(featureSupport => typeof featureSupport[browserKey] !== 'undefined');
105 |
106 | if (isInAllFeatures) {
107 | // Sort by descending version and get the first
108 | const [version] = supports.map(featureSupport => featureSupport[browserKey]).filter((x) => {
109 | return !!semver.coerce(x);
110 | }).sort((a, b) => {
111 | const aa = semver.coerce(a);
112 | const bb = semver.coerce(b);
113 | if (!aa || !bb) {
114 | return 0;
115 | }
116 |
117 | return semver.compare(bb, aa); // reverse sort
118 | });
119 | result[browserKey] = version;
120 | }
121 | });
122 |
123 | return result;
124 | }
125 |
--------------------------------------------------------------------------------
/utils/baseline-status.mjs:
--------------------------------------------------------------------------------
1 | export function baselineStatus(feature) {
2 | if (!feature.vendors_implementations) {
3 | return ['Experimental', null];
4 | }
5 |
6 | if (!feature.interoperable_at) {
7 | return ['Limited availability', null];
8 | }
9 |
10 | const interoperable_at = new Date();
11 | interoperable_at.setTime(feature.interoperable_at * 1000);
12 | const thirty_months_ago = new Date();
13 | thirty_months_ago.setMonth(thirty_months_ago.getMonth() - 30);
14 | if (feature.interoperable_at > (thirty_months_ago.getTime() / 1000)) {
15 | return [`Newly available (${interoperable_at.getFullYear()})`, interoperable_at.getFullYear()];
16 | }
17 |
18 | const earliest_baseline_low_date = (new Date("2015-07-29")).getTime() / 1000;
19 | if (earliest_baseline_low_date >= feature.interoperable_at) {
20 | return [`Widely available`, null];
21 | }
22 |
23 | return [`Widely available (${interoperable_at.getFullYear()})`, interoperable_at.getFullYear()];
24 | }
25 |
26 | export function baselineIcon(status, year) {
27 | if (status === 'Experimental') {
28 | return ``;
29 | }
30 |
31 | if (status === 'Limited availability') {
32 | return ``;
33 | }
34 |
35 | if (status.startsWith('Newly available')) {
36 | return ``;
37 | }
38 |
39 | if (status === 'Widely available') {
40 | return ``;
41 | }
42 |
43 | return ``;
44 | }
45 |
--------------------------------------------------------------------------------
/public/images/browsers/android.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/browsers/safari.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/components/stages.mjs:
--------------------------------------------------------------------------------
1 | import { html } from "../util/html.mjs";
2 |
3 | export function renderStages() {
4 | // TODO : this is copy/paste from the previous Astro output.
5 | // Astro had a way to convert markdown to html.
6 | // The original content can be found in "STAGES.md" in the root of the repo.
7 | return html`
8 |
92 | `;
93 | }
94 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing to this database
2 |
3 | Pull requests are the most helpful contributions.
4 |
5 | I love folks who can add missing features and keep existing features up to date.
6 | A new feature only needs a **title**, **id**, **description**, and a link to
7 | its **specification**.
8 |
9 | Non-CSSWG members can still update CSS features by including **citations** to
10 | public notes that show how the CSSWG is advancing a feature. If you need
11 | further clarification, read [why we are doing this](#why-are-we-doing-this).
12 |
13 | ### Updating a feature
14 |
15 | Is one of these CSS features out-of-date? Open [`cssdb.settings.json`] and find
16 | the feature you want to update. It’s a JSON file, so make changes directly to
17 | the file, commit it, and then [make a pull request](#making-a-pull-request).
18 |
19 | ### Adding a new feature
20 |
21 | Is a CSS feature not listed here? Add the feature to [`cssdb.settings.json`].
22 | Again, it’s a JSON file, so make changes directly to the JSON, commit it, and
23 | then [make a pull request](#making-a-pull-request).
24 |
25 | ### Making a Pull Request
26 |
27 | For best results, be sure your contributions make sense to everyone else. If
28 | you’re unfamiliar with git, consider the following workflow.
29 |
30 | 1. To begin; [fork this project] and then clone your fork locally
31 | ```bash
32 | # Clone your fork of this project
33 | git clone git@github.com:YOUR_USER/cssdb.git
34 |
35 | # Navigate to your fork of this project
36 | cd cssdb
37 |
38 | # Install the tools necessary for testing this project
39 | npm install
40 |
41 | # Assign the original repo to a remote called "upstream"
42 | git remote add upstream git@github.com:csstools/cssdb.git
43 | ```
44 |
45 | 2. Create a branch for your feature or fix:
46 | ```bash
47 | # Move into a new branch for your feature
48 | git checkout -b feature/thing
49 | ```
50 | ```bash
51 | # Move into a new branch for your fix
52 | git checkout -b fix/something
53 | ```
54 |
55 | 3. If your code follows our practices, then push your feature branch:
56 | ```bash
57 | # Test your code
58 | npm test
59 | ```
60 | ```bash
61 | # Push the branch for your new feature
62 | git push origin feature/thing
63 | ```
64 | ```bash
65 | # Or, push the branch for your update
66 | git push origin update/something
67 | ```
68 |
69 | ---
70 |
71 | ## Advanced Usage: How the JSON file looks
72 |
73 | The only fields you’ll see in [`cssdb.settings.json`] are, in order:
74 |
75 | - `id`: the feature shortname, similar to a specification [Shortname].
76 | - `title`: the name of the feature.
77 | - `description`: a brief description of the feature.
78 | - `specification`: a link to the specification for the feature.
79 | - `stage`: the current [stage](README.md#staging-process) of the feature; where
80 | + `0` means **Stage 0** — *Aspirational*,
81 | + `1` means **Stage 1** — *Enthusiastic*,
82 | + `2` means **Stage 2** — *Experimental*,
83 | + `3` means **Stage 3** — *Allowable*,
84 | + `4` means **Stage 4** — *Embraced*,
85 | + `5` means **Stage 5** — *Standardized*, and
86 | + `-1` means **Rejected**.
87 | - `polyfills`: a list of polyfills used to simulate the feature; each including
88 | + `type`: the type of polyfill (e.g. *PostCSS*, *JS Library*), and
89 | + `link`: the URL to the repository for the polyfill.
90 |
91 | All contributions must follow the existing syntax and style of the JSON file,
92 | which;
93 |
94 | 1. Exists as `cssdb.settings.json`, and;
95 | 2. Includes at least the required fields; **title**, **description**,
96 | **specification**, and **stage** (which is `0` if you don’t know it).
97 |
98 | Did you write the specification you are submitting? It must;
99 |
100 | 1. Describe what the feature does in as few words as possible.
101 | 2. Describe why the feature exists in as few words as possible.
102 | 3. Describe how the feature and its parts operate as clearly and completely as
103 | possible.
104 |
105 | If you’re changing the **stage** of a feature, be sure to include a link along
106 | with your PR to prove the new position.
107 |
108 | ---
109 |
110 | ## Join the CSSWG
111 |
112 | Passionate and informed developers should consider joining the CSSWG. Read the
113 | [instructions for joining the CSSWG]. This is a very difficult to actually
114 | accomplish, so I welcome pull requests to update this section with some
115 | beginner-friendly instructions.
116 |
117 | ### Why are we doing this?
118 |
119 | The CSSWG doesn’t follow the [TC39 process]. How they operate [in theory](https://www.w3.org/Style/CSS/specs.en.html) versus [in real life](https://fantasai.inkedblade.net/weblog/2011/inside-csswg/) is unclear, and
120 | browsers
121 | [don’t necessarily follow their process anyway](https://www.chromestatus.com/feature/5753701012602880),
122 | so we have to discern what’s really going on ourselves. If we didn’t, we
123 | probably wouldn’t need this repository.
124 |
125 | [`cssdb.settings.json`]: cssdb.settings.json
126 | [fork this project]: fork
127 | [instructions for joining the CSSWG]: https://www.w3.org/2004/01/pp-impl/32061/instructions
128 | [staging process]: README.md#staging-process
129 | [TC39 process]: https://thefeedbackloop.xyz/tc39-a-process-sketch-stages-0-and-1/
130 | [Section Heading ID]: https://tabatkins.github.io/bikeshed/#section-links
131 | [Shortname]: https://tabatkins.github.io/bikeshed/#metadata-shortname
132 |
--------------------------------------------------------------------------------
/public/images/css-tools.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/public/images/css-tools-dark.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/public/images/browsers/and_qq.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/images/browsers/firefox.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/styles/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-display: swap;
3 | font-family: "Avenir Next";
4 | font-style: normal;
5 | font-weight: 400;
6 | src: local("Avenir Next Medium"), local("AvenirNext-Medium"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Medium.woff2") format("woff2"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Medium.woff") format("woff");
7 | }
8 |
9 | @font-face {
10 | font-display: swap;
11 | font-family: "Avenir Next";
12 | font-style: italic;
13 | font-weight: 400;
14 | src: local("Avenir Next Medium Italic"), local("AvenirNext-MediumItalic"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-MediumItalic.woff2") format("woff2"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-MediumItalic.woff") format("woff");
15 | }
16 |
17 | @font-face {
18 | font-display: swap;
19 | font-family: "Avenir Next";
20 | font-style: normal;
21 | font-weight: 700;
22 | src: local("Avenir Next Bold"), local("AvenirNext-Bold"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Bold.woff2") format("woff2"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Bold.woff") format("woff");
23 | }
24 |
25 | @font-face {
26 | font-display: swap;
27 | font-family: "Avenir Next";
28 | font-style: italic;
29 | font-weight: 700;
30 | src: local("Avenir Next Bold Italic"), local("AvenirNext-BoldItalic"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Bold.woff2") format("woff2"), url("https://d32ekf2zat2q3c.cloudfront.net/Client/AMN+Healthcare/fonts/AvenirNext-Bold.woff") format("woff");
31 | }
32 |
33 | /* Document
34 | /* ========================================================================== */
35 |
36 | html {
37 | --main-font: "Avenir Next", sans-serif;
38 | --code-font: "Source Code Pro", "Andale Mono WT", "Andale Mono", "Consolas", "Lucida Console", monospace;
39 |
40 | scroll-behavior: smooth;
41 |
42 | @media screen and (prefers-reduced-motion: reduce) {
43 | scroll-behavior: auto;
44 | }
45 | }
46 |
47 | *,
48 | ::before,
49 | ::after {
50 | box-sizing: border-box;
51 | }
52 |
53 | body {
54 | font: 400 100%/1.5 sans-serif;
55 | font-family: var(--main-font);
56 | -moz-osx-font-smoothing: grayscale;
57 | -webkit-font-smoothing: antialiased;
58 | font-smoothing: antialiased;
59 | letter-spacing: -.0013em;
60 | padding: 0 calc((100% - 960px) / 2);
61 | text-rendering: optimizeLegibility;
62 | text-size-adjust: 100%;
63 | transition: 400ms background-color, 400ms color;
64 |
65 | @media (width < 560px) {
66 | margin: 16px;
67 | }
68 |
69 | @media (width >= 560px) {
70 | margin: 32px 64px;
71 | }
72 |
73 | @media (prefers-color-scheme: dark) {
74 | background-color: #151515;
75 | color: #ececec;
76 | }
77 | }
78 |
79 | a {
80 | color: #07d;
81 | text-decoration: none;
82 |
83 | @media (prefers-color-scheme: dark) {
84 | color: #76bfff;
85 | }
86 | }
87 |
88 | aside,
89 | header,
90 | main,
91 | section {
92 | display: block;
93 | }
94 |
95 | code,
96 | pre {
97 | font-family: var(--code-font);
98 | font-size: 100%;
99 | font-weight: 600;
100 | }
101 |
102 | code {
103 | font-family: var(--code-font);
104 | font-size: 90%;
105 | letter-spacing: -.0125em;
106 |
107 | &::before {
108 | content: "‘";
109 | font-family: var(--main-font);
110 | padding-inline-end: .125em;
111 | }
112 |
113 | &::after {
114 | content: "’";
115 | font-family: var(--main-font);
116 | padding-inline-start: .125em;
117 | }
118 | }
119 |
120 | img {
121 | border: 0;
122 | }
123 |
124 | .sr-only {
125 | border: 0;
126 | /* stylelint-disable-next-line property-no-deprecated */
127 | clip: rect(1px, 1px, 1px, 1px);
128 | clip-path: inset(50%);
129 | height: 1px;
130 | margin: -1px;
131 | overflow: hidden;
132 | padding: 0;
133 | position: absolute;
134 | white-space: nowrap;
135 | width: 1px;
136 | }
137 |
138 | /* Header
139 | /* ========================================================================== */
140 |
141 | .cssdb-header-branding {
142 | height: 100px;
143 | margin-block-end: 36px;
144 | width: 220px;
145 | }
146 |
147 | .cssdb-header-title {
148 | font-size: 30px;
149 | line-height: 1;
150 | margin: 0 0 12px;
151 | }
152 |
153 | .cssdb-header-description {
154 | line-height: calc(18 / 16);
155 | max-width: 44em;
156 | text-wrap: balance;
157 | }
158 |
159 | /* Features
160 | /* ========================================================================== */
161 |
162 | .cssdb-feature {
163 | margin-block-start: 80px;
164 | }
165 |
166 | .cssdb-feature-header {
167 | display: grid;
168 | gap: 5px 15px;
169 | grid:
170 | "stage title"
171 | "stage description"
172 | / 62px auto;
173 | }
174 |
175 | .cssdb-feature-stage {
176 | grid-area: stage;
177 | }
178 |
179 | .cssdb-feature-stage-image {
180 | height: 62px;
181 | width: 62px;
182 | display: block;
183 | }
184 |
185 | .cssdb-feature-heading {
186 | font-size: 1.17em;
187 | grid-area: title;
188 | margin: 0;
189 |
190 | & a {
191 | color: inherit;
192 | }
193 | }
194 |
195 | .cssdb-feature-description {
196 | grid-area: description;
197 | margin: 0;
198 | }
199 |
200 | .cssdb-feature-docs {
201 | font-size: 87.5%;
202 | margin-block-start: 20px;
203 | }
204 |
205 | .cssdb-feature-docs-link {
206 | font-weight: 700;
207 | text-transform: uppercase;
208 | }
209 |
210 | .cssdb-feature-polyfills {
211 | display: flex;
212 | flex-wrap: wrap;
213 | font-size: 87.5%;
214 | margin-top: 5px;
215 |
216 | &:dir(rtl) {
217 | flex-direction: column;
218 | }
219 | }
220 |
221 | .cssdb-feature-polyfill-list {
222 | list-style: none;
223 | margin: 0;
224 | padding: 0;
225 |
226 | &:dir(ltr) {
227 | margin-left: .5em;
228 | }
229 | }
230 |
231 | .cssdb-feature-polyfill-link {
232 | font-weight: 700;
233 | text-transform: uppercase;
234 | background-image: linear-gradient(currentColor 25%, transparent 50%);
235 | background-position: 200% 100%;
236 | background-repeat: no-repeat;
237 | background-size: 200% 2px;
238 | padding-block-end: 2px;
239 | transition: background-position 250ms;
240 |
241 | &:hover {
242 | background-position: 100% 100%;
243 | }
244 | }
245 |
246 | .cssdb-feature-polyfill-item {
247 | display: flex;
248 | flex-wrap: wrap;
249 | margin-block-end: 7px;
250 | column-gap: 5px;
251 |
252 | & .cssdb-feature-polyfill-stars {
253 | margin-inline-start: 3px;
254 |
255 | & img {
256 | height: 20px;
257 | }
258 | }
259 |
260 | & .cssdb-feature-polyfill-stars-minimal {
261 | overflow: hidden;
262 |
263 | & img {
264 | height: 20px;
265 | margin-inline-start: -56px;
266 | min-width: 57px;
267 | }
268 | }
269 | }
270 |
271 | .cssdb-feature-preset-env-badge-link {
272 | margin-inline-start: 10px;
273 | }
274 |
275 | /* Examples
276 | /* ========================================================================== */
277 |
278 | .cssdb-feature-example {
279 | background-color: #f7f7f7;
280 | color: #727272;
281 | overflow: auto;
282 | padding: 20px 15px;
283 | transition: 400ms background-color, 400ms color;
284 |
285 | @media (prefers-color-scheme: dark) {
286 | background-color: #202020;
287 | color: #878787;
288 | }
289 | }
290 |
291 | .css-selector {
292 | color: #007500;
293 |
294 | @media (prefers-color-scheme: dark) {
295 | color: #14cc14;
296 | }
297 | }
298 |
299 | .css-property {
300 | color: #05a;
301 |
302 | @media (prefers-color-scheme: dark) {
303 | color: #498ef5;
304 | }
305 | }
306 |
307 | .css-atrule-name {
308 | color: #a00909;
309 |
310 | @media (prefers-color-scheme: dark) {
311 | color: #e95353;
312 | }
313 | }
314 |
315 | .css-comment {
316 | color: #727272;
317 |
318 | @media (prefers-color-scheme: dark) {
319 | color: #878787;
320 | }
321 | }
322 |
323 | .css-value,
324 | .css-atrule-params {
325 | color: #000;
326 |
327 | @media (prefers-color-scheme: dark) {
328 | color: #e8e8e8;
329 | }
330 | }
331 |
332 | .css-function {
333 | color: #0072d4;
334 |
335 | @media (prefers-color-scheme: dark) {
336 | color: #91b8f2;
337 | }
338 | }
339 |
340 | .css-string {
341 | color: #9f6500;
342 |
343 | @media (prefers-color-scheme: dark) {
344 | color: #ae7d4d;
345 | }
346 | }
347 |
348 | .css-var {
349 | color: #248400;
350 |
351 | @media (prefers-color-scheme: dark) {
352 | color: #55964d;
353 | }
354 | }
355 |
356 | /* Browsers
357 | /* ========================================================================== */
358 |
359 | .cssdb-feature-support-stats {
360 | display: inline-flex;
361 | flex-wrap: wrap;
362 | margin-block-start: 5px;
363 | }
364 |
365 | .cssdb-browser {
366 | display: inline-block;
367 | height: 46px;
368 | margin-block-end: 12px;
369 | position: relative;
370 | width: 32px;
371 |
372 | &:empty {
373 | display: none;
374 | }
375 |
376 | &:not(:last-child) {
377 | margin-inline-end: 6px;
378 | }
379 |
380 | &::before {
381 | display: inline-block;
382 | height: 32px;
383 | line-height: 0;
384 | vertical-align: top;
385 | width: 32px;
386 | }
387 | }
388 |
389 | .cssdb-browser-version {
390 | display: block;
391 | font-size: 10px;
392 | line-height: 10px;
393 | padding-block-start: 4px;
394 | text-align: center;
395 | }
396 |
397 | .cssdb-browser--and_chr::after,
398 | .cssdb-browser--and_ff::after,
399 | .cssdb-browser--and_qq::after,
400 | .cssdb-browser--kaios::after,
401 | .cssdb-browser--and_uc::after {
402 | background-color: #fff;
403 | border-radius: 50%;
404 | box-shadow: 0 0 0 2px #8bc34a;
405 | content: url("/images/browsers/and.svg");
406 | display: block;
407 | height: 12px;
408 | inset-block-end: 14px;
409 | inset-inline-end: -2px;
410 | line-height: 0;
411 | padding: 2px;
412 | position: absolute;
413 | width: 12px;
414 | z-index: 1;
415 |
416 | @media (prefers-color-scheme: dark) {
417 | background-color: #111;
418 | }
419 | }
420 |
421 | .cssdb-browser--ie_mob::after,
422 | .cssdb-browser--ios_saf::after,
423 | .cssdb-browser--op_mini::after,
424 | .cssdb-browser--op_mob::after {
425 | background-color: #fff;
426 | border-radius: 50%;
427 | box-shadow: 0 0 0 2px #474748;
428 | content: url("/images/browsers/mob.svg");
429 | display: block;
430 | height: 12px;
431 | inset-block-end: 14px;
432 | inset-inline-end: -2px;
433 | line-height: 0;
434 | padding: 2px;
435 | position: absolute;
436 | width: 12px;
437 | z-index: 1;
438 |
439 | @media (prefers-color-scheme: dark) {
440 | background-color: #111;
441 | content: url("/images/browsers/mob@dark.svg");
442 | }
443 | }
444 |
445 | .cssdb-browser--and_uc::before,
446 | .cssdb-browser--kaios::before {
447 | content: url("/images/browsers/and_uc.svg");
448 | }
449 |
450 | .cssdb-browser--and_qq::before {
451 | content: url("/images/browsers/and_qq.svg");
452 | }
453 |
454 | .cssdb-browser--android::before {
455 | background-image: url("/images/browsers/android.png");
456 | background-size: contain;
457 | content: "";
458 | }
459 |
460 | .cssdb-browser--baidu::before {
461 | content: url("/images/browsers/baidu.svg");
462 |
463 | @media (prefers-color-scheme: dark) {
464 | content: url("/images/browsers/baidu@dark.svg");
465 | }
466 | }
467 |
468 | .cssdb-browser--bb::before {
469 | content: url("/images/browsers/bb.svg");
470 |
471 | @media (prefers-color-scheme: dark) {
472 | content: url("/images/browsers/bb@dark.svg");
473 | }
474 | }
475 |
476 | .cssdb-browser--chrome::before,
477 | .cssdb-browser--and_chr::before {
478 | content: url("/images/browsers/chrome.svg");
479 | }
480 |
481 | .cssdb-browser--edge::before {
482 | content: url("/images/browsers/edge.svg");
483 | }
484 |
485 | .cssdb-browser--firefox::before,
486 | .cssdb-browser--and_ff::before {
487 | content: url("/images/browsers/firefox.svg");
488 | }
489 |
490 | .cssdb-browser--ie::before,
491 | .cssdb-browser--ie_mob::before {
492 | content: url("/images/browsers/ie.svg");
493 | }
494 |
495 | .cssdb-browser--ios_saf::before {
496 | content: url("/images/browsers/ios_saf.svg");
497 | }
498 |
499 | .cssdb-browser--opera::before,
500 | .cssdb-browser--op_mini::before,
501 | .cssdb-browser--op_mob::before {
502 | content: url("/images/browsers/opera.svg");
503 | }
504 |
505 | .cssdb-browser--safari::before {
506 | content: url("/images/browsers/safari.svg");
507 | }
508 |
509 | .cssdb-browser--samsung::before {
510 | content: url("/images/browsers/samsung.svg");
511 | }
512 |
513 | .cssdb-browser--oculus::before {
514 | content: url("/images/browsers/oculus.svg");
515 |
516 | @media (prefers-color-scheme: dark) {
517 | filter: invert(1);
518 | }
519 | }
520 |
521 | .cssdb-browser--webview_ios::before {
522 | content: url("/images/browsers/webview_ios.svg");
523 | }
524 |
525 | .cssdb-browser--webview_android::before {
526 | content: url("/images/browsers/webview_android.svg");
527 | }
528 |
529 | /* Process
530 | /* ========================================================================== */
531 |
532 | .cssdb-process {
533 | margin-block: 90px;
534 |
535 | & h2 {
536 | box-shadow: inset 0 -1px 0 0 #eaecef;
537 | font-size: 150%;
538 | padding-block-end: 10px;
539 |
540 | @media (prefers-color-scheme: dark) {
541 | box-shadow: inset 0 -1px 0 0 #151310;
542 | }
543 | }
544 |
545 | & h2:nth-of-type(2) {
546 | margin-block-start: 3em;
547 | }
548 |
549 | & :matches(h1, h2, h3, h4, h5, h6) a {
550 | color: inherit;
551 | position: relative;
552 |
553 | &::before {
554 | content: "#";
555 | display: inline-block;
556 | inset-inline-start: -.75em;
557 | opacity: 0;
558 | position: absolute;
559 | transition: opacity 500ms;
560 | }
561 |
562 | &:hover::before {
563 | opacity: 1;
564 | }
565 | }
566 |
567 | & h3 {
568 | font-size: 1.125em;
569 | line-height: 1.2223;
570 |
571 | &:first-of-type {
572 | margin-block-start: 3em;
573 | }
574 | }
575 |
576 | & p a {
577 | background-image: linear-gradient(currentColor 25%, transparent 50%);
578 | background-position: 200% 100%;
579 | background-repeat: no-repeat;
580 | background-size: 200% 2px;
581 | cursor: pointer;
582 | padding-block-end: 2px;
583 | transition: background-position 250ms;
584 |
585 | &:hover {
586 | background-position: 100% 100%;
587 | }
588 | }
589 |
590 | & blockquote {
591 | border-left: .25em solid #dfe2e5;
592 | color: #6a737d;
593 | letter-spacing: .05em;
594 | padding-inline: 1em;
595 |
596 | @media (prefers-color-scheme: dark) {
597 | border-left-color: #201d1a;
598 | color: #d3d7de;
599 | }
600 | }
601 |
602 | & hr {
603 | background: #e1e4e8;
604 | border: none;
605 | height: .25em;
606 | margin: 24px 0;
607 | overflow: hidden;
608 | padding: 0;
609 |
610 | @media (prefers-color-scheme: dark) {
611 | background: #1e1b17;
612 | }
613 | }
614 |
615 | & img[align="left"] {
616 | margin-inline-end: 20px;
617 | }
618 | }
619 |
620 | .cssdb-deploys {
621 | text-align: center;
622 | }
623 |
624 | .cssdb-deploys__logo {
625 | display: inline-flex;
626 | }
627 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changes to cssdb
2 |
3 | ### Unreleased
4 |
5 | - Updated `@mdn/browser-compat-data` to `7.2.1`
6 |
7 | ### 8.5.2 (December 4, 2025)
8 |
9 | - Update `system-ui-font-family` polyfill url
10 |
11 | ### 8.5.1 (December 3, 2025)
12 |
13 | - Rename `position-area` to `position-area-property`
14 |
15 | ### 8.5.0 (December 3, 2025)
16 |
17 | - Added `position-area`
18 |
19 | ### 8.4.3 (December 1, 2025)
20 |
21 | - Updated `@mdn/browser-compat-data` to `7.1.23`
22 |
23 | ### 8.4.2 (September 21, 2025)
24 |
25 | - Add polyfill for `contrast-color-function`
26 |
27 | ### 8.4.1 (September 20, 2025)
28 |
29 | - Updated `@mdn/browser-compat-data` to `7.1.7`
30 |
31 | ### 8.4.0 (August 20, 2025)
32 |
33 | - Added `color-function-display-p3-linear`
34 | - Added `alpha-function`
35 | - Updated `@mdn/browser-compat-data` to `6.1.4`
36 |
37 | ### 8.3.1 (June 23, 2025)
38 |
39 | - Updated `@mdn/browser-compat-data` to `6.0.25`
40 |
41 | ### 8.3.0 (May 27, 2025)
42 |
43 | - Added `color-mix-variadic-function-arguments`
44 |
45 | ### 8.2.6 (May 26, 2025)
46 |
47 | - Updated `@mdn/browser-compat-data` to `6.0.17`
48 |
49 | ### 8.2.5 (April 15, 2025)
50 |
51 | - Updated `@mdn/browser-compat-data` to `6.0.5`
52 |
53 | ### 8.2.4 (March 10, 2025)
54 |
55 | - Updated `@mdn/browser-compat-data` to `5.7.1`
56 |
57 | ### 8.2.3 (December 9, 2024)
58 |
59 | - Updated `@mdn/browser-compat-data` to `5.6.22`
60 |
61 | ### 8.2.2 (December 2, 2024)
62 |
63 | - Updated `@mdn/browser-compat-data` to `5.6.20`
64 |
65 | ### 8.2.1 (November 11, 2024)
66 |
67 | - Added `sign-functions` plugin link
68 |
69 | ### 8.2.0 (November 11, 2024)
70 |
71 | - Added `random-function`
72 |
73 | ### 8.1.2 (October 14, 2024)
74 |
75 | - Updated `@mdn/browser-compat-data` to `5.6.6`
76 |
77 | ### 8.1.1 (September 9, 2024)
78 |
79 | - Updated `@mdn/browser-compat-data` to `5.5.51`
80 |
81 | ### 8.1.0 (July 7, 2024)
82 |
83 | - Added `content-alt-text`
84 | - Updated `@mdn/browser-compat-data` to `5.5.37`
85 |
86 | ### 8.0.2 (May 23, 2024)
87 |
88 | - Updated `@mdn/browser-compat-data` to `5.5.29`
89 |
90 | ### 8.0.1 (May 10, 2024)
91 |
92 | - Updated `@mdn/browser-compat-data` to `5.5.26`
93 |
94 | ### 8.0.0 (March 30, 2024)
95 |
96 | - Added `contrast-color-function`
97 | - Added `web-feature` identifiers for some features
98 | - Changed [license to `MIT-0` to align with `postcss-preset-env`](https://preset-env.cssdb.org/blog/license-change/)
99 | - Removed `color-contrast`
100 | - Removed `color-mod-function`
101 | - Removed `custom-property-sets`
102 | - Removed `gray-function`
103 | - Removed `matches-pseudo-class`
104 |
105 | ### 7.11.2 (March 9, 2024)
106 |
107 | - Updated `@mdn/browser-compat-data` to `5.5.14` (patch)
108 | - Take `mixed_type_parameters` into account for most color features.
109 |
110 | ### 7.11.1 (February 26, 2024)
111 |
112 | - Updated `@mdn/browser-compat-data` to `5.5.11` (patch)
113 | - Updated `caniuse-lite` to `1.0.30001589` (patch)
114 |
115 | ### 7.11.0 (February 17, 2024)
116 |
117 | - Added: Stage 2 `light-dark-function`
118 |
119 | ### 7.10.0 (December 27, 2023)
120 |
121 | - Added `interoperable_at` to make it possible to calculate the Baseline status of a feature
122 | - Updated `@mdn/browser-compat-data` to `5.5.2` (patch)
123 | - Updated `caniuse-lite` to `1.0.30001571` (patch)
124 |
125 | ### 7.9.1 (December 11, 2023)
126 |
127 | - Updated `@mdn/browser-compat-data` to `5.4.5` (patch)
128 | - Updated `caniuse-lite` to `1.0.30001568` (patch)
129 |
130 | ### 7.9.0 (October 31, 2023)
131 |
132 | - Added: Stage 2 `logical-overflow`
133 | - Added: Stage 2 `logical-overscroll-behavior`
134 | - Updated `@mdn/browser-compat-data` to `5.3.25` (patch)
135 | - Updated `caniuse-lite` to `1.0.30001553` (patch)
136 |
137 | ### 7.8.0 (October 08, 2023)
138 |
139 | - Added: Stage 2 `gamut-mapping`
140 | - Updated `@mdn/browser-compat-data` to `5.3.21` (patch)
141 |
142 | ### 7.7.3 (October 05, 2023)
143 |
144 | - Updated `@mdn/browser-compat-data` to `5.3.20` (patch)
145 | - Updated `caniuse-lite` to `1.0.30001546` (patch)
146 |
147 | ### 7.7.2 (September 4, 2023)
148 |
149 | - Updated `@mdn/browser-compat-data` to `5.3.14` (patch)
150 | - Updated `caniuse-lite` to `1.0.30001525` (patch)
151 |
152 | ### 7.7.1 (August 20, 2023)
153 |
154 | - Updated `@mdn/browser-compat-data` to `5.3.11` (patch)
155 | - Updated `caniuse-lite` to `1.0.30001522` (patch)
156 |
157 | ### 7.7.0 (July 24, 2023)
158 |
159 | - Added: Stage 2 `src-function`
160 | - Updated `@mdn/browser-compat-data` to `5.3.5` (patch)
161 | - Updated `caniuse-lite` to `1.0.30001517` (patch)
162 |
163 | ### 7.6.0 (May 15, 2023)
164 |
165 | - Added: Stage 2 `relative-color-syntax`
166 | - Updated `@mdn/browser-compat-data` to `5.2.57` (patch)
167 | - Updated `caniuse-lite` to `1.0.30001487` (patch)
168 | - `color-contrast` is now Stage 1
169 | - `container-queries` is now Stage 2
170 | - `font-format-keywords` is now Stage 2
171 | - `nesting-rules` is now Stage 2
172 | - `overscroll-behavior-property` is now Stage 2
173 |
174 | ### 7.5.4 (April 10, 2023)
175 |
176 | - Updated `@mdn/browser-compat-data` to `5.2.49` (patch)
177 | - Updated `caniuse-lite` to `1.0.30001477` (patch)
178 |
179 | ### 7.5.3 (March 31, 2023)
180 |
181 | - Updated support data for `media-query-ranges`
182 |
183 | ### 7.5.2 (March 28, 2023)
184 |
185 | - Updated support data for `color-mix`
186 | - Updated support data for `gradients-interpolation-method`
187 |
188 | ### 7.5.1 (March 24, 2023)
189 |
190 | - Fixed potentially old generated files (patch)
191 |
192 | ### 7.5.0 (March 24, 2023)
193 |
194 | - Added: Stage 2 `gradients-interpolation-method`
195 | - Updated `@mdn/browser-compat-data` to `5.2.45` (patch)
196 | - Updated `caniuse-lite` to `1.0.30001469` (patch)
197 |
198 | ### 7.4.1 (January 24, 2023)
199 |
200 | - Added: Links to plugins.
201 |
202 | ### 7.4.0 (January 22, 2023)
203 |
204 | - Added: Stage 2 `logical-resize`
205 |
206 | ### 7.3.0 (January 19, 2023)
207 |
208 | - Added: Stage 2 `logical-viewport-units`
209 | - Updated `@mdn/browser-compat-data` to `5.2.29` (patch)
210 | - Updated `caniuse-lite` to `1.0.30001445` (patch)
211 |
212 | ### 7.2.1 (January 9, 2023)
213 |
214 | - Updated `@mdn/browser-compat-data` to `5.2.26` (patch)
215 | - Updated `caniuse-lite` to `1.0.30001442` (patch)
216 | - Updated `postcss` to `8.4.21` (patch)
217 |
218 | ### 7.2.0 (November 29, 2022)
219 |
220 | - Added: Stage 2 `media-queries-aspect-ratio-number-values`
221 | - Updated `@mdn/browser-compat-data` to `5.2.19` (patch)
222 | - Updated `caniuse-lite` to `1.0.30001434` (patch)
223 |
224 | ### 7.1.0 (November 4, 2022)
225 |
226 | - Added: Stage 2 `scope-pseudo-class`
227 | - Updated `@mdn/browser-compat-data` to `5.2.12` (patch)
228 | - Updated `caniuse-lite` to `1.0.30001430` (patch)
229 | - Updated `postcss` to `8.4.18` (patch)
230 | - Updated `postcss-preset-env` to `7.8.2` (patch)
231 | - Updated `stylelint` to `14.14.1` (patch)
232 |
233 | ### 7.0.2 (October 14, 2022)
234 |
235 | - Updated `@mdn/browser-compat-data` to `5.2.6` (patch)
236 | - Updated `browserslist` to `4.21.4` (patch)
237 | - Updated `caniuse-lite` to `1.0.30001418` (patch)
238 |
239 | ### 7.0.1 (August 23, 2022)
240 |
241 | - Updated `@mdn/browser-compat-data` to `5.1.8` (patch)
242 | - Updated `caniuse-lite` to `1.0.30001382` (patch)
243 |
244 | ### 7.0.0 (August 15, 2022)
245 |
246 | - Updated most features to use data from [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)
247 | - Updated `environment-variables` to mean **custom** environment variables. No browsers currently support this feature. (breaking)
248 | - Added: Stage 2 `nested-calc`.
249 | - Added: Stage 2 `text-decoration-shorthand`.
250 | - Added: Stage 2 `float-clear-logical-values`.
251 | - Updated `@mdn/browser-compat-data` to `5.1.8` (minor)
252 | - Updated `browserslist` to `4.21.3` (minor)
253 | - Updated `caniuse-lite` to `1.0.30001376` (patch)
254 |
255 | ### 6.6.3 (June 3, 2022)
256 |
257 | - Updated `case-insensitive-attributes` plugin's url
258 | - Updated `custom-media-queries` plugin's url
259 | - Updated `custom-selectors` plugin's url
260 | - Updated `not-pseudo-class` plugin's url
261 | - Included `trigonometric-functions` plugin as bundled by PostCSS Preset Env
262 | - Updated `@mdn/browser-compat-data` to `5.0.1` (major)
263 | - Updated `caniuse-lite` to `1.0.30001346` (patch)
264 | - Updated `postcss-preset-env` to `7.7.0` (minor)
265 |
266 | ### 6.6.2 (May 23, 2022)
267 |
268 | - Added polyfills to `cascade-layer` and `trigonometric-functions`.
269 |
270 | ### 6.6.1 (May 2, 2022)
271 |
272 | - Added polyfills to `unset-value` and `stepped-value-functions` (patch)
273 |
274 | ### 6.6.0 (May 1, 2022)
275 |
276 | - Added: Stage 2 Exponential (`pow()`, `sqrt()`, `hypot()`, `log()`, `exp()`) functions (minor).
277 | - Added: Stage 2 `calc()` constants (`e`, `pi`, `infinity`, `-infinity` and `NaN`) (minor).
278 | - Added: Stage 2 Sign (`abs()` and `sign()`) functions (minor).
279 | - Added: Stage 2 Trigonometric (`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` and `atan2()`) functions (minor).
280 | - Updated `@mdn/browser-compat-data` to `4.1.18` (patch)
281 | - Updated `caniuse-lite` to `1.0.30001334` (patch)
282 |
283 | ### 6.5.0 (March 15, 2022)
284 |
285 | - Updated `@mdn/browser-compat-data` to `4.1.11` (patch)
286 | - Updated `astro` to `0.24.0` (minor)
287 | - Updated `caniuse-lite` to `1.0.30001317` (patch)
288 | - Fixed issue in which features under a flag on MDN were counting as implemented.
289 | - Added: Stage 2 cascade layers. (minor)
290 | - `color-mix` is now Stage 2 (was deprecated) and has links to an official spec! 🎉 (minor)
291 |
292 | ### 6.4.1 (March 7, 2022)
293 |
294 | - Updated `@mdn/browser-compat-data` to `4.1.10` (patch). This now shows correct support for `:where` on Safari version 14.
295 | - Updated `astro` to `0.23.7` (patch)
296 | - Updated `browserslist` to `4.20.0` (minor)
297 | - Updated `caniuse-lite` to `1.0.30001313` (patch)
298 | - Updated `postcss` to `8.4.8` (patch)
299 | - Updated `postcss-preset-env` to `7.4.2` (patch)
300 | - Updated `stylelint` to `14.5.3` (patch)
301 |
302 | ### 6.4.0 (February 19, 2022)
303 |
304 | - Added: `unset-value` function feature as Stage 3.
305 | - Updated `@astropub/webapi` to`0.10.14` (patch)
306 | - Updated `@mdn/browser-compat-data` to `4.1.8` (patch)
307 | - Updated `astro` to `0.23.0` (minor)
308 | - Updated `browserslist` to `4.19.3` (patch)
309 | - Updated `postcss-preset-env` to `7.4.1` (minor)
310 | - Updated `stylelint` to `14.5.1` (minor)
311 |
312 | ### 6.3.1 (February 16, 2022)
313 |
314 | - Fix certain examples
315 | - Adding new features to PostCSS Preset Env bundled collection.
316 | - Ensuring all features that have plugins have them listed.
317 |
318 | ### 6.3.0 (February 12, 2022)
319 |
320 | - Added: Stage 2 `oklab` function (minor).
321 | - Added missing polyfills for `clamp()`, `opacity` percentages, `:is` pseudo and `display-two-values`.
322 | - Fixed `and_chr` and `android` browsers always using the latest version on Can I Use, now leverages Desktop version if the supported version is the latest one. See [Fyrd/caniuse#3518](https://github.com/Fyrd/caniuse/issues/3518).
323 | - Updated `stylelint` to `14.5.0` (minor)
324 | - Updated `caniuse-lite` to `1.0.30001311` (patch)
325 | - Updated `postcss-preset-env` to `7.3.2` (patch)
326 |
327 | ### 6.2.1 (February 10, 2022)
328 |
329 | - Returning `example` to the exported DB (removed on `6.0.0`).
330 | - Removed outdated plugin from Container Queries.
331 | - Added link to experimental version of `:has`.
332 | - Updated `@astropub/webapi` to `0.10.13` (patch)
333 | - Updated `@mdn/browser-compat-data` to `4.1.7` (patch)
334 | - Updated `caniuse-lite` to `1.0.30001310` (patch)
335 | - Updated `stylelint` to `14.4.0` (minor)
336 | - Updated `stylelint-config-standard` to`25.0.0` (major)
337 |
338 | ### 6.2.0 (February 5, 2022)
339 |
340 | - Added: `color()` function feature as Stage 2.
341 | - Fixed `vendors_implementations` so it doesn't count unreleased browsers.
342 | - Updated `postcss-preset-env` to `^7.3.1` (minor)
343 | - Updated `@mdn/browser-compat-data` to `^4.1.6` (patch)
344 | - Updated `caniuse-lite` to `^1.0.30001307` (patch)
345 | - Updated `postcss` to `^8.4.6` (patch)
346 |
347 | ### 6.1.0 (January 31, 2022)
348 |
349 | - `blank-pseudo-class` is now Stage 2 and has links to an official spec! 🎉 (minor)
350 | - `clamp` is now Stage 2 and has links to an official spec! 🎉 (minor)
351 | - `color-contrast` is now Stage 2 and has links to an official spec! 🎉 (minor)
352 | - `color-functional-notation` is now Stage 2 and has links to an official spec! 🎉 (minor)
353 | - `custom-media-queries` is now Stage 2 and has links to an official spec! 🎉 (minor)
354 | - `display-two-values` is now Stage 2 and has links to an official spec! 🎉 (minor)
355 | - `opacity-percentage` is now Stage 2 and has links to an official spec! 🎉 (minor)
356 | - `prefers-color-scheme-query` is now Stage 2 and has links to an official spec! 🎉 (minor)
357 | - `prefers-reduced-motion-query` is now Stage 2 and has links to an official spec! 🎉 (minor)
358 | - `where-pseudo-class` is now Stage 2 and has links to an official spec! 🎉 (minor)
359 | - `container-queries` has official Working Draft linked (instead of Editor's Draft).
360 | - `nesting-rules` has official Working Draft linked (instead of Editor's Draft).
361 | - `overscroll-behavior-property` has official Working Draft linked (instead of Editor's Draft).
362 | - Updated `@mdn/browser-compat-data` to `4.1.5` (patch)
363 | - Updated `@astropub/webapi` to `0.10.11` (patch)
364 | - Updated `astro` to `0.22.20` (patch)
365 | - Updated `caniuse-lite` to `1.0.30001304` (patch)
366 | - Updated `stylelint` to `14.3.0` (minor)
367 |
368 | ### 6.0.2 (January 21, 2022)
369 |
370 | - Updated mechanism to calculate browser versions to be more reliable. This also introduces the option through `allow_partial_implementation` if we want to allow something such as Autoprefixer to take care with prefixing a given feature such as `:any-link`.
371 | - Ensuring pre-releases aren't counted as vendor implementation. This was flagging that `:has` had 1 vendor implementation, but it's not in stable Safari yet.
372 | - Removed `media-query-ranges` support data as it was not correct that Firefox supports it fully. See [#57](https://github.com/csstools/cssdb/issues/57) and [mdn/browser-compat-data#14593](https://github.com/mdn/browser-compat-data/issues/14593)
373 | - Updated `@mdn/browser-compat-data` to `4.1.4` (patch)
374 | - Updated `astro` to `0.22.16` (patch)
375 | - Updated `caniuse-lite` to `1.0.30001300` (patch)
376 |
377 | ### 6.0.1 (January 7, 2022)
378 |
379 | - Updated: Conditional media queries now Stage 2 and has links to an official spec! 🎉 (minor)
380 | - Updated `astro` to `0.22.8` (patch).
381 | - Updated `caniuse-lite` to `1.0.30001297` (patch).
382 |
383 | ### 6.0.0 (January 7, 2022)
384 |
385 | - Exported CSSDB no longer exposes `example`, `caniuse` nor `caniuse-compat` (breaking).
386 | - Added `browser_support` field that contains a dictionary with the earliest supported version.
387 | - Added a mechanism to fetch browser support from [mdn](https://github.com/mdn/browser-compat-data).
388 | - Added `vendors_implementations` that states how many vendors have implemented the feature.
389 | - Added: Stage 1 `clamp()` function (minor)
390 | - Added: Stage 1 Two values syntax for `display` (minor)
391 | - Added: Stage 1 percentages for opacity (minor)
392 | - Updated `postcss-preset-env` to `7.2.0` (minor).
393 | - Updated `@astropub/webapi` to `0.10.2` (minor).
394 | - Updated `astro` to `0.22.7` (patch).
395 | - Updated `caniuse-lite` to `1.0.30001296` (patch).
396 |
397 | ### 5.1.0 (January 4, 2022)
398 |
399 | - Updated: All plugins urls are pointing to the right place.
400 | - Added: Exported now a cssdb.mjs to allow support of ESM modules.
401 | - Added: `color-contrast()` function.
402 | - Added: Container Queries.
403 | - Updated: `env()` now has Browser Support table.
404 | - Updated: `nesting-rules` now have Browser Support table and Can I Use property.
405 | - Updated: `prefers-color-scheme` Media Query Browser Support.
406 | - Updated: Font `format()` Keywords now has MDN docs.
407 | - Updated: `hwb()` Function now has MDN docs.
408 | - Updated: `ic` unit now has MDN docs.
409 | - Updated: `lch()` Function now has MDN docs.
410 | - Updated: `:matches()` Pseudo Class now has MDN docs.
411 | - Updated: `:where()` Zero-Specificity Pseudo-Class now has MDN docs.
412 | - Updated: `all` Property is now Stage 3! 🎉
413 | - Updated: `gray()` function is now Stage -1! 🙁
414 |
415 | ### 5.0.0 (May 24, 2019)
416 |
417 | - Removed: Rejected `:matches()` psuedo-class (major)
418 | - Added: Stage 2 `:is()` pseudo-class (minor)
419 | - Added: MDN docs for `image-set-function` (patch)
420 | - Added: MDN docs for `:blank` pseudo-class (patch)
421 |
422 | ### 4.4.0 (March 7, 2019)
423 |
424 | - Updated: Nesting Rules are now Stage 1! 🎉
425 |
426 | ### 4.3.0 (December 12, 2018)
427 |
428 | - Added: `:blank` Empty-Value Pseudo-Class
429 | - Added: caniuse link for `:has()` Relational Pseudo-Class
430 | - Added: JavaScript Library and PostCSS Plugin links for the `:blank`
431 | Empty-Value Pseudo-Class and the `:has()` Relational Pseudo-Class
432 |
433 | ### 4.2.0 (November 4, 2018)
434 |
435 | - Added: Documentation links to MDN
436 | - Added: `color-adjust` Property
437 | - Added: `overscroll-behavior` Property
438 | - Added: `prefers-color-scheme` Media Query
439 | - Added: `prefers-reduced-motion` Media Query
440 | - Added: `:in-range` and `:out-of-range` Pseudo-Classes
441 | - Added: `:read-only` and `:read-write` selectors
442 |
443 | This also updates the cssdb.org template and styles, using postcss-preset-env
444 | to create and minifying cross-browser compatible css, improving font loading
445 | and display, supporting RTL displays, and adding MDN documentation.
446 |
447 | ### 4.1.1 (October 28, 2018)
448 |
449 | - Added: caniuse link for `overflow` shorthand property
450 |
451 | ### 4.1.0 (October 28, 2018)
452 |
453 | - Added: Double Position Gradients
454 |
455 | ### 4.0.0 (October 23, 2018)
456 |
457 | - Changed: `:something()` is now `:where()` and moved from Stage 2 to Stage 1
458 |
459 | ### 3.2.1 (August 31st, 2018)
460 |
461 | - Updated: caniuse-like browser statistics for Custom Environment Variables
462 |
463 | I really wish caniuse would start adding some of these.
464 |
465 | ### 3.2.0 (August 30th, 2018)
466 |
467 | - Removed: Rejected `color-mod()` function
468 | - Updated: Overflow shorthand is now Stage 2
469 | - Updated: caniuse-like browser statistics for Custom Environment Variables and
470 | Overflow Shorthand
471 |
472 | ### 3.1.0 (May 11th, 2018)
473 |
474 | - Added: Polyfills for `lab-function` and `lch-function`
475 |
476 | ### 3.0.0 (May 10th, 2018)
477 |
478 | - Changed: All stages from 1-4 to 0-4 to align with TC39
479 | - Updated: Tests, badges, descriptions, and dependencies
480 |
481 | ### 2.2.0 (May 7th, 2018)
482 |
483 | - Added: Place Properties as Stage 2
484 | - Added: PostCSS plugin for Color Functional Notation
485 | - Updated: Media Query Ranges to Stage 4
486 |
487 | ### 2.1.0 (May 1st, 2018)
488 |
489 | - Added: Environment Variables as Stage 1
490 | - Added: `overflow` Property as Stage 2
491 | - Added: Gap Properties as Stage 4
492 |
493 | ### 2.0.0 (April 7th, 2018)
494 |
495 | - Renamed: GitHub repository from `css-db` to `cssdb`, now aligning with npm
496 | - Renamed: All feature IDs.
497 | - Updated: Documentation.
498 |
499 | Notes: The old feature IDs were problematic because they attempted to follow
500 | specification section IDs, but some specifications weren’t aren’t always
501 | covered by a single section, and many sections were inconsistently named.
502 | Because there was no pattern one could predict for any of the headings, a new
503 | system was created; to **name** the feature and provide **context**. This meant
504 | a feature ID like `css-cascade-all-shorthand` became `all-property`, and
505 | `css-fonts-propdef-font-variant` became `font-variant-property`, etc. This
506 | greatly simplified all of the feature IDs and allowed for more predictive
507 | naming moving forward.
508 |
509 | ### 1.6.0 (February 18th, 2018)
510 |
511 | - Added: Break Properties
512 |
513 | ### 1.5.2 (February 18th, 2018)
514 |
515 | - Updated: `:focus-within` polyfills
516 |
517 | ### 1.5.1 (February 17th, 2018)
518 |
519 | - Fixed: `:focus-visible` and `:focus-within` title syntax
520 |
521 | ### 1.5.0 (January 22th, 2018)
522 |
523 | - Changed: Use the latest published specification URL whenever possible
524 | - Changed: Upgrade Color #RRGGBBAA Notation to Stage 3
525 | - Changed: Upgrade Color gray() Function to Stage 3
526 | - Changed: Upgrade Color color-mod() Function to Stage 3
527 | - Changed: Upgrade Color hwb() Function to Stage 3
528 | - Changed: Downgrade Custom Properties to Stage 4
529 | - Fixed: Color hwb() Function example
530 | - Fixed: the Color rebeccapurple PostCSS Plugin URL
531 |
532 | ### 1.4.0 (January 16th, 2018)
533 |
534 | - Changed: polyfill for `css-color-modifying-colors`
535 |
536 | ### 1.3.0 (January 8th, 2018)
537 |
538 | - Added: caniuse references for `css-logical` and `css-fonts-system-ui-def`
539 | - Fixed: caniuse parsing for browser support
540 |
541 | ### 1.2.0 (January 8th, 2018)
542 |
543 | - Fixed: specification identifiers for `css-color-hwb-notation`,
544 | `selectors-dir-pseudo`
545 | - Fixed: Examples for Media Queries Custom Media Queries
546 |
547 | ### 1.1.0 (September 27th, 2017)
548 |
549 | - Added: Image `image-set()` Function, Selector `:dir` Pseudo-Class,
550 | Selector `:any-link` Pseudo-Class, Text `overflow-wrap` Property,
551 | Font `system-ui` Family, Cascade `all` Property
552 | - Added: caniuse identifiers
553 | - Fixed: Examples for Nesting, Media Queries Ranges
554 |
555 | ### 1.0.0 (September 6th, 2017)
556 |
557 | - Initial version
558 |
--------------------------------------------------------------------------------