Handling colons in ID names in Magento

For some reason, Magento uses colons inside the ID names of some elements in the checkout:

Prototype handles this fine, but if you want to use the ID as a selector in your stylesheet, or perform some action on it using jQuery, it causes problems. You must use escape methods of different kinds.

In CSS files, you could escape the colon with a backslash, and that would work in most browsers. To support IE7 and below though, it is necessary to use the hexadecimal code for a colon, which is /3A:

If jQuery’s your thing, escape with two backslashes:

Not exactly the most elegant solutions. Particularly the CSS one, as it makes for a selector that is unnatural and difficult to read, but c’est la vie.

Why I switched from Firefox’s Firebug to Chrome’s Developer Tools

For a very long time I used Firefox as my primary development browser because of the excellent add-on, Firebug. There is no denying that Firebug has long been an essential component in a web developer’s toolkit. It’s kind of like a mobile phone – once you’ve used it for a while, it becomes hard to envisage how you managed before it.

More recently though, I have started to instead use the Developer Tools built into Chrome (they are very largely derived from WebKit’s, and as such most of them are also available in Chromium and Safari). I like Firefox and Mozilla’s open-source philosophy but I have to admit that I think Chrome now beats it hands-down in regard to developer tools as well as load speed, memory footprint and overall aesthetics.

Here are some things about Chrome Developer Tools that I like:

(more…)