首页 web前端 前端问答 为什么css3要加前缀

为什么css3要加前缀

Nov 02, 2021 pm 02:17 PM
css3 前缀

因为CSS3还未成为真正的标准,许多浏览器对其的支持程度不同,而且每个浏览器厂商对同一个样式支持的写法也不同,所以要加前缀来达到各个浏览器兼容。css3前缀就是用来确保新属性可以在特定的浏览器渲染引擎下被识别和生效。

为什么css3要加前缀

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。这是为什么呢?

浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。

因为css3很多属性还没有确定下来,标准规范还没有发布,许多浏览器支持的程度也不同,而且每个浏览器厂商同一个样式支持的写法也不同,所以要加前缀来达到各个浏览器兼容,将来统一了规范就不用写前缀了。

css3前缀就是用来确保这种属性可以在特定的浏览器渲染引擎下被识别和生效。

前缀 浏览器 内核
-ms- IE浏览器 Trident内核
-moz- Firefox Gecko内核
-o- Opera Presto内核
-webkit- Chrome和Safari Webkit内核

目前已有很多私有前缀可以不写了,但为了兼容老版本的浏览器,可以仍沿用私有前缀和标准方法,逐渐过渡。

来看一个简单的示例,早期写一个圆角 border-radius ,需要这样写:

.box {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}
登录后复制

这些是为了兼容老版本的写法,该浏览器不支持新属性而导致用户体验友好度降低;比较新版本的浏览器都支持直接写:border-radius。

使用前缀则能很好地匹配到较低版本的浏览器,并正常显示样式。

(学习视频分享:css视频教程

以上是为什么css3要加前缀的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

纯CSS3怎么实现波浪效果?(代码示例) 纯CSS3怎么实现波浪效果?(代码示例) Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果?本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法,希望对大家有所帮助!

Excel如何快速添加前缀?Excel表格批量加前缀的方法 Excel如何快速添加前缀?Excel表格批量加前缀的方法 Mar 14, 2024 am 09:16 AM

  在编辑Excel时,可能需要给一列数据添加相同的前缀,如果一个一个地添加,实在是太浪费时间了,有什么办法可以给Excel批量添加前缀?当然是有的,下面就给大家介绍几个常用的加前缀的方法。  Excel如何快速添加前缀?  一、单元格格式法  1、选中单元格区域,同时按下Ctrl1,设置单元格格式。(或者右击鼠标,选择设置单元格格式)  2、点击【自定义】,在【类型】选项中输入“财务部-@”,最后点击【确定】就可以完成啦!  二、插件法  1、下载安装Excel插件方方格子。  

巧用CSS实现各种奇形怪状按钮(附代码) 巧用CSS实现各种奇形怪状按钮(附代码) Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助!

css怎么隐藏元素但不占空间 css怎么隐藏元素但不占空间 Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

css3怎么实现花边边框 css3怎么实现花边边框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框,即给边框加上背景图片,只需要将背景图片指定为花边样式即可;语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。

原来利用纯CSS也能实现文字轮播与图片轮播! 原来利用纯CSS也能实现文字轮播与图片轮播! Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3如何实现鼠标点击图片放大 css3如何实现鼠标点击图片放大 Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

磁力链接前缀是什么 磁力链接前缀是什么 Feb 21, 2024 pm 08:45 PM

磁力链接前缀是什么磁力链接是一种用于在互联网上共享文件的方法,它已成为许多人分享和下载资源的首选方式。它通过一个统一的链接,让用户可以轻松地获取所需的文件。然而,对于初次接触磁力链接的人来说,可能会对其中的一些术语和概念感到困惑。其中一个常见的问题是,磁力链接前缀是什么?在回答这个问题之前,让我们先了解一下磁力链接的基本结构。磁力链接由两部分组成:前缀和唯一

See all articles