Link tags: sheet

print-color-adjust - CSS: Cascading Style Sheets | MDN

I love print stylesheets but I was today years old when I found out that print-color-adjust exists.

User Stylesheets Are Still Pretty Great and Should Be More Widely Supported — Pixel Envy

Hear, hear!

If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.

dbohdan/classless-css: A list of classless CSS themes/frameworks with screenshots

A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.

Chrome 108 beta - Chrome Developers

I think this might be the most excited I’ve been in quite some time about an update to browser support, which probably says a lot about my priorities:

Support for the avoid value of the CSS fragmentation properties break-before, break-after, and break-inside when printing.

Finally!

Why we need CSS Speech - Tink - Léonie Watson

I was talking about this with Léonie just yesterday. I, for one, would love to have CSS speech support. You know who else would love it? Content designers!

In these days of voice interaction on every platform, there is a growing expectation that it should be possible to design that experience just like we can the visual experience. In the same way an organisation chooses a logo and colour palette for its website, it stands to reason that they may also choose a particular voice that represents their brand.

It’s wild that there’s no way to do this on the web.

system.css | A design system for building retro Apple-inspired interfaces

A stylesheet for when you’re nostalgic for the old Mac OS.

Body Margin 8px | Miriam Eric Suzanne

I love this kind of spelunking into the history of why things are they way they are on the web!

Here, Detective Chief Inspector Suzanne tries to get to the bottom of why every browser has eight pixels of margin applied to the body element in the user-agent stylesheet.

Paper Prototype CSS

A stylesheet to imitate paper—perfect for low-fidelity prototypes that you want to test.

My Custom CSS Reset

This CSS reset is pleasantly minimalist and a lot of thought has gone into each step. The bit about calculating line height is very intriguing!

The Button Cheat Sheet

Do you need a button for your next project but you’re not sure about the right markup? Don’t worry, The Button Cheat Sheet™️ has got you covered.

Spoiler alert: it’s the button element.

prefers-reduced-motion: Taking a no-motion-first approach to animations

Given the widespread browser support for prefers-reduced-motion now, this approach makes a lot of sense.

On the origin of cascades

This is a great talk by Hidde, looking at the history and evolution of cascading style sheets. Right up my alley!

Grid Cheatsheet

A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.

iHateRegex - regex cheatsheet for haters

Piece together your own regular expression or choose from a pre-made selection.

(Like the creator if this site, I’m not a fan of regular expressions …or they’re not a fan of me. The logic just doesn’t stick in my brain.)

GitSheet

A handy translation of git commands into English.

A Complete Beginner’s Guide to React by Ali Spittel

This really is a most excellent introduction to React. Complete with cheat sheet!

This page is a truly naked, brutalist html quine.

What you see really is what you get. I like this style!

GRID: A simple visual cheatsheet for CSS Grid Layout

This is a really nice glanceable reference for CSS grid.

CSS and Network Performance – CSS Wizardry

Harry takes a look at the performance implications of loading CSS. To be clear, this is not about the performance of CSS selectors or ordering (which really doesn’t make any difference at this point), but rather it’s about the different ways of getting rid of as much render-blocking CSS as possible.

…a good rule of thumb to remember is that your page will only render as quickly as your slowest stylesheet.

abc to SVG | CSS-Tricks

Aw, this is so nice! Chris points to the way that The Session generates sheet music from abc text:

The SVG conversion is made possible entirely in JavaScript by an open source library. That’s the progressive enhancement part. Store and ship the basic format, and let the browser enhance the experience, if it can (it can).

Here’s another way of thinking of it: I was contacted by a blind user of The Session who hadn’t come across abc notation before. Once they realised how it worked, they said it was like having alt text for sheet music! 🤯