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/
Related
Filters are not working in IE browser using angular 4.
Here my code for css code:
.style{-ms-filter: grayscale(50%); -ms-filter: brightness(70%);}
The modern definition of css filter doesn't work in IE8. IE8 does have the older, proprietary MS filters, but those are not the same.
You can't have 2 properties to a selector a row with the same name. That's not how CSS works. In this case, the second -ms-filter will override the first one, so that only brightness(70%) is used.
The solution, according to MSDN, is to use commas to separate multiple values.
Aside from that, apparently neither the old MS versions nor the newer standard versions are supported by IE10 and IE11, so you're out of luck in any version.
You can use
.style {filter:gray}
in IE8 to set the gray scale to 100%, but I haven't found any equivalent for brightness, sorry.
What is the best option of fallback IE non supporting issue on CSS/SVG animations ?
Keep #m_a answer checked, just wanted to explain all available options as as fallback for people reading the question later and looking for an answer.
Before listing all options currently available having a look at http://caniuse.com/#search=svg will see that basic support for SVG in IE9+ with this issue though
IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.
so If you want to fallback IE9+ then you just keep using SVG, but for IE8 and below SVG file is not an option.
Also it is important to know the term "Sprite Animation" (1) which basically represents a step-based animation showing a new slide or image in each step in fractions of the second, for smooth animation 20+ slides/second is better so that not to have quirky to human eyes.
1. CSS3 Animation and Transition:
CSS3 animation and transition and also the transform property could be used for simple and basic animations applied on DOM elements other than SVG elements but it is not supported in IE9 and below. As well as animating animated CSS properties it is possible to create "sprite animation" with CSS animation by making use of steps() like in this CSS sprite animation example.
2. JavaScript
I've seen very complex javascript animation back in 2005 and 2006, and there was a website whose owner made two identical versions of the website one totally in Flash and the other totally in javascript -which was slightly quirky though- this is a very basic and simple pure javascript.
With javascript -pure or jQuery(2)- you can change CSS properties in general but mostly for simple animation you'll use properties like positioning, color changing and opacity.
As well as above implementing "sprite animation" is possible too like in these two examples which I just made to mimic the "sprite animation" example in the CSS part above applied first on background position property and second on an 'img' tag with its parent element having overflow:hidden. again the image is .png but you can use SVG in the same way if you're looking for a fallback for IE9+ only.
There are also other JS libraries(3) which could be used:
Greensock with its GSAP API, is a good option since it is fast and provide fallback back to IE6, also could work with other js libraries as well as CSS and canvas, I like the way morphSVG works too.
CreateJS [ Easeljs and TweenJS ] which works with HTML canvas -yeah right canvas are not supported in IE8 and below, there is a workaround for IE8 thought- and it provides exporting from flash files.
Snap.svg looks simple and nice and works with SVG means only IE9+ are supported, so if you want a fallback for IE8 and below you can't use this one.
RaphaelJS supports very old browsers including IE6+ and it produces scale-able vector because uses the SVG W3C and VML(4) as DOM objects.
Adobe Edge (5) lets you create HTML5 animation with an interface but I think it produces lots of javascript files. Also you can export from Edge to Snap.svg with some plugin I believe.
3. Flash:
Flash(6) was used as best option for web designers for creating cross-browser animation for almost a decade but gradually was abandoned due to presenting CSS3 animation and the revolution of javascript as well as the handheld devices which stopped supporting Flash since around 2012.
Flash creates vector based graphics and key-frames based animations as well as the ability to embedfonts as vector in times were verdana, tahoma and times new roman were default fonts of the web before #font-face, to have vector graphics you can use the drawing tools inside the program or import Adobe Illustrator .ae files.
You can use Flash as great fallback for IEs as it is supported since long time as well as it produces scale-able vector graphics just like SVG does and offers tweening but it has it's scripting language(7) which you mostly don't need unless if you want to offer interactions to the user, also -as far as I know- you can't access its structure with javascript.
Again for demonstration purposes I've also created this flash example which uses same "sprite animation" idea from the CSS part. Also created this vector graphics demo example .
UPDATE 1:
Upon a comment from the OP, for inline SVG, when DOM is ready -put javascript right before the closing </body> tag- you can do one of the following:
Use Modernizr (8) which detects individual features of the browser -all browser not IE only- to detect whether the browser supports SVG features - in the link I included "inlinesvg", "svgclippaths" and "svgfilters" features you can add or remove features - then hit build and download it, check the documentation to know how to use it.
Detect if the browser is IE or not, I modified this condepen and made this Demo Fiddle (9) to make a condition so that if it is IE and Version < 9 it replaces all inline .svg with the corresponding .png.
There is this hack <!--[if IE]> stuff here <![endif]-->, used to work in older IE version, but not on IE10+ it won't work. so you can have this:
<!--[if lt IE 9]>
<script src="repSVG.js"></script>
<![endif]-->
Which basically means, if IE Less Than 9 -hence the lt letters- load repSVG.js which will contain only the replacement and the replaceSVG() function, check this Demo Fiddle
For SVG as backgrounds, like if you're doing a "sprite animation", create another css file, say fix.css, which contains identical naming of all CSS rules that have .svg backgrounds, but with .png images instead, like:
in you style.css:
.foo {
width:300px;
height:120px;
background:url(foo.svg);
background-size:300px 120px;
}
.bar {
width:200px;
height:50px;
background:url(bar.svg);
background-size:200px 50px;
}
in fix.css you have:
.foo { background:url(foo.png); }
.bar { background:url(bar.png); }
Then in the head section of your page do one of these:
Use Modernizr to load the fix.css in the head if the browser doesn't support SVG as backgrounds.
Again you can use this easy thing:
<link rel="stylesheet" type="text/css" href="main-style.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="fix.css">
<![endif]-->
Use same logic in the Previous Fiddle to detect if browser is IE and version is less that a certain version, then load fix.css again in the head section.
Note that you need to make sure to have the method you chose from above after you load style.css so that when you load fix.css it will override the background-image properties of style.css.
(*) Check CSS-Tricks: Using SVG.
UPDATE 2:
Thanks to #kaiido for mentioning SMIL(10) with a polyfill, SMIL is a great option for SVG animation but the reason I didn't think it is an option it is because IE never adopted it, IE relied on its VML, this why I didn't think it would suit the OP.
Again thanks to #kaiido,I didn't know about this fakesmile which is:
SMIL implementation written in ECMAScript ... It is primarily targeted to SVG animations... FakeSmile makes declarative animations work in IE too.
However, I'm not sure if this fix will work in new versions of chrome, from MDN:
Chrome 45 deprecated SMIL in favor of CSS animations and Web animations.
Also from CSS-Tricks
Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.
(1). Examples of spritesheet images
(2). jQuery animation is slow compared to pure javascript animation, GSAP, or Createjs.
(3). I've seen Greensock, EaselJS and Snap.svg in action but not for complex animation though just simple things similar to CSS3 animation.
(4). Vector Markup Language (VML) is an XML-based markup used by Microsoft and is supported in IE5 - IE8 but is deprecated since the realese of IE9. it is also supported in MS Office 2000 and later.
(5). Adobe Edge showcase examples.
(6). As well as flash there are other software used to create .swf flash files but most of them don't offer rich features except SWiSH Max which offers good level of features.
(7). ActionScript is the scripting language used in Flash and it is ECMAScript syntax like javascript.
(8). Using feature detection is better than browser detection, because say someone uses an old browser other than IE, for example Safari5 or Opera12 then this fiddle won't fix it because it detects IE or not only not if the browser supports SVG or not.
(9). If you open the fiddle in any browser other than IE8 and below it will show SVG otherwise it show PNG, to experiment it change this IEversion < 9 to IEversion < 14 and you'll see this affect all IE existing IE in the time of this post. Notice that, in case later Microsoft decided to release an IE version that supports SVG animation with CSS, presumeably IE16, you can make another condition for that, something like this demo fiddle.
(10). SMIL stands for Synchronized Multimedia Integration Language, it has an XML-based syntax just like SVG, SVG animation using SMIL
IE (at least until IE11 -- which is the most used version) does not support CSS3 SVG animations. See: CSS3 animation is not working.
Javascript is available, at a cost to performance, and certainly a cost of time and flexibility. Animated GIFs could support something simple and self-contained. The first answer in the above link has more about that: https://stackoverflow.com/a/24477055/1864597
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
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'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.