CSS for different browsers

Megamente · 07-15-2013, 05:59 PM

This is the piece of code I wrote and I would like to share with you guys. Smile

It shows how to load different stylesheets depending on the browser that the user is currently browsing, in order to be able to conduct a simple and efficient crossbrowser. We’ll use the jQuery JavaScript library.
The code checks whether the browser is IE (msie). If not, they test to see if it's Firefox, and if you're not, the same applies the stylesheet related to Chrome.

It is very useful for mobile coding too.

Code:
<script type="text/javascript"> 
$(document).ready(function() {
	if($.browser.msie){
		$("head").append("<link>");
		css = $("head").children(":last");
		css.attr({
      			rel:  "stylesheet",
			      type: "text/css",
      			href: "http://www.yoursite.com/css/style_explorer.css"
    		});
 
   	}
   	else if ($.browser.mozilla){
		$("head").append("<link>");
    		css = $("head").children(":last");
    		css.attr({
      			rel:  "stylesheet",
			type: "text/css",
      			href: "http://www.yoursite.com/css/style_firefox.css"
    		});
 
   	}
	else{
		$("head").append("<link>");
		css = $("head").children(":last");
		css.attr({
			rel:  "stylesheet",
			type: "text/css",
			href: "http://www.yoursite.com/css/style_chrome.css"
		});
 
	}
)};
</script>

Hope you liked it! Smile

Megamente · 07-15-2013, 05:59 PM

This is the piece of code I wrote and I would like to share with you guys. Smile

It shows how to load different stylesheets depending on the browser that the user is currently browsing, in order to be able to conduct a simple and efficient crossbrowser. We’ll use the jQuery JavaScript library.
The code checks whether the browser is IE (msie). If not, they test to see if it's Firefox, and if you're not, the same applies the stylesheet related to Chrome.

It is very useful for mobile coding too.

Code:
<script type="text/javascript"> 
$(document).ready(function() {
	if($.browser.msie){
		$("head").append("<link>");
		css = $("head").children(":last");
		css.attr({
      			rel:  "stylesheet",
			      type: "text/css",
      			href: "http://www.yoursite.com/css/style_explorer.css"
    		});
 
   	}
   	else if ($.browser.mozilla){
		$("head").append("<link>");
    		css = $("head").children(":last");
    		css.attr({
      			rel:  "stylesheet",
			type: "text/css",
      			href: "http://www.yoursite.com/css/style_firefox.css"
    		});
 
   	}
	else{
		$("head").append("<link>");
		css = $("head").children(":last");
		css.attr({
			rel:  "stylesheet",
			type: "text/css",
			href: "http://www.yoursite.com/css/style_chrome.css"
		});
 
	}
)};
</script>

Hope you liked it! Smile

Megamente · 07-15-2013, 05:59 PM

This is the piece of code I wrote and I would like to share with you guys. Smile

It shows how to load different stylesheets depending on the browser that the user is currently browsing, in order to be able to conduct a simple and efficient crossbrowser. We’ll use the jQuery JavaScript library.
The code checks whether the browser is IE (msie). If not, they test to see if it's Firefox, and if you're not, the same applies the stylesheet related to Chrome.

It is very useful for mobile coding too.

Code:
<script type="text/javascript"> 
$(document).ready(function() {
	if($.browser.msie){
		$("head").append("<link>");
		css = $("head").children(":last");
		css.attr({
      			rel:  "stylesheet",
			      type: "text/css",
      			href: "http://www.yoursite.com/css/style_explorer.css"
    		});
 
   	}
   	else if ($.browser.mozilla){
		$("head").append("<link>");
    		css = $("head").children(":last");
    		css.attr({
      			rel:  "stylesheet",
			type: "text/css",
      			href: "http://www.yoursite.com/css/style_firefox.css"
    		});
 
   	}
	else{
		$("head").append("<link>");
		css = $("head").children(":last");
		css.attr({
			rel:  "stylesheet",
			type: "text/css",
			href: "http://www.yoursite.com/css/style_chrome.css"
		});
 
	}
)};
</script>

Hope you liked it! Smile

The Alchemist · 07-15-2013, 06:36 PM

Nice little jQuery code.
Its good that jQuery supports all browsers. Otherwise this IE troubles too much when it comes to client sided coding.
Btw, are you a jQuery pro?

The Alchemist · 07-15-2013, 06:36 PM

Nice little jQuery code.
Its good that jQuery supports all browsers. Otherwise this IE troubles too much when it comes to client sided coding.
Btw, are you a jQuery pro?

Megamente · 07-15-2013, 06:51 PM

Quote:Its good that jQuery supports all browsers. Otherwise this IE troubles too much when it comes to client sided coding.

Exactly!

Quote:Btw, are you a jQuery pro?

I wouldn't call myself a pro haha Smile

but i'm always looking for new codes and plugins to study and learn a thing or two :lol:

Megamente · 07-15-2013, 06:51 PM

Quote:Its good that jQuery supports all browsers. Otherwise this IE troubles too much when it comes to client sided coding.

Exactly!

Quote:Btw, are you a jQuery pro?

I wouldn't call myself a pro haha Smile

but i'm always looking for new codes and plugins to study and learn a thing or two :lol:

shock · 07-15-2013, 08:50 PM

Very handy bit of code that, I'm guessing it will support Opera Mini aswell?

shock · 07-15-2013, 08:50 PM

Very handy bit of code that, I'm guessing it will support Opera Mini aswell?

Megamente · 07-15-2013, 09:43 PM

Quote:Very handy bit of code that, I'm guessing it will support Opera Mini aswell?

Yep! It does support because Opera Mini is B-graded by jquery(Full experience without Ajax navigation features). Smile

CSS for different browsers
Author Message