CSS quality-of-life improvements
Delightfulness
-
Smooth Scrolling -
Typesetting: Balanced headings and orphans -
Parallax for header and footer -
Faster load time through deferring non-layout CSS -
Experiment with colored body background for functional pages (indicating there is interactivity)
Accessibility
Apart from the catchalls described below, the following items need to be tested continuously [#76].
-
Ensure Focus Visibility for non-mouse use -
Cover extreme page zooms -
Respect reduced motion -
Offer styles that pass APCA (WCAG3 contrast test)
Maintainability
-
Implement a useful set of utility classes that implement common, orthogonal patterns -
Document all the above implementations -
Link from CONTRIBUTING to the relevant files OR auto-generate docs for CSS.
Quickfixes
-
Redo Logo as svg and smoosh it into the raster, aligned with the search-bar -
Make title smaller for non-blog pages.
Delightfulness
Smooth Scrolling
:has(:target) {scroll-behavior: smooth; scroll-padding-top: 1em;}
_Sources: __https://www.youtube.com/watch?v=cCAtD_BAHNw_
Typesetting
Orphan prevention: p {text-wrap: pretty;}
Balanced headings: h1, h2, h3, h4, h5 {text-wrap: balance;}
-> Done: !54 (merged) commit line in cube.scss
Parallax
- Make footer items appear in a staggered way from below
- Make header items appear in a staggered way from above
- Make homepage link fixed on screen
Guide for scroll-dependent positioning: https://www.youtube.com/watch?v=Qj0Qx8HpNUo
Deferring non-layout CSS
See https://web.dev/articles/defer-non-critical-css
Colored background for interactive pages
-- need to evaluate functional pages first --
Accessibility
https://moderncss.dev/modern-css-upgrades-to-improve-accessibility/
Focus Visibility
:is(button, a):focus-visible {...}
:focus-visible is available in all browsers since 2022. It will activate whenever the mouse is not used for selecting interactive elements.
Very large magnifications on desktop screens
With small viewport widths, we can't assume large viewport heights. Instead of naming the breakpoints after typical devices, we design for the worst case and then add better-case scenarios where appropriate. For example, the fluid scale operates on minimum square dimensions instead of only widths.
A simple catchall for extreme sizes is to wrap larger scales in a min
:
--t8: min(15vh, 12rem);
Reduced motion
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
APCA (Font contrast test)
See https://www.achecks.org/apca-wcag-3-accessible-colour-contrast-checker/ for a test. All preset styles must pass WCAG3.
Maintainability
Utility classes/mixins for DRY, consistent and composable definitions:
- Prefer aspect-ratio over width and height
- Set aspect-ratio and width or height whenever it is precomputable to prevent CLS
- Use
display:grid;
grid-template-areas: "stack";
to put elements above each other - Use
display: grid;
place-content: center;
to center children - Make sure the
:target
state for linked elements is marked up [smol]
Quickfixes
- Raster: blocked by redo of parametric, fluid grid #96
- Layout: need to evaluate functional pages first