-ms-high-contrast Distinguishes Internet Explorer from other browsers

MDN official website explains this feature as

The -ms-high-contrast CSS media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.

High Contrast Mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme. For web content, theme colors are mapped to content types.

The idea is to display as much as possible in high-contrast mode, dynamically replacing the background color with a user-specific theme. Because -MS is a MicrosFT extension, it can be used to distinguish BETWEEN Internet Explorer and others

There are four parameters to choose from: None,active,black-on-white, and white-on-black. None has been deprecated in Microsoft Edge 18., but can still be used as a way to identify versions of Internet Explorer 10+. Therefore, the following code can be directly used in THE CSS to distinguish IE from other browsers

@media screen and (-ms-high-contrast:none) {
            
 }
Copy the code

Gradient color problem in icon font conversion process

One problem you may encounter when converting an SVG file to a Font icon is that monochrome ICONS do not support gradients, so you need to use additional code for compatibility

h1 {
  background: linear-gradient(#eee, #333);
  background-clip: text;
  text-fill-color: transparent;
}
Copy the code

Note that the gradient color of background should be in the upper and lower order, otherwise the color direction of original SVG will be mistaken. Ps: Internet Explorer does not support gradient, so only one color can be filled.

Reference: documents on MDN official website.

Shadow of icon triangle

In daily tasks, there is a problem that we need to add an outer shadow to the triangle icon in the dialog box. At this time, the commonly used box-shadow is no longer effective, so we need to call another brother drop-shadow() for help.

A few of them need to be noted and adjusted according to the size of your triangle.

Offset -x offset-y (required) offset-x specifies the horizontal distance, where negative values place the shadow to the left of the element. Offset-y specifies the vertical distance, where a negative value places the shadow over the element. If both values are 0, the shadow is placed directly after the element. Blur -radius (optional) Blur radius of the shadow, specified as <length>. The larger the value, the larger and fainter the shadow. If not specified, it defaults to 0, resulting in clear, non-fuzzy edges. Negative values are not allowed. Spread-radius (optional) The spread radius of the shadow, specified as <length>. Positive values cause shadows to expand and grow, while negative values cause shadows to shrink. If not specified, it defaults to 0 and the shadow size will be the same as the input image.Copy the code

See the official website documents for specific usage

-ms-filter

conclusion

IE browser is the place I need special treatment and attention in daily work, especially CSS and JS compatibility and SVG conversion icon, these are my experience in the actual work, I hope to be useful to you.