CSS自定义变量

  • 这是一个实验中的标准,后续的具体写法和解析可能会有变动。
  • 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译。因为其名称本身就包含了语义的信息,这使得CSS 文件变得易读和理解。举个例子,main-text-color比文档中的#00ff00更容易理解,特别是同样的颜色出现在不同的文件中的时候。
  • 个人感觉这个方式与C语言的#define有点类似,在解析阶段将所有CSS变量置换成定义好的常量再对指定的css样式进行渲染。
  • 最简单的使用方式是在:root伪类中定义好所有的变量,并且在需要使用的时候利用"var(变量,[缺省值])"来使用变量,需要注意的是var()函数置换后的内容后面会自带一个空格。
  • 更多详细的使用示例请参考CSS中的自定义变量MDN CSS VAR

Polyfills和Ponyfills

  • 不同版本的浏览器,能支持的特性是有差异的,就像.net 2.0版本支持不了.net 4.0版本的新特性一样。之所以提到这俩是因为Internet Explorer完全不支持CSS自定义变量,因此需要手动扩展。各版本浏览器支持情况如下图所示:

  • Polyfills,国内翻译成“垫片库”,通常用于弥补一些在浏览器中没有被支持的特性,为这些特性提供一套后备的解决方案。例如 ES5 对数组新增了.map.reduce方法,而一些不支持 ES5 的浏览器却无法使用这些新的方法。为了让这些不支持 ES5 的浏览器仍然可以使用这些方法,于是就有了第三方的垫片库,如es5-shim

  • 与Polyfill 类似,Ponyfill 也用于提供对某些浏览器特性的后备支持,与 Polyfill 类似给浏览器打“补丁”的实现方式,Ponyfill 更像是一个“模块”。Ponyfill 以独立的模块的形式提供对新特性的支持,但不会默认把这些支持“补丁”到浏览器上。

  • 下面的方法演示写一个用于支持String.trim的 Polyfill,代码来自 MDN

  if (!String.prototype.trim) {
String.prototype.trim = function ()
{
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}

具有相同功能的 Ponyfill 实现更像是一个导出下面方法的模块。

  function trim (text) {
return text.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
}
  • 用.Net的特性来看,Polyfills就是我给某个系统基础类型添加一个静态实现方法,如以下代码所示直接给string类添加了一个基础方法,凡是string类型的类在代码提示中就直接多了一个函数,而Ponyfills则是直接写好一个类库,谁引用了该类库,谁就拥有该功能,而没引用的就不会受到影响:
   public static class Extensions
{
public static string GetMostFrequentCharacter(this string s)
{
//内部实现
}
}
//之后就可以直接调用
string s = "abacdsfsfad";
string result = s.GetMostFrequentCharacter();

CSS-Var-Ponyfills

  • 本博客也使用了CSS自定义变量,如下图所示:

  • 而在IE11中则是完全没有起效,如下所示:

  • 因此我们引入CSS-Var-Ponyfills,代码如下所示:
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2">
</script>
<script>
//When true, the ponyfill will only transform CSS and trigger callbacks in browsers that lack native support for CSS custom properties.
cssVars({ onlyLegacy: true });
</script>
  • 更多的参数设置可以参考CSS-Vars-Ponyfills,这里简单介绍一下,onlyLegacy为true的意思是只为不支持CSS原生变量的浏览器进行CSS转换,而支持CSS变量的浏览器则按其自己的定义进行支持。顺带一提设置为false则为所有的浏览器都进行转换。
  • 经测试,对行内样式使用CSS变量的话,这个Ponyfills暂时无法进行转换。

Less

Sass

Stylus

工具

Koala

koala 是一款桌面程序,支持 less 、 sass 、 coffeescript 即时编译,帮助 web 开发者更高效地使用 less 、 sass 、 coffeescript 开发。

参考资料

  1. CSS中的自定义变量
  2. MDN CSS VAR
  3. Polyfills和Ponyfills的区别
  4. CSS-Vars-Ponyfills
  5. LESS
  6. SASS
  7. Stylus

结束语

所谓坚持,不是四处寻求安慰后的坚持,不是需求鼓励后的坚持,不是被人说服后的坚持。 而是无论如何,牙碎自己吞,流泪自己擦,摔了站起来继续走。

真正的坚持,和别人永远发生不了关系,全靠自己每日擦拭。 不要逢人便说:请鼓励我,我会坚持下去的。

那不是坚持,是乞讨。

CSS预处理技术的更多相关文章

  1. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  2. 谈谈CSS预处理技术中for循环的应用-CSS Sprite

    各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,b ...

  3. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  4. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  5. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  6. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  7. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  8. 用DIV+CSS切割多背景合并图片 CSS Sprites 技术

    很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...

  9. CSS sprites 技术

    Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...

随机推荐

  1. SEO初步学习之影响网站排名的因素

    本文介绍一些比较明显的因素,一些隐藏较深的原因还有待发掘: 1.采集网站内容,即抄袭其他网站的内容. 2.新站上传后建议不要有大的改动. 3.标题频繁修改. 4.大量投放垃圾外链. 5.不做友链,交友 ...

  2. java线程——线程基础

    一,线程之间的关系 线程之间存在两种关系: (1)间接相互制约:相互争夺线程资源: (2)直接相互制约:线程之间的相互合作: 间接相互制约也可以成为互斥,直接相互制约也可以称为同步:同步也包括互斥,互 ...

  3. NFS 文件共享

    备注:NFS 文件共享需设置两部分:服务端和客户端 一.服务端设置 1.1.查看nfs包是否安装,未安装则重新安装 [root@localhost ~]# rpm -qa|grep rpcbind r ...

  4. 吴裕雄--天生自然 JAVA开发学习:方法

    /** 返回两个整型变量数据的较大值 */ public static int max(int num1, int num2) { int result; if (num1 > num2) re ...

  5. 蓝桥杯剪格子dfs

    #include<iostream> #include<cstring> #include<iomanip> #include<cmath> #incl ...

  6. ZJNU 1528 - War--高级

    类似于1213取水 可以把空投当作第0个城市 最后将0~n的所有城市跑最小生成树 /* Written By StelaYuri */ #include<iostream> #includ ...

  7. dht算法原理描述

    dht原理 dht是P2P网络(结构化P2P)核心路由算法,主要是利用一致性hash,把节点和资源都表示成一个hash值,放入到这个大的hash环中,每个节点负责路由靠近它的资源. 一.重要概念:  ...

  8. 884A. Book Reading#抽空学习好孩子(模拟)

    题目出处:http://codeforces.com/problemset/problem/884/A 题目大意:每天时间分两部分,工作和学习,工作优先,闲暇读书,问第几天读完 #include< ...

  9. CF809C(找规律+数位DP)

    老年选手需要多写一些思维题qwq. 通过打表很容易发现对于(i,j),值为(i-1)^(j-1)+1,然后本题就没了qwq. 矩阵差分还是很容易想到的,容斥成四个矩阵. 然后看到异或很容易想到三件事: ...

  10. 实测两款 GitHub 开源抢票插件,所有坑都帮你踩过了

    如果你对自己手速和市面上的各种 “加速包” 都没什么信心的话,不妨试试用程序员的手段抢票? 况且,[12306 官方宣布屏蔽了一大批付费抢票软件],这也意味着你即使给这些软件付了会员费,也依旧抢不到票 ...