Printing the web, part 1: retrieving content from the web Printing the web, part 2: HTML and CSS for printing books Prince: Tool to convert HTML to PDF which supports all the cool CSS features for printing. It’s quite expensive, but there are reasonably priced cloud resellers.
CSS Grid Alignment & Justification Without the Guesswork The grid proper lives inside the parent element. It might be smaller. Similarly the child elements are inside the grid cells. They may be smaller. justify-* is always horizontal, align-* is always vertical. (Is that troe, or is it in inline resp. block direction? Doesn’t really matter as I won’t change these. place-* is a shortcut for justify-* and align-*. *-items moves the children within their cells.
Grid lines named *-start and *-end implicitely define areas which can overlap. These lines can also be used as “anchors” for position: absolute. https://www.youtube.com/watch?v=ciuZJE74wBA
.content-grid { display: grid; grid-template-columns: 1fr [content-start] 1fr [content-end] 1fr; } .content-grid > * { grid-column: content; /* = between content-start and content-end */ } Kevin Powell: A new approach to container and wrapper classes (Youtube)
Tether elements to each other with CSS anchor positioning CSS Anchor Is The Best New CSS Feature Since Flexbox See also: popover
How to write Semantic CSS <li aria-current="page">...</li> nav li[aria-current="page"] { ... } and related stuff
hover hover none pointer: coarse fine Kevin Powell: Dealing with hover on mobile
While HTML allows any character in an id, CSS is much more strict. The only (ASCII) punctuation characters you can use are - and _. This also affects APIs which use CSS selectors to select elements, e.g. htmx or jQuery.
Config variable for @media (prefers-color-scheme: xxx) in Firefox: ui.systemUsesDarkTheme (number) value meaning 0 light 2 dark 3 no preference
Improve your CSS by taking HSL and Custom Props to the next level Aug 24, 2021 Custom properties are just text replacement, so you can use and fragment of a property, e.g. :root { --hue: 204; --saturation: 100%; --lighntess: 30%; } .card { background: hsl(var(--hue) var(--saturation) var(--lightness) / 0.9) } New color syntax (no commas, slash): hsl(204 100% 30% / 0.9) Custom properties are cascaded like all properties. [min(), max(), and clamp() are CSS magic!
display: flow-root accent-color (for form elements, etc.) color-scheme aspect-ratio size-adjust Cascade layers :has() (parent selector, not yet in FF :-()
Wakamai Fondue, the tool that answers the question “what can my font do?”