2 ms·
All of that? That's so complicated. Maybe we can add something more versatile. Something like: .my-button { padding: 1em; goto: my-button-colors; }
by t0astbread 3y ago
All of that? That's so complicated. Maybe we can add something more versatile. Something like:
.my-button {
padding: 1em;
goto: my-button-colors;
}
html {
label: my-button-colors;
background: white;
color: black;
}
@media (prefers-color-scheme: dark) {
html {
label: my-button-colors;
background: black;
color: white;
}
}
The most specific label will be jumped to. Labels follow the usual specificity rules (also including `!important`). Jumps to an invalid label are no-ops. Styles within a ruleset are evaluated top-to-bottom. Labels propagate to children.
Of course the above example is silly. We also need to make sure we don't apply button styles to the `html` element. We can do that with a protective conditional goto using custom properties (aka variables). We can also make use of variables to implement returns:
.my-button {
--end: none;
--next: my-button-colors;
label: return;
goto: var(--next);
padding: 1em;
}
html {
--end: end;
label: end; /* Jump here to end a ruleset immediately. */
}
html {
label: my-button-colors;
goto: var(--end);
background: white;
color: black;
--next: none;
goto: return;
}
@media (prefers-color-scheme: dark) {
html {
label: my-button-colors;
goto: var(--end);
background: black;
color: white;
--next: none;
goto: return;
}
}