This is a dumb question, but does HTML5 support true cross-browser compatibility? Or, I should say, is it browser-agnostic? I kinda thought the latest versions of the major browsers were all converging on the same standards anyway, so I tried doing a simple layout with absolutely no browser-specific elements. Here’s what it looked like in some different browsers.
UPDATE: I put the site back online at http://bigmath.herokuapp.com/ for folks to look at. If I had, ahem, known I’d be making this public, I’d have cleaned it up more, but this is the state it was in when I took the screenshots.
Firefox 8
Chrome
IE 9
Opera 11.5
The numbers should really all be the same for comparison, but still, you get the idea. I don’t do much front-end design at all, and my html and css here are childishly simple. So is there a way to HTML5-ify them to get this mess straightened out?
I googled “HTML5 layout” and the first few results promise better cross-browser support with HTML5, but include parallel ‘moz’ and ‘webkit’ CSS elements, as well as huge swaths of IE-specific junk. I didn’t even bother checking out earlier versions of these browsers or mobile browsers.
There’s a wiki page on HTML5 for different browser engines, and it makes me think there’s not a simple HTML5 solution for all browsers out there. Or at least if there is, it’s well-hidden from front-end noobs like me.
A lot of articles and tutorials claim that HTML5 is great for multiple browsers, but then set forth the principle of ‘progressive enhancement’ or ‘graceful degradation’, which is the idea that it’s fine for different browsers to display the same website differently with it possibly looking much worse on some than others. This smells a little like a rationalization.
I have done a little GUI work in flex (Adobe’s SDK for the Flash Player) and I have to say, you do not encounter the concept of ‘graceful degradation’ when you write your UI with flex. For the most part, you don’t worry about browsers at all (except for things like ssl and tab behavior).
Now, I don’t want to be on the wrong side of history or put myself in the path of the pitchfork-wielding mob seeking to occupy flash. Flash is proprietary, has never been stable enough on macs or linux, and uses a plugin architecture that has always been problematic, so I’m okay to see it go if there’s a better alternative.
Instead of a plugin architecture, I guess you just rely on repetitive CSS and a toolkit architecture when you use HTML5/CSS3/javascript. Do most shops just use tools like jQuery and Sencha instead of raw javascript? It reminds me a little of all the java frameworks and design patterns that sprouted up to deal with its underlying deficiencies. It can work fine, but it doesn’t leave you feeling like the technology underneath is very solid or well thought out.
And we’re talking about HTML5 here- the One True Standard to Rule Them All. HTML5 has been marketed and hyped as heavily as any new technology I can think of. I thought writing a simple, horizontally-centered equation would be like pressing the easy button. For all the HTML5 headlines I’ve had to wade through, I want it to not just be possible to make consistent sites, but totally simple. It should be hard NOT to write a browser-agnostic site.
Surely I don’t have to write parallel pieces of my site for different browsers and even then have to accept differences, right? Do people just accept that, even with a technology so new its spec isn’t even done yet? Has everyone drunk the ‘graceful degradation’ kool-aid?
Not to mention the fact that there’s no agreement on the HTML5 video format; or that WebGL, which provides some of the cooler Flash alternative examples people display, is not accepted by Microsoft; or that Google has put forward a javascript replacement, Dart, that may wind up being their preferred platform. This doesn’t really feel like a triumphant, unified new world of web development…
When people say HTML5 is the future, I believe them. Only, it looks like the future that Joe Hewitt warned about. There is no single care-taker, and the big players are just pushing and pulling the web to their best advantage. That’s not exactly news, but given the hopes attached to HTML5, it’s a bit more disappointing than usual.
Progressive enhancement/graceful degradation are not a rationalization. It’s about providing functionality to those with older browsers, to those with visual impairment, to those browsing on simpler devices, to those browsing with limited bandwidth or to those who simply prefer to turn off javascript for security or performance reasons.
Those all make sense, but I also see people justifying different displays in brand-new browsers, especially IE, without any particular limitations.
I don’t know what markup you wrote there, but that stuff should be absolute fine and the same in multiple browsers, with the simplest of common markup and no browser specific css.
Maybe you’re doing it wrong?
Yes, I definitely could be doing something wrong, but my point is how can it be so different with the same code? Shouldn’t the same elements look the same without any worrying about different displays? Sorry I didn’t leave the code up but I did use display:block on some spans, which IE apparently doesn’t like.
Please post your code.
I put the original site back online at http://bigmath.herokuapp.com/ and you can view the source.
Good article. But can you post a link to the HTML5 code so that everyone can see what you’re doing? Perhaps there may be some tips that someone can share to solve your problem.
Yes, I should have left it up. I’ll try to get it back in shape.
I put the site back online so folks can view the behavior and see the source if the want.
“This is a dumb question, but does HTML5 support true cross-browser compatibility? Or, I should say, is it browser-agnostic?”
=> It is not a dumb question, it is misplaced.
HTML5 is nothing but a set of standards. It does not support anything and it is not browser agnostic. At best, it’s implementation agnostic.
The question should rather be “do all browsers support HTML5 the same way?”. And it is wrong to consider HTML5 as a monolithic thing. Some browsers support some parts, other support other parts. Most agree on most parts.
Also, the HTML5 standard work has mostly been about reverse-engineering what already happened in web browser and standardize it to document it and make sure there is a reference other browsers can refer to. So, in a way, the HTML5 standard cannot be really considered as “browser-agnostic”. About this last point, I highly recommend to watch http://www.vimeo.com/19099716
“I googled “HTML5 layout””
=> This is quite strange. HTML is a standard for formatting data. It is not supposed to deal with layout. In HTML, there is content and formatting; CSS takes care of the ayout. And CSS is not part of HTML or HTML5. Not even CSS3.
“but include parallel ‘moz’ and ‘webkit’ CSS elements, as well as huge swaths of IE-specific junk.”
=> vendor prefixes has been included in browsers so that they could experiment with features without forcing names for properties that everyone would have to copy. When a specification is finished (it takes years), browser remove the prefixes. Meanwhile, it is up to developers to take the risk to use these features or not.
IE-specific things are here to support old versions of IE. Those which often do not have new features but which have big enough market share so that developers need to care about them (and try to provide the same experience than browsers which have the new features.)
“it makes me think there’s not a simple HTML5 solution for all browsers out there.”
=> And let’s be completely honest here, there will never be. These technologies are massive and are complicated. There will always be browser bugs, differences in degree of implementations, so we’ll have to cope with differences ourselves.
“‘progressive enhancement’ or ‘graceful degradation’, ”
=> These are unrelated. They are good development practices that should have been applied even before everyone talked about HTML5.
About Flash
=> It works quite well, automatically updates, provides a uniform development platform. If that’s what makes your job easier, use it. There is nothing wrong.
Using HTML/CSS/JS for things that work uniformly and Flash for things that don’t is a good compromise.
“Do most shops just use tools like jQuery and Sencha instead of raw javascript? It reminds me a little of all the java frameworks and design patterns that sprouted up to deal with its underlying deficiencies. It can work fine, but it doesn’t leave you feeling like the technology underneath is very solid or well thought out.”
=> The comparison is a bit biased. Java has mostly one implementation. Framework are here to compensate bad technology design.
jQuery tries to provide a uniform development platform that runs under 10 or 12 different implementations. The goal is different.
The second jQuery job is to provide a good interface (unlike the DOM). Standards bodies are aware of it and revising the DOM with DOM4: http://www.w3.org/TR/domcore/ (browsers are implementing slowly).
“And we’re talking about HTML5 here- the One True Standard to Rule Them All. HTML5 has been marketed and hyped as heavily as any new technology I can think of.”
=> And it was wrong. HTML5 is marketing bullshit for the marketing part and a great ground work for the technical and “political” part.
“Do people just accept that, even with a technology so new its spec isn’t even done yet?”
=> It is actually worse than that. The real editor of HTML5 is not from W3C but from the WHATWG which has decided that the HTML5 spec would stopped being called “HTML5″ but rather “HTML living specification”. The point is that is the spec is so massive that there is no way it is going to be finalized in the forseeable future, so it’s worth not pretending otherwise and accept to make changes when necessary. In 5/10 years, when the technologies and implementations will have made the landscape more flat and stable, it is likely that the spec will be considered for actual standardization.
“Not to mention the fact that there’s no agreement on the HTML5 video format;”
=> And there won’t be. But things like the source element make life easier.
“that Google has put forward a javascript replacement, Dart, that may wind up being their preferred platform.”
=> As a side note, this is completely unrelated to HTML5.
Dart is unpopular in the JS community. And even if it wasn’t, people will write JavaScript anyways, so they can’t stop supporting JavaScript. They actually still invest a lot in it.
“This doesn’t really feel like a triumphant, unified new world of web development…”
=> Those who promise that are liars. HTML5 in 2011 (well, 2012 will be the same and it’s going to continue for some time) is not unified and people need to write websites that work on old versions of IE.
The first thing anyone should accept up front regarding HTML5 and the web platform is that uniformity doesn’t exist. We all hope for it, but it is not there. We need to accept it and start working once this fact is accepted.
Thanks for your comments. One note- I used the term ‘HTML5′ as a short-hand for ‘HTML5 and all the specs and tools that usually go with it, including CSS3, javascript, etc.’. This is lazy of me, but rightly or wrongly, the term has come to signify much more than just its spec.
Also, looking at your code. You need to specify the correct doctype for it to be considered an HTML5 page. And I don’t know why you use nested span and add display block. You can better just do nested div, which already are by default “display:block”. You might wanna checkout simpler code here which does work accross all browsers. http://jsfiddle.net/ChedA/
I looked for an html5/css3 solution but didn’t find any. In particular, it seemed like css3 would have some good stuff, but IE 9 does not implement a lot of css3. My final code did end up pretty convoluted as I found and tried to handle different cases. Thanks for your code sample. It’s clearly better than mine, but I still see some oddities come up. If the lower number has two digits, IE shows the operator on its on line, rather than beside the lower number. And if you expand the possible numbers to include ones with three or more digits, the text alignment in Chrome and Firefox is thrown off. Or if you add two numbers with two digits that add up to an answer with three, Chrome and Firefox also put the operator on a separate line, and the answer field is too small with the text stretching further to the right instead of the left.
I made the width of the divs to be 170xp. If you make these bigger, I think you will not have these problems
But if you have a fixed width on the equation, the horizontal alignment doesn’t look correct for all different numbers. For example, if you set the width really large to accommodate big numbers, an equation with only single-digit numbers appears way off to the right.