For example
#div {
_height: 300px;
}
What versions of IE will take this?
The underscore hack will only work in IE6. There was a variation of it that worked in IE7:
#div {
*height: 300px;
}
But neither of these are recommended as they produce invalid CSS. It would probably be a far better idea to have separate CSS files and include them conditionally for different browsers:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
For more information on conditional comments, see this article.
Related
<form:form...>
<DIV class="outer-left-bm">Location: </DIV><DIV class="outer-right-bm"><form:select path="location" items="${locationList}" itemValue="code" itemLabel="desc" /></DIV>
<DIV class="outer-left-bm">Name: </DIV><DIV class="outer-right-bm"><form:input path="Name" maxlength="20" size="20" /></DIV>
</form:form>
DIV.outer-left-bm {
width:49%;
display: inline-block;
min-height: 0;
border: 1px;
text-align: right;
margin-bottom: 8px;
}
DIV.outer-right-bm {
width: 50%;
display: inline-block;
min-height: 0;
border: 1px;
text-align: left;
margin-bottom: 8px;
}
I have a property like above defined in CSS file and used in HTML/jsp.
Here, i want to use the display property as inline or inline-block based on the users browser.
if IE(5-7) 'display: inline;' else 'display: inline-block;'
I want to do the conditional code in css rather than controlling them in html.
Perhaps you can use conditional logic in your HTML to include browser specific CSS files.
Example:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/my/style/sheet/style.css">
<![endif]-->
Unfortunately there is no conditional logic for browsers in standard CSS3.
You can also checkout html5shiv and Modernisr to help deal with old browsers/IE
The vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer) are used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.
This allows properties to be set browser specific to each individual browser/rendering engine in order for inconsistencies between implementations to be safely accounted for.
Below are the references:
1) WebKit extensions
2) Mozilla CSS Extensions
You can use conditional logic in your specific CSS files.
Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
For More Info: You can see this url https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I have this class in CSS and i need to change it when its IE. I want to remove padding-bottom. How can I do that?
I don't want to add another CSS file, I want to change only one property in one class.
.container-wrapp{
float: left;
position: relative;
width: 100%;
padding-bottom:100px;
height: 100%;
}
I tried this but without success:
<!--[if IE]>
<style type="text/css">
.container-wrapp{
float: left;
position: relative;
width: 100%;
height: 100%;
}
</style>
<![endif]-->
For IE10+ you can do the following:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-wrapp{padding-bottom:0;}
}
Demo Fiddle (Note that the text is red only in IE 10+)
#media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.red {
color: red
}
}
<div class="red">text</div>
NB: Using hacks like these are generally frowned upon. Use with caution.
Create a stylesheet file ie.css and use if AFTER the global style definition this way:
<!--[if IE]>
<link rel='stylesheet' type='text/css' href='ie.css'/>
<![endif]-->
This should work.
I think for best practice you should write IE conditional statement inside the tag that inside has a link to your special ie specific style sheet. This HAS TO BE after your custom css link so it overrides the css property. Here is an example:
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Hope this will helps you!
IE 10 and onward no longer support conditional comments. From the MS official website:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5.
Please see here for more details.
If you desperately need to target ie, you can use this jQuery code to add a ie class to and then use .ie class in your css to target ie browsers.
if ($.browser.msie) {
$("html").addClass("ie");
}
Checkout this link How to create an ie only stylesheet , You need to create a separate style sheet for IE.
I'm setting image width based on conditional comments as follows.
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
<o:conditionalComment if="!IE">
<style>
.image-width {
width: 216px;
}
</style>
</o:conditionalComment>
It works on Internet Explorer (8). IE 8 sets the image width to 210px. The image width on other browsers however, should be set to 216px. The last conditional comment i.e !IE does not function on other browsers (Chrome and FF).
How to apply the width: 216px; style on browsers other than IE?
The generated HTML code appears to be correct as follows.
<!--[if lte IE 9]>
<style>
.image-width {
width: 210px;
}
</style><![endif]-->
<!--[if !IE]>
<style>
.image-width {
width: 216px;
}
</style><![endif]-->
The !IE is somewhat an extreme conditonal comment condition. It's namely utterly useless.
Basically, every browser ignores everything inside comments <!-- ... -->. IE is the only browser which actually interprets the content of comments matching <!--[if ...]> ... <![endif]-->. Note that other browsers don't interpret them and still treat them like <!-- ... -->.
When you use !IE, then IE browser won't interpret the comment's content. But other non-IE browsers also not, for the very simple reason that they don't support conditional comments. In effects, the comment is not being parsed by any browser. It has exactly the same effect as <!-- ... -->. The only feasible reason why !IE condition exists is that Microsoft assumed that "other" browsers would in some future support conditional comments as well (this was after all a severe misassumption; even more, the support for conditional comments is removed since IE10).
In order to achieve your concrete functional requirement, you'd better swap the two style declarations and make the main one non-conditional. In CSS, the latter declared one has higher precedence.
<style>
.image-width {
width: 216px;
}
</style>
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
Simple as that. Even IE understands that.
By the way, you'd better use <h:outputStylesheet> resp. <link> elements instead.
How can I have CSS conditions based on the browser?
Just for example if the browser is IE:
div{
[if IE ] background-color: yellow;
}
Thanks
I found this page useful for selecting/isolating different browsers (http://browserhacks.com/)
CSS is limited as it is not a programming language (it's a markup language)
If you are using a CSS preprocessing language like sass-lang, scss or less, you can get around that when you are in development. SASS Lang - CSS Preprocessing.
However, in your case, the condition is according to the browser type, (specifically IE).
Now there are some work arounds, such as Conditional Stylesheets [mentioned here CSS Tricks Conditional Stylesheets], or browser detection with javascript (on the front end, but this is considered bad practice).
The Caveat of Conditional Stylesheets is that it is applicable for IE 9 and under (the compatibility was removed for IE10)
Another thing you should also consider is whether you want to provide conditional stylesheets from your backend (and based on your request header, you can determine the browser type).
Syntax for conditional CSS:
IE-6 ONLY
* html #div {
height: 300px;
}
IE-7 ONLY
*+html #div {
height: 300px;
}
IE-8 ONLY
#div {
height: 300px\0/;
}
IE-7 & IE-8
#div {
height: 300px\9;
}
NON IE-7 ONLY:
#div {
_height: 300px;
}
Hide from IE 6 and LOWER:
#div {
height/**/: 300px;
}
html > body #div {
height: 300px;
}
OR you can create two different css files one for IE specific and other one is common for other browsers.
If browser is not IE 6:
<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
If browser is greater than IE 7:
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
If browser is less than IE 6:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->
i have a problem in display:inline and display:inline-block.......how should i define both in css...i.e display:inline for ie and display:inline-block for ff and chrome....
You can use Conditional Comments to load a CSS file with overrides that will only be loaded by Internet Explorer. For example:
<!-- main stylesheet for all browsers (uses display: inline-block) -->
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />
<!-- overrides for IE 7 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 7]>
<link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- overrides for IE 6 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 6]>
<link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
Here is a good overview of CSS browser hacks:
http://brainfart.com.ua/post/css-hacks-overview/
I guess section 4, 8 or 9 could apply for your case.
IE7 and below doesn't support inline-block. But there's a simple workaround. As an inline-block is - simply put - an element that behaves like a block but aligns as inline, you only need to tell IE it's an inline element with a layout (a IE idiossincracy). So:
.el { display:inline-block; *display:inline; *zoom:1; }
There you have it! Really simple. You may as well use conditional comments and avoid the star hack. I personally use Paul Irish's HTML declaration (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) and then I target specifically IE7 and below using:
.el { display:inline-block; }
.lt-ie8 .el { display:inline; zoom:1; }
The problem with IE is that it does not properly support "inline-block". Therefore, to compensate for this you have to float the element. The container for the floated elements thus has to to be cleared, using "clear:both" unless everything is a fixed size, such as menu links.
I much prefer figuring out what isn't supported in each browser than writing individual style sheets for each.