milestone 23: put the reset in a cascade layer, guard that it stays there
This commit is contained in:
+145
-97
@@ -9,116 +9,164 @@
|
||||
* their font. Deleting this block does not restore browser defaults — it
|
||||
* silently changes the meaning of every size and spacing value in the app.
|
||||
* Rules are limited to what this app renders; it is not a general reset.
|
||||
|
||||
* The reset lives in its own cascade layer, declared here before StyleX emits
|
||||
* its own. Layer order is priority order, and unlayered author CSS outranks
|
||||
* every layer: leaving these rules unlayered silently beat every StyleX rule in
|
||||
* the app, whatever the selector said.
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@layer reset {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
html {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
/* Headings carry their scale from StyleX, not from the user agent. */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
/* Headings carry their scale from StyleX, not from the user agent. */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
menu {
|
||||
list-style: none;
|
||||
}
|
||||
ul,
|
||||
ol,
|
||||
menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Links opt into colour and underline; the shell's nav wants neither. */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
/* Links opt into colour and underline; the shell's nav wants neither. */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-size: 1em;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* Form controls: inherit type and colour, drop the user-agent chrome, and keep
|
||||
* `appearance: button` so iOS Safari honours a button's border radius.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: 0 solid;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
/*
|
||||
* Form controls: inherit type and colour, drop the user-agent chrome, and keep
|
||||
* `appearance: button` so iOS Safari honours a button's border radius.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border: 0 solid;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
appearance: button;
|
||||
}
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
appearance: button;
|
||||
}
|
||||
|
||||
/* A checkbox keeps its native chrome; the rules above would erase it. */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
appearance: auto;
|
||||
}
|
||||
/* A checkbox keeps its native chrome; the rules above would erase it. */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
appearance: auto;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
/*
|
||||
* WebKit lays a date/time input out from its own pseudo-elements, and an
|
||||
* empty one comes out shorter than a filled one without these. The query log
|
||||
* filters are two `datetime-local` inputs sitting in a row of controls, so
|
||||
* the height has to hold whether or not a value is set.
|
||||
*/
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
/* An inline SVG leaves a baseline gap under a full-width chart. */
|
||||
svg,
|
||||
img,
|
||||
video,
|
||||
canvas {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
::-webkit-datetime-edit,
|
||||
::-webkit-datetime-edit-year-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-minute-field,
|
||||
::-webkit-datetime-edit-second-field,
|
||||
::-webkit-datetime-edit-millisecond-field,
|
||||
::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Safari below 16.4 resolves `color-mix` against the wrong colour here and
|
||||
* renders the placeholder invisible. The guard admits every engine that
|
||||
* supports either a non-WebKit feature or one Safari only gained afterwards.
|
||||
*/
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||
::placeholder {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/* An inline SVG leaves a baseline gap under a full-width chart. */
|
||||
svg,
|
||||
img,
|
||||
video,
|
||||
canvas {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user