Hi,
I was looking around at the source of some popular websites and I noticed that a lot of them have a way to detect your OS, Resolution, Browser and more... I was wondering if anyone knew where I could read more about setting the CSS to fit the users needs?
On Facebook for example, you'll notice that it uses a specific .css file depending on what specs you are using...
Thanks,
Ashton.
Well css has browser specific conditional statements. Google IE conditional statements.
Javascript also has ways to detect browsers and other client side specifics.
I usually do a browser detect and add a class to the body of the html document that specifies which browser. Then I base the css off that class. I mostly do the browser detect on the Server side using the user agent string and searching for the relevant browser info such as "MSIE 7.0" but you can also access the browser agent on the client side using navigator.userAgent. I usually have two classes attached to the body if it is IE, "msie" and "msieVersion#". Some css works better for all IE and sometimes IE8 mode works more like firefox and IE7 doesn't. A sample of target css would generally look something similar to :
.icon{background:transparent url('/here_is_my_sprite.png') -20px 20px;} .msie7 .icon{background-position:-40px -40px;}Where I define the rule for all browsers and then when something needs tweaking I just apply the css to the one that needs it not redefining the entire thing.
NOTE: browser agents can be spoofed so you should attempt to get your css to work in most browsers rather than relying upon hacks for individual browsers.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.