热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

为什么css3要加前缀

本篇内容主要讲解“为什么css3要加前缀”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“为什么css

本篇内容主要讲解“为什么css3要加前缀”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“为什么css3要加前缀”吧!

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

为什么css3要加前缀

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

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

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

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

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

前缀浏览器内核
-ms-IE浏览器Trident内核
-moz-FirefoxGecko内核
-o-OperaPresto内核
-webkit-Chrome和SafariWebkit内核

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

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

.box {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}

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

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

到此,相信大家对“为什么css3要加前缀”有了更深的了解,不妨来实际操作一番吧!这里是编程笔记网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


推荐阅读
  • Scrapy 爬取图片
    1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ... [详细]
  • 目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • macOS Big Sur全新设计大版本更新,10+个值得关注的新功能
    本文介绍了Apple发布的新一代操作系统macOS Big Sur,该系统采用全新的界面设计,包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出,macOS Big Sur的设计与iPadOS越来越接近,结合了去年iPadOS对鼠标的完善等功能。 ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
  • 最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了正则表达式python相关的知识,希望对你有一定的参考价值。 ... [详细]
  • nginx 解决跨域问题 No: 'AccessControlAllowOrigin' header is present on the requested resource
    错误信息:1, ... [详细]
  • 发现一个好看的手机壁纸网站,撸代码的手已经饥渴难耐了
    本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。最近有同学的爬虫代码出了bug,给问我怎么改于 ... [详细]
author-avatar
王婷山东理工_441_796
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有