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.
Wednesday, May 2nd, 2018
Thursday, June 22nd, 2017
Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem) | CSS-Tricks
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.
Thursday, April 20th, 2017
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.
Tuesday, April 4th, 2017
Monday, April 3rd, 2017
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%).
Saturday, February 18th, 2017
Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
Thursday, March 15th, 2012
An excellent piece by Stephanie on how to approach print stylesheets. I’ve always maintained that Print First can be as valid as Mobile First in getting you to focus on what content really matters.
Wednesday, November 16th, 2011
Some thoughts on structuring your CSS for responsive designs.
Saturday, October 29th, 2011
David gives a quick rundown of some of the selectors we can expect to see in CSS4.
Thursday, January 7th, 2010
This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.
Monday, October 5th, 2009
A CSS gallery with a difference. This one highlights sites with good print stylesheets.
Thursday, July 9th, 2009
A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.
Sunday, March 29th, 2009
Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.
Thursday, March 5th, 2009
Stuart has an interesting take on ARAI attributes. Why can't they be set declaratively in an external file in the same way as we set styles?
Wednesday, November 26th, 2008
Jon's helvetican theme for Google Reader.
Thursday, December 6th, 2007
Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.
Sunday, April 29th, 2007
Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.
Tuesday, April 25th, 2006
CSS Naked Day was fun. It felt almost voyeuristic to peek under the CSS skirts of so many sites. It also made me realise that the browser default styles are what people are going to see if they decide to print out a page from many CSS-based sites.
I’ve had a rudimentary print stylesheet in place for Adactio for a while now, although I should probably revisit it and tweak it some time. But a lot of other sites that I’ve designed have been woefully lacking in print stylesheets.
Would it be possible to get a print stylesheet for the errata page that does a better job of preserving the table layout? As it is now, it’s sometimes hard to tell which page numbers match up to what errors. Just some borders on the table would help a lot.
That one made me slap my forehead. Of course! If ever there was a web page that was likely to be printed out, the errata for a printed book would be it.
As well as adding borders to the errata table, I set to work on creating a stylesheet for the whole site. It was fairly quickly and painless. I hid the navigation, let the content flow into one column, set the font sizes in points and used a minimum amount of colour.
I did much the same for Jessica’s site, WordRidden.
Principia Gastronomica was crying out for a print stylesheet. Half of the entries on that blog are recipes. Most people don’t have computer screens in their kitchens so it’s very likely that the recipes will be printed out.
A lot of the entries on Principia Gastronomica make heavy use of images. Everyone likes pictures of food, after all. I was faced with the question of whether or not to include these images in the printed versions.
In the end, I decided not to include the images. Firstly, it’s a real pain trying to ensure that the images don’t get split over two pages (
page-break-before would be a draconian and wasteful solution). Secondly, I bowed to Jessica’s wisdom and experience in this matter. She often prints out recipes from sites like Epicurious and, when she does, she wants just the facts. Also, these are pages that are likely to printed out in the home, probably on a basic inkjet printer, rather than in an office equipped with a nice laser printer.
If you’re implementing a print stylesheet for your site, I highly recommend reading Richard’s guide, The Elements of Typographic Style Applied to the Web. All the advice is good for screen styles, but is especially applicable to print.
These articles on A List Apart are also required reading:
- Improving Link Display for Print by Aaron Gustafson,
- CSS Design: Going to Print and
- ALA’s New Print Styles by Eric Meyer.
In an interview over on Vitamin, Eric makes the point that context is everything when deciding which stylesheets to serve up. Clearly, articles on a A List Apart are likely to printed out to be read, but the front page is more likely to be printed out to get a hard copy of the design.
Wednesday, April 5th, 2006
My site has no stylesheets (“how does it smell?”, etc.) but you probably won’t even notice because chances are your reading this in a feedreader.
In any case, it’s nice just to look at the flow of the document sans styles. Notice the “More information”
h2 tag that is normally hidden from view. With styles enabled, the visual layout makes this heading redundant but without styles, or for non-visual user-agents, it’s a useful marker.
Wednesday, January 11th, 2006
Aaron uses image replacement on an image to provide one image for screen and another print. Very clever.