CSS class/properties targeting to IE as well as Edge

Question

I want to combine @media and @support so that I do not have to put same css class and properties two times for IE11 and Edge.

Please refer following code snippet:

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .my_css_class{
        padding: 38px 15px 0px !important;
    }
}
/* Microsoft Edge */
@supports (-ms-ime-align:auto) {
    .my_css_class {
        padding: 38px 15px 0px !important;
    }
}

something like:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none),  @supports (-ms-ime-align:auto)  {
    .my_css_class{
        padding: 38px 15px 0px !important;
    }
}

In CSS do we have some way to merge or combine properties for two browsers instead to have same properties/class two times.

score 1 · Accepted Answer · answered Mar 25 '19 at 07:28

At-rules such as @media and @supports are separate rules that cannot be grouped together by their at-keywords.

That means that it's not possible to write a single rule with a single pair of curly braces that combines two different at-keywords.

For more, you could refer to this link:https://stackoverflow.com/a/22780689/10487763

CSS class/properties targeting to IE as well as Edge

1 Answers1