Is there a way to call IE conditionals from within CSS? I want to avoid calling a long string of IE css files from my code.
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="ie-gt-8.css" rel="stylesheet" type="text/css" />
<![endif]-->
and would like to have one call
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
and have the conditionals within the css file. Is that possible or is Paul Irish the way to go?
I tried applying the "advanced rules" suggested in this article
#column_right {
float:left;
width:250px;
margin-left:-250px;
[if IE 6] ie6: 100%;
[if lt IE 6] lt-ie6: 100%;
[if lte IE 6] lte-ie6: 100%;
[if ! lte IE 6] not-lte-ie6: 100%;
}
#footer {
clear: left;
width: 100%;
[if IE 5.0] padding: 10px 0px;
[if IE 5.5] margin-bottom: 40px;
}
[if IE 5] .box {
width: 200px;
padding: 100px;
margin: 100px;
}
but this doesn't work for me. I tried something basic, like
[if IE 7] background-color: red;
[if IE 8] background-color: yellow;
Use the conditional code to add a class to the HTML element. Then use that class to select elements only for the version of ie.
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
.ie8 body {width: 98%}
.ie7 body {width: 100%}
.ie body {width: 50%}
In ie8, the body element will have 98% width, in ie7, 100% width, and in IE6 and lower, 50%.
No. That is not possible. But it is possible (sometimes) to code for all IEs and consolidate your code. Conditional comments don't exist in IE, but there are hacks however I would not recommend these, ever!
You could also try loading the CSS dynamically on the server side. Get the user agent from the request object, if they are using IE version x, append CSS files 1, 2, 3 concatenated together. Just make sure that mime type of the response is CSS or plain text...
Related
unfortunately, I have to develop a site that is supported on IE7.
we know that IE7 does not support box-sizing:border-box; this is making me to specify width for every element separately in IE7 stylesheet.
I want to write some logic in my grid.less, so that the width will be calculated accordingly for ie7..
just like below
.grid{
width:/*width for modern browsers */;
*width:/*calculate width for ie7 */;
}
please help or point me to any resource.... thank you
LESS does not have a function to allow you to target specific browsers.
The standard method for doing this is with separate style sheets:
<link rel="stylesheet" type="text/css" media="screen" href="css/grid.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie7-grid.css" />
< ![endif]-->
But instead you can use a method like the following from Paul Irish:
html...
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
LESS...
.grid{
width:/*width for modern browsers */;
.ie7 & {
width:/*calculate width for ie7 */;
}
}
...which should result in css like...
.grid{
width:/*width for modern browsers */;
}
.ie7 .grid{
width:/*calculate width for ie7 */;
}
I have style sheet file and would like to disable some css tags in it for IE7 and IE8 browsers, how to do that? I do not want to put these tabs in separated css file I would like to keep then in one file.
I'd recommend the approach taken by the HTML5 boilerplate, outlined here by Paul Irish. Basically, set up your document like this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
You now have classes in place to accurately target only certain versions of IE. Your css will look like this:
.element { margin-bottom: 20px; }
.lt-ie8 .element { margin-bottom: 10px; }
You then avoid CSS hacks, and can keep everything in a single stylesheet.
As #Daniel states, this is not disabling styles, but over-riding them. If for some reason you want to send styles to only modern browsers and newer IE, you could add another class to the final html tag above, and use that.
If you try to have specific style-sheets only for IE it goes like this:
<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen"><![endif]-->
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"><![endif]-->
More about this here: How To Create an IE-Only Stylesheet
.element {
margin-bottom: 20px;
margin-bottom: 10px\9;
}
Info from here: http://www.impressivewebs.com/ie7-ie8-css-hacks/
You cannot disable them, but you can override them
Without:
adding any markup element there;
without using display: inline-block;
without knowing the div width;
no hacks. the code should validate.
How can we center those three divs horizontally, but making them INLINE ?
http://jsfiddle.net/mMPMh/
Please note:
The reason that I'm avoiding inline-block, lies on the fact that IE7 should behave.
Other rules that don't work on IE 7 should also be disregarded.
Is it possible ?
Like this - http://jsfiddle.net/mMPMh/10/
Or this - http://jsfiddle.net/mMPMh/14/ ?
This one works with IE7
As for hacks, it can be served using conditional statement like
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
Or using this on your HTML (from HTML5BP)
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
And serve the style like this :
.lt-ie8 #one,
.lt-ie8 #two,
.lt-ie8 #three {
display:inline;
zoom:1;
}
No hacks
UPD:
After you update your questionyou can use for IE display:inline;, maybe it will resolve your issue?
Like this - http://jsfiddle.net/mMPMh/4/ ?
remove float, set clear, and give if you need height and width.
I have two tables that need to line up side by side. In order to achieve this I have to specify a td height.
In IE the height should be 2.1em. In Mozilla it needs to be 1.76em.
There does not appear to be a
-moz-height:1.76em;
Any idea how I can achieve my goal?
You can put the IE height into a separate stylesheet and load it after the default one, using IE-conditional comments so the other browsers ignore it. Otherwise, you can use jQuery to change the height after it's loaded (if ($.browser.msie))
Yes it is. For Fire Fox do this:
#-moz-document url-prefix() {
//Your css here
#my-id { font-size: 100%; }
}
For IE you can do something like this:
[if IE 8]><link rel="stylesheet" href="DefaultSTyleForIE8.css" type="text/css" media="screen, projection"/><![endif]
This css will only work for IE 8
in mozilla it is possible to change the height for mozilla by height: -moz-calc(470px);
and auto height by height: -moz-available;
I would recommend the html5 boilerplate method,
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
then you can target ie in your css like,
.oldie #myel{
height: 2.1
}
I would shamelessly use IE conditional comments:
<style>
td {
height: 1.76em;
}
</style>
<!-- [if IE]>
<style>
td {
height: 2.1em;
}
<style>
<!endif-->
Here's a list of CSS filters by browser:
http://en.wikipedia.org/wiki/CSS_filter
Browser detect IE using IE's conditional comments and write out separate BODY tags:
<!--[if IE]><body class="ie"><!--<![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->
Then whenever you have a style, you can be more specific by adding the ie class to over-ride only IE:
.mystyle {styles for good browsers}
.ie .mystyle {styles for IE}
I tried putting the IE conditional in a CSS file, but that didn't appear to work. Is there a construct for CSS so you can tell it to use this background color if the browser is IE? I also couldn't find anything on if then else conditionals, does it exist? Can someone provide an example.
The IE conditional(s) go in the HTML, and should be used to include an additional CSS file that will overwrite CSS as needed for IE hacks.
Example:
<head>
<style type="text/css">
#import url(/styles.css);
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
</head>
I've taken my cue from jQuery and use my conditional formatting to create container elements
<body class="center">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
<div class="site text-left">
</div>
<!--[if IE]></div><![endif]-->
</body>
then I can put the conditional information in css like such
.site { width:500px; }
.ie .site { width:400px; }
#ie5 .site { width:300px; }
There's no such conditionals in CSS, but you can use the "Holly hack" if the differences between various versions of IE aren't significant:
div.class { /* whatever */ }
* html div.class { /* IE-only */ }
The [conditional comments](http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx) are HTML comments and thus cannot be used in a CSS context.
If you want to aim specific CSS rules just to IE, you have to use CSS hacks.
I would recommend to use something similar to the solution proposed by bendewey, but go for conditional classes around the html tag instead. As far as I know this was first mentioned in Paul Irish's Blog ( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ )
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
and then in the css you use:
.box {background: blue;}
.ie7 .box {background: green;}
This has some advantages in comparison to the solution using an extra div. For the details check the post above.