JavaScript 工具库 | PrefixFree给CSS自动添加浏览器前缀

新版的CSS拥有多个新属性,而标准有没有统一,有的浏览器厂商为了吸引更多的开发者和用户,已经加入了最新的CSS属性支持,这其中包含了很多炫酷的功能,但是我们在使用的时候,不得不在属性前面添加这些浏览器的私有前缀,这样的代码量一下就大了不少。

为了解决这个问题,国外的牛人开发了了一个 -Prefix-free 的插件,能够自动给我们添加这些前缀,我们仅仅需要编写一次代码,无需在考虑是否兼容其他浏览器,而且如果后面浏览器支持这个属性了,我们只需要移除 -Prefix-free 即可,都不需要修改CSS代码。

简介

-prefix-free 是一个 JavaScript 工具库,你只要在网页引入这个插件即可,无需任何配置和函数调用,-prefix-free在幕后工作,将当前浏览器的前缀添加到任何CSS代码中。

特征

  • 在网页解析的过程中,自动给样式表<link><style>内的元素添加一个浏览器厂商CSS3前缀。
  • 过程元素的一个风格属性和增加供应商前缀在需要的地方。
  • 兼顾新的<link><style>元素,style属性的变化而变化(requires plugin)
  • 让jQuery的css(),方法获取和设置属性(requires plugin)

局限性

  • 前缀代码在 @import-ed 文件中不支持
  • 前缀跨来源链接的样式表是不支持的
  • 无前缀的链接样式表不工作局部在Chrome和Opera。
  • 没有前缀价值观在内联样式,不支持IE 和 Firefox 3.6 版本以下的浏览器。

如何使用

在页面中引入 prefixfree.js 建议把它放在样式表的后面

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

然后你就可以在你的网页中、Style文件里面尽情的编写你的CSS代码,无需担心浏览器兼容问题,另外jQuery的 .css() 方法也会自动补上浏览器前缀,让响应的浏览器支持该CSS3属性,使用非常之轻松惬意。prefixfree.min.js 的用途

相关链接

  • Github地址:https://github.com/LeaVerou/prefixfree 有一些API函数可供使用
  • 项目地址:https://www.wenjiangs.com/wp-content/uploads/2017/06/prefixfree/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/310781.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node.js express框架开发入门教程

文章目录 前言一、Express 生成器&#xff08;express-generator&#xff09;二、快速安装1.express框架express-generator生成器安装2.使用pug视图引擎创建项目,projectName 为项目名称自定义 三、安装热更新插件 nodemon四、目录结构1. public文件夹2.routes路由其他请求方式…

开源radishes高仿网易云音乐完整源码,可试听和下载“灰色”歌曲,跨平台的无版权音乐平台

源码介绍 Radishes是项目名称&#xff0c;是由萝卜翻译而来。可以在这里试听和下载“灰色”歌曲&#xff0c;是一个可以跨平台的无版权音乐平台。 萝卜音乐界面和功能参考 windows 网易云音乐界面和 ios 的网易云音乐 安装依赖 cd radishes/ yarn bootstrap 运行项目 web:…

【面试】 Maven 的八大核心概念

Maven 的八大核心概念 在这里&#xff0c;举出这个标题&#xff0c;自然大家知道Maven是干啥的&#xff0c;就不过多进行赘述&#xff01;我们主要对于Maven的八大核心概念做一个解释补充&#xff0c;这也是我自己的一个学习历程&#xff0c;我们一起共勉&#xff01; 文章概述…

数据按分组显示固定数量,如某tr中固定显示几个td。

效果图&#xff1a; 具体方法&#xff1a; /*** 一行展示N个数据,可补全数组&#xff0c;如最后一行只有3个&#xff0c;那么数组会补全到指定数量* param int $type 默认1&#xff0c;可扩展* param int $num 一行显示的个数&#xff0c;可设置* param $arrs二维数组* return…

微服务(10)

目录 46.k8s中镜像的下载策略是什么&#xff1f; 47.image的状态有哪些&#xff1f; 48.如何控制滚动更新过程&#xff1f; 49.DaemonSet资源对象的特性&#xff1f; 50.说说你对Job这种资源对象的了解&#xff1f; 46.k8s中镜像的下载策略是什么&#xff1f; 可通过命令k…

Python+OpenCV 零基础学习笔记(1-3):anaconda+vscode+jupyter环境配置

文章目录 前言相关链接环境配置&#xff1a;AnacondaPython配置OpenCVOpencv-contrib:Opencv扩展 Notebook:python代码笔记vscode配置配置AnacondaJupyter文件导出 前言 作为一个C# 上位机&#xff0c;我认为上位机的终点就是机器视觉运动控制。最近学了会Halcon发现机器视觉还…

模式识别与机器学习-无监督学习-聚类

无监督学习-聚类 监督学习&无监督学习K-meansK-means聚类的优点&#xff1a;K-means的局限性&#xff1a;解决方案&#xff1a; 高斯混合模型&#xff08;Gaussian Mixture Models&#xff0c;GMM&#xff09;多维高斯分布的概率密度函数&#xff1a;高斯混合模型&#xff…

Matlab figure窗口最大化 窗口全屏 图表窗口最大化

我有一个项目&#xff0c;需要把多个数据文件画成的曲线一个个保存为图片&#xff0c;然后再进行集中对比分析。程序运行后&#xff0c;打开目录下保存的图片&#xff0c;发现图片的尺寸都很小&#xff0c;画质也不清晰&#xff0c;后来发现原来matlab显示图片的时候&#xff0…

第三代半导体材料-碳化硅(SiC)详述

SiC产业概述 碳化硅&#xff08;SiC&#xff09;是第三代半导体材料的典型代表。 什么是半导体&#xff1f; 官话来说&#xff0c;半导体指常温下导电性能介于导体与绝缘体之间的材料。 但导电性能的强弱&#xff0c;并非是体现半导体材料价值的最直观属性&#xff0c;半导…

公司电脑文件防泄密|防止内部终端核心文件数据 \ 资料外泄

PC端访问地址&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 为了防止公司电脑文件泄密&#xff0c;可以采取以下措施&#xff1a; 文件加密&#xff1a;对重要文件进行加密是一种有效的防泄密方法。通过使用加密算法&#xff0c;…

基于NXP I.MX8 + Codesys的工业软PLC解决方案

全新i.MX 8M Plus是一个混合人工智能SoC&#xff0c;将先进的嵌入式SoC与最新的人工智能/机器学习硬件NPU技术相结合&#xff0c;通过神经网络加速器&#xff0c;为边缘计算提供强大的机器学习能力&#xff0c;是i.MX 8M Plus一个最为突出的优势。WEC-IMX8P核心板特别适合在机器…

Redis 数据库,忘记密码如何找回或重置

对于 Redis 数据库&#xff0c;如果忘记了密码&#xff0c;可以通过以下步骤进行密码重置&#xff1a; 找到 Redis 配置文件 redis.conf。通常情况下&#xff0c;该文件位于 Redis 安装目录下的 etc 或 conf 文件夹中。使用任意文本编辑器打开 redis.conf 文件。在文件中找到 …