Markup Conditionals

ajaswa — Wed, 13 May 2009 22:30:03 +0000

I loathe conditional comments and browser targeted code. But there comes a time when you have to support an old and out dated browser (I’m looking in the direction of IE6 at the moment). So what do you do? You have to make it look the same and function the same as other browsers. You also shouldn’t use browser hacks to target them. I’ve touched on this subject before and figured conditional comments were the best route to go. Even if I don’t like them.

I’ve recently started working with a new company and have picked up on some of the bright things they do. I’m not sure why I never thought of this before since it seems so simple (and I can’t take credit for it).

Let say you have your standard body element and a few other things on a page:


    
        Some text

Typically to target the paragraph element for, say IE6, you might use a simple hack like the underscore hack. So you might write some CSS like so:

p {
    width:150px;
    _width:200px;
}

I mean you might do that, some other hack or you might use conditional comments to provide a style sheet just for IE6. I’m sure you’ve seen code like this before:

That’s all fine and dandy, but do you see what you did there? I did and I don’t like it. You’ve just created another HTTP request. Shame on you. And to think about how many CSS rules are typically in a file like that? 10? 50? It also creates a maintenance headache. You’ve now split up rules for one element into two files. Yes yes I know that is what the cascade is for… But you could make it easier on yourself and people that come behind you.

What I’ve found is to use conditional comments to specify a class on the body element when the browser is IE6 or 7 or even 8.

So taking our markup example from above I’ve modified it to have conditional comments in it:



    
        Some text

You’ll need all those extra comments to make the page valid. It is also pretty easy to add as many combinations as you like as long as they can be read by the browsers…
And our CSS from above:

p {
    width:150px;
}
.IE6 p {
    width:200px;
}

Of course this only works with IE but really you shouldn’t need this at all since you build awesome websites that are already cross-browser compatible, right? And there is no chance ever that a client will want a site to be usable in IE5.5, right?

Baseline: Markup

ajaswa — Thu, 12 Jun 2008 03:02:57 +0000

The other week I posted a CSS Baseline. So I’ve decided to create its counterpart: a Markup Baseline. I put some thought into if I should create a markup baseline in the first place. I can’t find any other attempts to create something like this. I believe this is due to the issues I ran into when creating this baseline.

Issues

Purpose

Well formed markup (semantic markup that is) is based on the content. Content is usually based on the purpose of a site. So how would you make a baseline all different kinds of content? You might just end up with a baseline for every different type of website out there. There would be millions of baselines then. And that wouldn’t be very productive.

doctype

Different types of sites may require different doctypes. I thought about making some php functions that would switch the doctype based upon your preference. That seemed a bit more like a framework and out of the scope of this project.

The Baseline

I’ve noticed over the years that I have been creating websites in similar fashion. Websites I’ve created lately have followed a set of ideas that I’ve concocted. The basics of theses ideas start with the structure of the web page. You can usually distill web page structure down to 4 major areas: the header, navigation, the main content area and the footer. Now this doesn’t work in all cases but it should work for most. Again this is an issue with the purpose of the site or page. However most sites will have these 4 elements. In the end I settled on the basic structure of 4 major elements and the XHTML 1.0 Strict doctype.