After I wrote Fizzler in a burst of development enthusiasm a few months back, it’s been sat on Google Code – a solution in need of a problem to solve. That is until Colin Eberhardt emailed me to report a bug in the selector engine, and to talk a bit about the way he was using Fizzler when working with WPF. This was totally outside the domain I’d anticipated Fizzler being use in, and Colin E has now revealed his project in full. By wrapping part of Fizzler in a few interfaces, thus abstracting it away from HTML and towards a more general purpose solution, he was able to use it to query a XAML UI definition and apply style declarations. CSS selectors for WPF!
This is an amazing use case for a library which I hope will start to see more use in the future. Thanks to Colin E for letting me know about the work which Scottlogic are doing with Fizzler.
Over the past few weeks I’ve been throwing this together in my full time – a class library to pull HTML nodes from a page using a CSS selector. hpricot for Ruby would be a good comparison. It uses the HTML Agility Pack behind the scenes, to clean up the source document, and provide means of reading the document nodes.
I’ve got a limited suite of unit tests which document the current level of support, most CSS 2.1 stuff is in there, and a couple of CSS 3 ones. The unit tests are partially pinched from jQuery’s selector engine unit tests, so thank you to the jQuery team.
It works like this:
SelectorEngine engine = new SelectorEngine(htmlString);
IList nodes = engine.Parse("#p>a"); Pretty simple stuff. There are no binaries yet, as I consider it alpha-quality, but you can check it out over at Google Code. Contributions would be appreciated.
I’m quite partial to doing something like this in my CSS:
input { border: 1px solid #ccc; }That’ll give every textfield a single pixel border. The trouble with that is we’ll also get one on every radio button and checkbox too, which looks rubbish. Even though IE7 has been out for ages, I’d never really bothered to absorb what CSS features it provides. Lowest common denominator is still important in web applications, with IE6 having a statistically significant portion of the market. However, the news that a current project doesn’t have to support IE6 led me to trying out this CSS:
input[type="text"] { border: 1px solid #ccc; }The attribute selector is mostly supported in IE7 and it allows me to restrict my borders to specific input types! Huzzah!
Blueprint is a “CSS framework, which aims to cut down on your CSS development time”, and is similar to the YUI Grid project which had a lot of coverage last year. It’s kicking up a bit of a fuss because it requires you to use particular CSS class names within your HTML, in order to get a particular layout for your page.
Surely the conclusion to draw from this is that Blueprint isn’t really a CSS framework, but it’s an augmentation for HTML? You don’t actually have to get involved with CSS at all to use Blueprint, instead relying on marking up your HTML to fit your design…
For ages, I’d style my forms up using a container div to wrap each item within the form. It always seemed a bit wasteful, so I’ve been trying out an alternative.
Yahoo have updated their excellent pattern and library resource with a couple of interesting things (css reset, hierarchical menus, css fonts), but the one I’m going to mention is CSS Grids. This is a CSS file which, when you give your HTML the correct structure, will give you a robust two column layout. Separated into inner and outer templates, the outer providing the columnar structure and the inner being a grid within the content column of the outer template. Here’s a good example of the CSS Grid idea – the secondary column is a sidebar, and the main content column contains a grid of four other columns.
The strength of this release is that it will be consistant – the CSS will be rock solid. It’s a good jump-off point for developers to produce robust layouts, letting them concentrate on the finer points.
PPK shows us the way on styling tables with CSS, which is quite a pain in the ass if you ask me.
Use the button element rather than a button class. So obvious!
The comments to Simon’s “Maintainability, a.k.a. the CSS elephant” have thrown up a couple of interesting items so far. Glazman pimps Cascades2 for Nvu, which allows you to view the rules that apply to an element and edit them in place.
There’s also a comment from James McParlane about an experiment with CSS in XML. This is quite interesting – the nested nature of XML lends itself to describing a cascade, but I think the complexity of some advanced cascades could be a bit much for this idea…
CSS Techniques Roundup – 20 CSS Tips and Tricks is a nice little review of those cunning tricks we have to pull out of our collective hats occasionally.
Shame that the footer example is still not 100% perfect – I’m working with a nightmarish full-width + absolute positioning design at the moment and I’ve yet to find a workable footer solution.