css target IE and Microsoft Edge

Question

What is the proper way to target IE and Microsoft Edge to apply for specific css?

This is my general css:

.details-list {
    font-size: 13px;
    font-style: italic;
    display: table;
    margin: 0 auto;
}

so, lets say that I want to increase font-size only for Microssft Edge and IE.

What is the preferable way to do say(sass is set up- if that helps)?

Any help is welcome!

Answer 1

Browser-specific CSS should usually be avoided, but if your really need to, you're having various possibilities. These should be the most common ones:

1. use conditional comments in the html to target specific IE-versions: https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

2. use css hacks by writing syntactically wrong CSS, which is (due to autocorrection) still applied in some browsers/versions. http://browserhacks.com/ is a quite good collection for this

3. Use JavaScript to set a CSS-Class like is-internet-explorer , which is then used in the css to target only such browsers. As userAgent evaluation is quite difficult and browsers often pretend to be another browser, you should use a JavaScript-Library for this tedious task (eg https://github.com/DamonOehlman/detect-browser )

4. Use some Server-Side Logic to deliver an extra CSS-Filer or set an extra class. This is basically the same as #3, but on the server side.

Answer 2

If there is a specific CSS statement you are looking for (like object-fit:cover ), use feature detection. This has a few benefits, including also working if the browser implements the property down the line.

@supports (object-fit:cover) {
    .element {
        height: 100%;
        object-fit:cover;
    }
}

Otherwise you can use CSS Hacks, here is a SASS mixin for that:

/**
    Applies for all Internet Explorer and Edge versions
**/
@mixin worstBrowsers() {

    /* all IE versions <= 11 */
    @media screen and (-ms-high-contrast: none) {
        @content;
    }

    /* all edge versions */
    @supports (-ms-ime-align:auto) {
        @content;
    }

}


.element {
    @include worstBrowsers {
        font-size: .6em;
    }
}