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. udp和tcp通信

    一.参考文档 1.从UDP的”连接性”说起–告知你不为人知的UDP 2.Linux UDP通信例子

  2. LGOJ4172 WC2006水管局长

    首先声明,这份代码空间复杂度 \(O(n^2)\),瓶颈在给边打标记 由于博主太菜,懒得再改成低复杂度的打标记了,所以\(BZOJ\)的数据过不去 Description link 给一张图,会有删边 ...

  3. 数据分析基础-jupyter notebook-Anaconda-Numpy

    数据分析介绍 1.数据分析是什么? 2.数据分析能干什么? 3.为什么利用Python进行数据分析? 4.数据分析过程概述 5.常用库简介 1.数据分析是什么? 数据分析是指用适当的统计分析方法对收集 ...

  4. 蓝桥杯2015-省赛-C/C++-A组2题 星系炸弹

    在X星系的广袤空间中漂浮着许多X星人造“炸弹”,用来作为宇宙中的路标.每个炸弹都可以设定多少天之后爆炸.比如:阿尔法炸弹2015年1月1日放置,定时为15天,则它在2015年1月16日爆炸.有一个贝塔 ...

  5. windows下CreateDirectory创建路径失败的解决办法

    第一: 权限不够: SECURITY_ATTRIBUTES sa;SECURITY_DESCRIPTOR sd; InitializeSecurityDescriptor(&sd,SECURI ...

  6. 输入一段汉字可以获得首字母简拼的java代码

    package com.zl; import java.io.UnsupportedEncodingException; public class Test12 { public static voi ...

  7. SLAM领域资源链接

    半闲居士高翔博客: https://www.cnblogs.com/gaoxiang12/ 视觉大佬冯兵博客: http://www.fengbing.net/ SLAMCN http://www.s ...

  8. LeetCode——376.摆动序列

    如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为摆动序列.第一个差(如果存在的话)可能是正数或负数.少于两个元素的序列也是摆动序列. 例如, [1,7,4,9,2,5] 是一个摆动序列, ...

  9. list交集、差集、并集、去重并集

    // 交集 List<String> intersection = list1.stream().filter(item -> list2.contains(item)).colle ...

  10. IdentityServer4之Token令牌获取流程分析

    1.asp.net core 是基于管道模式IdentityServer会在注册一个管道处理程序 IdentityServerMiddleware 类专门处理登录验证的逻辑,本次主要讲的是access ...