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.
I love print stylesheets but I was today years old when I found out that print-color-adjust
exists.
Hear, hear!
If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.
A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.
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 propertiesbreak-before
,break-after
, andbreak-inside
when printing.
Finally!
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.
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.
Given the widespread browser support for prefers-reduced-motion
now, this approach makes a lot of sense.
This is a great talk by Hidde, looking at the history and evolution of cascading style sheets. Right up my alley!
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.
Good advice on print styles from Rachel. The browser support situation is frustrating; I suspect it’s because the people working on browsers would rather get stuck in on shinier stuff.
I think Chris is on to something here when he identifies one of the biggest issues with CSS growing out of control:
The developers are afraid of the CSS.
A great piece from Danielle on the different mental models needed for different languages. When someone describes a language—like CSS—as “broken”, it may well be that there’s a mismatch in mental models.
CSS isn’t a programming language. It’s a stylesheet language. We shouldn’t expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.
I believe that this mismatch of expectation is what has led to the current explosion of CSS-in-JS solutions. Confronted with a language that seems arbitrary and illogical, and having spent little or no time exposed to the landscape, developers dismiss CSS as ‘broken’ and use systems that either sweep it under the rug, or attempt to force it into alignment with the landscape of a programming language — often sacrificing some of the most powerful features of CSS.
I had a chat with Toby Osbourn over Skype. He’s writing a book all about print stylesheets so that’s we talked about.
It’s fascinating to look back at this early proposal for CSS from 1994 and see what the syntax might have been:
A one-statement style sheet that sets the font size of the h1 element:
h1.font.size = 24pt 100%
The percentage at the end of the line indicates what degree of influence that is requested (here 100%).
Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
David gives a quick rundown of some of the selectors we can expect to see in CSS4.
This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.
A CSS gallery with a difference. This one highlights sites with good print stylesheets.
Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.
Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.