转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html

最近,当我在制作 markapp.io 这个小网站的时候,我想出一个巧妙的技巧用在 CSS 变量上,我们可以天然地使用它们的动态本质。让我们看一下当你想使用一个属性,但是这个属性有不同的版本,一个无前缀的标准版和一个或多个有前缀的版本的情形。在这里我举一个例子,比如我们使用clip-path目前需要同时使用无前缀的版本和一个-webkit-前缀的版本,我的这个方法可以适用于这种情况,不管这个 CSS 属性是什么,有多少种前缀,只要它不论什么前缀的值都是同样的就可以。

第一步是在所有元素上定义一个 --clip-path 属性,值是 initial。这样阻止这个属性在每一次使用的时候被继承,而由于 * 没有特异性,任何使用了 --clip-path 的声明都能被覆盖。然后你定义所有不同版本的属性名,值为 var(--clip-path)

* {
--clip-path: initial;
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
}

这样,在我们需要使用 clip-path 的地方,我们都用 --clip-path 替代,它可以正常工作:

header {
--clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%);
}

甚至连 !important 都可以正常工作,因为它影响 CSS 变量的级联。此外,如果由于某些原因你想要明确地设置 -webkit-clip-path,你也可以正常写,这也是因为 * 是零特异性(意味着是最低优先级的选择符——译者注)。这种用法的主要缺点是要求浏览器必须同时支持你使用的属性和 CSS 变量才能正常工作。不过,除了 Edge 之外,所有的浏览器都支持 CSS 变量而 Edge 也在准备支持它。除了上面这个问题,我没发现其它的缺点了(除了显然必须使用与标准属性有些不同的属性之外),但是如果你有发现别的坑,请在评论里面留言让我知道!

我想,CSS 变量的巧妙用法还有许多有待发掘。我想要知道这个技巧是否能改进一下让它支持自定义 css 属性全写,比如将 box-shadow 分开成 --box-shadow-x 和 --box-shadow-y 等等,但是目前我还没想到好办法。你有好办法吗?

【译】巧用CSS变量实现自动前缀的更多相关文章

  1. CSS变量和浏览器前缀

    一.CSS变量 CSS变量是CSS的新特性,大多数浏览器都实现了这个功能,使用CSS变量有利代码复用,而且当我们修改变量值时,所有引用该变量的属性都会发生改变. 定义变量后可以有两种使用方法,第一种时 ...

  2. CSS变量(自定义属性)实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

  3. CSS变量实用指南及注意事项

    近年来,一些动态特性已经开始成为 CSS 语言本身的一部分. CSS变量 – 官方的术语为 "自定义属性" – 已经已经加入规范并且具有很好的浏览器支持,而 CSS mixins ...

  4. 第一个CSS变量:currentColor

    一.基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现.但规范中有个已经存在多年的变量:currentColor.这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它. ...

  5. css变量的用法——(--cssName)

    CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...

  6. CSS变量(CSS variable)

    使用 CSS 变量编写你的样式代码 基本使用: 1. --variable: <declaration-value> 2. <css-attribute>: var(--var ...

  7. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  8. 引人瞩目的 CSS 变量(CSS Variable)

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  9. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...

随机推荐

  1. JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...

  2. ajax_get/post_两级联动

    使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...

  3. 三、spring cloud 服务提供与调用

    如何使用eureka服务注册中心,搭建一个简单的服务端注册服务,客户端去调用服务使用. 案例中有三个角色:服务注册中心.服务提供者.服务消费者,eureka单机版启动既可,流程是首先启动注册中心,服务 ...

  4. 伪列:Oracle显示查询结果前几条记录用rownum<=。去掉重复记录,保留最早录入记录:取出最小ROWID

    显示6-10行记录: 去掉重复记录,保留最早录入记录:取出最小ROWID SELECT deptno,dname,loc,min(ROWID) FROM dept GROUP BY deptno,dn ...

  5. Function:html结构转字符串形式显示

    //Html结构转字符串形式显示 支持<br>换行 function ToHtmlString(htmlStr) { return toTXT(htmlStr).replace(/\&am ...

  6. ES6/7 异步编程学习笔记

    前言 在ES6的异步函数出现之前,Js实现异步编程只有settimeout.事件监听.回调函数等几种方法 settTmeout 这种方法常用于定时器与动画的功能,因为其本质上其实是浏览器的WebAPI ...

  7. windows下 安装 rabbitMQ 及操作常用命令(操作创建用户密码 角色等)

    rabbitMQ是一个在AMQP协议标准基础上完整的,可服用的企业消息系统.它遵循Mozilla Public License开源协议,采用 Erlang 实现的工业级的消息队列(MQ)服务器,Rab ...

  8. 算法分析| 小o和小ω符号

    渐近分析的主要思想是对不依赖于机器特定常数的算法的效率进行测量,主要是因为该分析不需要实现算法并且要比较程序所花费的时间. 我们已经讨论了三个主要的渐近符号.本文我们使用以下2个渐近符号表示算法的时间 ...

  9. Linux第五节随笔 /file / vim / suid /sgid sbit

    三期第四讲1.查询文件类型与文件位置命令 file 作用:查看文件类型(linux下的文件类型不以后缀名区分) 语法举例: [root@web01 ~]# file passwd passwd: AS ...

  10. Apache Avro# 1.8.2 Specification (Avro 1.8.2规范)二

    h5 { text-indent: 0.71cm; margin-top: 0.49cm; margin-bottom: 0.51cm; direction: ltr; color: #000000; ...