Targeting different versions of Internet Explorer and Edge
One of the pains of web development is supporting multiple browsers. Most browsers play nice when it comes to implementing standards, but some of the older variants of IE have a different way of doing things. Hence, targeted CSS “hacks” are needed to ensure the front-end is consistent across all browsers. In a recent example, I had some issues with icons in buttons. Worked fine on Chrome, Opera, Firefox and even Edge, but IE 10 and 11 had the icons well out of place. I tried targeting the IE10 and 11. This appeared to be successful until I realised it caused a regression issue on Edge. What I needed was a CSS selector that would only target IE10 and 11.
Stack Overflow tends to have the answers for these things, but I found some of the answers provided ways of targeting IE as a whole only, or the selectors didn’t work for me. GitHub user zunairmushtaq has come up with an extensive CSS reference sheet for targeting individual versions of IE and Edge. You can add this one to your bookmarks:
https://gist.github.com/zunairmushtaq/aeaa48432d51cad0eb1c
If you enjoyed this post, make sure you subscribe to my RSS feed!
