How Can I Reliably Detect IE11 from IE10 Using CSS or JavaScript?

Detecting IE10 and IE11 Using CSS Capability/Feature Detection

The Challenge

IE11 does not support the browser detection tags used in IE10. To differentiate between the two browsers, CSS capability or feature detection is necessary.

IE10 Compatibility Styles

Most IE10 styles are also supported by IE11. Therefore, using capability-based detection techniques that worked for IE10 will likely not distinguish between IE10 and IE11.

Unique IE11 Styles and Capabilities

Here are some unique styles and capabilities that can be used to detect IE11 specifically:

• _:-ms-fullscreen: A hack for triggering a fullscreen mode that works only in IE11 and above.
• :root .ie11up: A style that targets the :root element only in IE11 and above.

Sample CSS:

_:-ms-fullscreen,
:root .ie11up {
  /* Styles specific to IE11 */
}

JavaScript Alternatives

If CSS detection is not feasible, consider using JavaScript alternatives, such as:

• Modernizr: A popular library that detects browser features at page load.
• User agent selection: Using JavaScript to parse the user agent string for specific browser information.

Additional Considerations

• User agent detection is not reliable due to the potential for spoofing or intentional hiding of browser identity.
• Use capability-based detection primarily for non-critical functionality and consider progressive enhancement and graceful degradation as the ideal solution.

The above is the detailed content of How Can I Reliably Detect IE11 from IE10 Using CSS or JavaScript?. For more information, please follow other related articles on the PHP Chinese website!