Sưu tầm

By  Louis Lazaris   on  November 21st, 2012  |  68 Comments Last year, Microsoft announced that IE10  will not be supporting conditional comments . With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using  conditional comments ,  conditional classes , and other IE-specific hacks . But without conditional comments in IE10, the only options we’re left with to target CSS problems are hacks or browser sniffing — and we certainly don’t want to resort to the latter. Interestingly, there have been a few posts and code snippets floating around that apparently do target IE10 specifically using a hack. Below is a summary of these three techniques, for reference. Feature Detecting  @cc_on This interesting bit of code is discussed  on this Reddit thread , and comes from someone named  Rob W. , who posted this code snippet on  a StackOverflow thread . The script is inside of an IE-excluding conditional comment to ensur

Code này không chạy được trên IE 10: <style type="text/css">     .grayscale {         filter: grayscale(100%);         -webkit-filter: grayscale(100%); /* For Webkit browsers */         filter: gray; /* For IE 6 - 9 */         -webkit-transition: all .6s ease; /* Transition for Webkit browsers */         -moz-filter: grayscale(100%);         -o-filter: grayscale(100%);         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");     }         .grayscale:hover {             -webkit-filter: grayscale(0); /* For Webkit browsers */             filter: grayscale(0%);             filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter

In categories:  Tutorials ,  Website development There are a lot of examples and tutorials about how to create  grayscale images using CSS  , CSS3 and JS, but while developing a project for one of my clients, I found out that there is no solution that would be cross-browser compatible and would support the latest Internet Explorer 10 and 11 versions. This is the reason I came up with a solution of my own and decided to  share it with you . Update: This tutorial uses browser user agent detection which is fully functional but has been deprecated for a while so I have created another  grayscale image tutorial that uses browser feature detection . Grayscale and Internet explorer 10, 11 Grayscale filter has been natively supported by Internet Explorer since version 6, but recently Microsoft decided to remove this native CSS filter and since version 10, IE does not display grayscale images using the old technique. This is the reason why we now have to turn to  grayscale JS solut