Microsoft Edge浏览器将增加CSS样式表自定义属性

计划在下月11日发布的Windows 10系统重大版本更新中,Microsoft Edge浏览器也将会获得诸多的新特性。

除了面向用户的窗口折叠和阅读EPUB电子书等功能外,新版本也将会面向开发者推出CSS样式表自定义属性。

通常来说Web应用程序如网站等都会包含多个CSS 样式表,而在这些样式表里的值也包含了众多重复的数据。

重复数据的原因在于开发者为每个字段定义不同的属性,这些属性包括字体、字号、颜色、间距和其他等等。

Microsoft Edge浏览器将增加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/

本文来源 蓝点网 原创,由 山外的鸭子哥 整理编辑,其版权均为 蓝点网 原创 所有,文章内容系作者个人观点,不代表 蓝点网 对观点赞同或支持。如需转载,请注明文章来源。
扫码关注蓝点网微信公众号

评论:

4 条评论,访客:4 条,站长:0 条
  1. 未沬子
    未沬子发布于: 
    Firefox 52.0 Firefox 52.0 Windows 10 64位版 Windows 10 64位版

    Edge上stylish就好了

  2. #inc
    #inc发布于: 
    Google Chrome 56.0.2924.87 Google Chrome 56.0.2924.87 Windows 10 64位版 Windows 10 64位版

    老板叫你适配Edge?

    • 山外的鸭子哥
      山外的鸭子哥发布于: 
      Google Chrome 57.0.2987.110 Google Chrome 57.0.2987.110 Windows 10 64位版 Windows 10 64位版

      靠一家是不行的 新标准当然需要好几年慢慢发掘 最终让所有主流浏览器都支持

发表评论