

Looking for HTML5 Nirvana - tborthwick
http://www.copperykeenclaws.com/looking-for-html5-nirvana/

======
Maci
Why does this get upvoted ?

If anything, all the author expresses is the disappointment of his own
expectations while not adding anything constructive.

Looking at the screenshots what he wants to achieve is perfectly doable cross
browser but as per the author admission he's not much of a front-end guy.

Shots point to here > <http://bigmath.herokuapp.com/> which is offline.

~~~
Meai
That's his point..if someone can't write and position two characters of text
and have it be cross platform easily, the HTML platform itself has failed.

I had a similar thought like the author recently. Flash could have been
awesome with a smaller runtime, 3D sooner, progressive rendering of content
(text and images getting loaded in like in the browser instead of loading
bars) Who would still use HTML? There would be no upside at all, Flash has
always had better tools.

~~~
daleharvey
Despite being one of the first true ubiquitous computing platforms, becoming
the main format of communication for the planet, HTML(s/the web) failed
because someone couldnt read a CSS tutorial?

The authors example is terrible, that is an easy layout to do crossbrowser,
HTML and CSS do have massive deficiencies in easily creating layouts, but so
do most GUI toolkits, and compared to the other factors involved in the
success of the web, fiddling around with css a little longer is a price well
worth paying, for the majority at least

~~~
watty
I agree, I have no idea why he can't center content horizontally unless he's
making a mistake.

However, those deficiencies you mentioned are only "well worth it" because
it's our only option. It's this complacent attitude that helped generate a
need for a plug-in. HTML and CSS are still tedious to use and often times
requires hacks to work in specific browsers. Why? We shouldn't need a mess of
frameworks on top of frameworks to fix these "massive deficiencies", it's
simply not good enough.

~~~
bgarbiak
I deal with HTML and CSS everyday so I'm probably biased but for me all these
cross-browser compatibility problems related to rendering stuff are grossly
exaggerated. Aside from IE6 (which, I believe, _should_ not be supported
anymore) supporting everything else is relatively easy. IE7 usually needs a
couple of "zoom: 100%" here and there; IE8 handles CSS2 quite nicely (it
passed Acid 2 after all); IE9 is on the same level as Firefox 3.6 - which is
quite great. CSS3 stuff is a bit tricky sometimes, especially if you're going
for a pixel-perfect cross-browser compatibility. However, it's hard to expect
that older browsers would support technology from the future. Flash 8 don't
support Flash 11 features either. Still, in browsers the new stuff could be
quite easily 'emulated' with filters, JS or ready-made solutions (PIE CSS),
etc.

Latest Firefox, Opera, Safari, Chrome and IE10 - the bunch that supports both
HTML5 and CSS3 from the start - are totally painless. That's the "HTML5
nirvana", IMHO. To be honest, breaking the compatibility between these the way
the author did is quite an achievement - I really would like to see his code.
Probably a quick and simple CSS Reset would solve these issues. Author's
mistake is more probable though.

------
CWIZO
He should really include a link to a "demo", so we can see what exactly he is
doing there.

~~~
AshleysBrain
Agreed, it might not be standards compliant HTML in which case it's not the
browser's fault.

------
tborthwick
I agree I should have left a demo up- I had decided I should just start over
so I took some screenshots for reference then scraped it. Later as an after-
thought, I decided to write it up. I didn't really expect this much interest-
I'll try to get it back up tonight.

The exercise was a little more than straight-up horizontal centering. It was
to take two numbers randomly generated with possibly different number of
digits, center them together along with an operator as a block, but right-
align the text within. Also a text input field was put below. The line above
the input field is just a simple border.

For reference, the CSS tutorial I looked at was
[http://www.noobcube.com/tutorials/html-css/horizontal-and-
ve...](http://www.noobcube.com/tutorials/html-css/horizontal-and-vertical-
centering-using-css-a-beginners-guide-/), but I didn't add the IE elements
because I thought it was only necessary for IE 6 and 7, not 9.

So the horizonal alignment problem in IE is probably because I used
display:block. But why don't the numbers line up the same in chrome and
firefox? What's up with the field border being all over the place? My point is
not that I know html and css well, which I clearly don't, or that this stuff
is impossible. It's that even with the latest browsers and techniques, it's
still easy to get very different displays. I just didn't expect that, given
the huge hype surrounding html5 and css3.

~~~
bgarbiak
The tutorial you've mentioned overcomplicate things a bit and uses tables for
layout, which is a total no-go. However, even as a regular HTML5 defender I
have to admit centering stuff in HTML/CSS in not exactly a trivial task. It's
not very tough either, just not something that most of the 'newcomers' could
solve in a minute. You can look up my solution here:
<http://garbiak.com/demos/hn/>

Without seeing your code it's hard to tell what exactly gone wrong, however
such huge level of browser inconsistency is indeed worrisome. Never believed
HTML5 would solve these kind of issues completely but the differences
shouldn't be that huge.

------
tzury
Dear Author ( Author == OP in this case),

Can you please share markup/css you were using?

~~~
tborthwick
I put the site back online at <http://bigmath.herokuapp.com/>.

------
tborthwick
The site is back online at <http://bigmath.herokuapp.com/>.

------
rplnt
> does HTML5 support true cross-browser compatibility?

Well, as the HTML5 specification is not complete yet... the answer is quite
obvious: No.

