Scoped CSS

Posted on May 17, 2013 in Blog, HTML5 | 0 comments

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:

<!doctype html>
   <h1>An h1, styled according to the browser defaults</h1>
      <style scoped>
      h1 {
         color: red;
      <h1>A style-scoped h1. Holy crap it's red!</h1>

If you’re running FF21 you can see an example here:

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 to keep up to date:

Read More

Canvas spinner script fork

Posted on Dec 28, 2012 in Code, HTML5, JavaScript, Open Source Projects | 0 comments

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!

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.

You can download it from github here:

Read More

Simple Responsive Design Test Page – bookmarklet

Posted on Jan 28, 2012 in HTML5 | 4 comments

@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:

Great idea. Here’s a bookmarklet version of the same code that lets you use it on any webpage:

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.

Read More