In a nutshell, we’re generating a website from a CMS using Eleventy and generating a PDF version of the website using DocRaptor.

If you’ve ever tried using all: revert, then you’re probably aware of what a disappointment it is. On paper it gives you a clean slate, but in practice it does too much. It gets rid of (desirable!) styles that come with draggable, contenteditable, svg attributes, image width/height attributes, etc. Anyway, all: revert-layer is like all: revert but actually useful. It can be used as a drop-in replacement for all: revert, even if you are not making use of cascade layers anywhere else.

With @scope you can isolate styles in a single component without them bleeding out into the rest of the page. This little bit of CSS prevents us from having to write a bunch of hacky styles or adding a new class name to this bad boy or doing some Shadow DOM style encapsulation stuff.

It’s none. Let me clarify: don’t set a base font size. That’s it. That’s the secret. Don’t set a base font size.

There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.