IE10 does not have conditional comments anymore

Probably old news for many of you. Internet Explorer 10 will totally ignore your code similar to this one:

   <!--[if IE]>
  
  <![endif]-->

After some search I found the topic on stackoverflow.com: http://stackoverflow.com/questions/9900311/how-do-i-target-only-ie10-for-certain-situations-like-ie-specific-css-or-ie-spec/14087321#14087321
You can also read my reply there.

Why do we have to address it? The problem is IE10 has its own rendering engine which differs from other browsers, and some specific css styles still require special handling in case of IE10.
The solution for css styles will be using document.documentElement - the root element associated with any document, documentMode property of IE, which says how IE interprets and renders the document, and @cc_on Statement, which activates conditional compilation support in JavaScript in IE.
You include the next one-line script inside of head tag of your html page before your css link.

Then in css file you specify your styles as descendants of "ie10" class: 

.ie10 .myclass1 { }

And voilà! - other browsers stay intact. And you don't need jQuery. You can see the example how I implemented it here: http://kardash.net.

Comments

  1. UnknownFebruary 1, 2013 at 7:39 PM

    I've written a small, vanilla JavaScript plugin called Layout Engine, which allows you to feature detect IE 10 (and every other browser), in a simple way that cannot be faked, unlike user agent sniffing.

    It adds the rendering engine name as a class on the html tag and returns a JavaScript object containing the vendor and version (where appropriate)

    Check out my blog post: http://mattstow.com/layout-engine.html and get the code on GitHub: https://github.com/stowball/Layout-Engine

    ReplyDelete
    Replies
    1. eugenekardashFebruary 13, 2013 at 10:15 AM

      Matt, I looked at your LayoutEngine script. Very good job! I totally see its value, and can use it in my future projects. Thank you!

      Delete

Post a Comment

Popular posts from this blog

Using Trello and Confluence to manage UX design project. Part 2

Image
This is part Two. Part One can be found here . Term definitions. Brainstorming board. Activity board. Let me give you an overview of the items we refer to, deal with, and vetting all days long. Below are my simple definitions. UX Brief – a living document, a single and comprehensive point of reference of the design project. User Story – a short requirement or request from the end user. Later will be converted into task flow performed by this user to reach the goal. Acceptance Criteria – a set of conditions/statements, or a checklist, which defines the user story’s Pass/Fail . Feature – a functional part of the application, which combines several user stories. User stories are written to provide a complete support to this feature in terms of tasks performed by the user, while keeping in mind the user’s goal. Epic – a large logical group of multiple features in complex application. Brainstorm – a collaborative session involving product owners (PMs) and UX designers...
Read more

How do I use InVision

Image
Team lead asked me to write what InVision products do I use, how I use them, what are pros and cons. I wrote it today, and really think it will be helpful to share my thoughts with wider audience. So, below is the adaptation of what I provided to the engineering management in one fintech company.  I use InVision to share my hi-fi designs and specs, which I create in Sketch desktop application. This is my primary and every day usage of InVision, and about 90% of all usecases of all InVision products combined.  I sync designs via the plugin in Sketch made by Invision, called Craft .  When they are in InVision, we call those designs prototypes .  It works, but I often experience slowness. Sometimes sync process is failing, and I have to try it again. In Sketch I select one or more artboards, then initiate sync, which sends the artboard to InVision cloud. I have to be logged in Craft plugin with my InVision credentials. Almost every day, especially when I design intens...
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project...
Read more