Discuss: Taking Advantage of HTML5 and CSS3 with Modernizr
by Faruk Ateş
- Editorial Comments
2 FoUC
Is it just me or is anyone else seeing the page flash every time it loads? Kind of annoying no?
posted at 11:28 am on June 22, 2010 by catchmyfame
3 Aside: font choice
I hate to be the one to say this, but I do take issue with the font choice. “Beautiful ES” looks, smells, walks and talks like a vector-for-vector rip of Bickham Script, a typeface that isn’t free.
This is not uncommon on Fontsquirrel, sadly, and it does not improve the state of web fonts if piracy (or at least blatant copying) is condoned by the sites that help fuel the movement. I also realise this is not the right podium, perhaps, but it is a matter that will become more and more relevant as people optimise their typefaces for the screen.
I’m not faulting you, Faruk. I love this article. Especially the part about the @font-face rule, to set a different font size depending on the ability to show a different font. It’s supremely useful. In light of such generous qualities, using a rip-off is a blemish I think it could do without.
(Reasons I think it’s a rip-off: vectors are one-for-one overlay-checked rips; if you have the implied drawing skills to make this TrueType font work, how come the metrics are so horribly off? It doesn’t compute. It’s a rip.)
posted at 11:31 am on June 22, 2010 by Rob Mientjes
4
@*comet*: I’m happy to hear that! This is precisely the goal of Modernizr, to make starting with HTML5 and CSS3 more tenable.
*catchmyfame*: what page are you talking about, the article or one of the sample pages? If you mean the sample page with the font-face inclusion, that could well be because the browser loads fonts asynchronously and thus may start rendering the page and change it once the font is loaded. It’s not ideal, but browsers have opted this mechanic to prevent pages from feeling like they load really slowly, hanging on a font to download first.
@*Rob*: I didn’t know that, and that is a shame. I merely picked “Beautiful ES” because it is both a unique typeface with no comparable equivalent that comes pre-installed on people’s systems, and because it’s such a size distortion (needing a very different font-size setting to appear similar in size to fallback fonts).
It is indeed unhelpful with this being commonplace (on Fontsquirrel or just the web itself), but unless there’s an easy way for people to know or find out about these things, it’s hard to combat. I’m no type aficionado (I appreciate good type design, but I don’t have a vast knowledge of it), and so I wasn’t aware that “Beautiful ES” was a rip. That is unfortunate.
Note to future commentators:
Some small notes on the Modernizr use in this article: it is limited to introducing the basics of fine-grained control over the look & feel of a website, and examples were kept rudimentary and clean for simplicity’s sake. For a more robust and complete font-face implementation method, I recommend you read "Bulletproof font-face syntax”:http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ by Paul Irish, who is also the biggest contributor to Modernizr these days.
Modernizr is also particularly useful for handling fallbacks to HTML5 features in JavaScript, but the scope of the article just couldn’t support going into depth on that at all. Perhaps that part will be an article of its own one day.
posted at 11:55 am on June 22, 2010 by Faruk Ateş
5 for IE
I guess Internet Explorer is our adopted child.
But the example is not working for IE (I’ve tried on 6, 7 and 8)
And @font thing is fully supported in IE since version 4!
So… modernizr isn’t such a good library, and we, as front end developers, have still some work to do :)
posted at 12:51 pm on June 22, 2010 by tomasdev
6 If any modern browser doesn't support a feature th
It’s as simple as that. My customers can’t afford to pay me to fix browser incompatibilities. They all support tables … so tables it is. When they all support CSS columns, then I’ll use them.
I’m not a designer … can you tell? I’m a developer who’s interested in functionality with merely adequate aesthetics. My customers hire me to create complex back-end workflow solutions. If they want pretty too then we have to hire the pretty.
But I keep reading these articles and hoping things will improve. When I can create equal height columns in CSS simply (meaning no floats and huge negative margins hacks) then I’ll stop using tables and start using CSS for this.
Peace,
Rob:-]
posted at 01:53 pm on June 22, 2010 by RobShaver
7 Font not working in IE
To tomasdev: the custom font not working in Internet Explorer is correct; the examples have been kept super simple to keep the complexity of the article down. As such, the example code used to do the font excludes an .eot font, thus it won’t work in IE.
Read the aforelinked “Bulletproof font-face syntax”:http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ to get the full details on working with fonts and full cross-browser compatibility. It’s an article all by itself!
To RobShaver: well, you can use CSS columns now. IE doesn’t support them, but the latest Firefox does, so do Chrome and Webkit (and latest Opera if you care about that). Using tables for layout is hurting not just yourself but also your customers, though, so if you’re more a back-end guy perhaps what they need is to pay at least enough for you to work with a front-end developer.
posted at 04:02 pm on June 22, 2010 by Faruk Ateş
8 I love a list apart
Once again, another excellent article. Also, I have been watching and waiting on Modernizr for a while waiting specifically for SVG detection support. So, to find a new article on my favorite magazine talking specifically about Modernizr along with news about version 1.5? I could not be more delighted.
For my own personal projects I have become obsessed with HTML5, CSS3 and using them in conjunction with progressive enhancement. I’ve been daydreaming about how awesome SVG implementation could be if I could control it with something like Modernizr. So, thank you for this article!
On an aside, your example page causes Mac IE5 to crash. Not that I support it or expect others to do so but just fyi.
Cheers!
posted at 06:53 pm on June 22, 2010 by Ritz
9 Mac IE5 crash?
To Ritz: which example page in particular causes the crash? Because as much as we doubt many people in the world at all are still supporting IE5/Mac, making it crash is perhaps worth investigating.
posted at 08:24 pm on June 22, 2010 by Faruk Ateş
10 I'm convinced
As everyone else has said, what a great article – this looks like a really useful way of getting all these HTML5+ features onto our sites with minimum pain. Thanks.
A tangential note: Chrome’s aliasing on transformed images is just plain ugly, but nicely anti-aliased on Firefox. Also, the first time I loaded the sample page on Firefox it was rendering as if it didn’t have @font-face, even though it showed up in the list of features. A quick F5 fixed that though.
posted at 09:02 am on June 23, 2010 by skilldrick
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 excellent article
This is a wonderful article. It has excited me greatly to jump on the HTML5 bandwagon. I’ve been hesitant with wanting to start using HTML5 and CSS3 for this exact reason. I don’t like having to play with CSS hacks and alternate stylesheets for detecting what kind of a browser the person is using. This will save a lot of hassle and using the term “gracefully degrading” is spot on. Thanks so much for the post.
posted at 10:36 am on June 22, 2010 by comet