Does anyone know how can I detect the browser type in css? What I trying to do is when the user viewing the page by using IE 8, then will set class 'black2' to { font-size:0.75em; color:#1e549b;} in css else will set it to { font-size:0.95em; color:#1e549b;}
See this similar question
You can use special commenting for IE detection in the CSS, or you can do the logic using javascript and apply the CSS classes programmatically (for example using JQuery).
<!--[if IE 8]>
<style>.black2 { font-size:0.75em; color:#1e549b;} </style>
<![endif]-->
Not really recommended...but why are you serving a different font size? You can't get them to be consistent? Have you tried setting an initial percent, then use ems?
If you are running server-side code (php, asp.net, asp, ..), you would be better off detecting the browser on the server and including an additional style sheet in the header for browser specific code.
Otherwise, the are a number of browser hacks you could use to inject CSS for different browser types and version. As they are "hacks", the css gets ugly fast.
I am mentioning this for the sake of completeness, but I strongly advise that you go a different route because CSS expressions impact performance and may not be cross-platform-friendly:
You can use a CSS expression coupled with JavaScript to dynamically set your styles. An example:
<style>
P
{
background-color: expression( getBackgroundColor(this) );
}
</style>
<script type="text/javascript">
function getBackgroundColor(elem)
{
return "green";
}
</script>
You can use this JavaScript function to sniff out the browser version (also not the best idea) and color accordingly.
Related
I was wondering whether there is a way to make html5 code visible in Internet Explorer 7 or less.
For example
<div id="container">
<header id="header">
something
</header>
</div>
In Internet Explorer 7 the header is not shown at all.
I found a workaround here, a IE HTML5 enabling script, which creates the html5 elements with javascript. But what happens is that the <header> tag looks not at all as it does in other browsers.
So my question is, is it too early to use HTML5 yet or how can I make it cross-browser working?
This (truly) incredible bit of Javascript should fulfill 100% of your HTML5 compatibility needs:
http://www.modernizr.com/
There are 2 important things to consider before using HTML5;
Target audience (with their browser choice)
HTML5 Useful features on your site.
If you are sure that a lot of your users are on IE8 and below, you should avoid using HTML5 almost entirely.
So when you say "is it too early to use HTML5 yet", the answer is it depends on your user base.
IE has good support for HTML5 only from version 9 and above..
There is no way by which you can make HTML5 advanced features to work on IE7/8...The html5.js you referred to just makes your CSS to "not ignore" any HTML5 elements and apply styling..It does not do anything further than that..
For all major browser support and score, you can check out html5test.com
Apart from that, you may also check out a very nicely explained tutorial on HTML5 called as DesignMobileWeb available on
http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
Please do remember that if you are going to have a basic site, using HTML5 should be avoided.
You should consider HTML5 only if you plan to use Local Storage, Offline Access and HTML5 Forms for mobile devices, etc
IE < 9 doesn't recognize the HTML5 elements and will not generate them. So I use this bit of JS to do the generation:
var e = ("abbr,article,aside,audio,canvas,datalist,details,
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video,figcaption,summary").split(',');
for (var i = 0; i < e.length; i++){
document.createElement(e[i]);
}
I use this conditional comment to check whether I need to run the script
<!--[if lt IE 9]>
<script src="js/html5_createElement_for_IE.js"></script>
<![endif]-->
Of course, you will need to style the tags for IE < 9, but you would need to anyway.
Start with this: http://html5boilerplate.com/. It should solve most of your problems. It works great.
IE versions < 9 will not render elements that they don't recognize, so the new HTML5 elements, header, etc are off the list. Other browsers render unrecognized elements, but without styling.
The way around this is to "show" the new elements to IE by squirting them into the DOM directly using JavaScript. You only have to do this once on each page view.
The two standard ways to do this are:
The Google Shiv: http://code.google.com/p/html5shiv/
Modernizr: http://modernizr.com/
Modernizr also does a whole bunch of other things to do with feature detection.
Try using chromeframe - http://code.google.com/chrome/chromeframe/
By itself though you cannot use most of the cool new features of HTML5 with IE7. It just isn't implemented in the browser plain and simple.
I check whether or not the requesting client supports the application/xhtml+xml mime type (it is part of the accepts header sent the request).
If it does not, then I send the client a version of the page using div nodes in place of most html5 semantic nodes.
This is very old... Damn... But I guess this could help someone, though
I used this meta
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
And fixed everything without using any more scripts...
Found it here:
http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/
What is the best way to handle browser-specific CSS file loading? Assume you are running in the context of a proper MVC framework.
Here are some options, you are free to discuss the pros and cons of these options as well as any other methods you know of, and prefer:
Server-side solution: use the controller (e.g. servlet) to analyze the user-agent header in the request and return the proper CSS file in the view.
Use browser specific hacks to load files, such as: <!--[if IE]> ... <![endif]-->
Load CSS files asynchronously in client side by inspecting user-agent and adding respective files
Use a client side framework to handle browser-specifics (such as jQuery browser-specific css rules)
I'm going to suggest a 4th option...
Don't use browser specific CSS files.
Seriously, don't do it.
It is possible to write one CSS implementation for all standards compliant browsers... it will only need to be lightly hacked to work with IE.
Maintaining browser specific CSS files will become a nightmare on any sizable website.
Design a single stylesheet that works cross-browser. Get IE as close as you can, and then use IE Condition Comments to load the rest.
IE Conditional Comments are the accepted way to load IE (including version) specific CSS rules.
They are most definitely not a hack.
Don't use anything that relys on user-agent as that is easy to spoof. I also stay away from client side CSS frameworks because (for the most part) they are just glorified table layouts (you can check out this StackOverflow post for more details on frameworks).
I think the idea is to deliver minified CSS in one file that is appropriate for the browser which is determined by the server.
Google web toolkit (GWT) uses the controller to deliver just this, and I'm sure is the standard best practice.
Conditional tags don't work for every browser. Javascript loads too late and gives you overhead.
here is an example of part of a css file i have where i handle browser specific stuff for a drupal theme I implemented... this handles webkit (safari/chrome,etc), gecko (firefox) and khtml (konqueror). the page work normally for ie7/8
using 1 file saves an http request and makes things clearer (IMHO)
/**
* IE6 fixes
*/
* html ul.primary-links {
height: 23px;
}
/***
* WebKit fixes
*/
#media screen and (-webkit-min-device-pixel-ratio:0)
{
ul.primary-links {
height: 24px;
}
}
/***
* Gecko fixes
*/
#-moz-document url-prefix(){
ul.primary-links {
height: 28px !important;
}
}
/***
* KHTML fixes
*/
#media screen and (-khtml-min-device-pixel-ratio:0)
{
ul.primary-links {
height: 22px;
}
}
hope this helps.
I'd prefer frameworks, they work great (mostly) and help you save a lot of time. Because instead of rediscovering the solutions again, some one has already done it for you.
I'm building a web site that uses a fair amount of drop shadows and gradients. I can accomplish a lot of this via CSS's box-shadow properties.
Alas, we're still supporting IE, so we need to add background images in those situations.
I could be lazy and just give everyone the background images, but I'm trying to streamline things for those that are using the modern browsers. Ideally, I'd like to have those users not have to request the images.
So, I'm adding an extra class via javascript if the browser supports the box shadow (box-shadowSupport) and my CSS ends up looking like this:
.box {
background: url('myImage.jpg');
}
.box-shadowSupport {
background: none;
[box shadow properties go here]
}
If the HTML ends up looking like this:
<div class="box box-shadowSupport"></div>
Will the image be requested? Or does the browser understand that it isn't needed due to the second style over-riding the background image property?
If the image is requested, I need to rearrange my CSS and javascript so instead of over-riding a style via the cascade, I'll have to swap out the classes so the first isn't even referenced in the HTML.
I believe every web browser will treat this in it's own way - as usual :) My suggestion is to use a web proxy like Charles and see, if the image has been requested or not. And of course, test this in the different browsers.
What you might want to consider is defining the IE specific styles in a separate sheet and loading it with conditional comments, like this:
<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
type="text/css" media="all" />
<![endif]-->
This will only load the sheet with IE-specific settings and you can override the other classes with !important markers. Conditional comments have been around since IE5, and any other browser will ignore the block above.
I would recommend just to skip the shadows in IE.
Most people use only one browser and they won't know that there have to be shadows. It isn't a big deal if the site looks different in different browsers as long they look normal (that means not glitchy).
Otherwise use with a if tag for ie specific css, and you can do drop-shadow there with:
.box {
filter: progid: DXImageTransform.Microsoft.dropShadow(
color=#818181,
offX=5, offY=5,
positive=true);
}
For more about that see here.
I am pretty sure that all modern browsers will load 'myImage.jpg'. Actually, the code you provided described the pure CSS way of preloading images without using javascript :)
I have to admit I never had to worry about Firefox versions before when it came to CSS, but for some reason, FF 3.5 is not positioning some of my elements properly as compared to how FF2 and FF3.0 do.
Now I am faced with having to detect if its FF 3.5.
Here is what I do now for handling CSS across FF and IE:
<!-- MAIN STYLESHEET -->
<link rel=stylesheet href="./inc/style.css" type="text/css">
<!-- IE STYLE SHEET -->
<!--[if IE]> <style type="text/css">#import "./inc/style.ie.css";</style>
<![endif]-->
Now I need to add a 3rd option I suppose, but how? Is there a way to do this, or am I faced with having to implement some sort of JavaScript solution?
Thanks -
My (short-term) solution was to use jQuery like this:
$(document).ready (
function() {
if ( $.browser.mozilla == true && $.browser.version == '1.9.1' ) {
// modify css here
}
}
);
Note the $.browser.version is not 3.5 like you might think (but instead it returns the rendering engine version). Also, the $.browser does not have a firefox value apparently, it just returns mozilla for all mozilla-based browsers.
Assuming this will meet my short-term needs. Thanks -
There is no way to do it using browser tags. You'll have to use browser sniffing (using JavaScript to detect the browser), to load the correct style sheets.
If you are using a JavaScript library like Mootools or jQuery, then there are some functions to do that.
You could also, as another solution, detect it on the server and then send an alternate stylesheet.
The first thing I'd do would be to try to solve the problem without a browser-specific CSS fix. Usually it just takes a little bit more thought to come up with a cross-browser solution. Post your CSS problem here, and then we can try and fix it :)
But to directly answer your question, unfortunately you're going to have to use Javascript for this one. But fortunately, there is a really simple solution.
Load this JavaScript file, and then you can use these properties:
BrowserDetect.browser
BrowserDetect.version
BrowserDetect.OS
Then you can do something like:
if (BrowserDetect.browser == 'Firefox' && BrowserDetect.version == '3.5')
{
// Load CSS file
}
http://www.quirksmode.org/js/detect.html
looks like there is a CSS solution, try this
#-moz-document url-prefix() {
.selector {
color:lime;
}
}
There is no conditional comments for Firefox. You might have to check User Agent and include stylesheets on the result of that.
you can check the userAgent using JavaScript
I want to have a particular CSS style different for IE6. Basically I am using CSS sprites with a PNG file. But for IE6 I want to use the .gif version.
I dont want to use the <!-- if lte IE6 statement. I want to include it within my CSS file itself.
How do I do that?
Edit:
I need this because I want my users to include a single CSS file and not 4 lines of code. My users are absolute newbies. I don't want to confuse them. Plus the only change I want is to use .gif instead of the current .png.
Edit:
How does _background-image: sound? Is there anything wrong with that?
Alternatively, can I use a conditional statement inside a CSS file?
If you don't want to use conditional comments, then you can use the * html hack:
h1 {
color: green;
}
* html h1 {
color: red; /* this will only be applied by IE 6, 5.5, 5, and 4 */
}
Apparently you can put IE6 specific statements into a CSS by prefixing them with an underscore.
See http://vexxhost.com/blog/2007/03/01/only-css-hack-you%E2%80%99ll-ever-need-seriously/
As you obviously will have noticed from the answers you're getting, using conditional comments for this is so standard that people tell you to do that even when you've specifically said you don't want to.
But if you absolutely have to have the user agent determination made at the CSS file level, what I would do is write a PHP script that outputs the CSS (rather than HTML) and analyze the user agent in PHP. If the file has to be referred to as stylesheet.css or whatever, Apache rewrites or MultiViews can be used to make a PHP script available under that name.
Here's a pretty comprehensive list of unrecommended hacks:
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
You said you don't want to use conditional statements, but they are very much the recommended and best way to go. The main reason is maintinability, CSS browser hacks are often hard for the next person, or you several months down the line, to understand. Having non-hacky CSS in a completely separate file makes it far easier to manage.
I would very much recommend you don't do user agent sniffing, it is open to lots of problems, for instance many browsers report themselves as IE even when they are not (default in Opera 7 I think). The User-Agent string is not to be trusted and should only be used as a last resort.
Use a conditional comment.
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css">
<![endif]-->
edit: Now that Wellbog has fixed your question, no, there's no way to do that with pure valid CSS.
You could conceivably use PHP or another server-side language to detect IE6 from the user agent string and serve a different CSS file, but it's much better to just use the conditional commenting technique.
What's your reason for refusing to use the existing, working, non-hacky solution Microsoft provides?