CSS has always been the weakest link for me in terms of creating larger web apps. PHP, JS? Now manageable. But over the years, CSS has remained the most stubborn language to structure well. You can have dozens of CSS files, but any line in any one of them can affect any element in any page. The horror. It seems like no matter what decisions you make on how to organize the CSS, you end up running into problems. I think the relative absence of CSS design patterns relative to other languages hints at the problem – it’s just not something that developers have been able to properly address, due to the limitations of the language itself.

(On a related note, thank heavens for CSS pre-parsers).

This is why I’m so excited about the new scoped HTML5 attribute for the style tag, which just landed in Firefox 21 (out now!). It lets you scope your CSS based on the location in the DOM. Here’s a simple example:

If you’re running FF21 you can see an example here:
http://www.benjaminkeen.com/experiments/scoped.html

There’s still a long way to go, but this is tremendously encouraging. I have little doubt that Web Component shim developers (Polymer, anyone?) will be making use of this new feature in no time.

Hopefully the other browser vendors will implement this soon. As always, see caniuse.com to keep up to date:
http://caniuse.com/style-scoped

I came across this marvellous little script yesterday by Nick Stakenburg which creates a loading icon spinner using Canvas, letting you avoid having to use animated gifs. Very nice!
http://projects.nickstakenburg.com/spinners/

It was almost perfect for my needs, except I needed a few small tweaks. So here’s my fork of the script, with fadeOutSpeed, pauseColor and pauseOpacity options.
http://www.benjaminkeen.com/experiments/spinners/gui/

You can download it from github here:
https://github.com/benkeen/spinners

@lensco made an excellent post a couple of days ago that showed off a simple, but elegant responsive design test page that loads the same content into multiple iframes for easy viewing. See:
http://bricss.net/post/16538278376/simple-responsive-design-test-page?e8b52b40

Great idea. Here’s a bookmarklet version of the same code that lets you use it on any webpage:
http://benjaminkeen.com/misc/bricss/

EDIT: I got stuck waiting for a flight today, so I update the script to add a little JS goodness. Now it lets you specify which viewport sizes you’re interested in (or supply your own dimensions), and generate a custom bookmarklet. Neat.

This was something I wanted to work on since starting Form Tools, many many years ago. Great to see it finally out there!


Check it out.

- Ben

http://www.benjaminkeen.com/misc/canvas.html
http://www.benjaminkeen.com/misc/canvas_swirly.html

I’m finally getting around to adding support for the new HTML5 data types to my Form Tools script. Here’s a few handy resources I’ve come across on the subject:

• http://diveintohtml5.org/forms.html
• http://www.456bereastreet.com/archive/201004/html5_input_types/
• http://miketaylr.com/code/input-type-attr.html