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/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

获取Android和iOS崩溃日志的方法

文章目录 一、Android崩溃日志1、获取方法1.1 通过adb logcat获取1.2 通过adb shell dumpsys dropbox命令获取 2、导出设备Crash日志3、导出设备ANR日志4、常见日志类别 二、iOS崩溃日志1、获取方法1.1 xcode中打开1.2 手机上直接获取 2、Crash 头部信息 一、Android崩溃日志 …

视频格式网络地址转换视频到本地,获取封面、时长,其他格式转换成mp4

使用ffmpeg软件转换网络视频&#xff0c;先从官网下载对应操作系统环境的包 注意:网络地址需要是视频格式结尾&#xff0c;例如.mp4,.flv 等 官网地址&#xff1a;Download FFmpeg window包&#xff1a; linux包&#xff1a; 如果下载缓慢&#xff0c;下载迅雷安装使用…

干掉程序员饭碗的会是 AI 吗?

你好&#xff0c;我是坚持分享干货的 EarlGrey&#xff0c;翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。 如果我的分享对你有帮助&#xff0c;请关注我&#xff0c;一起向上进击。 创作不易&#xff0c;希望大家给一点鼓励&#xff0c;把公众号设置为…

0.1+0.2≠0.3,揭秘Python自带的Bug

朋友们&#xff0c;问一个简单的问题&#xff1a;0.10.2&#xff1f; 你肯定会说&#xff1a;中国人不骗中国人&#xff0c;0.10.20.3。 但是在Python里&#xff0c;0.10.2≠0.3 &#xff0c;我们今天一起来看看这个&#xff0c;并且看一下解决办法。 离奇的错误 在python里…

【C语言】自定义类型:结构体深入解析(三)结构体实现位段最终篇

文章目录 &#x1f4dd;前言&#x1f320;什么是位段&#xff1f;&#x1f309; 位段的内存分配&#x1f309;VS怎么开辟位段空间呢&#xff1f;&#x1f309;位段的跨平台问题&#x1f320; 位段的应⽤&#x1f320;位段使⽤的注意事项&#x1f6a9;总结 &#x1f4dd;前言 本…

内网离线搭建之----kafka-manager集群监控

工具介绍: 为了简化开发者和服务工程师维护Kafka集群的工作&#xff0c;yahoo构建了一个叫做Kafka管理器的基于Web工具&#xff0c;叫做 Kafka Manager。 这个管理工具可以很容易地发现分布在集群中的哪些topic分布不均匀&#xff0c;或者是分区在整个集群分布不均匀的的情况…

mfc140u.dll丢失的解决方法,怎样修复mfc140u.dll

最近看到很多朋友在问找不到mfc140u.dll丢失怎么办&#xff1f;有什么解决方法&#xff0c;今天就给小伙伴们解答一下&#xff0c;mfc140u.dll丢失的解决办法&#xff0c;怎么修复mfc140u.dll。 一.丢失的原因 1.损坏的程序安装:在安装某个程序时&#xff0c;可能会出现意外中…

Python算法例30 统计前面比自己小的数

1. 问题描述 给定一个整数数组&#xff08;数组大小为n&#xff0c;元素的取值范围为0~10000&#xff09;&#xff0c;对于数组中的每个元素&#xff0c;计算其前面元素中比它小的元素数量。 2. 问题示例 对于数组[1&#xff0c;2&#xff0c;7&#xff0c;8&#xff0c;5]&…

Oracle database 静默安装 oracle12c 一键安装 12.1.0.2

基于oracle安装包中应答文件实现一键安装 注意此安装脚本基于12.1.0.2 安装包 原始安装包结构为两个压缩包 此脚本使用安装包为原始压缩包解压后、 重新封装为一个.zip压缩包 建议在linux 环境下解压重新压缩后 使用该脚本 支持环境: Linux :centerOS 7 oracle :12.1.0.…

Android原生实现分段选择

六年前写的一个控件&#xff0c;一直没有时间总结&#xff0c;趁年底不怎么忙&#xff0c;整理一下之前写过的组件。供大家一起参考学习。废话不多说&#xff0c;先上图。 一、效果图 实现思路使用的是radioGroup加radiobutton组合方式。原理就是通过修改RadioButton 的backgr…

Langchain访问OpenAI ChatGPT API Account deactivated的另类方法,访问跳板机API

笔者曾经写过 ChatGPT OpenAI API请求限制 尝试解决 Account deactivated. Please contact us through our help center at help.openai.com if you need assistance. 结果如何&#xff1f; 没有啥用。目前发现一条曲线救国的方案。 1. 在官方 openai 库中使用 此处为最新Op…

【数据结构和算法】寻找数组的中心下标

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 前缀和的解题模板 2.1.1 最长递增子序列长度 2.1.2 寻找数组中第 k 大的元素 2.1.3 最长公共子序列…

模拟算法 蓝桥杯备赛系列 acwing

文章目录&#xff1a; 基础知识 什么是模拟&#xff1f; 例题 一、错误票据 1.解题思路 2.代码 二、移动距离 1.解题思路 2.代码 三、航班时间 1.解题思路 2.代码 四、外卖优先级 1.解题思路 2.代码 前面为了目录好看大家就当个玩笑看吧哈哈哈。下面上正文。 正文 基础知识 什…

Amazon CodeWhisperer 免费 AI 代码生成助手体验分享

今年上半年&#xff0c;亚马逊云科技正式推出了实时AI编程助手 Amazon CodeWhisperer&#xff0c;还提供了供所有开发人员免费使用的个人版版本。经过一段时间的体验&#xff0c;我觉得 CodeWhisperer 可以处理编程工作中遇到的很多问题&#xff0c;并且帮助开发人员提高编程效…

websocket 介绍

目录 1&#xff0c;前端如何实现即时通讯短轮询长轮询 2&#xff0c;websocket2.1&#xff0c;握手2.2&#xff0c;握手过程举例2.3&#xff0c;socket.io 3&#xff0c;websocket 对比 http 的优势 1&#xff0c;前端如何实现即时通讯 在 websocket 协议出现之前&#xff0c;…

Ubuntu20.04服务器使用教程(安装教程、常用命令、故障排查)持续更新中.....

安装教程&#xff08;系统、驱动、CUDA、CUDNN、Pytorch、Timeshift、ToDesk&#xff09; 制作U盘启动盘&#xff0c;并安装系统 在MSDN i tell you下载Ubuntu20.04 Desktop 版本&#xff0c;并使用Rufus制作UEFI启动盘&#xff0c;参考UEFI安装Ubuntu使用GPTUEFI模式安装&am…

hql、数据仓库、sql调优、hive sql、python

SQL/HQL HQL(Hibernate Query Language) 是面向对象的查询语言 SQL的操作对象是数据列、表等数据库数据 ; 而HQL操作的是类、实例、属性 #FROM String hql "from com.demo.bean.User" "select * from user" #WHERE "form User u where u.id 1…

Filter过滤器的使用!!!

什么是过滤器 当浏览器向服务器发送请求的时候&#xff0c;过滤器可以将请求拦截下来&#xff0c;完成一些特殊的功能&#xff0c;比如&#xff1a;编码设置、权限校验、日志记录等。 过滤器执行流程 过滤器的使用&#xff1a; /** Copyright (c) 2020, 2023, All rights …

【AIGC】AIGC——真正意义的智能,颠覆性的变革

AIGC——真正意义的智能&#xff0c;颠覆性的变革 AIGC&#xff08;AI Generated Content&#xff0c;即人工智能生成的内容&#xff09;可以通过以下几个方面来实现跨越&#xff1a; 技术跨越&#xff1a;AIGC可以通过不断的技术创新和进步&#xff0c;实现从简单的生成内容…

电脑键盘大小写切换按哪个键?正确操作分享!

“我在工作时&#xff0c;经常需要输入英文文档&#xff0c;但我不知道输入大小字母时应该按哪个键切换&#xff0c;有朋友可以教教我吗&#xff1f;” 在我们使用电脑时&#xff0c;输入英文文档是经常会遇到的事。当输入某些单词时&#xff0c;我们可能需要切换大小写。电脑键…