It has been a long time since
- I Rock and Rolled
- I HTMLed
Recently, I’ve made a bit of time to pick up my Les Paul and remember how to noodle away at some of my favourite Led Zeppelin numbers (and discover I’d re-purposed a bunch of those neurons; not to mention worn away the callouses on my left hand, dammit. They’re a bit of a bloody(1) mess again.)
It wasn’t quite as bad as I feared. Still not great, but not quite as bad. Some quick thoughts.
- If you use a framework like Bootstrap, along with Modernizr then you are in pretty safe hands when it comes to layout across all semi-modern browsers from IE8 to IE10, Safari, Chrome and Firefox.
- The box model problem is more-or-less dealt with; you can get most browsers to behave the same way, despite the terrible, terrible specification and gross illogicality of the original Chrome/Firefox way of implementing it.
- The aforementioned semi-modern browsers can all manage to render transparency, including (using their own proprietary extensions) transparent gradients. (That link is to a great cross-browser gradient editor.)
- Semantic elements. It makes HTML much more readable (let alone processable) if a page contains
<header/><nav/><section/><footer/>elements, rather than a total random spattering of
- Most of the examples out in the wild are just terrible. Don’t even think about (re-)learning HTML from the web. You need a more reliable guide. But there isn’t one. So you’re going to have to do it by trial and error.
- A corollary of this is that a lot of the tricks that you learned in terms of making stuff work cross-browser just aren’t the best solution any more. Many things (fixed pixel sizes, background images etc.) are actively evil in a responsive world.
- IE7 is still out there in the wild and is a curse
- Firefox is currently the annoyingly quirky browser (odd application of negative margins, and a weird way of applying zoom, for example). This is not a downer on Firefox. Someone’s always going to be the quirky one. Historically, it was IE; Chrome was in that position about a year ago; and right now it is Firefox. With 3 major browser engines out there (Mozilla, IE and WebKit), it is not surprising that one is often out-of-line with the other two.
We’re still living in the dark ages of the developer experience.
The Debug Experience (in Visual Studio, Firebug, WebStorm or whatever) is like going back to the dark magic of debugging assembly language programs. The code-writing experience is much, much better (semi-reasonable intellisense, for instance), but even that leaves a lot to be desired.
How do people deal with this? Solutions like Less on the CSS side, and Typescript or Coffeescript on the language side offer a way forward for some of the “too-low-level” issues, but have even worse tooling support. WebStorm is improving all the time as an IDE, but is still a bit raggedy round the edges.
(1) Note, that’s actual blood, not a mild British curse word.
(2) Note, that’s a mild British curse word, not actual blood.