source: frontend/node_modules/cssdb/cssdb.mjs

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance
  • Property mode set to 100644
File size: 67.8 KB
RevLine 
[9af201e]1export default [
2 {
3 "id": "all-property",
4 "title": "`all` Property",
5 "description": "A property for defining the reset of all properties of an element",
6 "specification": "https://www.w3.org/TR/css-cascade-3/#all-shorthand",
7 "stage": 4,
8 "browser_support": {
9 "and_chr": "37",
10 "and_ff": "27",
11 "android": "37",
12 "chrome": "37",
13 "edge": "79",
14 "firefox": "27",
15 "ios_saf": "9.3",
16 "oculus": "5.0",
17 "op_mob": "24",
18 "opera": "24",
19 "safari": "9.1",
20 "samsung": "3.0"
21 },
22 "docs": {
23 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/all"
24 },
25 "example": "a {\n all: initial;\n}",
26 "interoperable_at": 1579046400,
27 "polyfills": [
28 {
29 "type": "PostCSS Plugin",
30 "link": "https://github.com/maximkoretskiy/postcss-initial"
31 }
32 ],
33 "vendors_implementations": 3
34 },
35 {
36 "id": "any-link-pseudo-class",
37 "title": "`:any-link` Hyperlink Pseudo-Class",
38 "description": "A pseudo-class for matching anchor elements independent of whether they have been visited",
39 "specification": "https://www.w3.org/TR/selectors-4/#any-link-pseudo",
40 "stage": 2,
41 "browser_support": {
42 "and_chr": "18",
43 "and_ff": "4",
44 "android": "37",
45 "chrome": "1",
46 "edge": "79",
47 "firefox": "1",
48 "ios_saf": "1",
49 "oculus": "5.0",
50 "op_mob": "14",
51 "opera": "15",
52 "safari": "3",
53 "samsung": "1.0"
54 },
55 "docs": {
56 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link"
57 },
58 "example": "nav :any-link > span {\n background-color: yellow;\n}",
59 "interoperable_at": 1579046400,
60 "polyfills": [
61 {
62 "type": "PostCSS Plugin",
63 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-pseudo-class-any-link"
64 }
65 ],
66 "vendors_implementations": 3
67 },
68 {
69 "id": "blank-pseudo-class",
70 "title": "`:blank` Empty-Value Pseudo-Class",
71 "description": "A pseudo-class for matching form elements when they are empty",
72 "specification": "https://www.w3.org/TR/selectors-4/#blank",
73 "stage": 2,
74 "browser_support": {},
75 "docs": {
76 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:blank"
77 },
78 "example": "input:blank {\n background-color: yellow;\n}",
79 "polyfills": [
80 {
81 "type": "JavaScript Library",
82 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo"
83 },
84 {
85 "type": "PostCSS Plugin",
86 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo"
87 }
88 ],
89 "vendors_implementations": 0
90 },
91 {
92 "id": "break-properties",
93 "title": "Break Properties",
94 "description": "Properties for defining the break behavior between and within boxes",
95 "specification": "https://www.w3.org/TR/css-break-3/#breaking-controls",
96 "stage": 3,
97 "browser_support": {
98 "and_chr": "51",
99 "and_ff": "92",
100 "android": "51",
101 "chrome": "51",
102 "edge": "12",
103 "firefox": "92",
104 "oculus": "5.0",
105 "op_mob": "37",
106 "opera": "11.1",
107 "samsung": "5.0"
108 },
109 "docs": {
110 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-after"
111 },
112 "example": "a {\n break-inside: avoid;\n break-before: avoid-column;\n break-after: always;\n}",
113 "polyfills": [
114 {
115 "type": "PostCSS Plugin",
116 "link": "https://github.com/shrpne/postcss-page-break"
117 }
118 ],
119 "vendors_implementations": 2
120 },
121 {
122 "id": "calc-constants",
123 "title": "`e`, `pi`, `infinity`, `-infinity` and `NaN` constants for calculation",
124 "description": "Constants for calculation simplification",
125 "specification": "https://www.w3.org/TR/css-values-4/#calc-constants",
126 "stage": 2,
127 "browser_support": {
128 "and_ff": "114",
129 "firefox": "114",
130 "ios_saf": "16",
131 "safari": "16"
132 },
133 "docs": {
134 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/calc-constant"
135 },
136 "example": "p {\n font-size: calc(pow(e, pi) * 1rem);\n}",
137 "vendors_implementations": 2
138 },
139 {
140 "id": "cascade-layers",
141 "title": "CSS Cascade Layers",
142 "description": "The `@layer` at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.",
143 "specification": "https://www.w3.org/TR/css-cascade-5/#layering",
144 "stage": 2,
145 "browser_support": {
146 "and_chr": "99",
147 "and_ff": "97",
148 "android": "99",
149 "chrome": "99",
150 "edge": "99",
151 "firefox": "97",
152 "ios_saf": "15.4",
153 "oculus": "21.0",
154 "op_mob": "68",
155 "opera": "85",
156 "safari": "15.4",
157 "samsung": "18.0"
158 },
159 "docs": {
160 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@layer"
161 },
162 "example": "/* Un-layered styles have the highest priority */\na {\n color: mediumvioletred;\n}\n\n@layer defaults {\n a { color: maroon; }\n}",
163 "interoperable_at": 1647216000,
164 "polyfills": [
165 {
166 "type": "PostCSS Plugin",
167 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers"
168 }
169 ],
170 "vendors_implementations": 3
171 },
172 {
173 "id": "case-insensitive-attributes",
174 "title": "Case-Insensitive Attributes",
175 "description": "An attribute selector matching attribute values case-insensitively",
176 "specification": "https://www.w3.org/TR/selectors-4/#attribute-case",
177 "stage": 2,
178 "browser_support": {
179 "and_chr": "49",
180 "and_ff": "47",
181 "android": "49",
182 "chrome": "49",
183 "edge": "79",
184 "firefox": "47",
185 "ios_saf": "9",
186 "oculus": "5.0",
187 "op_mob": "36",
188 "opera": "36",
189 "safari": "9",
190 "samsung": "5.0"
191 },
192 "docs": {
193 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors"
194 },
195 "example": "[frame=hsides i] {\n border-style: solid none;\n}",
196 "interoperable_at": 1579046400,
197 "polyfills": [
198 {
199 "type": "PostCSS Plugin",
200 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-attribute-case-insensitive"
201 }
202 ],
203 "vendors_implementations": 3
204 },
205 {
206 "id": "clamp",
207 "title": "`clamp` Function",
208 "description": "The clamp() CSS function clamps a value between an upper and lower bound. It enables selecting a middle value within a range of values between a defined minimum and maximum.",
209 "specification": "https://www.w3.org/TR/css-values-4/#funcdef-clamp",
210 "stage": 2,
211 "browser_support": {
212 "and_chr": "79",
213 "and_ff": "79",
214 "android": "79",
215 "chrome": "79",
216 "edge": "79",
217 "firefox": "75",
218 "ios_saf": "13.4",
219 "oculus": "8.0",
220 "op_mob": "57",
221 "opera": "66",
222 "safari": "13.1",
223 "samsung": "12.0"
224 },
225 "docs": {
226 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/clamp"
227 },
228 "example": "button {\n font-size: clamp(1rem, 2.5vw, 2rem);\n}",
229 "interoperable_at": 1586217600,
230 "polyfills": [
231 {
232 "type": "PostCSS Plugin",
233 "link": "https://github.com/polemius/postcss-clamp"
234 }
235 ],
236 "vendors_implementations": 3
237 },
238 {
239 "id": "color-adjust",
240 "title": "`color-adjust` Property",
241 "description": "The color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images",
242 "specification": "https://www.w3.org/TR/css-color-4/#color-adjust",
243 "stage": 2,
244 "browser_support": {
245 "and_ff": "97",
246 "firefox": "97",
247 "ios_saf": "15.4",
248 "safari": "15.4"
249 },
250 "docs": {
251 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust"
252 },
253 "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}",
254 "vendors_implementations": 2
255 },
256 {
257 "id": "color-contrast",
258 "title": "`color-contrast()` Function",
259 "description": "A function for choosing the color that contrasts the most.",
260 "specification": "https://drafts.csswg.org/css-color-6/#colorcontrast",
261 "stage": 1,
262 "browser_support": {},
263 "docs": {
264 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast"
265 },
266 "example": "p {\n color: color-contrast(wheat vs tan, sienna, var(--myAccent), #d2691e);\n}",
267 "polyfills": [],
268 "vendors_implementations": 0
269 },
270 {
271 "id": "color-function",
272 "title": "`color()` Function",
273 "description": "A function that allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space that most of the other color functions operate in.",
274 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-color",
275 "stage": 2,
276 "browser_support": {
277 "and_chr": "111",
278 "and_ff": "113",
279 "android": "111",
280 "chrome": "111",
281 "edge": "111",
282 "firefox": "113",
283 "ios_saf": "15",
284 "op_mob": "75",
285 "opera": "97",
286 "safari": "15",
287 "samsung": "22.0"
288 },
289 "docs": {
290 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color"
291 },
292 "example": "p {\n color: color(display-p3 1 0.5 0);\n color: color(display-p3 1 0.5 0 / .5);\n}",
293 "interoperable_at": 1683590400,
294 "polyfills": [
295 {
296 "type": "PostCSS Plugin",
297 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function"
298 }
299 ],
300 "vendors_implementations": 3
301 },
302 {
303 "id": "color-functional-notation",
304 "title": "Color Functional Notation",
305 "description": "A space and slash separated notation for specifying colors",
306 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-rgb",
307 "stage": 2,
308 "browser_support": {
309 "and_chr": "65",
310 "and_ff": "52",
311 "android": "65",
312 "chrome": "65",
313 "edge": "79",
314 "firefox": "52",
315 "ios_saf": "12.2",
316 "oculus": "5.0",
317 "op_mob": "47",
318 "opera": "52",
319 "safari": "12.1",
320 "samsung": "9.0"
321 },
322 "docs": {
323 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#syntax"
324 },
325 "example": "em {\n background-color: hsl(120deg 100% 25%);\n color: rgb(0 255 0);\n}",
326 "interoperable_at": 1579046400,
327 "polyfills": [
328 {
329 "type": "PostCSS Plugin",
330 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation"
331 }
332 ],
333 "vendors_implementations": 3
334 },
335 {
336 "id": "color-mix",
337 "title": "`color-mix()` Function",
338 "description": "A function for mixing colors",
339 "specification": "https://www.w3.org/TR/css-color-5/#color-mix",
340 "stage": 2,
341 "browser_support": {
342 "and_chr": "111",
343 "and_ff": "113",
344 "android": "111",
345 "chrome": "111",
346 "edge": "111",
347 "firefox": "113",
348 "ios_saf": "16.2",
349 "op_mob": "75",
350 "opera": "97",
351 "safari": "16.2",
352 "samsung": "22.0"
353 },
354 "docs": {
355 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix"
356 },
357 "example": "p {\n color: color-mix(in lch, purple 50%, plum 50%);\n}",
358 "interoperable_at": 1683590400,
359 "polyfills": [
360 {
361 "type": "PostCSS Plugin",
362 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function"
363 }
364 ],
365 "vendors_implementations": 3
366 },
367 {
368 "id": "color-mod-function",
369 "title": "`color-mod()` Function",
370 "description": "A function for modifying colors",
371 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-color-mod",
372 "stage": -1,
373 "browser_support": {},
374 "example": "p {\n color: color-mod(black alpha(50%));\n}",
375 "polyfills": [
376 {
377 "type": "PostCSS Plugin",
378 "link": "https://github.com/csstools/postcss-color-mod-function"
379 }
380 ],
381 "vendors_implementations": 0
382 },
383 {
384 "id": "container-queries",
385 "title": "Container Queries",
386 "description": "New container property and container at rule to make changes depending on the container's size",
387 "specification": "https://www.w3.org/TR/css-contain-3/#container-queries",
388 "stage": 2,
389 "browser_support": {
390 "and_chr": "105",
391 "and_ff": "110",
392 "android": "105",
393 "chrome": "105",
394 "edge": "105",
395 "firefox": "110",
396 "ios_saf": "16",
397 "op_mob": "72",
398 "opera": "91",
399 "safari": "16",
400 "samsung": "20.0"
401 },
402 "docs": {
403 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries"
404 },
405 "example": ".container {\n contain: layout inline-size;\n}\n\n@container (min-width: 700px) {\n .container {\n /* styles applied when a container is at least 700px */\n }\n}",
406 "interoperable_at": 1676332800,
407 "polyfills": [
408 {
409 "type": "JavaScript Library",
410 "link": "https://www.npmjs.com/package/container-query-polyfill"
411 }
412 ],
413 "vendors_implementations": 3
414 },
415 {
416 "id": "custom-media-queries",
417 "title": "Custom Media Queries",
418 "description": "An at-rule for defining aliases that represent media queries",
419 "specification": "https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media",
420 "stage": 2,
421 "browser_support": {},
422 "example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}",
423 "polyfills": [
424 {
425 "type": "PostCSS Plugin",
426 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media"
427 }
428 ],
429 "vendors_implementations": 0
430 },
431 {
432 "id": "custom-properties",
433 "title": "Custom Properties",
434 "description": "A syntax for defining custom values accepted by all CSS properties",
435 "specification": "https://www.w3.org/TR/css-variables-1/",
436 "stage": 3,
437 "browser_support": {
438 "and_chr": "49",
439 "and_ff": "31",
440 "android": "50",
441 "chrome": "49",
442 "edge": "15",
443 "firefox": "31",
444 "ios_saf": "9.3",
445 "oculus": "5.0",
446 "op_mob": "36",
447 "opera": "36",
448 "safari": "9.1",
449 "samsung": "5.0"
450 },
451 "docs": {
452 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/var"
453 },
454 "example": ":root {\n --some-length: 32px;\n\n height: var(--some-length);\n width: var(--some-length);\n}",
455 "interoperable_at": 1491350400,
456 "polyfills": [
457 {
458 "type": "PostCSS Plugin",
459 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties"
460 }
461 ],
462 "vendors_implementations": 3
463 },
464 {
465 "id": "custom-property-sets",
466 "title": "Custom Property Sets",
467 "description": "A syntax for storing properties in named variables, referenceable in other style rules",
468 "specification": "https://tabatkins.github.io/specs/css-apply-rule/",
469 "stage": -1,
470 "browser_support": {},
471 "example": "img {\n --some-length-styles: {\n height: 32px;\n width: 32px;\n };\n\n @apply --some-length-styles;\n}",
472 "polyfills": [
473 {
474 "type": "PostCSS Plugin",
475 "link": "https://github.com/pascalduez/postcss-apply"
476 }
477 ],
478 "vendors_implementations": 0
479 },
480 {
481 "id": "custom-selectors",
482 "title": "Custom Selectors",
483 "description": "An at-rule for defining aliases that represent selectors",
484 "specification": "https://drafts.csswg.org/css-extensions/#custom-selectors",
485 "stage": 1,
486 "browser_support": {},
487 "example": "@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\narticle :--heading + p {}",
488 "polyfills": [
489 {
490 "type": "PostCSS Plugin",
491 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors"
492 }
493 ],
494 "vendors_implementations": 0
495 },
496 {
497 "id": "dir-pseudo-class",
498 "title": "`:dir` Directionality Pseudo-Class",
499 "description": "A pseudo-class for matching elements based on their directionality",
500 "specification": "https://www.w3.org/TR/selectors-4/#dir-pseudo",
501 "stage": 2,
502 "browser_support": {
503 "and_chr": "120",
504 "and_ff": "49",
505 "android": "120",
506 "chrome": "120",
507 "edge": "120",
508 "firefox": "49",
509 "ios_saf": "16.4",
510 "op_mob": "80",
511 "opera": "106",
512 "safari": "16.4"
513 },
514 "docs": {
515 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"
516 },
517 "example": "blockquote:dir(rtl) {\n margin-right: 10px;\n}\n\nblockquote:dir(ltr) {\n margin-left: 10px;\n}",
518 "interoperable_at": 1701907200,
519 "polyfills": [
520 {
521 "type": "PostCSS Plugin",
522 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class"
523 }
524 ],
525 "vendors_implementations": 3
526 },
527 {
528 "id": "display-two-values",
529 "title": "Two values syntax for `display`",
530 "description": "Syntax that allows definition of outer and inner displays types for an element",
531 "specification": "https://www.w3.org/TR/css-display-3/#the-display-properties",
532 "stage": 2,
533 "browser_support": {
534 "and_chr": "115",
535 "and_ff": "79",
536 "android": "115",
537 "chrome": "115",
538 "edge": "115",
539 "firefox": "70",
540 "ios_saf": "15",
541 "op_mob": "77",
542 "opera": "101",
543 "safari": "15",
544 "samsung": "23.0"
545 },
546 "docs": {
547 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display"
548 },
549 "example": ".element {\n display: inline flow-root;\n display: inline flex;\n display: block grid;\n}",
550 "interoperable_at": 1689897600,
551 "polyfills": [
552 {
553 "type": "PostCSS Plugin",
554 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values"
555 }
556 ],
557 "vendors_implementations": 3
558 },
559 {
560 "id": "double-position-gradients",
561 "title": "Double Position Gradients",
562 "description": "A syntax for using two positions in a gradient.",
563 "specification": "https://www.w3.org/TR/css-images-4/#color-stop-syntax",
564 "stage": 2,
565 "browser_support": {
566 "and_chr": "72",
567 "and_ff": "83",
568 "android": "72",
569 "chrome": "72",
570 "edge": "79",
571 "firefox": "83",
572 "ios_saf": "12.2",
573 "oculus": "6.0",
574 "op_mob": "51",
575 "opera": "60",
576 "safari": "12.1",
577 "samsung": "11.0"
578 },
579 "docs": {
580 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient"
581 },
582 "example": ".pie_chart {\n background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
583 "interoperable_at": 1605571200,
584 "polyfills": [
585 {
586 "type": "PostCSS Plugin",
587 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients"
588 }
589 ],
590 "vendors_implementations": 3
591 },
592 {
593 "id": "environment-variables",
594 "title": "Custom Environment Variables",
595 "description": "A syntax for using custom values accepted by CSS globally",
596 "specification": "https://drafts.csswg.org/css-env-1/",
597 "stage": 0,
598 "browser_support": {},
599 "docs": {
600 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/env"
601 },
602 "example": "@media (max-width: env(--brand-small)) {\n body {\n padding: env(--brand-spacing);\n }\n}",
603 "polyfills": [
604 {
605 "type": "PostCSS Plugin",
606 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function"
607 }
608 ],
609 "vendors_implementations": 0
610 },
611 {
612 "id": "exponential-functions",
613 "title": "`pow()`, `sqrt()`, `hypot()`, `log()`, `exp()` exponential functions",
614 "description": "Compute various exponential functions with their arguments",
615 "specification": "https://www.w3.org/TR/css-values-4/#exponent-funcs",
616 "stage": 2,
617 "browser_support": {
618 "and_chr": "120",
619 "and_ff": "118",
620 "android": "120",
621 "chrome": "120",
622 "edge": "120",
623 "firefox": "118",
624 "ios_saf": "15.4",
625 "op_mob": "80",
626 "opera": "106",
627 "safari": "15.4"
628 },
629 "docs": {
630 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/exp"
631 },
632 "example": "p {\n font-size: calc(pow(10, 12) * 1rem);\n font-size: calc(sqrt(100) * 1rem);\n font-size: calc(hypot(3, 4) * 1rem);\n font-size: calc(log(10) * 1rem);\n font-size: calc(exp(10) * 1rem);\n}",
633 "interoperable_at": 1701907200,
634 "polyfills": [
635 {
636 "type": "PostCSS Plugin",
637 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions"
638 }
639 ],
640 "vendors_implementations": 3
641 },
642 {
643 "id": "fangsong-font-family",
644 "title": "`fangsong` Font Family",
645 "description": "A generic font used for Fang Song (仿宋) typefaces in Chinese",
646 "specification": "https://www.w3.org/TR/css-fonts-4/#fangsong-def",
647 "stage": 2,
648 "browser_support": {},
649 "docs": {
650 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Syntax"
651 },
652 "example": "body {\n font-family: fangsong;\n}",
653 "polyfills": [
654 {
655 "type": "PostCSS Plugin",
656 "link": "https://github.com/JLHwung/postcss-font-family-fangsong"
657 }
658 ],
659 "vendors_implementations": 0
660 },
661 {
662 "id": "float-clear-logical-values",
663 "title": "Logical Values in float and clear",
664 "description": "Flow-relative (inline-start and inline-end) values for float and clear",
665 "specification": "https://www.w3.org/TR/css-logical-1/",
666 "stage": 2,
667 "browser_support": {
668 "and_chr": "118",
669 "and_ff": "55",
670 "android": "118",
671 "chrome": "118",
672 "edge": "118",
673 "firefox": "55",
674 "ios_saf": "15",
675 "op_mob": "79",
676 "opera": "104",
677 "safari": "15"
678 },
679 "docs": {
680 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/float"
681 },
682 "example": "span:first-child {\n float: inline-start;\n}",
683 "interoperable_at": 1697155200,
684 "polyfills": [
685 {
686 "type": "PostCSS Plugin",
687 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear"
688 }
689 ],
690 "vendors_implementations": 3
691 },
692 {
693 "id": "focus-visible-pseudo-class",
694 "title": "`:focus-visible` Focus-Indicated Pseudo-Class",
695 "description": "A pseudo-class for matching focused elements that indicate that focus to a user",
696 "specification": "https://www.w3.org/TR/selectors-4/#focus-visible-pseudo",
697 "stage": 2,
698 "browser_support": {
699 "and_chr": "86",
700 "and_ff": "85",
701 "android": "86",
702 "chrome": "86",
703 "edge": "86",
704 "firefox": "85",
705 "ios_saf": "15.4",
706 "oculus": "12.0",
707 "op_mob": "61",
708 "opera": "72",
709 "safari": "15.4",
710 "samsung": "14.0"
711 },
712 "docs": {
713 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"
714 },
715 "example": ":focus:not(:focus-visible) {\n outline: 0;\n}",
716 "interoperable_at": 1647216000,
717 "polyfills": [
718 {
719 "type": "JavaScript Library",
720 "link": "https://github.com/WICG/focus-visible"
721 },
722 {
723 "type": "PostCSS Plugin",
724 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible"
725 }
726 ],
727 "vendors_implementations": 3
728 },
729 {
730 "id": "focus-within-pseudo-class",
731 "title": "`:focus-within` Focus Container Pseudo-Class",
732 "description": "A pseudo-class for matching elements that are either focused or that have focused descendants",
733 "specification": "https://www.w3.org/TR/selectors-4/#focus-within-pseudo",
734 "stage": 2,
735 "browser_support": {
736 "and_chr": "60",
737 "and_ff": "52",
738 "android": "60",
739 "chrome": "60",
740 "edge": "79",
741 "firefox": "52",
742 "ios_saf": "10.3",
743 "oculus": "5.0",
744 "op_mob": "44",
745 "opera": "47",
746 "safari": "10.1",
747 "samsung": "8.0"
748 },
749 "docs": {
750 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within"
751 },
752 "example": "form:focus-within {\n background: rgb(0 128 0);\n}",
753 "interoperable_at": 1579046400,
754 "polyfills": [
755 {
756 "type": "JavaScript Library",
757 "link": "https://github.com/jsxtools/focus-within"
758 },
759 {
760 "type": "PostCSS Plugin",
761 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within"
762 }
763 ],
764 "vendors_implementations": 3
765 },
766 {
767 "id": "font-format-keywords",
768 "title": "Font `format()` Keywords",
769 "description": "A syntax for specifying font format as a keyword in `@font-face` rule’s `format()` function",
770 "specification": "https://www.w3.org/TR/css-fonts-4/#font-format-values",
771 "stage": 2,
772 "browser_support": {
773 "and_chr": "108",
774 "android": "108",
775 "chrome": "108",
776 "edge": "108",
777 "ios_saf": "5",
778 "op_mob": "73",
779 "opera": "94",
780 "safari": "4",
781 "samsung": "21.0"
782 },
783 "docs": {
784 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"
785 },
786 "example": "@font-face {\n src: url(file.woff2) format(woff2);\n}",
787 "polyfills": [
788 {
789 "type": "PostCSS Plugin",
790 "link": "https://github.com/valtlai/postcss-font-format-keywords"
791 }
792 ],
793 "vendors_implementations": 2
794 },
795 {
796 "id": "font-variant-property",
797 "title": "`font-variant` Property",
798 "description": "A property for defining the usage of alternate glyphs in a font",
799 "specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant",
800 "stage": 4,
801 "browser_support": {
802 "and_chr": "117",
803 "and_ff": "34",
804 "android": "117",
805 "chrome": "117",
806 "edge": "117",
807 "firefox": "34",
808 "ios_saf": "9.3",
809 "op_mob": "78",
810 "opera": "103",
811 "safari": "9.1"
812 },
813 "docs": {
814 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant"
815 },
816 "example": "h2 {\n font-variant: small-caps;\n}",
817 "interoperable_at": 1694736000,
818 "polyfills": [
819 {
820 "type": "PostCSS Plugin",
821 "link": "https://github.com/postcss/postcss-font-variant"
822 }
823 ],
824 "vendors_implementations": 3
825 },
826 {
827 "id": "gamut-mapping",
828 "title": "Gamut mapping for CSS color functions",
829 "description": "Gamut map css colors to fit display specific gamuts.",
830 "specification": "https://www.w3.org/TR/css-color-4/#gamut-mapping",
831 "stage": 2,
832 "browser_support": {},
833 "example": "@media (color-gamut: rec2020) {\n\tp {\n\t\tcolor: oklch(40% 0.234 0.39 / 0.5);\n\t}\n}",
834 "polyfills": [
835 {
836 "type": "PostCSS Plugin",
837 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping"
838 }
839 ],
840 "vendors_implementations": 0
841 },
842 {
843 "id": "gap-properties",
844 "title": "Gap Properties",
845 "description": "Properties for defining gutters within a layout",
846 "specification": "https://www.w3.org/TR/css-grid-1/#gutters",
847 "stage": 3,
848 "browser_support": {
849 "and_chr": "66",
850 "and_ff": "61",
851 "android": "66",
852 "chrome": "66",
853 "edge": "16",
854 "firefox": "61",
855 "ios_saf": "12",
856 "oculus": "5.0",
857 "op_mob": "47",
858 "opera": "53",
859 "safari": "12",
860 "samsung": "9.0"
861 },
862 "docs": {
863 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gap"
864 },
865 "example": ".grid-1 {\n gap: 20px;\n}\n\n.grid-2 {\n column-gap: 40px;\n row-gap: 20px;\n}",
866 "interoperable_at": 1537142400,
867 "polyfills": [
868 {
869 "type": "PostCSS Plugin",
870 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties"
871 }
872 ],
873 "vendors_implementations": 3
874 },
875 {
876 "id": "gradients-interpolation-method",
877 "title": "Gradients Interpolation Method",
878 "description": "Define the interpolation method for gradients",
879 "specification": "https://www.w3.org/TR/css-images-4/#color-interpolation",
880 "stage": 2,
881 "browser_support": {
882 "and_chr": "111",
883 "android": "111",
884 "chrome": "111",
885 "edge": "111",
886 "ios_saf": "16.2",
887 "op_mob": "75",
888 "opera": "97",
889 "safari": "16.2",
890 "samsung": "22.0"
891 },
892 "docs": {
893 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#syntax"
894 },
895 "example": ".pie_chart {\n background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
896 "polyfills": [
897 {
898 "type": "PostCSS Plugin",
899 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method"
900 }
901 ],
902 "vendors_implementations": 2
903 },
904 {
905 "id": "gray-function",
906 "title": "`gray()` Function",
907 "description": "A function for specifying fully desaturated colors",
908 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-gray",
909 "stage": -1,
910 "browser_support": {},
911 "example": "p {\n color: gray(50);\n}",
912 "polyfills": [
913 {
914 "type": "PostCSS Plugin",
915 "link": "https://github.com/postcss/postcss-color-gray"
916 }
917 ],
918 "vendors_implementations": 0
919 },
920 {
921 "id": "grid-layout",
922 "title": "Grid Layout",
923 "description": "A syntax for using a grid concept to lay out content",
924 "specification": "https://www.w3.org/TR/css-grid-1/",
925 "stage": 3,
926 "browser_support": {
927 "and_chr": "57",
928 "and_ff": "52",
929 "android": "57",
930 "chrome": "57",
931 "edge": "16",
932 "firefox": "52",
933 "ios_saf": "10.3",
934 "oculus": "5.0",
935 "op_mob": "43",
936 "opera": "44",
937 "safari": "10.1",
938 "samsung": "6.0"
939 },
940 "docs": {
941 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid"
942 },
943 "example": "section {\n display: grid;\n grid-template-columns: 100px 100px 100px;\n grid-gap: 10px;\n}",
944 "interoperable_at": 1508198400,
945 "polyfills": [
946 {
947 "type": "PostCSS Plugin",
948 "link": "https://github.com/postcss/autoprefixer"
949 }
950 ],
951 "vendors_implementations": 3
952 },
953 {
954 "id": "has-pseudo-class",
955 "title": "`:has()` Relational Pseudo-Class",
956 "description": "A pseudo-class for matching ancestor and sibling elements",
957 "specification": "https://www.w3.org/TR/selectors-4/#has-pseudo",
958 "stage": 2,
959 "browser_support": {
960 "and_chr": "105",
961 "and_ff": "121",
962 "android": "105",
963 "chrome": "105",
964 "edge": "105",
965 "firefox": "121",
966 "ios_saf": "15.4",
967 "op_mob": "72",
968 "opera": "91",
969 "safari": "15.4",
970 "samsung": "20.0"
971 },
972 "docs": {
973 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
974 },
975 "example": "a:has(> img) {\n display: block;\n}",
976 "interoperable_at": 1702944000,
977 "polyfills": [
978 {
979 "type": "JavaScript Library",
980 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo"
981 },
982 {
983 "type": "PostCSS Plugin",
984 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo"
985 }
986 ],
987 "vendors_implementations": 3
988 },
989 {
990 "id": "hexadecimal-alpha-notation",
991 "title": "Hexadecimal Alpha Notation",
992 "description": "A 4 & 8 character hex color notation for specifying the opacity level",
993 "specification": "https://www.w3.org/TR/css-color-4/#hex-notation",
994 "stage": 2,
995 "browser_support": {
996 "and_chr": "62",
997 "and_ff": "49",
998 "android": "62",
999 "chrome": "62",
1000 "edge": "79",
1001 "firefox": "49",
1002 "ios_saf": "9.3",
1003 "oculus": "5.0",
1004 "op_mob": "47",
1005 "opera": "49",
1006 "safari": "10",
1007 "samsung": "8.0"
1008 },
1009 "docs": {
1010 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Syntax_2"
1011 },
1012 "example": "section {\n background-color: #f3f3f3f3;\n color: #0003;\n}",
1013 "interoperable_at": 1579046400,
1014 "polyfills": [
1015 {
1016 "type": "PostCSS Plugin",
1017 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha"
1018 }
1019 ],
1020 "vendors_implementations": 3
1021 },
1022 {
1023 "id": "hwb-function",
1024 "title": "`hwb()` Function",
1025 "description": "A function for specifying colors by hue and then a degree of whiteness and blackness to mix into it",
1026 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-hwb",
1027 "stage": 2,
1028 "browser_support": {
1029 "and_chr": "101",
1030 "and_ff": "96",
1031 "android": "101",
1032 "chrome": "101",
1033 "edge": "101",
1034 "firefox": "96",
1035 "ios_saf": "15",
1036 "oculus": "22.0",
1037 "op_mob": "70",
1038 "opera": "87",
1039 "safari": "15",
1040 "samsung": "19.0"
1041 },
1042 "docs": {
1043 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb"
1044 },
1045 "example": "p {\n color: hwb(120 44% 50%);\n}",
1046 "interoperable_at": 1651190400,
1047 "polyfills": [
1048 {
1049 "type": "PostCSS Plugin",
1050 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function"
1051 }
1052 ],
1053 "vendors_implementations": 3
1054 },
1055 {
1056 "id": "ic-unit",
1057 "title": "`ic` length unit",
1058 "description": "Equal to the used advance measure of the \"水\" (CJK water ideograph, U+6C34) glyph found in the font used to render it",
1059 "specification": "https://www.w3.org/TR/css-values-4/#ic",
1060 "stage": 2,
1061 "browser_support": {
1062 "and_chr": "106",
1063 "and_ff": "97",
1064 "android": "106",
1065 "chrome": "106",
1066 "edge": "106",
1067 "firefox": "97",
1068 "ios_saf": "15.4",
1069 "op_mob": "72",
1070 "opera": "92",
1071 "safari": "15.4",
1072 "samsung": "20.0"
1073 },
1074 "docs": {
1075 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#dimensions"
1076 },
1077 "example": "p {\n text-indent: 2ic;\n}",
1078 "interoperable_at": 1664755200,
1079 "polyfills": [
1080 {
1081 "type": "PostCSS Plugin",
1082 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-ic-unit"
1083 }
1084 ],
1085 "vendors_implementations": 3
1086 },
1087 {
1088 "id": "image-set-function",
1089 "title": "`image-set()` Function",
1090 "description": "A function for specifying image sources based on the user’s resolution",
1091 "specification": "https://www.w3.org/TR/css-images-4/#image-set-notation",
1092 "stage": 2,
1093 "browser_support": {
1094 "and_chr": "25",
1095 "and_ff": "88",
1096 "android": "4.4",
1097 "chrome": "21",
1098 "edge": "79",
1099 "firefox": "88",
1100 "ios_saf": "14",
1101 "oculus": "5.0",
1102 "op_mob": "14",
1103 "opera": "15",
1104 "safari": "14",
1105 "samsung": "1.5"
1106 },
1107 "docs": {
1108 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set"
1109 },
1110 "example": "p {\n background-image: image-set(\n \"foo.png\" 1x,\n \"foo-2x.png\" 2x,\n \"foo-print.png\" 600dpi\n );\n}",
1111 "interoperable_at": 1618790400,
1112 "polyfills": [
1113 {
1114 "type": "PostCSS Plugin",
1115 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function"
1116 }
1117 ],
1118 "vendors_implementations": 3
1119 },
1120 {
1121 "id": "in-out-of-range-pseudo-class",
1122 "title": "`:in-range` and `:out-of-range` Pseudo-Classes",
1123 "description": "A pseudo-class for matching elements that have range limitations",
1124 "specification": "https://www.w3.org/TR/selectors-4/#range-pseudos",
1125 "stage": 2,
1126 "browser_support": {
1127 "and_chr": "18",
1128 "and_ff": "16",
1129 "android": "2.2",
1130 "chrome": "10",
1131 "edge": "13",
1132 "firefox": "29",
1133 "ios_saf": "5",
1134 "oculus": "5.0",
1135 "op_mob": "11",
1136 "opera": "11",
1137 "safari": "5.1",
1138 "samsung": "1.0"
1139 },
1140 "docs": {
1141 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range"
1142 },
1143 "example": "input:in-range {\n background-color: rgb(0 255 0 / 0.25);\n}\ninput:out-of-range {\n background-color: rgb(255 0 0 / 0.25);\n border: 2px solid red;\n}",
1144 "interoperable_at": 1447286400,
1145 "vendors_implementations": 3
1146 },
1147 {
1148 "id": "is-pseudo-class",
1149 "title": "`:is()` Matches-Any Pseudo-Class",
1150 "description": "A pseudo-class for matching elements in a selector list",
1151 "specification": "https://www.w3.org/TR/selectors-4/#matches-pseudo",
1152 "stage": 2,
1153 "browser_support": {
1154 "and_chr": "88",
1155 "and_ff": "82",
1156 "android": "88",
1157 "chrome": "88",
1158 "edge": "88",
1159 "firefox": "82",
1160 "ios_saf": "14",
1161 "oculus": "14.0",
1162 "op_mob": "63",
1163 "opera": "74",
1164 "safari": "14",
1165 "samsung": "15.0"
1166 },
1167 "docs": {
1168 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:is"
1169 },
1170 "example": "p:is(:first-child, .special) {\n margin-top: 1em;\n}",
1171 "interoperable_at": 1611187200,
1172 "polyfills": [
1173 {
1174 "type": "PostCSS Plugin",
1175 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class"
1176 }
1177 ],
1178 "vendors_implementations": 3
1179 },
1180 {
1181 "id": "lab-function",
1182 "title": "`lab()` Function",
1183 "description": "A function for specifying colors expressed in the CIE Lab color space",
1184 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lab",
1185 "stage": 2,
1186 "browser_support": {
1187 "and_chr": "116",
1188 "and_ff": "113",
1189 "android": "116",
1190 "chrome": "116",
1191 "edge": "116",
1192 "firefox": "113",
1193 "ios_saf": "16.2",
1194 "op_mob": "78",
1195 "opera": "102",
1196 "safari": "16.2"
1197 },
1198 "docs": {
1199 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab"
1200 },
1201 "example": "body {\n color: lab(80% 50 20);\n}",
1202 "interoperable_at": 1692576000,
1203 "polyfills": [
1204 {
1205 "type": "PostCSS Plugin",
1206 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function"
1207 }
1208 ],
1209 "vendors_implementations": 3
1210 },
1211 {
1212 "id": "lch-function",
1213 "title": "`lch()` Function",
1214 "description": "A function for specifying colors expressed in the CIE Lab color space with chroma and hue",
1215 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lch",
1216 "stage": 2,
1217 "browser_support": {
1218 "and_chr": "116",
1219 "and_ff": "113",
1220 "android": "116",
1221 "chrome": "116",
1222 "edge": "116",
1223 "firefox": "113",
1224 "ios_saf": "16.2",
1225 "op_mob": "78",
1226 "opera": "102",
1227 "safari": "16.2"
1228 },
1229 "docs": {
1230 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch"
1231 },
1232 "example": "body {\n color: lch(53% 105 40);\n}",
1233 "interoperable_at": 1692576000,
1234 "polyfills": [
1235 {
1236 "type": "PostCSS Plugin",
1237 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function"
1238 }
1239 ],
1240 "vendors_implementations": 3
1241 },
1242 {
1243 "id": "light-dark-function",
1244 "title": "`light-dark()` Function",
1245 "description": "React to the current used `color-scheme` value",
1246 "specification": "https://drafts.csswg.org/css-color-5/#light-dark",
1247 "stage": 2,
1248 "browser_support": {
1249 "and_chr": "123",
1250 "and_ff": "120",
1251 "android": "123",
1252 "chrome": "123",
1253 "firefox": "120"
1254 },
1255 "docs": {
1256 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark"
1257 },
1258 "example": "body {\n color: light-dark(cyan, magenta);\n}",
1259 "polyfills": [
1260 {
1261 "type": "PostCSS Plugin",
1262 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function"
1263 }
1264 ],
1265 "vendors_implementations": 2
1266 },
1267 {
1268 "id": "logical-overflow",
1269 "title": "Logical Overflow",
1270 "description": "Flow-relative `overflow` properties",
1271 "specification": "https://www.w3.org/TR/css-overflow-3/#overflow-control",
1272 "stage": 2,
1273 "browser_support": {
1274 "and_ff": "79",
1275 "firefox": "69"
1276 },
1277 "docs": {
1278 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block"
1279 },
1280 "example": "div {\n overflow-block: scroll;\n}",
1281 "polyfills": [
1282 {
1283 "type": "PostCSS Plugin",
1284 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overflow"
1285 }
1286 ],
1287 "vendors_implementations": 1
1288 },
1289 {
1290 "id": "logical-overscroll-behavior",
1291 "title": "Logical Overscroll Behavior",
1292 "description": "Flow-relative `overscroll-behavior` properties",
1293 "specification": "https://www.w3.org/TR/css-overscroll-1/#overscroll-behavior-longhands-logical",
1294 "stage": 2,
1295 "browser_support": {
1296 "and_chr": "77",
1297 "and_ff": "79",
1298 "android": "77",
1299 "chrome": "77",
1300 "edge": "79",
1301 "firefox": "73",
1302 "ios_saf": "16",
1303 "oculus": "7.0",
1304 "op_mob": "55",
1305 "opera": "64",
1306 "safari": "16",
1307 "samsung": "12.0"
1308 },
1309 "docs": {
1310 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block"
1311 },
1312 "example": "div {\n overscroll-behavior-block: scroll;\n}",
1313 "interoperable_at": 1662940800,
1314 "polyfills": [
1315 {
1316 "type": "PostCSS Plugin",
1317 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overscroll-behavior"
1318 }
1319 ],
1320 "vendors_implementations": 3
1321 },
1322 {
1323 "id": "logical-properties-and-values",
1324 "title": "Logical Properties and Values",
1325 "description": "Flow-relative (left-to-right or right-to-left) properties and values",
1326 "specification": "https://www.w3.org/TR/css-logical-1/",
1327 "stage": 2,
1328 "browser_support": {
1329 "and_chr": "89",
1330 "and_ff": "66",
1331 "android": "89",
1332 "chrome": "89",
1333 "edge": "89",
1334 "firefox": "66",
1335 "ios_saf": "15",
1336 "oculus": "15.0",
1337 "op_mob": "63",
1338 "opera": "75",
1339 "safari": "15",
1340 "samsung": "15.0"
1341 },
1342 "docs": {
1343 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values"
1344 },
1345 "example": "span:first-child {\n margin-inline-start: 10px;\n}",
1346 "interoperable_at": 1632096000,
1347 "polyfills": [
1348 {
1349 "type": "PostCSS Plugin",
1350 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical"
1351 }
1352 ],
1353 "vendors_implementations": 3
1354 },
1355 {
1356 "id": "logical-resize",
1357 "title": "Logical values in the `resize` property",
1358 "description": "Flow-relative (block or inline) values in resize",
1359 "specification": "https://www.w3.org/TR/css-logical-1/",
1360 "stage": 2,
1361 "browser_support": {
1362 "and_chr": "118",
1363 "and_ff": "63",
1364 "android": "118",
1365 "chrome": "118",
1366 "edge": "118",
1367 "firefox": "63",
1368 "ios_saf": "16",
1369 "op_mob": "79",
1370 "opera": "104",
1371 "safari": "16"
1372 },
1373 "docs": {
1374 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/resize"
1375 },
1376 "example": "area {\n resize: inline;\n}",
1377 "interoperable_at": 1697155200,
1378 "polyfills": [
1379 {
1380 "type": "PostCSS Plugin",
1381 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize"
1382 }
1383 ],
1384 "vendors_implementations": 3
1385 },
1386 {
1387 "id": "logical-viewport-units",
1388 "title": "Logical Viewport Units",
1389 "description": "Flow-relative (horizontal or vertical) Viewport Units",
1390 "specification": "https://www.w3.org/TR/css-values-4/#viewport-relative-units",
1391 "stage": 2,
1392 "browser_support": {
1393 "and_chr": "108",
1394 "and_ff": "101",
1395 "android": "108",
1396 "chrome": "108",
1397 "edge": "108",
1398 "firefox": "101",
1399 "ios_saf": "15.4",
1400 "op_mob": "73",
1401 "opera": "94",
1402 "safari": "15.4",
1403 "samsung": "21.0"
1404 },
1405 "docs": {
1406 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/length#vb"
1407 },
1408 "example": "span:first-child {\n width: 5vi; height: 10vb; \n}",
1409 "interoperable_at": 1670284800,
1410 "polyfills": [
1411 {
1412 "type": "PostCSS Plugin",
1413 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units"
1414 }
1415 ],
1416 "vendors_implementations": 3
1417 },
1418 {
1419 "id": "matches-pseudo-class",
1420 "title": "`:matches()` Matches-Any Pseudo-Class",
1421 "description": "A pseudo-class for matching elements in a selector list",
1422 "specification": "https://www.w3.org/TR/selectors-4/#selectordef-matches",
1423 "stage": -1,
1424 "browser_support": {
1425 "and_chr": "88",
1426 "and_ff": "82",
1427 "android": "88",
1428 "chrome": "88",
1429 "edge": "88",
1430 "firefox": "82",
1431 "ios_saf": "14",
1432 "oculus": "14.0",
1433 "op_mob": "63",
1434 "opera": "74",
1435 "safari": "14",
1436 "samsung": "15.0"
1437 },
1438 "docs": {
1439 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:is"
1440 },
1441 "example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}",
1442 "interoperable_at": 1611187200,
1443 "polyfills": [
1444 {
1445 "type": "PostCSS Plugin",
1446 "link": "https://github.com/postcss/postcss-selector-matches"
1447 }
1448 ],
1449 "vendors_implementations": 3
1450 },
1451 {
1452 "id": "media-queries-aspect-ratio-number-values",
1453 "title": "Aspect-Ratio number values",
1454 "description": "Support `<ratio>` values with `<number>` components in `@media`",
1455 "specification": "https://www.w3.org/TR/css-values-4/#ratio-value",
1456 "stage": 2,
1457 "browser_support": {
1458 "and_chr": "110",
1459 "and_ff": "78",
1460 "android": "110",
1461 "chrome": "110",
1462 "edge": "110",
1463 "firefox": "78",
1464 "ios_saf": "16.4",
1465 "safari": "16.4"
1466 },
1467 "docs": {
1468 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/ratio"
1469 },
1470 "example": "@media (aspect-ratio: 1.77) {\n html {\n background-color: cyan;\n }\n}",
1471 "interoperable_at": 1679875200,
1472 "polyfills": [
1473 {
1474 "type": "PostCSS Plugin",
1475 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values"
1476 }
1477 ],
1478 "vendors_implementations": 3
1479 },
1480 {
1481 "id": "media-query-ranges",
1482 "title": "Media Query Ranges",
1483 "description": "A syntax for defining media query ranges using ordinary comparison operators",
1484 "specification": "https://www.w3.org/TR/mediaqueries-4/#range-context",
1485 "stage": 3,
1486 "browser_support": {
1487 "and_chr": "104",
1488 "and_ff": "102",
1489 "android": "104",
1490 "chrome": "104",
1491 "edge": "104",
1492 "firefox": "102",
1493 "ios_saf": "16.4",
1494 "oculus": "23.0",
1495 "op_mob": "71",
1496 "opera": "90",
1497 "safari": "16.4",
1498 "samsung": "20.0"
1499 },
1500 "docs": {
1501 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#Syntax_improvements_in_Level_4"
1502 },
1503 "example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}",
1504 "interoperable_at": 1679875200,
1505 "polyfills": [
1506 {
1507 "type": "PostCSS Plugin",
1508 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax"
1509 }
1510 ],
1511 "vendors_implementations": 3
1512 },
1513 {
1514 "id": "nested-calc",
1515 "title": "Nested `calc()`",
1516 "description": "Nest calc functions with the calc function name",
1517 "specification": "https://www.w3.org/TR/css-values-4/#calc-func",
1518 "stage": 2,
1519 "browser_support": {
1520 "and_chr": "51",
1521 "and_ff": "48",
1522 "android": "51",
1523 "chrome": "51",
1524 "edge": "16",
1525 "firefox": "48",
1526 "ios_saf": "11",
1527 "oculus": "5.0",
1528 "op_mob": "41",
1529 "opera": "38",
1530 "safari": "11",
1531 "samsung": "5.0"
1532 },
1533 "docs": {
1534 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/calc"
1535 },
1536 "example": "p {\n padding: calc(1px + calc(4 / 3));\n}",
1537 "interoperable_at": 1508198400,
1538 "polyfills": [
1539 {
1540 "type": "PostCSS Plugin",
1541 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nested-calc"
1542 }
1543 ],
1544 "vendors_implementations": 3
1545 },
1546 {
1547 "id": "nesting-rules",
1548 "title": "Nesting Rules",
1549 "description": "A syntax for nesting relative rules within rules",
1550 "specification": "https://www.w3.org/TR/css-nesting-1/",
1551 "stage": 2,
1552 "browser_support": {
1553 "and_chr": "120",
1554 "and_ff": "117",
1555 "android": "120",
1556 "chrome": "120",
1557 "edge": "120",
1558 "firefox": "117",
1559 "ios_saf": "17.2",
1560 "op_mob": "80",
1561 "opera": "106",
1562 "safari": "17.2"
1563 },
1564 "docs": {
1565 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector"
1566 },
1567 "example": "article {\n & p {\n color: #333;\n }\n}",
1568 "interoperable_at": 1702252800,
1569 "polyfills": [
1570 {
1571 "type": "PostCSS Plugin",
1572 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting"
1573 }
1574 ],
1575 "vendors_implementations": 3
1576 },
1577 {
1578 "id": "not-pseudo-class",
1579 "title": "`:not()` Negation List Pseudo-Class",
1580 "description": "A pseudo-class for ignoring elements in a selector list",
1581 "specification": "https://www.w3.org/TR/selectors-4/#negation-pseudo",
1582 "stage": 2,
1583 "browser_support": {
1584 "and_chr": "88",
1585 "and_ff": "84",
1586 "android": "88",
1587 "chrome": "88",
1588 "edge": "88",
1589 "firefox": "84",
1590 "ios_saf": "9",
1591 "oculus": "14.0",
1592 "opera": "74",
1593 "safari": "9",
1594 "samsung": "15.0"
1595 },
1596 "docs": {
1597 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
1598 },
1599 "example": "p:not(:first-child, .special) {\n margin-top: 1em;\n}",
1600 "interoperable_at": 1611187200,
1601 "polyfills": [
1602 {
1603 "type": "PostCSS Plugin",
1604 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-selector-not"
1605 }
1606 ],
1607 "vendors_implementations": 3
1608 },
1609 {
1610 "id": "oklab-function",
1611 "title": "`oklab` and `oklch` color functions",
1612 "description": "Functions that allow colors to be expressed in OKLab and OKLCH.",
1613 "specification": "https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch",
1614 "stage": 2,
1615 "browser_support": {
1616 "and_chr": "116",
1617 "and_ff": "113",
1618 "android": "116",
1619 "chrome": "116",
1620 "edge": "116",
1621 "firefox": "113",
1622 "ios_saf": "16.2",
1623 "op_mob": "78",
1624 "opera": "102",
1625 "safari": "16.2"
1626 },
1627 "docs": {
1628 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab"
1629 },
1630 "example": "p {\n color: oklab(72.322% -0.0465 -0.1150);\n color: oklch(72.322% 0.12403 247.996);\n}",
1631 "interoperable_at": 1692576000,
1632 "polyfills": [
1633 {
1634 "type": "PostCSS Plugin",
1635 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function"
1636 }
1637 ],
1638 "vendors_implementations": 3
1639 },
1640 {
1641 "id": "opacity-percentage",
1642 "title": "Support for percentages for `opacity`",
1643 "description": "Syntactic sugar to use percentages instead of a float between 0 and 1.",
1644 "specification": "https://www.w3.org/TR/css-color-4/#transparency",
1645 "stage": 2,
1646 "browser_support": {
1647 "and_chr": "78",
1648 "and_ff": "79",
1649 "android": "78",
1650 "chrome": "78",
1651 "edge": "79",
1652 "firefox": "70",
1653 "ios_saf": "13.4",
1654 "oculus": "8.0",
1655 "op_mob": "56",
1656 "opera": "65",
1657 "safari": "13.1",
1658 "samsung": "12.0"
1659 },
1660 "docs": {
1661 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/opacity"
1662 },
1663 "example": "img {\n opacity: 90%;\n}",
1664 "interoperable_at": 1585008000,
1665 "polyfills": [
1666 {
1667 "type": "PostCSS Plugin",
1668 "link": "https://github.com/mrcgrtz/postcss-opacity-percentage"
1669 }
1670 ],
1671 "vendors_implementations": 3
1672 },
1673 {
1674 "id": "overflow-property",
1675 "title": "`overflow` Shorthand Property",
1676 "description": "A property for defining `overflow-x` and `overflow-y`",
1677 "specification": "https://www.w3.org/TR/css-overflow-3/#propdef-overflow",
1678 "stage": 2,
1679 "browser_support": {
1680 "and_chr": "68",
1681 "and_ff": "61",
1682 "android": "68",
1683 "chrome": "68",
1684 "edge": "79",
1685 "firefox": "61",
1686 "ios_saf": "13.4",
1687 "oculus": "6.0",
1688 "op_mob": "48",
1689 "opera": "55",
1690 "safari": "13.1",
1691 "samsung": "10.0"
1692 },
1693 "docs": {
1694 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow"
1695 },
1696 "example": "html {\n overflow: hidden auto;\n}",
1697 "interoperable_at": 1585008000,
1698 "polyfills": [
1699 {
1700 "type": "PostCSS Plugin",
1701 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-overflow-shorthand"
1702 }
1703 ],
1704 "vendors_implementations": 3
1705 },
1706 {
1707 "id": "overflow-wrap-property",
1708 "title": "`overflow-wrap` Property",
1709 "description": "A property for defining whether to insert line breaks within words to prevent overflowing",
1710 "specification": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property",
1711 "stage": 2,
1712 "browser_support": {
1713 "and_chr": "25",
1714 "and_ff": "49",
1715 "android": "4.4",
1716 "chrome": "23",
1717 "edge": "18",
1718 "firefox": "49",
1719 "ios_saf": "7",
1720 "oculus": "5.0",
1721 "op_mob": "12.1",
1722 "opera": "12.1",
1723 "safari": "7",
1724 "samsung": "1.5"
1725 },
1726 "docs": {
1727 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap"
1728 },
1729 "example": "p {\n overflow-wrap: break-word;\n}",
1730 "interoperable_at": 1538438400,
1731 "polyfills": [
1732 {
1733 "type": "PostCSS Plugin",
1734 "link": "https://github.com/mattdimu/postcss-replace-overflow-wrap"
1735 }
1736 ],
1737 "vendors_implementations": 3
1738 },
1739 {
1740 "id": "overscroll-behavior-property",
1741 "title": "`overscroll-behavior` Property",
1742 "description": "Properties for controlling when the scroll position of a scroll container reaches the edge of a scrollport",
1743 "specification": "https://www.w3.org/TR/css-overscroll-1/",
1744 "stage": 2,
1745 "browser_support": {
1746 "and_chr": "63",
1747 "and_ff": "59",
1748 "android": "63",
1749 "chrome": "63",
1750 "firefox": "59",
1751 "ios_saf": "16",
1752 "oculus": "5.0",
1753 "op_mob": "46",
1754 "opera": "50",
1755 "safari": "16",
1756 "samsung": "8.0"
1757 },
1758 "docs": {
1759 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior"
1760 },
1761 "example": ".messages {\n height: 220px;\n overflow: auto;\n overscroll-behavior-y: contain;\n}\n\nbody {\n margin: 0;\n overscroll-behavior: none;\n}",
1762 "interoperable_at": 1662940800,
1763 "vendors_implementations": 3
1764 },
1765 {
1766 "id": "place-properties",
1767 "title": "Place Properties",
1768 "description": "Properties for defining alignment within a layout",
1769 "specification": "https://www.w3.org/TR/css-align-3/#place-items-property",
1770 "stage": 2,
1771 "browser_support": {
1772 "and_chr": "59",
1773 "and_ff": "53",
1774 "android": "59",
1775 "chrome": "59",
1776 "edge": "79",
1777 "firefox": "53",
1778 "ios_saf": "11",
1779 "oculus": "5.0",
1780 "op_mob": "43",
1781 "opera": "46",
1782 "safari": "11",
1783 "samsung": "7.0"
1784 },
1785 "docs": {
1786 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/place-content"
1787 },
1788 "example": ".example {\n place-content: flex-end;\n place-items: center / space-between;\n place-self: flex-start / center;\n}",
1789 "interoperable_at": 1579046400,
1790 "polyfills": [
1791 {
1792 "type": "PostCSS Plugin",
1793 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place"
1794 }
1795 ],
1796 "vendors_implementations": 3
1797 },
1798 {
1799 "id": "prefers-color-scheme-query",
1800 "title": "`prefers-color-scheme` Media Query",
1801 "description": "A media query to detect if the user has requested the system use a light or dark color theme",
1802 "specification": "https://www.w3.org/TR/mediaqueries-5/#prefers-color-scheme",
1803 "stage": 2,
1804 "browser_support": {
1805 "and_chr": "76",
1806 "and_ff": "67",
1807 "android": "76",
1808 "chrome": "76",
1809 "edge": "79",
1810 "firefox": "67",
1811 "ios_saf": "13",
1812 "oculus": "7.0",
1813 "op_mob": "54",
1814 "opera": "62",
1815 "safari": "12.1",
1816 "samsung": "14.2"
1817 },
1818 "docs": {
1819 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"
1820 },
1821 "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}",
1822 "interoperable_at": 1579046400,
1823 "polyfills": [
1824 {
1825 "type": "JavaScript Library",
1826 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme"
1827 },
1828 {
1829 "type": "PostCSS Plugin",
1830 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme"
1831 }
1832 ],
1833 "vendors_implementations": 3
1834 },
1835 {
1836 "id": "prefers-reduced-motion-query",
1837 "title": "`prefers-reduced-motion` Media Query",
1838 "description": "A media query to detect if the user has requested less animation and general motion on the page",
1839 "specification": "https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion",
1840 "stage": 2,
1841 "browser_support": {
1842 "and_chr": "74",
1843 "and_ff": "64",
1844 "android": "74",
1845 "chrome": "74",
1846 "edge": "79",
1847 "firefox": "63",
1848 "ios_saf": "10.3",
1849 "oculus": "6.0",
1850 "op_mob": "53",
1851 "opera": "62",
1852 "safari": "10.1",
1853 "samsung": "11.0"
1854 },
1855 "docs": {
1856 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"
1857 },
1858 "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}",
1859 "interoperable_at": 1579046400,
1860 "vendors_implementations": 3
1861 },
1862 {
1863 "id": "read-only-write-pseudo-class",
1864 "title": "`:read-only` and `:read-write` selectors",
1865 "description": "Pseudo-classes to match elements which are considered user-alterable",
1866 "specification": "https://www.w3.org/TR/selectors-4/#rw-pseudos",
1867 "stage": 2,
1868 "browser_support": {
1869 "and_chr": "18",
1870 "and_ff": "79",
1871 "android": "37",
1872 "chrome": "1",
1873 "edge": "13",
1874 "firefox": "78",
1875 "ios_saf": "3.2",
1876 "oculus": "5.0",
1877 "op_mob": "10.1",
1878 "opera": "9",
1879 "safari": "4",
1880 "samsung": "1.0"
1881 },
1882 "docs": {
1883 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only"
1884 },
1885 "example": "input:read-only {\n background-color: #ccc;\n}",
1886 "interoperable_at": 1593475200,
1887 "vendors_implementations": 3
1888 },
1889 {
1890 "id": "rebeccapurple-color",
1891 "title": "`rebeccapurple` Color",
1892 "description": "A particularly lovely shade of purple in memory of Rebecca Alison Meyer",
1893 "specification": "https://www.w3.org/TR/css-color-4/#valdef-color-rebeccapurple",
1894 "stage": 2,
1895 "browser_support": {
1896 "and_chr": "38",
1897 "and_ff": "33",
1898 "android": "38",
1899 "chrome": "38",
1900 "edge": "12",
1901 "firefox": "33",
1902 "ie": "11",
1903 "ios_saf": "8",
1904 "oculus": "5.0",
1905 "op_mob": "25",
1906 "opera": "25",
1907 "safari": "9",
1908 "samsung": "3.0"
1909 },
1910 "docs": {
1911 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"
1912 },
1913 "example": "html {\n color: rebeccapurple;\n}",
1914 "interoperable_at": 1443571200,
1915 "polyfills": [
1916 {
1917 "type": "PostCSS Plugin",
1918 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple"
1919 }
1920 ],
1921 "vendors_implementations": 3
1922 },
1923 {
1924 "id": "relative-color-syntax",
1925 "title": "Relative Colors",
1926 "description": "Modify existing colors using color functions",
1927 "specification": "https://www.w3.org/TR/css-color-5/#relative-colors",
1928 "stage": 2,
1929 "browser_support": {},
1930 "docs": {},
1931 "example": "p {\n color: lch(from peru calc(l * 0.8) c h);\n}",
1932 "polyfills": [
1933 {
1934 "type": "PostCSS Plugin",
1935 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax"
1936 }
1937 ],
1938 "vendors_implementations": 0
1939 },
1940 {
1941 "id": "scope-pseudo-class",
1942 "title": "`:scope()` Reference Element Pseudo-class",
1943 "description": "A pseudo-class for matching one or more scoping roots",
1944 "specification": "https://www.w3.org/TR/selectors-4/#the-scope-pseudo",
1945 "stage": 2,
1946 "browser_support": {
1947 "and_chr": "27",
1948 "and_ff": "32",
1949 "android": "4.4",
1950 "chrome": "27",
1951 "edge": "79",
1952 "firefox": "32",
1953 "ios_saf": "7",
1954 "oculus": "5.0",
1955 "op_mob": "15",
1956 "opera": "15",
1957 "safari": "7",
1958 "samsung": "1.5"
1959 },
1960 "docs": {
1961 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:scope"
1962 },
1963 "example": ":scope {\n background-color: pink;\n}",
1964 "interoperable_at": 1579046400,
1965 "polyfills": [
1966 {
1967 "type": "PostCSS Plugin",
1968 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-scope-pseudo-class"
1969 }
1970 ],
1971 "vendors_implementations": 3
1972 },
1973 {
1974 "id": "sign-functions",
1975 "title": "`abs()` and `sign()` functions",
1976 "description": "The sign-related functions—abs() and sign()—compute various functions related to the sign of their argument",
1977 "specification": "https://www.w3.org/TR/css-values-4/#sign-funcs",
1978 "stage": 2,
1979 "browser_support": {
1980 "and_ff": "118",
1981 "firefox": "118",
1982 "ios_saf": "15.4",
1983 "safari": "15.4"
1984 },
1985 "docs": {
1986 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/sign"
1987 },
1988 "example": "div {\n order: abs(-10);\n order: sign(-10);\n}",
1989 "vendors_implementations": 2
1990 },
1991 {
1992 "id": "src-function",
1993 "title": "`src()` function",
1994 "description": "The argument of `src()` can be provided by functions, such as var(). Otherwise this behaves the same as `url()`",
1995 "specification": "https://www.w3.org/TR/css-values-4/#funcdef-src",
1996 "stage": 2,
1997 "browser_support": {},
1998 "example": "div {\n background: src('./image.jpg');\n}",
1999 "polyfills": [
2000 {
2001 "type": "PostCSS Plugin",
2002 "link": "https://github.com/google/postcss-src"
2003 }
2004 ],
2005 "vendors_implementations": 0
2006 },
2007 {
2008 "id": "stepped-value-functions",
2009 "title": "`round()`, `mod()` and `rem()` functions",
2010 "description": "The stepped-value functions, `round()`, `mod()`, and `rem()`, all transform a given value according to another \"step value\", in different ways",
2011 "specification": "https://www.w3.org/TR/css-values-4/#round-func",
2012 "stage": 2,
2013 "browser_support": {
2014 "and_ff": "118",
2015 "firefox": "118",
2016 "ios_saf": "15.4",
2017 "safari": "15.4"
2018 },
2019 "docs": {
2020 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/round"
2021 },
2022 "example": "div {\n left: mod(18px, 5px);\n top: rem(18px, 5px);\n right: round(2.5px, 1px);\n bottom: round(up, 15px, 7px);\n}",
2023 "polyfills": [
2024 {
2025 "type": "PostCSS Plugin",
2026 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions"
2027 }
2028 ],
2029 "vendors_implementations": 2
2030 },
2031 {
2032 "id": "system-ui-font-family",
2033 "title": "`system-ui` Font Family",
2034 "description": "A generic font used to match the user’s interface",
2035 "specification": "https://www.w3.org/TR/css-fonts-4/#system-ui-def",
2036 "stage": 2,
2037 "browser_support": {
2038 "and_chr": "56",
2039 "and_ff": "92",
2040 "android": "56",
2041 "chrome": "56",
2042 "edge": "79",
2043 "firefox": "92",
2044 "ios_saf": "11",
2045 "oculus": "5.0",
2046 "op_mob": "43",
2047 "opera": "43",
2048 "safari": "11",
2049 "samsung": "6.0"
2050 },
2051 "docs": {
2052 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Syntax"
2053 },
2054 "example": "body {\n font-family: system-ui;\n}",
2055 "interoperable_at": 1630972800,
2056 "polyfills": [
2057 {
2058 "type": "PostCSS Plugin",
2059 "link": "https://github.com/JLHwung/postcss-font-family-system-ui"
2060 }
2061 ],
2062 "vendors_implementations": 3
2063 },
2064 {
2065 "id": "text-decoration-shorthand",
2066 "title": "`text-decoration` shorthand",
2067 "description": "A property for defining `text-decoration-line`, `text-decoration-thickness`, `text-decoration-style` and `text-decoration-color`",
2068 "specification": "https://www.w3.org/TR/css-text-decor-4/#text-decoration-property",
2069 "stage": 2,
2070 "browser_support": {
2071 "and_chr": "87",
2072 "and_ff": "79",
2073 "android": "87",
2074 "chrome": "87",
2075 "edge": "87",
2076 "firefox": "70",
2077 "oculus": "13.0",
2078 "op_mob": "62",
2079 "opera": "73",
2080 "samsung": "14.0"
2081 },
2082 "docs": {
2083 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"
2084 },
2085 "example": "p {\n text-decoration: green wavy underline 2px;\n}",
2086 "polyfills": [
2087 {
2088 "type": "PostCSS Plugin",
2089 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-text-decoration-shorthand"
2090 }
2091 ],
2092 "vendors_implementations": 2
2093 },
2094 {
2095 "id": "trigonometric-functions",
2096 "title": "`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` and `atan2()` functions",
2097 "description": "Functions to calculate various basic trigonometric relationships",
2098 "specification": "https://www.w3.org/TR/css-values-4/#trig-funcs",
2099 "stage": 2,
2100 "browser_support": {
2101 "and_chr": "111",
2102 "and_ff": "108",
2103 "android": "111",
2104 "chrome": "111",
2105 "edge": "111",
2106 "firefox": "108",
2107 "ios_saf": "15.4",
2108 "op_mob": "75",
2109 "opera": "97",
2110 "safari": "15.4",
2111 "samsung": "22.0"
2112 },
2113 "docs": {
2114 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/sin"
2115 },
2116 "example": "body {\n left: sin(45deg);\n left: cos(45deg);\n left: tan(45deg);\n left: asin(0.5);\n left: acos(0.5);\n left: atan(10);\n left: atan2(-1, 1);\n}",
2117 "interoperable_at": 1678665600,
2118 "polyfills": [
2119 {
2120 "type": "PostCSS Plugin",
2121 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions"
2122 }
2123 ],
2124 "vendors_implementations": 3
2125 },
2126 {
2127 "id": "unset-value",
2128 "title": "`unset` Keyword",
2129 "description": "The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.",
2130 "specification": "https://www.w3.org/TR/css-cascade-4/#inherit-initial",
2131 "stage": 3,
2132 "browser_support": {
2133 "and_chr": "41",
2134 "and_ff": "27",
2135 "android": "41",
2136 "chrome": "41",
2137 "edge": "13",
2138 "firefox": "27",
2139 "ios_saf": "9.3",
2140 "oculus": "5.0",
2141 "op_mob": "28",
2142 "opera": "28",
2143 "safari": "9.1",
2144 "samsung": "4.0"
2145 },
2146 "docs": {
2147 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/unset"
2148 },
2149 "example": "div {\n border-color: unset;\n color: unset;\n}",
2150 "interoperable_at": 1458518400,
2151 "polyfills": [
2152 {
2153 "type": "PostCSS Plugin",
2154 "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-unset-value"
2155 }
2156 ],
2157 "vendors_implementations": 3
2158 },
2159 {
2160 "id": "when-else-rules",
2161 "title": "When/Else Rules",
2162 "description": "At-rules for specifying media queries and support queries in a single grammar",
2163 "specification": "https://www.w3.org/TR/2021/WD-css-conditional-5-20211221/",
2164 "stage": 2,
2165 "browser_support": {},
2166 "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}",
2167 "vendors_implementations": 0
2168 },
2169 {
2170 "id": "where-pseudo-class",
2171 "title": "`:where()` Zero-Specificity Pseudo-Class",
2172 "description": "A pseudo-class for matching elements in a selector list without contributing specificity",
2173 "specification": "https://www.w3.org/TR/selectors-4/#where-pseudo",
2174 "stage": 2,
2175 "browser_support": {
2176 "and_chr": "88",
2177 "and_ff": "82",
2178 "android": "88",
2179 "chrome": "88",
2180 "edge": "88",
2181 "firefox": "82",
2182 "ios_saf": "14",
2183 "oculus": "14.0",
2184 "op_mob": "63",
2185 "opera": "74",
2186 "safari": "14",
2187 "samsung": "15.0"
2188 },
2189 "docs": {
2190 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:where"
2191 },
2192 "example": "a:where(:not(:hover)) {\n text-decoration: none;\n}",
2193 "interoperable_at": 1611187200,
2194 "vendors_implementations": 3
2195 }
2196]
Note: See TracBrowser for help on using the repository browser.