热门标签 | 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要加前缀”有了更深的了解,不妨来实际操作一番吧!这里是编程笔记网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


推荐阅读
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • 探讨HTML中的DIV样式难题
    本文深入分析了HTML中常见的DIV样式问题,并提供了有效的解决策略。适合所有对Web前端开发感兴趣的读者。 ... [详细]
  • Vue 3.0 翻牌数字组件使用指南
    本文详细介绍了如何在 Vue 3.0 中使用翻牌数字组件,包括其基本设置和高级配置,旨在帮助开发者快速掌握并应用这一动态视觉效果。 ... [详细]
  • 在使用Maven进行项目构建时,由于依赖库的下载速度慢常常让人感到沮丧,这直接影响了开发效率和学习热情。幸运的是,阿里云提供了一个快速的国内镜像服务,能够显著提升Maven项目的构建速度。 ... [详细]
  • 前端开发中的代码注释实践与规范
    本文探讨了前端开发过程中代码注释的重要性,不仅有助于个人清晰地回顾自己的编程思路,还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法,并提出一套实用的注释规范。 ... [详细]
  • 本文详细介绍了 Node.js 中 Worker.isMainThread 属性的功能、用法及其实例代码,帮助开发者更好地理解和利用多线程技术。 ... [详细]
  • 本文介绍了Java语言开发的远程教学系统,包括源代码、MySQL数据库配置以及相关文档,适用于计算机专业的毕业设计。系统支持远程调试,采用B/S架构,适合现代教育需求。 ... [详细]
  • 新手指南:在Windows 10上搭建深度学习与PyTorch开发环境
    本文详细记录了一名新手在Windows 10操作系统上搭建深度学习环境的过程,包括安装必要的软件和配置环境变量等步骤,旨在帮助同样初入该领域的读者避免常见的错误。 ... [详细]
  • 探索Squid反向代理中的远程代码执行漏洞
    本文深入探讨了在网站渗透测试过程中发现的Squid反向代理系统中存在的远程代码执行漏洞,旨在帮助网站管理者和开发者了解此类漏洞的危害及防范措施。 ... [详细]
  • 在使用Firefox浏览器打开本地HTML文件时,尝试调用Canvas的drawImage方法可能会遇到NS_ERROR_NOT_AVAILABLE错误。本文探讨了这一问题的原因及解决方案。 ... [详细]
  • 本文详细介绍了在Ubuntu 7.10操作系统上安装多种常用软件的方法,包括RAR压缩工具、即时通讯软件Pidgin、办公软件永中Office 2007试用版、多线程下载软件MultiGet及d4x、FTP客户端gFTP与FireFTP插件,以及P2P下载工具aMule。每部分都提供了具体的安装步骤和配置方法。 ... [详细]
  • 本文探讨了在使用HTML5 WebSocket技术构建浏览器内聊天室时遇到的连接不稳定问题,并提供了可能的解决方案和调试方法。 ... [详细]
  • jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ... [详细]
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社区 版权所有