Using Jquery to fix css in older browsers
Over the years i have used different methods of fixing the way my sites are displayed in different browsers first using css hacks then using conditional comments to serve up different stylesheets or using php to do the same. Now i just use jquery to tidy up any last display problems i have. Whats my reason for doing this? Well in the past i was a very “anti” javascript person anything that involved any serious work i always reserved to php. For example simple things like contact forms, my colleagues would put in place some javascript checks to make sure fields had correct data and were filled in etc where as i would use server side php to do these checks as i always hated the idea that the client could potentially disable this whenever they felt like it. Slowly overtime i have realised that javascript and its brother jquery are our friends, the likelyhood that anyone is actually disabling javascript is very low in my opinion. The only people i really see doing this are other web developers which aren’t usually the target audience for a site i build and infact they will not be using a crappy browser that needs these work arounds anyway. The way its integrated into the site seems so much more cleaner to me too. Theres no need for extra conditional code or to fill your stylesheet with css that won’t validate or to even create seperate stylesheets. Just simply add a few lines to your javascript file you include on the site, if you are like me then you always have a common.js or general.js on every page just incase you need to through in some javascript and this is exactly where i put it. Not only does support for javascript go back much further than other methods there is also the factor that people are using the newer browsers now with greater support. So in theory there should be less and less people that we are catering too with these little fixes and in time i think we won’t need them at all. Heres an example of what i used recently on a site:
$(document).ready(function(){
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
if(version < 7 ) {
$.ie6fixes();
}
if(version == 7 ) {
$.ie7fixes();
}
if(version == 8 ) {
$.ie8fixes();
}
});
jQuery.ie6fixes = function() {
$("ul#nav li").css("width","100px");
$("ul#nav li a").css("padding","7px 10px 0px 10px");
$("ul#nav li ul").css("margin","0px 0px 0px -40px");
$("ul#widesearch").css("width","650px");
$("ul#widesearch li").css("width","185px");
$("ul#widesearch li").css("margin","0px 5px 10px 5px");
$("#left").css("width","650px");
}
jQuery.ie7fixes = function() {
$("#location").css("margin","1px 0px 0px 0px");
$("#srchbox").css("margin","0px 0px 0px 137px");
}
jQuery.ie8fixes = function() {
$("#srchbox").css("margin","0px 0px 0px 145px");
$("#srchbox").css("width","50px");
}
I’d love to hear what you guys think about this, is this a terrible idea and should be avoided? should we now be avoiding these little fixes in the hopes that clients and people in general will update to the latest browsers?
Comments
Comments are currently closed