Tags: stylesheet

21

sparkline

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

There are maps for these territories | Clearleft

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

Jeremy Keith Interview

I had a chat with Toby Osbourn over Skype. He’s writing a book all about print stylesheets so that’s we talked about.

Monday, April 3rd, 2017

Cascading HTML Style Sheets — A Proposal

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

Base64 Encoding & Performance, Part 1: What’s Up with Base64?

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

Abstract Sequential - Print Styles Are Responsive Design

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

Structuring a Responsive Stylesheet | Sparkbox

Some thoughts on structuring your CSS for responsive designs.

Saturday, October 29th, 2011

What’s slated for CSS4 Selectors? - destroy/dstorey

David gives a quick rundown of some of the selectors we can expect to see in CSS4.

Thursday, January 7th, 2010

PrimerCSS

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

printFancy, a gallery of websites in print

A CSS gallery with a difference. This one highlights sites with good print stylesheets.

Thursday, July 9th, 2009

SlickMap CSS — A Visual Sitemapping Tool for Web Developers

A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.

Sunday, March 29th, 2009

Kai Chan Vong - script snippets

Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.

Thursday, March 5th, 2009

as days pass by, by Stuart Langridge — A WAI-ARIA “stylesheet”

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

Helvetireader

Jon's helvetican theme for Google Reader.

Thursday, December 6th, 2007

Vitamin Features » Creating Sexy Stylesheets

Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.

Sunday, April 29th, 2007

110am. A Seasonal Design

Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.

Tuesday, April 25th, 2006

Print stylesheets

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.

For instance, the situation with the DOM Scripting site was brought home to me when I received this message from Adam Messinger:

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.

DOM Scripting blog on screen DOM Scripting blog in print

I did much the same for Jessica’s site, WordRidden.

WordRidden on screen WordRidden in print

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.

Principia Gastronomica on screen Principia Gastronomica in print

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:

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.

For a detailed anatomy of a print stylesheet, be sure to read the latest in Mark’s Five Simple Steps to Typesetting on the web series: Printing the web.

Wednesday, April 5th, 2006

Naked

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.

The man responsible for this CSS nakedness is Dustin Diaz, himself no stranger to nudity.

I had a pleasant chat with Dustin yesterday which forms the basis for the latest episode of his podcast. It was fun for me. I don’t know how much fun it’ll be to listen back to. I ramble on about JavaScript, comments, food blogging and George Clooney. Listen for yourself.

Wednesday, January 11th, 2006

iIR: img Image Replacement

Aaron uses image replacement on an image to provide one image for screen and another print. Very clever.

Sunday, April 3rd, 2005

7 steps to better handheld browsing

Simon has some good hands-on suggestions for mobile stylesheets.