Microsoft Edge浏览器将增加CSS样式表自定义属性
计划在下月11日发布的Windows 10系统重大版本更新中,Microsoft Edge浏览器也将会获得诸多的新特性。
除了面向用户的窗口折叠和阅读EPUB电子书等功能外,新版本也将会面向开发者推出CSS样式表自定义属性。
通常来说Web应用程序如网站等都会包含多个CSS 样式表,而在这些样式表里的值也包含了众多重复的数据。
重复数据的原因在于开发者为每个字段定义不同的属性,这些属性包括字体、字号、颜色、间距和其他等等。
有的Web程序的某些样式属性可能位于单个或者是多个不同的样式表中,若要修改对应的属性可能比较麻烦。
Microsoft Edge的CSS自定义属性则允许开发者使用函数来分配任意值,这些值可能是其他地方的其他属性。
例如Microsoft Edge开发团队给出的例子:
:root { --primary: #0B61A4; --secondary: #25567B; } header { background: var(--primary); border-bottom: 2px solid var(--secondary); }
对于开发者而言只需要定义完成属性值之后,即可在任意位置直接调用属性的名称而不必再次设置属性的值。
这样子的话如果开发者需要修改某个属性则不必要寻找和处理位于单个或者多个CSS样式表中的具体属性值。
对于使用多个CSS样式表的大中型站点来说,使用 var 函数可以减轻前端工程师的工作量和减少耗费的时间。
有关此功能的Demo可前往Microsoft Edge开发者界面查看,但至少系统版本在Build 15063+才可以调试。
需要提醒的是经测试此 Demo 会占用较多的CPU资源,因此可能会导致你的设备出现比较严重的卡顿情况。
Demo:https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/custom-props/