How to Fix CSS Issues

When you integrate a new design you have all the time the same problem… Compatibility with all browsers. Many times you create your frontend and then when you try for exemple in IE8 (this is just an exemple I could say Chrome hein ;) ) you see you have some problems with margin or some small stuff like that and you realize that if you want to fix it for all browsers, this will be really complicated and will add complexity for nothing. So here is 3 technics to add some hacks without any risks in your application.

Include specific stylesheets

I thinks many of you already use to load specific javascripts to simulate html5 capabilities even for old browsers with something like that

1
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

This is really simple you can customise your html using conditional comments and so add some specific css like that.

1
2
3
4
<link href="/application.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
  <link href="/my_ie_hack.css" rel="stylesheet" type="text/css">
<![endif]-->

Like that you just have your file my_ie_hack.css and this one will not be loaded if your user is using another browser or a versions greater than IE8. So this soltion can be enought but only if you have just IE bugs because the conditional comments are only available for IE. If you want to know what you can use check this.

Detect your browser then override CSS

If you are using jQuery (and an old version), perhaps you know the $.browser which give you all informations about your browser or you can find some specific libraries for that. The technic here is to add those informations as class or wathever of your body. When you do that you will be able to add some specific rules in your css.

1
2
3
for(var key in $.browser) {
  $("body").attr("data-" + key, $.browser[key]);
}
1
2
3
4
<html>
  <head></head>
  <body data-chrome="true" data-version="31.0.1650.57" data-webkit="true">
</html>
1
2
3
body[data-chrome] {
  // Do something specal for chrome
}

This is really conveignant because you can check every browsers and every versions but you need to use a bit of javascript.

Use pure CSS hack

This is the funny part, you can hack directly in your stylesheet, let’s imagine you want to fix a bug only available in IE7 you can “simply” add this css.

1
2
3
*+html .my-selector {
  // Do something special for IE7
}

In this cas, just using *+html before your selector will select only on IE7 browser, funny isn’t it. If you want to have a look on all hack available check this out

So here is some possibilities to perform some hacks, nothing is perfect, some are horrible to read, need some libraries or are not available for each browsers but I’m sure it can help you at least one time and if you have another ideas like that come to share it ;)

For the story, one friend gave me the link for pure CSS hacks because he have to suport IE7, I laught a lot everytime he told me that…

Comments

Copyright © 2014 - Anthony Estebe -