mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Stylesheet improvements for print
- Switch references to "1px" to "thin". - Update docs to be clearer - Put a border around <details> and comment why.
This commit is contained in:
parent
1823cb57b7
commit
1d44b76dc1
1 changed files with 46 additions and 9 deletions
|
@ -1,7 +1,7 @@
|
||||||
/* CSS that adds the bare minimum for a simple, accessible,
|
/* CSS that adds the bare minimum for a simple, accessible,
|
||||||
* touch-friendly layout.
|
* touch-friendly layout compatible with as many UAs as possible.
|
||||||
* Nothing here exists purely for cosmetics; everything addresses a
|
* Nothing here exists purely for cosmetics; everything addresses a
|
||||||
* specific a11y, compatibility, or critical
|
* specific accessibility, compatibility, or critical
|
||||||
* usability need.
|
* usability need.
|
||||||
*
|
*
|
||||||
* Three exceptions:
|
* Three exceptions:
|
||||||
|
@ -36,9 +36,9 @@
|
||||||
* years.
|
* years.
|
||||||
*
|
*
|
||||||
* To keep myself from caring about minute details, I limited myself to
|
* To keep myself from caring about minute details, I limited myself to
|
||||||
* only defining spacing in increments of .25em. Pixels are 1px or
|
* only defining spacing in increments of .25em. Pixels are multiples of
|
||||||
* multiples of 3px. This also improves compression. No more "finding
|
* 3px. This also improves compression.
|
||||||
* the perfect value".
|
* No more "finding the perfect value".
|
||||||
*
|
*
|
||||||
* I cite WCAG 2.2 success criteria with "SC". I also tried to meet
|
* I cite WCAG 2.2 success criteria with "SC". I also tried to meet
|
||||||
* the Google a11y requirement of 48px tap targets separated by atl
|
* the Google a11y requirement of 48px tap targets separated by atl
|
||||||
|
@ -449,7 +449,10 @@ h1 {
|
||||||
body {
|
body {
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
padding: 0 8px;
|
/* Use an absolute unit for side margins so they don't increase with zoom.
|
||||||
|
* I computed this based on the thickness I saw in scrollbars and
|
||||||
|
* bezels on some watches. */
|
||||||
|
padding: 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li > a,
|
li > a,
|
||||||
|
@ -564,20 +567,51 @@ img,
|
||||||
mark, /* borders provide a distinguishing factor besides color */
|
mark, /* borders provide a distinguishing factor besides color */
|
||||||
pre,
|
pre,
|
||||||
summary {
|
summary {
|
||||||
border: 1px solid;
|
border: thin solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Putting a border around <details> makes summaries and
|
||||||
|
* the toggled details linked together as a sort of non-semantic
|
||||||
|
* section. I did this because in some situations (such as print layouts
|
||||||
|
* or PDF generators), <summary> receives no styling; it looks like
|
||||||
|
* ordinary text! There's no indication that it represents a toggle. Of
|
||||||
|
* course, you can't actually toggle things on a printed page, so I
|
||||||
|
* understand why they had to do this. Still, I think it's necessary to
|
||||||
|
* provide an indicator that you're looking at a section that was
|
||||||
|
* toggled somehow. Assistive technologies expose the button semantics
|
||||||
|
* of the <summary> and read its contents (which on seirdy.one start
|
||||||
|
* with the word "toggle"; interactive mouse/keyboard users can click it
|
||||||
|
* and see the list-style-type; print users should also have some
|
||||||
|
* indication.
|
||||||
|
*
|
||||||
|
* We still have more work to do, though. The contents of <details> are
|
||||||
|
* smooshed up against the border, so introduce some padding. This
|
||||||
|
* padding should apply to all top-level children of `details` *except*
|
||||||
|
* the `summary`, since we don't want a double-border.
|
||||||
|
*
|
||||||
|
* By applying this padding, we also happen to ensure that `details`
|
||||||
|
* children never protrude outside the `details` container. We can then
|
||||||
|
* apply some CSS containment for free without consequences. */
|
||||||
|
|
||||||
/* A black border is too harsh; the extra visual noise is distracting
|
/* A black border is too harsh; the extra visual noise is distracting
|
||||||
* to users with eye-tracking or ADHD. Only special items like headings
|
* to users with eye-tracking or ADHD. Only special items like headings
|
||||||
* should draw gaze. */
|
* should draw gaze.
|
||||||
|
*
|
||||||
|
* We also need padding around inline code snippets so the border
|
||||||
|
* doesn't touch the letters and screw up readability. */
|
||||||
|
details,
|
||||||
:not(pre) > code,
|
:not(pre) > code,
|
||||||
:not(pre) > samp {
|
:not(pre) > samp {
|
||||||
border: 1px solid #999;
|
border: thin solid #999;
|
||||||
|
|
||||||
/* borders shouldn't touch text */
|
/* borders shouldn't touch text */
|
||||||
padding: 0 .25em;
|
padding: 0 .25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
margin: 0 -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
/* center standalone images; same justification as
|
/* center standalone images; same justification as
|
||||||
* for centering the body contents. Also makes images easier to see
|
* for centering the body contents. Also makes images easier to see
|
||||||
* for people holding a device with one hand. */
|
* for people holding a device with one hand. */
|
||||||
|
@ -675,4 +709,7 @@ form :focus {
|
||||||
/* Todo:
|
/* Todo:
|
||||||
* - Wait till Webkit fixes its broken-ass default dark stylesheet
|
* - Wait till Webkit fixes its broken-ass default dark stylesheet
|
||||||
* then consider trimming the dark stylesheet I provide.
|
* then consider trimming the dark stylesheet I provide.
|
||||||
|
* (UPDATE: they did! now I'll wait maybe three years for it to roll
|
||||||
|
* out as much as possible before removing my dark styles or
|
||||||
|
* relegating them to an optional stylesheet.)
|
||||||
* */
|
* */
|
||||||
|
|
Loading…
Reference in a new issue