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
Related
To Apply color for bootstrap 2.3.2 Icons, I am using filter property in CSS.
This works good in all browsers except IE11.
.apply-color {
filter: opacity(0.5) drop-shadow(0 0 0 blue);
}
How can we achieve this for IE.
IE 11 DOES NOT support filter at all: https://caniuse.com/?search=filter.
There are different JS polyfils for filter techniques like 'grayscale' but I am not sure if there is one for you special settings which are more simple.
Thinking forward: as you really 'only' use opacity and drop-shadow you don't need filter in that case ...
IE11 supports:
opacity
box-shadow
... so you could achieve your styling without filters. And if you really need to provide support for eight years old and long outdated (nearly) not used IE11: just wrap the special settings for IE11 traditional to a separate IE11 stylesheet and include it to your html (see update below):
<!--[if IE 11]>
<link href="ie11.css" rel="stylesheet" type="text/css">
<![endif]-->
UPDATE
According to the comment from Rich DeBourke below: IE11 does not support conditional comments. Here are additional links to that point (really a long time ago):
Information about conditional comments:
https://www.sitepoint.com/internet-explorer-conditional-comments/
Information about writing special CSS for old IE versions including IE11:
How to write a CSS hack for IE 11?
https://paper-leaf.com/insights/targeting-ie-10-11-browsers-css/
I spent a good amount of time making a website look good, working with Google Chrome and Firefox, however as is often the case, when I look at it in Internet Explorer it looks worse than it did at the start. I believe there is a way to have an IE only css file, however I don't recall how to do it. Can you point me in the right direction.
Also I would like to know if there is a way to have
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
work for IE. I looked into this years ago and I think the only option then was to have images create the radius. Hopefully there is something new that works (the simpler the better). The border radius is just one of the many things that render differently now that I changed the css.
Thanks
Answer to your first question: to include a stylesheet file in IE only, wrap your <link>ing with a conditional comment. Here's an example on how to do it:
<!--[if IE]>
<link rel = "stylesheet" type = "text/css" href = "cssfile.css" />
<![endif]-->
Answer to your second question older versions of IE do not support border-radius. IE9 does support it, though. There's no workaround other than to use images or third-party plugins like jQuery corner.
Internet Explorer 9 and higher versions support border-radius. Lower versions do not support this. You can
use images
Ignore Internet Explorer 8 and below
use jquery plugin http://jquery.malsup.com/corner/
Your are looking for Conditional stylesheets vs. CSS hacks and one I had to dig out from the very bottom: PIE CSS3 decorations for IExplorer.
IE-specific CSS:
Use Modernizr to determine which features are available in the user's browser. This will add classes to the <body> tag, which you can then reference in your stylesheet, to activate certain styles if a given feature is or isn't there.
Use Conditional comments to include an IE-specific stylesheet.
Use an IE CSS hack, like the ones described here: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/
Border radius:
This is supported by IE9, so you must be using IE8 or earlier (or a compatibility mode).
Ignore it for uses of older IEs. It's not worth the effort to support them for a feature that doesn't actually affect the usability of the site.
Use CSS3Pie to hack in the border-radius feature into IE. It's a hack, but it works quite well (better than some others that are being recommended here).
I use php for my web project, but I need this coloring complement with CSS alone.
Thus I need code that works in Firefox and internet explorer.
This code is written, but does not work in internet explorer:
.tbl_css col:nth-child(odd){
}
.tbl_css col:nth-child(even){
}
Lower versions of IE will not support pseudo-selection.
You can use jQuery to make it work:
$(document).ready(function(){
$('table tr:even').addClass('even');
$('table tr:odd').addClass('odd');
});
In CSS simply:
.even{ /* your styles */ }
.odd { /* your styles */ }
The pseudo-selector :nth-child is supported by the newest version of all major browsers (IE 9+, FF 3.5+). If you have to support older browsers (IE 8-, for example), you can either manually assign class="odd", class="even" to your columns, or use JQuery:
$(".tbl_css col:nth-child(2n+1)").addClass("odd");
$(".tbl_css col:nth-child(2n)").addClass("even");
Rename .tbl_css col:nth-child(odd) to .odd.
Rename .tbl_css col:nth-child(even) to .even.
What version of IE are you testing with?
The nth-child selector was only added to IE in IE9. Previous version (IE8 and earlier) do not support it.
If you need to achieve this effect in older versions of IE, then you will need to use an alternative technique. The most common is simply to output your HTML with alternating classes in the <tr> elements. There are also JQuery plugins that can achieve this effect for you.
Hope that helps.
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.
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.