Rethinking the “How To Serve IE-Specific CSS” Question

Posted on by Rob Larsen

This is my old pattern:

<!DOCTYPE html>
  <html lang="en-US">
	<title>Internet Exploder</title>
        <link rel="stylesheet" href="/_assets/styles/styles.css" />

	<!--[if gte IE 5.5]>  	
		<![if lt IE 7]>  		
			<link rel="stylesheet" href="/_assets/styles/ie6.css" />
	  	<![endif]>
	  	<![if IE 7]>
	  		<link rel="stylesheet" href="/_assets/styles/ie7.css" />
	  	<![endif]>
      <![if gt IE 7]>
			<link rel="stylesheet" href="/_assets/styles/ie8.css" />
	  	<![endif]>
  	<![endif]-->
</head>
<body id="home">

Simple. It serves a new style sheet to various versions of IE as needed. The bad thing is the extra HTTP request added onto the Microsoft browsers. I’m not even there yet, but during one of my interviews for the new gig an alternative was suggested- using conditional comments to append a different class to the html element and letting the cascade sort it out.

I liked that idea.
Continue reading “Rethinking the “How To Serve IE-Specific CSS” Question” →

Recent Reading (30 Style Tags?, YUI 3, GodMode, Git, Jira)

Posted on by Rob Larsen

Once again rounding up some of the articles I’ve read over the past couple of weeks.

All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer
I wasn’t surprised to see this came up as an issue in the Drupal community. During my short time working with Drupal, I was horrified by the number of style sheets/JavaScript files included in the page. I don’t think we ever got to 30, but 10-15 was scary enough. Apparently, there’s a “performance” mode which clears that up, but I never made it that far…

Inheritance Patterns in YUI 3
I’m really interested in getting to know YUI3 and inheritance patterns in JavaScript are interesting to me in any form, so this article by Stoyan Stefanov was a must read.
Continue reading “Recent Reading (30 Style Tags?, YUI 3, GodMode, Git, Jira)” →

In Case You Missed It…

Posted on by Rob Larsen

Mark Pilgrim published his chapter on the new HTML5 form input types:

A Form of Madness

Everybody knows about web forms, right? Make a <form>, a few <input type=”text”> elements, maybe an <input type=”password”>, finish it off with an <input type=”submit”> button, and you’re done.

You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. And when I say “use,” I mean you can use them right now — without any shims, hacks, or workarounds. Now don’t get too excited; I don’t mean to say that all of these exciting new features are actually supported in every browser. Oh goodness no, I don’t mean that at all. In modern browsers, yes, your forms will kick all kinds of ass. But in legacy browsers, your forms will still work, albeit with less ass kicking. Which is to say, all of these features degrade gracefully in every browser. Even IE 6.

We used the basic ones on the AWiderNet redesign. Quick review: I like them (by basic I mean email, url, etc) as they parallel the things I’ve been doing all along. Beyond the possible user agent enhancements, I’m happy to be able to target CSS using attribute selectors instead of meaningless* classes.

I’m really excited for support for the “fancier” new types. There’s a lot of code overhead out there in the wild for things like sliders and date pickers. Having native controls for very common elements is a big deal.

*Meaningless in that User Agents can’t infer anything from class="email". Clearly humans editing the code can guess what class="email" is all about…

A New Site I Made is Live- AWiderNet.com (HTML5 + CSS3 + WordPress)

Posted on by Rob Larsen

We relaunched the Cramer blog today. It’s a soft launch. We’re hoping to shake out any kinks over the quiet time around the holiday. I did the initial HTML5/CSS3 templates and then shepherded the project for a couple of weeks* until I was freed up enough this past week to get the thing out the door.
Continue reading “A New Site I Made is Live- AWiderNet.com (HTML5 + CSS3 + WordPress)” →