I know IE8 only supports :after and not ::after.
I thought I could solve it in one line.
Here is the CSS:
E:after, E::after{ ..... }
But it doesn't work in IE8.
IE8 is behaving as expected and discarding the entire ruleset because it doesn't recognize double colons. See this slightly related answer. This is not buggy behavior.
If you need to support IE8, just use single colons. That's what you're supposed to do. :before with a single colon is guaranteed to work on all browsers and you can rely on it thanks to IE8.
E:after { ... }
you can place code for IE8 as this.
<!--[if IE 8]>
<style>...</style>
<![endif]-->
Related
I'm creating a css3-heavy site and want to have a little message for people who are using older browsers, as well as alternate versions of the content. I'm wondering if I could do something like:
#old {display:-webkit-none;}
#new {display:none; display:-webkit-block;}
so that the #old div will only be visible in non-css3 compatible browsers.
Well, CSS3 compatibility is different in each browser. It isn't a black and white thing like some browsers support CSS3 and some don't. Most browsers at least implement some features of CSS3 but some more than others, and I'm fairly certain none support all features of CSS3. You can check which browsers support which features like so:
http://caniuse.com/
You can use Modernizr http://modernizr.com/ to use different styles based on what CSS3 features the browser supports.
For example, if you wanted to show a message on browsers that don't support border radius:
.no-borderradius #old
{
display: block;
}
You can use IE conditional comments. Write like this:
<!--[if IE]>
<style>
#old {display:none;}
</style>
<![endif]-->
For more brief read this http://www.quirksmode.org/css/condcom.html
On this MS compatibility table it says, IE9 does not support pseudo-elements ::before and ::after, but when I try it seems it does... see JSBin
Am I doing something wrong? I thought ::before and ::after would be nice tools to hide stuff from IE9, when in fact, they don't.
The CSS2 pseudo-elements :before and :after, with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3.
The double-colon notation, on the other hand, is new to CSS3. IE9 does support this new notation for ::before and ::after, and likewise for the CSS1 pseudo-elements ::first-line and ::first-letter. Going forward, however, no new pseudo-element may use the single colon syntax, and browsers (including IE) are expected to support the double colon syntax for all pseudo-elements.
I have no clue why that table says IE9 doesn't support the new pseudo-element syntax, because it certainly does according to the docs for the individual selectors linked above, and your test case. As well as, of course, this answer.
IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not. This can be tested e.g. as follows:
<style>
p::after {
content: "***AFTER***";
}
</style>
<p>Hello world
Here the CSS rule is ignored, because IE 9 goes to quirks mode. But if you add the following line at the very start, IE 9 goes to standards mode and the CSS rule takes effect:
<!doctype html>
It is common in IE 9 that in quirks mode, new CSS features (most features that are neither in CSS 2.1 or in the IE legacy) are not supported. In quirks mode, IE 9 does not support the old one-colon notations :after and :before either. It supports them (but not the two-colon versions) in “IE 8 mode”, which you can select in developer tools (F12) manually, in the “document mode” menu, or at document level using the tag <meta http-equiv="X-UA-Compatible" content="IE=8">.
As quoted from http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
CSS3 pseudo-element double colon syntax
Please note that the new CSS3
way of writing pseudo-elements is to use a double colon, eg a::after {
... }, to set them apart from pseudo-classes. You may see this
sometimes in CSS. CSS3 however also still allows for single colon
pseudo-elements, for the sake of backwards compatibility, and we would
advise that you stick with this syntax for the time being.
I'm familiar with the html conditional tags
<!--[if IE]><![endif]-->
Because of various issues I need to use a single stylesheet. So I cannot use the above solution. I can't find hacks that work to target only ie9 browsers so I need an alternative.
I remember seeing once a condition used in a stylesheet that only IE understood. Something with an # sign and 'MS'. It was awhile ago.
Does anyone know about this? Can it be used for browser specific (ie only) styling?
OK this is about the BETA and PREVIEW's of IE9, but maybe these will work for the full release also?
http://archivist.incutio.com/viewlist/css-discuss/112904
<body>
<!--[if IE 9]><div id="ie9"><![endif]-->
... your page here ...
<!--[if IE 9]></div><![endif]-->
</body>
with a css like
#ie9 #wrapper { background-color: blue; }
will make a blue background only in IE9, all other browsers won't find <div id=ie9> since its hidden in the comments. that should do the trick :)
See also Wikipedia on Conditional comments for an in-detail explanation.
IE allows you to do detect which version of IE is running based on their browsers comment conditions (I actually don't know if that is what they are called, someone can correct me if it is not).
<! --[if lt IE 7]> css code here.. <! [endif] -->
Does anyone know if other browsers have followed their example to determine what version of thier browser is being used?
<! --[if FF]> css code here.. <! [endif] -->
<! --[if O]> css code here.. <! [endif] -->
In general, you shouldn't need to do this with modern browsers (FF3.6, Chrome, IE9, Safari). Also, if you target a hack at a browser that is still changing, you run the risk of the hack still working but the problem it solved being fixed, and then your fix breaks.
Hacks or conditional comments should only be aimed at old browsers (IE6 and IE7 are the main targets).
No, conditional comments are only supported by Internet Explroer and the list of available conditions is quite astounding.
Note that you can use conditional comments to hide things from IE browsers in general:
<!--[if !IE]><!-->
<b>This HTML is not seen by IE</b>
<!--<![endif]-->
Ugly, ugly, though...
Not that I'm aware of. Are you trying to serve up different CSS or a combo of CSS and JS/other?
Perhaps using the vendor prefixes like -moz-, -webkit- and -o- before CSS declarations might work for you in that case.
Nope,
conditional comments are IE only.
Which is the CSS hack you use most often and which one do you avoid using?
I am asking this question so that I can understand different views of different people about CSS hacks and also understand which hacks are good and which ones are not.
Not technically a hack, but I often include conditional comments to target IE 7-:
<!--[if lte IE 7]>
<link href="ie7.css" />
<![endif]-->
I actually get away without using many hacks.
Most used - clear fix
Most hated - !important rules because they are an indication that the stylesheet is probably not organized properly. It also means that some styles are too general that they ought to be. Not good for performance either.
I mostly use min-height hack and avoid using underscore trick something like _margin that targets IE6.
I've found that if I use the XHTML 1.0 strict doctype, mostly things just work... That said, I don't really do anything fancy... But a nice minimalistic site like SO would be pretty easy to design sans hacks...
PNG transparency in IE6 with AlphaImageLoader()...
IE versions >6 and Firefox and Chrome all support full 8-bit transparent PNGs, but for IE6 compatibility you have to do the above css hack. Your CSS file will no longer validate but if you rely on transparent PNGs like I do... it's worth it.
Most Used: Negative Margins
Seems this is the one I have to use most often: create a CSS class
.inline-block { display: inline-block; }
use it to style any element you wish to display as inline-block (instead of using display: inline-block; directly). Then, in your IE-only (v.7 or earlier?) file:
.inline-block
{
zoom: 1;
*display: inline;
}
Sad panda.