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