How can I use CSS to specifically target Internet Explorer versions 10 and earlier, but not version 11

Is there a simple way to target CSS for IE10 and below? While IE11 is working fine with the CSS I'm using, I need to add specific styles for versions lower than that.

I am aware of the method for targeting up to IE9:

<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->

However, conditional comments do not work in IE10. Also, specifying IE9 in the content meta tag is not an option as I prefer utilizing IE11/Edge by default. I want to move forward without getting stuck in the past!

Using IE-specific media queries is not viable either, as they would apply the styles to IE11 as well, which is something I wish to avoid. My intention is to target versions below IE11 only because I have a separate set of 'fallback' styles to be applied when the primary 'correct' CSS cannot be rendered on these browsers.

I also attempted a different approach - setting the fallback CSS as default and then specifically targeting:

IE11+ using _:-ms-fullscreen :root

Chrome using 

@supports (-webkit-appearance:none)

Firefox using 

@supports (-moz-appearance:meterbar)

Unfortunately, this method did not yield the desired results. Although Chrome and Firefox displayed the specific styles correctly, IE11 still retained parts of the default CSS. Additionally, both Chrome and Firefox encountered various issues with the overall site styling.

Any suggestions on how I can exclusively target IE10 without affecting IE11?

Thank you!

htmlcssinternet-explorer

Answer №1

Instead of checking for the browser, it is more effective to check for the specific feature you want to use. Modernizr provides a way to determine if a particular feature is supported in your current browser or not ->

It's important to note that checking for the browser in IE 11 may not work as expected due to a change in the agent name from IE to Mozilla (read more)

For more information on @support and modernizr, visit -> (scroll down a bit)

Answer №2

I recently implemented this code on a client's website to specifically target Internet Explorer versions 10 and 11:

var doc = document.documentElement;

doc.setAttribute('data-useragent', navigator.userAgent);

var userAgent = $('html').attr('data-useragent');

if ( userAgent.indexOf('MSIE 10.0') >=0 || userAgent.indexOf('Trident') >=0  ) {
    /* ENTER YOUR CODE HERE */
}

This piece of code adds a data-useragent attribute to the HTML element and fills it with information from navigator.userAgent, which is an effective way to recognize the browser being used. The subsequent 'if' statement helps identify specific strings within that attribute, such as MSIE 10.0 for IE10 and Trident for IE11.

I hope someone finds this information useful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...

javascriptjqueryhtml

Display a selected portion of the background image

I'm currently facing an issue with one of the background images in my div element. The CSS I'm using is as follows: .myBox { background-image:url('....'); background-repeat:no-repeat; background-size:cover; } The background image d ...

htmlcssbackgroundbackground-image

Calendar display - Days grouped on the left side, with the times arranged across the top in week view?

I'm curious whether it's feasible to display a comprehensive calendar view featuring the days on the left side for the week and the times across the top. Can such a layout be achieved? https://i.sstatic.net/SFtmG.png ...

javascriptcsscalendarfullcalendar

When utilizing Blazor to create dynamic URLs within a loop, incorrect references may be generated

While working on a Blazor web assembly application, I encountered an issue when trying to loop over content to generate URLs for MP3 files. The media files are named "1.mp3", "2.mp3", "3.mp3", and so on. Imagine having a razor page with the following con ...

c#htmlrazorforeachblazor

extract all elements from an array nested within another array

I am having difficulty extracting data from an array file in PHP. I was able to read it and convert it into a PHP array, but now I want to display the stored information in a table, however, I keep getting incorrect values. How can I retrieve the informat ...

javascriptphphtmlarrays

Items in a list should have a top border that spans the full width if they wrap onto a second line

Currently, I am facing a challenge with a menu containing list items. The designer's requirement is to insert a line above the items if they break into two lines on smaller screens. This line should extend across 100% of the ul width, even if the seco ...

htmlcsslist

Using setInterval on a batch of freshly generated div elements

I am interested in creating a small website where I can display multiple clocks for various time zones. However, I have encountered an issue with the setInterval function. Below is the code snippet: function addClock () { $("#container").append('& ...

javascripthtml

Reverse all elements on the page except for ::selection

Is there a way to invert the page while keeping text selection unchanged? I attempted to use ::selection to exclude it, but was unsuccessful. Below is the CSS code I used for inverting the page: html { background-color: #131313 !important; filter: cont ...

css

The icons in webviews on mobile apps (iOS and Android) fail to render correctly

My font icons are behaving inconsistently on webkit-based mobile browsers when used on mobile devices. When hovering over the span on a desktop browser, the icon properly fills its container: https://i.sstatic.net/qzrmz.png However, when hovering over t ...

htmlcsswebviewuiwebviewandroid-webview

Is there a way to vertically center the form in order to position the logon at the top center?

https://i.sstatic.net/8gdCo.png Looking to vertically center align the login form. I've tried various solutions from Stack Overflow, but I'm new to Bootstrap 4. The goal is to position the logo at the top center of the login form, hence why I wa ...

htmlcssbootstrap-4

Which specific HTML5 video event is triggered when the current playback time of the video is updated?

My goal is to give users the option to skip the preroll ad after a specified time (e.g. 5 seconds into the ad) and then transition to playing the regular video content. How can I make this happen? Below is an outline of my current approach: var adManager ...

javascriptjqueryhtmlhtml5-videomedia-player

Tips on ensuring that a span element is positioned at the bottom of a table cell

Is there a way to position the span element at the bottom of a table cell in HTML: Here is the code snippet I'm working with: <td> <span class='cat-otsikko'>Product title</span> <span class='cat-hinta&apos ...

htmlcsshtml-table

Issues arise when trying to utilize the TypeScript function that sets the height within NgStyle

I created a unique shape and I need to determine its height using a TypeScript function. However, the ngStyle doesn't seem to be applying the height correctly. HTML: <div class = "shape" [ngStyle] = "{'height': DetermineShapeHeight()}" ...

cssangulartypescriptecmascript-6single-page-application

Creating a wider background color for active nav bar links in CSS - A step-by-step guide

I've been working on customizing a CSS navbar and I've managed to get it to work as desired. However, I'm facing an issue with the active state background color, which seems to be the same width as the text itself. I've spent hours sear ...

cssreactjsbootstrap-5

Display the remainder of an image's height within a div container

Here is the code snippet I am working with: HTML: <div id="mapWrapper" style="height: 624px;"> <div class="box" id="map"> <h1>Campus</h1> <p>Description Campus Map.</p> <img src="abc.png" ...

htmlcss

How to create dynamic options in a select dropdown based on the selection of another dropdown using HTML, JavaScript, or PHP

There are two dropdown menus here. <select name="firstdropdown" id="firstDropdown"> <option value="choiceOne">Choice One</option> <option value="choiceTwo">Choice Two</option> </select> <select name="seconddropdown ...

javascripthtmldrop-down-menu

The reset css code appears to be overridden by the user agent stylesheet

I've been developing a project using Next.js. I attempted to reset the CSS in my _app.tsx file and here is my _app.tsx code: import type { AppProps } from 'next/app' import GlobalStyles from '@/styles/GlobalStyles' export defa ...

cssnext.jsresetemotion

Exploring Vue: Creating smooth transitions for dropdown menus and dynamically toggling classes on different elements

Here's a simplified version of what I'm trying to achieve: <div class="dropdownMenuWrapper"> <ul class="dropdownMenu"> <li class="dropdownMenuItem"&rt; Menu 1 </li> <button class=&quo ...

javascriptcssvue.jsdropdowntransition

HTML is not connecting to CSS

I'm having trouble linking my external CSS to my HTML file. In the head of my index.html, I have this code: <head> <title>Twenty by HTML5 UP</title> <meta charset="utf-8" /> <meta name="viewport ...

javascripthtmlcssexpress

What could be causing the lack of space between the elements of form-inline?

Check out the demo here: http://jsfiddle.net/sunnycpp/MPACc/4/ Here is the same code pasted below: HTML <div class="container"> <debug-bar ng-controller="parentController"> <debug-bar ng-controller="childController"> <deb ...

csstwitter-bootstrapangularjs