Author Topic: Just say NO to CSS Browser Hacks!  (Read 4643 times)

SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Just say NO to CSS Browser Hacks!
« on: December 19, 2008, 09:54:18 PM »
Anyone who isn't a web developer or at least interested in that type of stuff - this thread ain't for you :)

Anyone who's done web development for more than a few days knows that all browsers are not made equal. I'm not even talking about quality necessarily, but just in terms of the way they handle both the (X)HTML and CSS specs. 

Historically, (good) web developers have done their best to write standards-compliant code and dealt with specific browser issues using either IE conditional comments, or CSS selector hacks.  There are other ways of doing it, but these seem like the 2 most common.

Using separate files served either with IE conditional comments, or server-side with IF statements is headache to maintain, because if you ever need to make adjustments you have 1x{number of CSS files} places to make that change.  And if you've done a decent job with your code, you'll rarely need more than a few lines worth of adjustments.  Is that really worth the extra server hit?

CSS Selector hacks are tad less elegant, but offer a bit more flexibility.  You can do some slick stuff with these, but I personally don't like them for 2 main reasons:

  • They're ugly, and not all of them are actually standards compliant, and
  • If for whatever reason the browser vendor decides to plug that selector bug, all your changes are rendered moot on the next update.  Of course, if the browser vendor decides to fix whatever issue that required the hack in the first place, any type of CSS workaround would be broken.


So anyway, that's the history and the 2 most common solutions to the problem.  I'd like to preface this with the fact that I can in no way claim that the idea in this post was first created by me.  I'm not that smart, nor am I that egotistical :)   However, I can say that in my experience, I haven't seen anyone using this exact method, which is what prompted me to post about it.

The entire idea is this:

  • Using a server-side script, such as PHP, you would read the HTTP_USER_AGENT string, which contains information about a visitor's OS, Browser, Browser Version, etc.  In PHP at least, you can get some pretty powerful and specific results using the get_browser() function, in conjunction with the extended browscap.ini file.  (Other options may be defaulted or extendable within your own language, but since I'm a PHP dev, this is what I'm familiar with! :))
  • Once you've obtained the data you need (up to you how specific you want to be, for the demo page below I'm just using the browser name itself), you would set a variable containing that data, preferably in a CSS friendly way.  (ie. - "msie_7" versus "Microsoft Internet Explorer 7.0.1")
  • Attach this variable to your document's <body> tag.  You'd end up with something like
    <body class="msie_7">
  • Ok, so now you've got your body's class setup as your browser.  In your CSS, your selectors would look something like:

    #some_element { margin: 5px; color: blue; }

    To target with our new code to correct those pesky IE (or whatever!) issues, do the following:

    #some_element { margin: 5px; color: blue; }
    body.msie_7 #some_element { margin: 7px 5px; color: blue; }

    Now, only for IE7, your element gets a little bit of extra margin at the top and bottom.


Pretty simple right? And fully standards compliant!

If you want to see this in action, as I'm sure I didn't explain this correctly (I have that problem), I've set up a VERY basic demonstration of the concept here: http://dancunha.com/css_targets.php

I'd definitely appreciate any feedback or improvements you may have on it, especially if you see any major pitfalls in doing it this way.  I'm just so sick of the conditionals or the ugly browser hacks.  I'd like to apply this technique on future projects, if possible. The CSS code is just so much cleaner.

And let me know if you use this method, I'd love to hear about it!
« Last Edit: December 19, 2008, 09:59:19 PM by SuckerPunch »

Justice Blues

  • Minion
  • **
  • Posts: 29
Re: Just say NO to CSS Browser Hacks!
« Reply #1 on: February 10, 2009, 10:28:30 PM »
Man, been a long time since I checked here. I just wanted to say, I prefer using the
Code: [Select]
<!--[if lte IE 6]>conditional statements. Only IE sees them, I can fix the CSS to show exactly what I want for each browser, and I avoid hacks (which I am really not that good at) in my CSS. I don't like using the user_agent string, it can be fooled. And finally, I don't code sites in anything but HTML and CSS. I do not know any other languages.

Yes, I need to update more than one stylesheet if something changes on the site, but that is not really much more work than you will have to do updating the code on your one stylesheet.


SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Re: Just say NO to CSS Browser Hacks!
« Reply #2 on: February 10, 2009, 10:34:13 PM »
If people are fooling the user agent, then they deserve to have their styles messed up.

I strongly dislike serving conditional files.  It's one more file to manage, and troubleshoot, when things go wrong.  Having all your code for the same elements in one place is beautiful.


Justice Blues

  • Minion
  • **
  • Posts: 29
Re: Just say NO to CSS Browser Hacks!
« Reply #3 on: February 10, 2009, 11:12:54 PM »
You have to troubleshoot the code, no matter where it is. Having it in a different file just means one more tab open in my editor. And it gets all the bits that need fixed for that browser in one place. Fix everything in the compliant stylesheet first, then open up the older browsers and fix the styling in their stylesheets. It works for me, and it means I don't have to try teaching myself PHP.  ;D


Steiner

  • Elite Boss
  • *****
  • Posts: 1,602
    • Steinerd.com
Re: Just say NO to CSS Browser Hacks!
« Reply #4 on: February 10, 2009, 11:21:39 PM »
Or, you can use just throw an asterisk in front of the item in the same CSS sheet.


Code: [Select]
* a {
   color: #FF0000;
}
a {
   color: #FFF000;
}

The asterisk will pull up pretty much anything IE 7 and earlier and the one without will pull up in gecko and non-IE.

Not fully supported by all browsers however.
~Steinerd

SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Re: Just say NO to CSS Browser Hacks!
« Reply #5 on: February 11, 2009, 12:37:16 AM »
Or, you can use just throw an asterisk in front of the item in the same CSS sheet.


Code: [Select]
* a {
   color: #FF0000;
}
a {
   color: #FFF000;
}

The asterisk will pull up pretty much anything IE 7 and earlier and the one without will pull up in gecko and non-IE.

Not fully supported by all browsers however.


And this is why you get yelled at when you commit CSS :P

SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Re: Just say NO to CSS Browser Hacks!
« Reply #6 on: February 11, 2009, 12:40:34 AM »
You have to troubleshoot the code, no matter where it is. Having it in a different file just means one more tab open in my editor. And it gets all the bits that need fixed for that browser in one place. Fix everything in the compliant stylesheet first, then open up the older browsers and fix the styling in their stylesheets. It works for me, and it means I don't have to try teaching myself PHP.  ;D

Well, to be fair, when I've finished doing my writeup, the amount of PHP you'd have to "learn" would be extremely minimal.

I'm not arguing this is the "one true method" in the least.  There's lots of ways to accomplish targeting browsers.  My goal was to do this in a way that

a) keeps your styles consolidated in one place,
b) is dead-simple to use and troubleshoot,
c) allows for readable, standards-compliant code, and
d) doesn't resort to hacks selector hacks (which is more or less the same as c anyway)

This method may not be the best solution for everyone, but that doesn't change the fact that it could be useful to others as well :)

Justice Blues

  • Minion
  • **
  • Posts: 29
Re: Just say NO to CSS Browser Hacks!
« Reply #7 on: February 11, 2009, 04:27:20 AM »
You don't let Steiner do any CSS do you? An asterisk? Pretty much kills compliance there.

I am sure your method can be useful for some. Lord knows there are plenty of other techniques I do not use, some of which are probably much better ways to do things I try. Thank goodness I am not a professional.  ;D


Steiner

  • Elite Boss
  • *****
  • Posts: 1,602
    • Steinerd.com
Re: Just say NO to CSS Browser Hacks!
« Reply #8 on: February 11, 2009, 03:31:59 PM »
Lol, they let me do CSS, they just rip on me when it's not the standards.

And using an asterisk is no different from a browser hack, just short-hand.


When I create websites, if the original code doesn't look identical in all browsers without having to do such a thing, I will find another way to do it.

Because of that, I'm usually forced to using other measurements than pixels, get stuck using em a lot. But it shows up the same exact way on all browsers without any of the above techniques.
~Steinerd

SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Re: Just say NO to CSS Browser Hacks!
« Reply #9 on: February 11, 2009, 03:44:22 PM »
Sorry Steiner, but if you honestly think using the asterisk like that is a valid and good way to code CSS, then you don't know nearly as much about it as you think you do.  You're very, very wrong in this case.

Steiner

  • Elite Boss
  • *****
  • Posts: 1,602
    • Steinerd.com
Re: Just say NO to CSS Browser Hacks!
« Reply #10 on: February 11, 2009, 03:50:34 PM »
Read it again SP, :D

I was just reiterating that I don't use CSS hacks at all, if the original CSS doesn't work for all browsers, I'll make it work for all browsers... without doing any of the above.

An asterisk is just something I saw, and worked on ONE site like 2 years ago. I can't even remember the domain now...



Doesn't matter anyway. When the browsers support CSS3, all this will be moot... they will have attribute selectors like jQuery in the CSS element call. Which by then, hopefully users will realized that you need next-gen browsers... and IE8 has already fixed a few things that screw up on average with cross-browser scripts, which means its CSS3 ready release will probably less quirky.
« Last Edit: February 11, 2009, 04:04:27 PM by Steiner »
~Steinerd

Justice Blues

  • Minion
  • **
  • Posts: 29
Re: Just say NO to CSS Browser Hacks!
« Reply #11 on: February 11, 2009, 06:19:28 PM »
When all browsers support CSS3, the internet will end.

There are still people out there using IE5, and they see no reason to change, just to make web designers' lives easier. So unless you are going to just blow off everyone that uses IE5, IE6, IE7, and apparently Chrome, you will need to deal with browser idiosyncrasies.

And the conditional calls to the various IE browsers are not CSS hacks. They just call a different CSS stylesheet, as compliant as I can make it, for that particular browser, rather than using hacks or another language like javascript or PHP.


SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Re: Just say NO to CSS Browser Hacks!
« Reply #12 on: February 11, 2009, 07:34:02 PM »
I don't know of anyone that supports IE5.  Not saying they don't exist, just that it's very rare to still need to support it.

I don't support IE6 in any personal projects (Titan being one of them).  I don't go out of my way to break IE6, but I refuse to not use more modern technologies when writing new sites.

This is something I've preached internally - If your site makes money, then can't ignore a 10-15% market share (give or take depending on your market/industry).  If your site does NOT make money (like Titan), I think it's a good idea to push people to modernize their software.  We won't get the dinosaurs to upgrade unless we,  as web developers, make a conscious effort to push boundaries.

If Titan has gotten even 10 people to upgrade to IE7 or Firefox, then I feel like I've accomplished something.

And LOL at that Chrome article.  I've yet to run into ANYTHING nearly as frustrating supporting Chrome compared to IE (6 or 7).  I target IE7, FF, and Safari ... in doing so I find that generally makes it work in Opera and Chrome (especially since Chrome is Webkit based anyway).  It's also brand new and going through very fast iterations. I expect a lot of the legitimate issues brought up in that article will be addressed by Google... sooner rather than later to boot.

Justice Blues

  • Minion
  • **
  • Posts: 29
Re: Just say NO to CSS Browser Hacks!
« Reply #13 on: February 11, 2009, 08:31:54 PM »
I just did a site for a local non-profit, and while they eventually went with the WordPress CMS setup I showed them, the 2 HTML/CSS sites I worked up did support IE5. Not that it was too hard, the styling changes I made for IE6 took care of them. But I did check it to see. They are a non-profit though, so that comes under your rule for making money. They don't want to stop anyone from being able to give them money.

I have to admit, when I am messing around on my pages, I don't even check them with Safari. This may make me an evil man. :D

I expect you are right about Chrome being better when it is older. I have not tried it yet, because it is so new and because FF does what I want so well.


SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Re: Just say NO to CSS Browser Hacks!
« Reply #14 on: February 11, 2009, 08:38:38 PM »
Depending on the site, Chrome has a bigger foothold than Safari.  It does here on Titan.

Steiner

  • Elite Boss
  • *****
  • Posts: 1,602
    • Steinerd.com
Re: Just say NO to CSS Browser Hacks!
« Reply #15 on: February 11, 2009, 09:10:10 PM »
This is the W3schools Brows stats. These guys are to be taken seriously since they are pretty much owned by the w3c, the guys who pretty much set the standards to html and css driven scripts.

http://www.w3schools.com/browsers/browsers_stats.asp

Notice how <IE5 isn't even on the list for 2009. If there are still users out there using anything less than IE7 (unless government funded/owned, or private business looking for a cheap alternative) than they need to get the hell away from a computer...

That's as stupid as someone trying to play Hellgate London with a 755Mhz processor IMO.
~Steinerd

Maverick X

  • Elite Boss
  • *****
  • Posts: 355
  • Superpowered Awesome
    • SeanMcMahan.info
Re: Just say NO to CSS Browser Hacks!
« Reply #16 on: February 11, 2009, 09:43:29 PM »
I expect you are right about Chrome being better when it is older. I have not tried it yet, because it is so new and because FF does what I want so well.

It's my default browser, at work and at home. I never cared for FF for anything other than JS debugging (still holds true), but Chrome FINALLY got me using something other than IE on a regular basis and I've never looked back. =]
Sean
Retired Resident Titan Nerd
---------------------------

SuckerPunch

  • Elite Boss
  • *****
  • Posts: 1,608
    • Titan Network
Re: Just say NO to CSS Browser Hacks!
« Reply #17 on: February 11, 2009, 09:56:22 PM »
Chrome FINALLY got me using something other than IE on a regular basis and I've never looked back. =]

Thank god for small favors.  Chrome let us be friends again...

:D

Steiner

  • Elite Boss
  • *****
  • Posts: 1,602
    • Steinerd.com
Re: Just say NO to CSS Browser Hacks!
« Reply #18 on: February 11, 2009, 11:02:31 PM »
I'm gunna have to give Chrome a test-run... it seems more and more developers appreciate it. Got to see why! :D

Definitely faster, that's for [censored] sure.



« Last Edit: February 11, 2009, 11:08:52 PM by Steiner »
~Steinerd