几种css属性兼容性写法

关注

原创最新推荐文章于 2025-02-23 17:30:39 发布 5.8k 阅读 AI 写同款· GEO 优化 ›

深入解析 CSS `direction` 属性 CSS的direction属性用于控制文本书写方向和块级元素布局方向，特别适用于处理多语言内容（如阿拉伯语、希伯来语等RTL语言）。该属性有两个主要值：ltr（默认，从左到右）和rtl（从右到左），会影响文本流、表格列布局、表单字段排列等。它通常与unicode-bidi属性配合处理混合方向文本。direction属性具有继承性，建议优先使用HTML的dir属性实现语义化。需注意它对浮动元素、边距、列表标记等布局的影响。现代浏览器均支持该属性，但在开发RTL界面时需重新考虑布局细节。阅读详情

mark几种

简单介绍下为什么需要兼容性写法：

1. 试验一些还未成为标准的的CSS属性——也许永远不会成为标准，

2. 对新出现的标准的CSS3属性特征做实验性的实现，

3. 对CSS3中一些新属性做等效语义的个性实现。

再简单一点：你的衣食父母没有使用现代浏览器，或者一直没有更新浏览器的版本.........

下面开始记录

-moz-     /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o-       /* Opera浏览器(早期) */
-ms-      /* Internet Explorer (不一定) */

举个例子border-radius

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

这里必须注意的是标准写法（不带前缀的）必须放在最后，否则容易造成渲染出意外的结果~

以下为需要的几种属性

1. @keyframes

2. 移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)

3. 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)

4. border-radius

5. box-shadow

6. backface-visibility

7. flex

8. column

9. perspective

后面有用到其他的在慢慢补充吧~

收录于

css

标签

#css #兼容性 #前缀

本内容遵循 CC 4.0 BY-SA 版权协议

css浏览器兼容性处理这是未经浏览器兼容性处理的样式，其在一些老版本的浏览器是不兼容的，效果出不来 display:felx backface-visibility:hidden 下面是经过浏览器兼容性处理的样式 display：-webkit-box display:flex -webkit-backface-visibility:hidden backface-visibility:hidden 这一般是webpack打包工具会自动配置好，自己要根据需求去选择自己想兼容的浏览器版本压缩css插阅读详情

几种css属性兼容性写法

相关推荐