Browser compatibility summary of common CSS properties (recommended)

Why do we need to summarize the browser compatibility of CSS properties? When using it, wouldn't it be better to just go to Can I Use to check the browser's compatibility with the attribute?

css3.jpeg

In fact, in the actual development process, we have to be clear about the compatibility of common CSS attributes in order to greatly improve our development efficiency and write code that can be gracefully degraded. This does not mean that you must memorize all the compatibility of CSS attributes. For those with low usage rates, we can directly use Can I Use to search.

frame:

• border-radius: Minimum compatibility to IE9, with excellent compatibility in other browsers.
• box-shadow: Minimum compatibility to IE9, other browsers have excellent compatibility.

background:

background-size: Minimum compatibility to IE9, other browsers have excellent compatibility.

Font:

@font-face: IE9 and above versions of IE browser support the import of font files in any format, while browsers before IE9 only support the import of font files in EOT format. Other browsers are compatible.

2D Transformation:

transform: Minimum compatibility to IE9 (need to add -ms- prefix), other browsers have excellent compatibility. It is good practice to add the browser kernel prefix before the transform property. It is not recommended to use the transform attribute on svg elements, and the latest version of IE does not support this usage.

3D Transformation:

IE10 and Firefox support 3D transforms. Chrome and Safari require the prefix -webkit-. Opera still doesn't support 3D transitions, it only supports 2D transitions.

transition:

transition: Minimum compatibility to IE10, and excellent compatibility with other browsers. The Safari browser requires the prefix -webkit-, and most other browsers do not have this prefix requirement. Therefore, except in special circumstances, you do not need to add the prefixes of other browsers.

Animation:

animation: compatibility is roughly the same as the transition property.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.