If my css is:
font-family: inherit;
Is there any mozilla firefox specific attribute as:
-moz-border-radius-bottomright: 20px;
which can be used for mozilla browsers only?
I know you can do this to only target Firefox, the only problem is it's not in the CSS, I'm not sure if there is a way of doing this for font-family in the CSS.
<html>
...
<head>
<style type="text/css">
#-moz-document url-prefix() {
font-family: inherit;
}
</style>
</head>
...
</html>
There is no Firefox specific way to write font-family: inherit;. Mozilla support inherit like any other browser, if that is what you mean?
Vendor-prefixed properties (like those used for some CSS3 properties) are only used for properties that are still "experimental" or evolving. The inherit keyword has been around for ages and therefor Firefox, like any other browser, implement it the way the CSS-specification states, without a vendor prefix.
If you want to target only Firefox with some specific CSS, this SO answer states that you can wrap the Mozilla specific properties with a #-moz-document rule. As only Mozilla will recognize that as valid CSS, all other browsers will ignore it. A bit "hacky" perhaps, but it sounds like your best shot.
Edit:
To target only IE with specific CSS, one way is to put it in an IE-specific stylesheet file, and then use the conditional comments for IE. All browsers but IE will see this as an HTML-comment, and therefor ignore it, but IE will apply the styling in that file.
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Related
My page has an H2 class that says
H2.clearboth {clear: both; height:16px;}
This works fine in I.E. but in Firefox and Chrome I need to ignore the height property because that is what is messing up the design. Is there a way for me to do this for Firefox and Chrome?
So I tried to do a browser specific -moz but there is no specific property for ignoring just height.
Thanks for any help or advice on this,
thanks,
Paul
You could treat IE as exception, and in your html add:
<!--[if IE]>
<style>
H2.clearboth {height:16px;}
</style>
<![endif]-->
Then your css could be fine:
H2.clearboth {clear: both;}
Better yet, why do you use H2{height:16px;} only on IE and not on all browsers?
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
Friends, please help me in defining specific css rule for IE9?
For example like this
/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
You can prepend the CSS style with
:root
to make it IE9-specific, like this:
:root #element { color:pink \0/IE9; } /* IE9 */
Use IE conditional comments:
<!--[if ie 9]>
your stuff here
<![endif]-->
\9 is a "CSS hack" specific to Internet Explorer.
This simply means that the one specific line of CSS ending with a \9;
In your example,
If your CSS looked like this...
html .twit-post .delete_note a
{
background-position-y: 2px\9;
}
html .twit-post .delete_note a:hover
{
background-position-y: -14px\9;
}
The result would be background-position-y: -14px; in IE 9
I think you can do the same as if you want to write specific code for IE6 but say IE9 instead :)
<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->
use conditional CSS:
(place the code above the <head> on your html, and IE9 will read that extra CSS file)
<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->
This means the approach is with a new CSS file rather than a hack in the classes, this guarantees the CSS are valid.
I found that in some cases using negative values (when using a compiler to compile LESS files) using:
margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */
You shouldn't need to target IE9. It is capable of handling modern css and shouldn't be hacked. This is an outdated method of developing.
Can anyone please help me with this. I am new to css styling. I have a css file where all my styling resides for the asp.net website that I am trying to build. However it works fine on the server that has IE 7 installed on it and when I try to view it using chrome, firefox or IE 8 and above it kinda distorts the look of the website.
I need to change my margin according to the client browser. How do I achieve this? Ive heard that there is an "if" condition solution to this. Means I have to write seperate css files in my project and include the right one according to the browser?? Cant I just change the basic css to detect the browser and select the appropriate styles?
i want to choose different positioning for a division according to client browser. I am working on asp.net 2.0 by the way.
existing code:
#page
{
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');
}
I am trying to do this:
html>/**/body #page
{
background-image: url('C:/Program Files (x86)/some-path-here/Images/img1.jpg');
}
But the img1 does not load up for IE 8 and firefox. It does for IE 7.
I tried to target just IE 7 for my testing purposes with the following code in my html file:
<!--[if IE 7]>
body {
background-color: Red;
}
<![endif]-->
However when I test the page on IE 7 it just show me the "background-color: Red;" text. Why is that? Am i missing something here in this conditional statement? It is only taking the text and doing nothing with the background color. Thanks.
You can code for standards compliant browsers (Chrome, Safari, Firefox etc.) and then add conditional comments for internet explorer.
EDIT:
As a side point, look at Eric Myers' CSS reset. It's an excellent resource.
Conditional formatting for IE: http://www.quirksmode.org/css/condcom.html
In terms of Hacks you can write invalid markup for some browsers (such as IE) by using _ in front of the CSS attributes for IE 6/7 but it makes your CSS invalid per specifications - it will still run properly.
Instead of Conditional Comments and non-standards ompliant CSS hacks, check out the CSS Browser Selector plugin. This jQuery will allow you to write different rules for each browser inside the CSS file itself with no inaccuracies for standards and no Conditional comments. It can even allow you to target different browsers on different OS's.
For IE you'd write:
.ie .myDiv
{
background-color: #f00;
}
And for webkit browsers:
.webkit .myDiv
{
background-color: #bar;
}
Then IE (all versions) and Webkit browsers will display different background colors. You have a big choice of browsers to select as well :)
I going to mention below some of the CSS hacks I know for the Browsers that I learn while working here at Oodles Technologies.
I'm gonna list them out here as there are some properties which creates issue in webkit based browsers like safari, chrome and IE. Let us suppose that we can using this css code:
CSS targeting Chrome and Safari:
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> #media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.selector { property:value; }
/* Safari 5+ ONLY */
::i-block-chrome, .selector { property:value; }
}
</span></span>
CSS target Safari 9 but ONLY on iOS
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> /* Safari 9+ (iOS Only) */
#supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true)) {
.selector { property:value; }
}
</span></span>
CSS target Firefox only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> #-moz-document url-prefix() {
.selector { property:value; }
}
</span></span>
CSS target IE10 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.selector { property:value; }
}
</span></span>
CSS target IE9 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
</span></span>
CSS target IE8 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" media="screen" />
<![endif]-->
</span></span>
CSS target IE7 only
<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> <!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" />
<![endif]-->
</span></span>
Hope you find these useful
CSS Hacks are decreasing in popularity. You should instead start your css by using a CSS Reset. You can read more about reset options in this thread.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I do IE conditionals in CSS?
How can I apply the rules below to IE only?
.abc {
float:left;
height:0;
margin:0 10px;
width:0;
/*Apply these rules for IE only*/
position:absolute;
left:30;
top:-10;
/*Apply these rules for IE only*/
}
In browsers up to and including IE9, this is done through conditional comments.
<!--[if IE]>
<style type="text/css">
IE specific CSS rules go here
</style>
<![endif]-->
A good way to avoid loading multiple CSS files or to have inline CSS is to hand a class to the body tag depending on the version of Internet Explorer. If you only need general IE hacks, you can do something like this, but it can be extended to be version specific:
<!--[if IE ]><body class="ie"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->
Now in your css code, you can simply do:
.ie .abc {
position:absolute;
left:30;
top:-10;
}
This also keeps your CSS files valid, as you do not have to use dirty (and invalid) CSS hacks.
A fast approach is to use the following according to ie that you want to focus (check the comments), inside your css files (where margin-top, set whatever css attribute you like):
margin-top: 10px\9; /*It will apply to all ie from 8 and below */
*margin-top: 10px; /*It will apply to ie 7 and below */
_margin-top: 10px; /*It will apply to ie 6 and below*/
A better approach would be to check user agent or a conditional if, in order to avoid the loading of unnecessary CSS in other browsers.
I prefer using a separate file for ie rules, as described earlier.
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie-style.css"/><![endif]-->
And inside it you can set up rules for different versions of ie using this:
.abc {...} /* ALL MSIE */
*html *.abc {...} /* MSIE 6 */
*:first-child+html .abc {...} /* MSIE 7 */
I know in order to include a browser specific css file you can do the following
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-->
But is there a way to do this in the actually stylesheet itself?
EDIT
Thanks for the replies, I am just going to build a new IE specific stylesheet and override what I need there. I think this is prob the best way to do things.
Check this post, scroll down to Hacks:
http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
Actually, yes there is.
It wont validate, but if you add _ before the property name so div {width: 200px;_width: 100px;} will be 200px wide in non-ie browsers and 100px in IE.
I have decided that building a separate stylesheet and then using the comment IF statement is the best solution. Keeps the stylesheets clean and it is more obvious to others as to what you are doing (overriding properties due to browser quirks).
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="StyleIE.css" />
<!-->
These work...
.foo{
border:1px solid #000;
*border:3px dotted #00f;/*IE6 & IE7 Only*/
_border:2px dashed #f00;/*IE6 Only*/
}
Thus the outcome is:
W3C Browsers (Firefox, Safari, Opera, etc.)
1px solid black border
IE7
3px dotted blue border
IE6
2px dashed red border
As a last resort (and not highly recommended) you can use the dynamic properties by using expression() then test for the browser version (if you care)
you can also use the !important flag to do this, but that may have unintended side effects.
Click Me I'm !important