Posts tagged “html”
1/22 Please don’t X-UA-Compatible me like that (6)
The echosphere is making quite a stink about Microsoft’s proposed X-UA-Compatible header to explicitly match HTML pages to rendering engines. There are two possible outcomes, assuming Microsoft goes ahead and implements this HTTP disaster. More likely is that we will be roughly where we are now, with special cases to make IE do what we want and other browsers just working reasonably correctly by themselves. Less likely is that the Redmond dream will be realized and every browser will become a time capsule of rendering engines ready to happily consume whatever 1997 garbage you can throw at it. Oh yeah, if you add the header to all of those ancient pages.
For maximum effect, X-UA-Compatible requires the support of the other browser vendors, otherwise it is just another Microsoft hack with a pretty mask on (read: no regular expressions). (Aside: The ideal solution to problems like the old broken box model would have been to fix it immediately instead of six years later. I can’t help but think that X-UA-Compatible would never have been proposed had that bug not persisted for so long.) In this best-case scenario the cynic in me still sees ignorant developers either omitting this header or setting it only for IE, leaving other browsers to do … something. If the header is set for all of the major vendors (and we’ll just assume that those major vendors will still be the only major vendors down the road) then I must admit, browser bloat is the biggest concern we have. I for one don’t want my Firefox to get any bigger. Just imagine the new and exciting memory leaks!
In the (I think) more likely case of Microsoft pushing ahead with this feature alone then developers have the slight advantage of being able to code to one version of IE instead of several, in addition to Firefox/Webkit/Opera. This may prove to be useful in fixing those sites that IE7 broke. But seriously, why haven’t those already been fixed?
Ultimately, it all comes down to what browsers do if that header isn’t sent or they aren’t paying attention to it at all. It sounds like Microsoft is content to leave everything its IE7 state forever unless told otherwise but I doubt anyone else will be keene on the idea. Microsoft is a much bigger fan of backwards-compatibility than Apple (think Classic Mode) or Mozilla (each new version of Firefox breaks all of my extensions) so I expect to see these others defaulting to their cutting-edge browser unless told to retard themselves. This most-important point of the whole feature is summed up best by Jeremy Keith, “Unless you explicitly declare that you want IE8 to behave as IE8, it will behave as IE7.” I’m a desktop software developer by day and wish I could say to Windows, “Make this app work just like an out-of-the-box Windows XP installation.” I can’t because having such a ridiculous level of backwards-compatibility ultimately makes software too big and unwieldy — it hurts you in the long run. I hope, when framed in the desktop version that the insanity here shows through.
My final thought on the matter is that the best thing Microsoft can do for the future is to push IE7 out to everyone. Like pulling off band-aids, it’s best to do these things fast and deal with the consequences all together. Fixing the IE box model should not take seven years. Get it over with and move forward without the hacks.
Elsewhere:
10/22 HTML layout the XUL way (0)
Layout with HTML and CSS sucks. I was one of the people that clung to tables longer than the average bear (if bears could write PHP) because they actually work. My designerish friends guilted me into diving full-on into semantic HTML served with a hack-fest of CSS.
There’s got to be a better way.
I started this evening looking into using a XUL-style layout on a regular website. To my surprise, 35% of my visitors are on IE. WTF, really? So my first solution (follows) won’t work too well. If IE was something like 10%, I wouldn’t hesitate to screw them and go Firefox-only. 37Signals mention something about not trying to be everything to everyone to promote simplicity and I think catering to that 90% would certainly promote simple code. And since I know how a lot of JavaScript nerds feel about using non-standard HTML attributes, I had jQuery add the necessary bits after the fact.
<style type="text/css">
.hbox, .vbox {
display: -moz-box;
}
.foo {
width: 200px;
margin: 0 10px 10px 0;
padding: 10px;
background: black;
color: white;
}
hr {
margin: 0 0 10px 0;
}
</style>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.vbox').attr('orient', 'vertical');
});
</script>
But as I said, I don’t want to screw all of those IE users. So onward to a better solution, using the same nice markup:
<div class="hbox">
<div class="foo">foo</div>
<div class="vbox">
<div class="foo">asdf</div>
<div class="foo">qwerty</div>
<div class="foo">hooah</div>
</div>
<div class="foo">bar</div>
</div>
<hr />
<div class="vbox">
<div class="foo">foo</div>
<div class="hbox">
<div class="foo">asdf</div>
<div class="foo">qwerty</div>
<div class="foo">hooah</div>
</div>
<div class="foo">bar</div>
</div>
This time, a bit more must be left to JavaScript to keep the older browsers up to date. Because nesting a bunch of boxes in boxes in boxes is just going to happen (otherwise what’s the point?), I had to resort to the > CSS selector, which has less than stellar support. So jQuery to the rescue again. Here’s my current CSS/JS. Don’t have IE, so this only theoretically works there. Anyone want to verify?
<style type="text/css">
.hbox {
border: 1px solid blue;
}
.hbox > div {
float: left;
}
.hbox br {
clear: both;
}
.vbox {
border: 1px solid red;
}
.vbox > div {
float: none;
}
.foo {
width: 200px;
margin: 0 10px 10px 0;
padding: 10px;
background: black;
color: white;
}
hr {
margin: 0 0 10px 0;
}
</style>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.hbox').append('<br />');
$('.hbox > div').css({
float: 'left'
});
$('.vbox > div').css({
float: 'none'
});
});
</script>
Demo: http://rcrowley.org/work/xul.html
Update: I’m experimenting with ways to duplicate the flex="1" attribute of XUL boxes. Will post soon.