If you’ve ever designed a page more complicated than, say, a single line of text, you’ve probably come up against a surprise or two when you loaded the page into your less-than-favorite browser and discovered some sort of weird rendering problem. Browsershots is a completely free service that lets you see what your website looks like in literally dozens of different browsers and builds. Sure, you could just install all those browsers on your computer… but this seems a little easier.
CSS Maintenance Tip: Use a Color Glossary (Garrett Dimon)
Garret Dimon offers this handy CSS tip related to comments (which I talked about earlier this week): when working on a large style sheet, document the colors you’re using at the top of the CSS file with a comment tag. I don’t know how many times I’ve had to scroll through hundreds of lines of code to find the color I set on some obscure class. CSSnewbie reader Justin also mentioned this idea in the comments of the comment post — great minds think alike.
HTML playground is a fantastic learn-by-example reference guide for both HTML and CSS properties. The website is divided into three primary panes: in the first, you select the HTML or CSS property you’d like to learn more about. Once you’ve selected a property, the second pane gives a description of the property — what it does, where it works, and so on. And the third pane shows the code in action with a real-life example.
Vdot Media – Make your website printer-friendly
Verne at Vdot Media has a good article out on print style sheets (there must be something in the air!). His article looks at the problem more from the accessibly end of the spectrum — how to swap out ink-heavy images with toner-friendly alternates, and so on. It’s worth a read if you’re serious about developing the best user-friendly print stylesheets.