“CSS is the weakest link in the web developers toolbox. The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block.”Chris Eppstein, the author of Compass writes up a solid argument for the need of abstraction in stylesheets. I’ve been toying around with Compass and the Sass language over the past few weeks and things look very promising.
Firescope is a free Firefox add-on from Sitepoint that puts a Reference tab into Firebug. This tab gives an overview of the level of browser support for a selected element and any styles applied to it, plus a link to more information on Sitepoint about elements and attributes. Looks very handy for troubleshooting… Download took about 3 seconds, plus a re-start of Firefox.
case study
Hot and graceful jQuery dropcaps
Dropcaps are a staple of magazine and newspaper design, but aren’t always the easiest to implement on the web. Using this little jQuery and CSS tutorial, you can easily add hot little dropcaps to your web articles without bothering your developers. This method will also let you sleep at night knowing your caps will degrade gracefully, displaying just fine in browsers without CSS or JavaScript enabled.
Please note, this tutorial is for those who are familiar with jQuery and CSS. No basics taught here. Also nerd alert.
case study
The Accessibility Checklist
I Vowed I’d Never Write
Update: The below checklist is now available in German.
I have said on numerous occasions that there is no simple checklist that, when followed, will give you an accessible site without fail. There are simply too many variables. But, what do you do when you want to create accessible pages and you have dozens or even hundreds of developers who (like most of their peers) have little to no experience with accessibility? What do you do when it just simply isn’t practical to have someone review all of your pages? In short, how do you insure that a very large organization creates pages that can be accessed by the largest audience possible without drastically increasing your budget? This is one of the questions we have been (and continue to) struggle with.
The wbr tag saved my bacon today when a long email address was breaking a narrow column layout. This looks like another HTML tag I hadn’t ever used, but probably should have. I looked all around for a non-java-script CSS solution, but this little non-validating tag was the best I could do. See the linked Quirksmode article for a nice discussion of the “incompatibility soup” of solutions to this problem.
And a companion SEOmoz link: 5 HTML elements you probably never use, but perhaps should . (Note that with both of these the author and commenters do not suggest indiscriminate adoption; test it, test it, test it. But some cool stuff to explore nonetheless. Do check the comments by the way—lots of additional goodies, tips, and warnings there.)
Why once wrote about the travesty of the textarea. Let us revisit this, and reflect that in 4 years things have not improved much.
For you CSS junkies, you may find this article very handy.
A tip from Gilbert: when designing forms with horizontal labels in a liquid layout, prevent your required *’s from wrapping by placing a (instead of a normal space) between the word and star, like this:
Bulletproof HTML: 37 Steps to Perfect Markup
This is a great article for not only seasoned veterans to refresh and remember why we code the way we do, but for novices as well, just a great resource on the very fundamentals of HTML