source: trip-planner-front/node_modules/cssdb/cssdb.json

Last change on this file was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 26.1 KB
Line 
1[
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": 3,
8 "caniuse": "css-all",
9 "docs": {
10 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/all"
11 },
12 "example": "a {\n all: initial;\n}",
13 "polyfills": [
14 {
15 "type": "PostCSS Plugin",
16 "link": "https://github.com/maximkoretskiy/postcss-initial"
17 }
18 ]
19 },
20 {
21 "id": "any-link-pseudo-class",
22 "title": "`:any-link` Hyperlink Pseudo-Class",
23 "description": "A pseudo-class for matching anchor elements independent of whether they have been visited",
24 "specification": "https://www.w3.org/TR/selectors-4/#any-link-pseudo",
25 "stage": 2,
26 "caniuse": "css-any-link",
27 "docs": {
28 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link"
29 },
30 "example": "nav :any-link > span {\n background-color: yellow;\n}",
31 "polyfills": [
32 {
33 "type": "PostCSS Plugin",
34 "link": "https://github.com/jonathantneal/postcss-pseudo-class-any-link"
35 }
36 ]
37 },
38 {
39 "id": "blank-pseudo-class",
40 "title": "`:blank` Empty-Value Pseudo-Class",
41 "description": "A pseudo-class for matching form elements when they are empty",
42 "specification": "https://drafts.csswg.org/selectors-4/#blank",
43 "stage": 1,
44 "example": "input:blank {\n background-color: yellow;\n}",
45 "polyfills": [
46 {
47 "type": "JavaScript Library",
48 "link": "https://github.com/csstools/css-blank-pseudo"
49 },
50 {
51 "type": "PostCSS Plugin",
52 "link": "https://github.com/csstools/css-blank-pseudo"
53 }
54 ]
55 },
56 {
57 "id": "break-properties",
58 "title": "Break Properties",
59 "description": "Properties for defining the break behavior between and within boxes",
60 "specification": "https://www.w3.org/TR/css-break-3/#breaking-controls",
61 "stage": 3,
62 "caniuse": "multicolumn",
63 "docs": {
64 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-after"
65 },
66 "example": "a {\n break-inside: avoid;\n break-before: avoid-column;\n break-after: always;\n}",
67 "polyfills": [
68 {
69 "type": "PostCSS Plugin",
70 "link": "https://github.com/shrpne/postcss-page-break"
71 }
72 ]
73 },
74 {
75 "id": "case-insensitive-attributes",
76 "title": "Case-Insensitive Attributes",
77 "description": "An attribute selector matching attribute values case-insensitively",
78 "specification": "https://www.w3.org/TR/selectors-4/#attribute-case",
79 "stage": 2,
80 "caniuse": "css-case-insensitive",
81 "docs": {
82 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors"
83 },
84 "example": "[frame=hsides i] {\n border-style: solid none;\n}",
85 "polyfills": [
86 {
87 "type": "PostCSS Plugin",
88 "link": "https://github.com/Semigradsky/postcss-attribute-case-insensitive"
89 }
90 ]
91 },
92 {
93 "id": "color-adjust",
94 "title": "`color-adjust` Property",
95 "description": "The color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images",
96 "specification": "https://www.w3.org/TR/css-color-4/#color-adjust",
97 "stage": 2,
98 "caniuse": "css-color-adjust",
99 "docs": {
100 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust"
101 },
102 "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}"
103 },
104 {
105 "id": "color-functional-notation",
106 "title": "Color Functional Notation",
107 "description": "A space and slash separated notation for specifying colors",
108 "specification": "https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0",
109 "stage": 1,
110 "example": "em {\n background-color: hsl(120deg 100% 25%);\n box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);\n color: rgb(0 255 0);\n}",
111 "polyfills": [
112 {
113 "type": "PostCSS Plugin",
114 "link": "https://github.com/jonathantneal/postcss-color-functional-notation"
115 }
116 ]
117 },
118 {
119 "id": "color-mod-function",
120 "title": "`color-mod()` Function",
121 "description": "A function for modifying colors",
122 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-color-mod",
123 "stage": -1,
124 "example": "p {\n color: color-mod(black alpha(50%));\n}",
125 "polyfills": [
126 {
127 "type": "PostCSS Plugin",
128 "link": "https://github.com/jonathantneal/postcss-color-mod-function"
129 }
130 ]
131 },
132 {
133 "id": "custom-media-queries",
134 "title": "Custom Media Queries",
135 "description": "An at-rule for defining aliases that represent media queries",
136 "specification": "https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media",
137 "stage": 1,
138 "example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}",
139 "polyfills": [
140 {
141 "type": "PostCSS Plugin",
142 "link": "https://github.com/postcss/postcss-custom-media"
143 }
144 ]
145 },
146 {
147 "id": "custom-properties",
148 "title": "Custom Properties",
149 "description": "A syntax for defining custom values accepted by all CSS properties",
150 "specification": "https://www.w3.org/TR/css-variables-1/",
151 "stage": 3,
152 "caniuse": "css-variables",
153 "docs": {
154 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/var"
155 },
156 "example": "img {\n --some-length: 32px;\n\n height: var(--some-length);\n width: var(--some-length);\n}",
157 "polyfills": [
158 {
159 "type": "PostCSS Plugin",
160 "link": "https://github.com/postcss/postcss-custom-properties"
161 }
162 ]
163 },
164 {
165 "id": "custom-property-sets",
166 "title": "Custom Property Sets",
167 "description": "A syntax for storing properties in named variables, referenceable in other style rules",
168 "specification": "https://tabatkins.github.io/specs/css-apply-rule/",
169 "stage": -1,
170 "caniuse": "css-apply-rule",
171 "example": "img {\n --some-length-styles: {\n height: 32px;\n width: 32px;\n };\n\n @apply --some-length-styles;\n}",
172 "polyfills": [
173 {
174 "type": "PostCSS Plugin",
175 "link": "https://github.com/pascalduez/postcss-apply"
176 }
177 ]
178 },
179 {
180 "id": "custom-selectors",
181 "title": "Custom Selectors",
182 "description": "An at-rule for defining aliases that represent selectors",
183 "specification": "https://drafts.csswg.org/css-extensions/#custom-selectors",
184 "stage": 1,
185 "example": "@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\narticle :--heading + p {}",
186 "polyfills": [
187 {
188 "type": "PostCSS Plugin",
189 "link": "https://github.com/postcss/postcss-custom-selectors"
190 }
191 ]
192 },
193 {
194 "id": "dir-pseudo-class",
195 "title": "`:dir` Directionality Pseudo-Class",
196 "description": "A pseudo-class for matching elements based on their directionality",
197 "specification": "https://www.w3.org/TR/selectors-4/#dir-pseudo",
198 "stage": 2,
199 "caniuse": "css-dir-pseudo",
200 "docs": {
201 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"
202 },
203 "example": "blockquote:dir(rtl) {\n margin-right: 10px;\n}\n\nblockquote:dir(ltr) {\n margin-left: 10px;\n}",
204 "polyfills": [
205 {
206 "type": "PostCSS Plugin",
207 "link": "https://github.com/jonathantneal/postcss-dir-pseudo-class"
208 }
209 ]
210 },
211 {
212 "id": "double-position-gradients",
213 "title": "Double Position Gradients",
214 "description": "A syntax for using two positions in a gradient.",
215 "specification": "https://www.w3.org/TR/css-images-4/#color-stop-syntax",
216 "stage": 2,
217 "caniuse-compat": {
218 "and_chr": {
219 "71": "y"
220 },
221 "chrome": {
222 "71": "y"
223 }
224 },
225 "example": ".pie_chart {\n background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
226 "polyfills": [
227 {
228 "type": "PostCSS Plugin",
229 "link": "https://github.com/jonathantneal/postcss-double-position-gradients"
230 }
231 ]
232 },
233 {
234 "id": "environment-variables",
235 "title": "Custom Environment Variables",
236 "description": "A syntax for using custom values accepted by CSS globally",
237 "specification": "https://drafts.csswg.org/css-env-1/",
238 "stage": 0,
239 "caniuse-compat": {
240 "and_chr": {
241 "69": "y"
242 },
243 "chrome": {
244 "69": "y"
245 },
246 "ios_saf": {
247 "11.2": "y"
248 },
249 "safari": {
250 "11.2": "y"
251 }
252 },
253 "docs": {
254 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/env"
255 },
256 "example": "@media (max-width: env(--brand-small)) {\n body {\n padding: env(--brand-spacing);\n }\n}",
257 "polyfills": [
258 {
259 "type": "PostCSS Plugin",
260 "link": "https://github.com/jonathantneal/postcss-env-function"
261 }
262 ]
263 },
264 {
265 "id": "focus-visible-pseudo-class",
266 "title": "`:focus-visible` Focus-Indicated Pseudo-Class",
267 "description": "A pseudo-class for matching focused elements that indicate that focus to a user",
268 "specification": "https://www.w3.org/TR/selectors-4/#focus-visible-pseudo",
269 "stage": 2,
270 "caniuse": "css-focus-visible",
271 "docs": {
272 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"
273 },
274 "example": ":focus:not(:focus-visible) {\n outline: 0;\n}",
275 "polyfills": [
276 {
277 "type": "JavaScript Library",
278 "link": "https://github.com/WICG/focus-visible"
279 },
280 {
281 "type": "PostCSS Plugin",
282 "link": "https://github.com/jonathantneal/postcss-focus-visible"
283 }
284 ]
285 },
286 {
287 "id": "focus-within-pseudo-class",
288 "title": "`:focus-within` Focus Container Pseudo-Class",
289 "description": "A pseudo-class for matching elements that are either focused or that have focused descendants",
290 "specification": "https://www.w3.org/TR/selectors-4/#focus-within-pseudo",
291 "stage": 2,
292 "caniuse": "css-focus-within",
293 "docs": {
294 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within"
295 },
296 "example": "form:focus-within {\n background: rgba(0, 0, 0, 0.3);\n}",
297 "polyfills": [
298 {
299 "type": "JavaScript Library",
300 "link": "https://github.com/jonathantneal/focus-within"
301 },
302 {
303 "type": "PostCSS Plugin",
304 "link": "https://github.com/jonathantneal/postcss-focus-within"
305 }
306 ]
307 },
308 {
309 "id": "font-variant-property",
310 "title": "`font-variant` Property",
311 "description": "A property for defining the usage of alternate glyphs in a font",
312 "specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant",
313 "stage": 3,
314 "caniuse": "font-variant-alternates",
315 "docs": {
316 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant"
317 },
318 "example": "h2 {\n font-variant: small-caps;\n}",
319 "polyfills": [
320 {
321 "type": "PostCSS Plugin",
322 "link": "https://github.com/postcss/postcss-font-variant"
323 }
324 ]
325 },
326 {
327 "id": "gap-properties",
328 "title": "Gap Properties",
329 "description": "Properties for defining gutters within a layout",
330 "specification": "https://www.w3.org/TR/css-grid-1/#gutters",
331 "stage": 3,
332 "caniuse-compat": {
333 "chrome": {
334 "66": "y"
335 },
336 "edge": {
337 "16": "y"
338 },
339 "firefox": {
340 "61": "y"
341 },
342 "safari": {
343 "11.2": "y",
344 "TP": "y"
345 }
346 },
347 "docs": {
348 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gap"
349 },
350 "example": ".grid-1 {\n gap: 20px;\n}\n\n.grid-2 {\n column-gap: 40px;\n row-gap: 20px;\n}",
351 "polyfills": [
352 {
353 "type": "PostCSS Plugin",
354 "link": "https://github.com/jonathantneal/postcss-gap-properties"
355 }
356 ]
357 },
358 {
359 "id": "gray-function",
360 "title": "`gray()` Function",
361 "description": "A function for specifying fully desaturated colors",
362 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-gray",
363 "stage": 2,
364 "example": "p {\n color: gray(50);\n}",
365 "polyfills": [
366 {
367 "type": "PostCSS Plugin",
368 "link": "https://github.com/postcss/postcss-color-gray"
369 }
370 ]
371 },
372 {
373 "id": "grid-layout",
374 "title": "Grid Layout",
375 "description": "A syntax for using a grid concept to lay out content",
376 "specification": "https://www.w3.org/TR/css-grid-1/",
377 "stage": 3,
378 "caniuse": "css-grid",
379 "docs": {
380 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid"
381 },
382 "example": "section {\n display: grid;\n grid-template-columns: 100px 100px 100px;\n grid-gap: 10px;\n}",
383 "polyfills": [
384 {
385 "type": "PostCSS Plugin",
386 "link": "https://github.com/postcss/autoprefixer"
387 }
388 ]
389 },
390 {
391 "id": "has-pseudo-class",
392 "title": "`:has()` Relational Pseudo-Class",
393 "description": "A pseudo-class for matching ancestor and sibling elements",
394 "specification": "https://www.w3.org/TR/selectors-4/#has-pseudo",
395 "stage": 2,
396 "caniuse": "css-has",
397 "docs": {
398 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
399 },
400 "example": "a:has(> img) {\n display: block;\n}",
401 "polyfills": [
402 {
403 "type": "JavaScript Library",
404 "link": "https://github.com/csstools/css-has-pseudo"
405 },
406 {
407 "type": "PostCSS Plugin",
408 "link": "https://github.com/csstools/css-has-pseudo"
409 }
410 ]
411 },
412 {
413 "id": "hexadecimal-alpha-notation",
414 "title": "Hexadecimal Alpha Notation",
415 "description": "A 4 & 8 character hex color notation for specifying the opacity level",
416 "specification": "https://www.w3.org/TR/css-color-4/#hex-notation",
417 "stage": 2,
418 "caniuse": "css-rrggbbaa",
419 "docs": {
420 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Syntax_2"
421 },
422 "example": "section {\n background-color: #f3f3f3f3;\n color: #0003;\n}",
423 "polyfills": [
424 {
425 "type": "PostCSS Plugin",
426 "link": "https://github.com/postcss/postcss-color-hex-alpha"
427 }
428 ]
429 },
430 {
431 "id": "hwb-function",
432 "title": "`hwb()` Function",
433 "description": "A function for specifying colors by hue and then a degree of whiteness and blackness to mix into it",
434 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-hwb",
435 "stage": 2,
436 "example": "p {\n color: hwb(120 44% 50%);\n}",
437 "polyfills": [
438 {
439 "type": "PostCSS Plugin",
440 "link": "https://github.com/postcss/postcss-color-hwb"
441 }
442 ]
443 },
444 {
445 "id": "image-set-function",
446 "title": "`image-set()` Function",
447 "description": "A function for specifying image sources based on the user’s resolution",
448 "specification": "https://www.w3.org/TR/css-images-4/#image-set-notation",
449 "stage": 2,
450 "caniuse": "css-image-set",
451 "example": "p {\n background-image: image-set(\n \"foo.png\" 1x,\n \"foo-2x.png\" 2x,\n \"foo-print.png\" 600dpi\n );\n}",
452 "polyfills": [
453 {
454 "type": "PostCSS Plugin",
455 "link": "https://github.com/jonathantneal/postcss-image-set-function"
456 }
457 ]
458 },
459 {
460 "id": "in-out-of-range-pseudo-class",
461 "title": "`:in-range` and `:out-of-range` Pseudo-Classes",
462 "description": "A pseudo-class for matching elements that have range limitations",
463 "specification": "https://www.w3.org/TR/selectors-4/#range-pseudos",
464 "stage": 2,
465 "caniuse": "css-in-out-of-range",
466 "docs": {
467 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range"
468 },
469 "example": "input:in-range {\n background-color: rgba(0, 255, 0, 0.25);\n}\ninput:out-of-range {\n background-color: rgba(255, 0, 0, 0.25);\n border: 2px solid red;\n}"
470 },
471 {
472 "id": "lab-function",
473 "title": "`lab()` Function",
474 "description": "A function for specifying colors expressed in the CIE Lab color space",
475 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lab",
476 "stage": 2,
477 "example": "body {\n color: lab(240 50 20);\n}",
478 "polyfills": [
479 {
480 "type": "PostCSS Plugin",
481 "link": "https://github.com/jonathantneal/postcss-lab-function"
482 }
483 ]
484 },
485 {
486 "id": "lch-function",
487 "title": "`lch()` Function",
488 "description": "A function for specifying colors expressed in the CIE Lab color space with chroma and hue",
489 "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lch",
490 "stage": 2,
491 "example": "body {\n color: lch(53 105 40);\n}",
492 "polyfills": [
493 {
494 "type": "PostCSS Plugin",
495 "link": "https://github.com/jonathantneal/postcss-lab-function"
496 }
497 ]
498 },
499 {
500 "id": "logical-properties-and-values",
501 "title": "Logical Properties and Values",
502 "description": "Flow-relative (left-to-right or right-to-left) properties and values",
503 "specification": "https://www.w3.org/TR/css-logical-1/",
504 "stage": 2,
505 "caniuse": "css-logical-props",
506 "docs": {
507 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties"
508 },
509 "example": "span:first-child {\n float: inline-start;\n margin-inline-start: 10px;\n}",
510 "polyfills": [
511 {
512 "type": "PostCSS Plugin",
513 "link": "https://github.com/jonathantneal/postcss-logical-properties"
514 }
515 ]
516 },
517 {
518 "id": "matches-pseudo-class",
519 "title": "`:matches()` Matches-Any Pseudo-Class",
520 "description": "A pseudo-class for matching elements in a selector list",
521 "specification": "https://www.w3.org/TR/selectors-4/#matches-pseudo",
522 "stage": 2,
523 "caniuse": "css-matches-pseudo",
524 "docs": {
525 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:matches"
526 },
527 "example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}",
528 "polyfills": [
529 {
530 "type": "PostCSS Plugin",
531 "link": "https://github.com/postcss/postcss-selector-matches"
532 }
533 ]
534 },
535 {
536 "id": "media-query-ranges",
537 "title": "Media Query Ranges",
538 "description": "A syntax for defining media query ranges using ordinary comparison operators",
539 "specification": "https://www.w3.org/TR/mediaqueries-4/#range-context",
540 "stage": 3,
541 "docs": {
542 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4"
543 },
544 "example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}",
545 "polyfills": [
546 {
547 "type": "PostCSS Plugin",
548 "link": "https://github.com/postcss/postcss-media-minmax"
549 }
550 ]
551 },
552 {
553 "id": "nesting-rules",
554 "title": "Nesting Rules",
555 "description": "A syntax for nesting relative rules within rules",
556 "specification": "https://drafts.csswg.org/css-nesting-1/",
557 "stage": 1,
558 "example": "article {\n & p {\n color: #333;\n }\n}",
559 "polyfills": [
560 {
561 "type": "PostCSS Plugin",
562 "link": "https://github.com/jonathantneal/postcss-nesting"
563 }
564 ]
565 },
566 {
567 "id": "not-pseudo-class",
568 "title": "`:not()` Negation List Pseudo-Class",
569 "description": "A pseudo-class for ignoring elements in a selector list",
570 "specification": "https://www.w3.org/TR/selectors-4/#negation-pseudo",
571 "stage": 2,
572 "caniuse": "css-not-sel-list",
573 "docs": {
574 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
575 },
576 "example": "p:not(:first-child, .special) {\n margin-top: 1em;\n}",
577 "polyfills": [
578 {
579 "type": "PostCSS Plugin",
580 "link": "https://github.com/postcss/postcss-selector-not"
581 }
582 ]
583 },
584 {
585 "id": "overflow-property",
586 "title": "`overflow` Shorthand Property",
587 "description": "A property for defining `overflow-x` and `overflow-y`",
588 "specification": "https://www.w3.org/TR/css-overflow-3/#propdef-overflow",
589 "stage": 2,
590 "caniuse": "css-overflow",
591 "caniuse-compat": {
592 "and_chr": {
593 "68": "y"
594 },
595 "and_ff": {
596 "61": "y"
597 },
598 "chrome": {
599 "68": "y"
600 },
601 "firefox": {
602 "61": "y"
603 }
604 },
605 "docs": {
606 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow"
607 },
608 "example": "html {\n overflow: hidden auto;\n}",
609 "polyfills": [
610 {
611 "type": "PostCSS Plugin",
612 "link": "https://github.com/jonathantneal/postcss-overflow-shorthand"
613 }
614 ]
615 },
616 {
617 "id": "overflow-wrap-property",
618 "title": "`overflow-wrap` Property",
619 "description": "A property for defining whether to insert line breaks within words to prevent overflowing",
620 "specification": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property",
621 "stage": 2,
622 "caniuse": "wordwrap",
623 "docs": {
624 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap"
625 },
626 "example": "p {\n overflow-wrap: break-word;\n}",
627 "polyfills": [
628 {
629 "type": "PostCSS Plugin",
630 "link": "https://github.com/mattdimu/postcss-replace-overflow-wrap"
631 }
632 ]
633 },
634 {
635 "id": "overscroll-behavior-property",
636 "title": "`overscroll-behavior` Property",
637 "description": "Properties for controlling when the scroll position of a scroll container reaches the edge of a scrollport",
638 "specification": "https://drafts.csswg.org/css-overscroll-behavior",
639 "stage": 1,
640 "caniuse": "css-overscroll-behavior",
641 "docs": {
642 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior"
643 },
644 "example": ".messages {\n height: 220px;\n overflow: auto;\n overscroll-behavior-y: contain;\n}\n\nbody {\n margin: 0;\n overscroll-behavior: none;\n}"
645 },
646 {
647 "id": "place-properties",
648 "title": "Place Properties",
649 "description": "Properties for defining alignment within a layout",
650 "specification": "https://www.w3.org/TR/css-align-3/#place-items-property",
651 "stage": 2,
652 "caniuse-compat": {
653 "chrome": {
654 "59": "y"
655 },
656 "firefox": {
657 "45": "y"
658 }
659 },
660 "docs": {
661 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/place-content"
662 },
663 "example": ".example {\n place-content: flex-end;\n place-items: center / space-between;\n place-self: flex-start / center;\n}",
664 "polyfills": [
665 {
666 "type": "PostCSS Plugin",
667 "link": "https://github.com/jonathantneal/postcss-place"
668 }
669 ]
670 },
671 {
672 "id": "prefers-color-scheme-query",
673 "title": "`prefers-color-scheme` Media Query",
674 "description": "A media query to detect if the user has requested the system use a light or dark color theme",
675 "specification": "https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme",
676 "stage": 1,
677 "caniuse": "prefers-color-scheme",
678 "caniuse-compat": {
679 "ios_saf": {
680 "12.1": "y"
681 },
682 "safari": {
683 "12.1": "y"
684 }
685 },
686 "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}",
687 "polyfills": [
688 {
689 "type": "JavaScript Library",
690 "link": "https://github.com/csstools/css-prefers-color-scheme"
691 },
692 {
693 "type": "PostCSS Plugin",
694 "link": "https://github.com/csstools/css-prefers-color-scheme"
695 }
696 ]
697 },
698 {
699 "id": "prefers-reduced-motion-query",
700 "title": "`prefers-reduced-motion` Media Query",
701 "description": "A media query to detect if the user has requested less animation and general motion on the page",
702 "specification": "https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion",
703 "stage": 1,
704 "caniuse": "prefers-reduced-motion",
705 "docs": {
706 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"
707 },
708 "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}"
709 },
710 {
711 "id": "read-only-write-pseudo-class",
712 "title": "`:read-only` and `:read-write` selectors",
713 "description": "Pseudo-classes to match elements which are considered user-alterable",
714 "specification": "https://www.w3.org/TR/selectors-4/#rw-pseudos",
715 "stage": 2,
716 "caniuse": "css-read-only-write",
717 "docs": {
718 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only"
719 },
720 "example": "input:read-only {\n background-color: #ccc;\n}"
721 },
722 {
723 "id": "rebeccapurple-color",
724 "title": "`rebeccapurple` Color",
725 "description": "A particularly lovely shade of purple in memory of Rebecca Alison Meyer",
726 "specification": "https://www.w3.org/TR/css-color-4/#valdef-color-rebeccapurple",
727 "stage": 2,
728 "caniuse": "css-rebeccapurple",
729 "docs": {
730 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"
731 },
732 "example": "html {\n color: rebeccapurple;\n}",
733 "polyfills": [
734 {
735 "type": "PostCSS Plugin",
736 "link": "https://github.com/postcss/postcss-color-rebeccapurple"
737 }
738 ]
739 },
740 {
741 "id": "system-ui-font-family",
742 "title": "`system-ui` Font Family",
743 "description": "A generic font used to match the user’s interface",
744 "specification": "https://www.w3.org/TR/css-fonts-4/#system-ui-def",
745 "stage": 2,
746 "caniuse": "font-family-system-ui",
747 "docs": {
748 "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Syntax"
749 },
750 "example": "body {\n font-family: system-ui;\n}",
751 "polyfills": [
752 {
753 "type": "PostCSS Plugin",
754 "link": "https://github.com/JLHwung/postcss-font-family-system-ui"
755 }
756 ]
757 },
758 {
759 "id": "when-else-rules",
760 "title": "When/Else Rules",
761 "description": "At-rules for specifying media queries and support queries in a single grammar",
762 "specification": "https://tabatkins.github.io/specs/css-when-else/",
763 "stage": 0,
764 "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}"
765 },
766 {
767 "id": "where-pseudo-class",
768 "title": "`:where()` Zero-Specificity Pseudo-Class",
769 "description": "A pseudo-class for matching elements in a selector list without contributing specificity",
770 "specification": "https://drafts.csswg.org/selectors-4/#where-pseudo",
771 "stage": 1,
772 "example": "a:where(:not(:hover)) {\n text-decoration: none;\n}"
773 }
774]
Note: See TracBrowser for help on using the repository browser.