progressiveenhancement.css
· 599 B · CSS
Eredeti
:root {
interpolate-size: allow-keywords;
}
.container {
scrollbar-gutter: stable;
transition-behavior: allow-discrete;
color-scheme: light dark;
overflow-x: clip;
}
h1 {
text-wrap: balance; /* pretty */
}
.text-box-trim {
text-box-trim: both;
text-box-edge: cap alphabetic;
}
dialog[open]{
display: block; /* user agent style */
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 -25vh;
}
}
.alt {
content: url(./img) / "ALT";
}
/*
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
function round(), light-dark(),
*/
| 1 | :root { |
| 2 | interpolate-size: allow-keywords; |
| 3 | } |
| 4 | .container { |
| 5 | scrollbar-gutter: stable; |
| 6 | transition-behavior: allow-discrete; |
| 7 | color-scheme: light dark; |
| 8 | overflow-x: clip; |
| 9 | } |
| 10 | h1 { |
| 11 | text-wrap: balance; /* pretty */ |
| 12 | } |
| 13 | .text-box-trim { |
| 14 | text-box-trim: both; |
| 15 | text-box-edge: cap alphabetic; |
| 16 | } |
| 17 | dialog[open]{ |
| 18 | display: block; /* user agent style */ |
| 19 | opacity: 1; |
| 20 | translate: 0 0; |
| 21 | |
| 22 | @starting-style { |
| 23 | opacity: 0; |
| 24 | translate: 0 -25vh; |
| 25 | } |
| 26 | } |
| 27 | .alt { |
| 28 | content: url(./img) / "ALT"; |
| 29 | } |
| 30 | /* |
| 31 | https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter |
| 32 | function round(), light-dark(), |
| 33 | */ |