主页»HTML/CSS»坚定地运用 CSS Custom Properties

坚定地运用 CSS Custom Properties

来历:寸志 发布时刻:2019-06-18 阅览次数:

  自界说特色(Custom Properties)是一个很有魅力的 CSS 新特性,现代浏览器广泛 支撑。可是遇到那些不支撑 CSS Custom Properties 的老掉牙浏览器咱们该怎样办?等着这些浏览器死翘翘了再支撑,仍是运用预处理装备 CSS?又或许强硬起来,对它们一笑了之?

  之前凭借 LESS 或许 Sass 这样预处理东西在款式中运用变量,当今Custom Properties 在 CSS 完成变量的原生支撑。

  怎样运用自界说特色?其实很简略,在款式规矩钱增加 -- 即可:

--color-text-default: black;

  偏爱用下划线?下面这样也没问题:

--color_text_default: black;

  在特色称号中,横线和下划线都能够运用,作死运用空格是不可的。

  自界说特色名大小写灵敏,--color-text-default 和 --Color-Text-Default 是不相同的哦。

  运用 var() 函数能够获取到自定特色的值,这样就能够在款式规矩中运用自界说特色。如下例,浏览器获取 --color-text-default 的值 black,应用到 body 元素上。

body {
    color: var(--color-text-default);
}

  与 LESS 或许 Sass 中的变量相同,CSS Custom Properties 能够防止重复地在款式表中编写色彩、字体或许尺度等款式;不过除了这些 CSS Custom Properties 还有更多的特色,级联——能够依据渠道的不同,经过 media query 查询来修正;更凶猛的是, JavaScript 能够修正自界说特色的值。

译注: Custom Properties 本质上是自界说特色,即 CSS 特色前面增加 — 便是自界说特色;凭借 CSS 的 var() 函数,才干够运用这些自界说特色。例如:var(--header-color)。比起预处理器供给的变量特性,自界说特色还有三个特色:层叠/级联,运行时,JavaScript API。

  Serg Hospodarets 写了一篇极好的文章介绍 CSS Custom Properties,示例翔实,探究了各种或许用法。

 浏览器支撑

  看到这儿你因该会问浏览器支撑状况怎样?那咱们就来看看。最新版的 Chrome、Edge、Firefox、Opera 和 Safari 支撑,IE 11 及曾经、Opera Mini 状况不容乐观。

  总是这样对不对?

  不过别忧虑,能够运用 @support 指令来查看浏览器是否支撑自界说特色:

--color-text-default: black;

body {
    color: black;
}

@supports((--foo: bar)) {
    body {
        color: var(--color-text-default);
    }
}

  在 Demo 中,一开始把 body 文本色彩设置为黑色,后边假如浏览器支撑咱们假造的 foo 变量,则用一个自界说特色值掩盖之。

 默许代替

  假如运用的变量未界说会怎样样?没有问题,浏览器会疏忽这一条规矩。假如你想保证满有把握,能够运用代替指定一个备选值。

body {
    color: var(--color-text-default, black);
}

  代替与 CSS 中的字体界说有点像,一个运用逗号离隔的列表。假如自界说特色没有值,浏览器疏忽之运用列表中的下一个值。

译注:原文这儿的说并不精确。var( <custom-property-name> [, <declaration-value> ]? ),第一个逗号之后的内容都会被当作备选值。例如,var(--foo, red, blue),备选值是 red, blue。参阅:CSS Custom Properties for Cascading Variables Module Level 1

 预处理器

  咱们的确能够运用预处理器来把 Custom Properties 转为兼容的 CSS 代码,不过先打住,兄弟。

  相同的方法曾经是不是也搞过?曩昔为了运用 CSS3 的那些“高档”特性,比方 border-radius、css columns、Flexbox 等等,咱们工程师各种小技巧还少么?问题的确处理了,仅仅代码写得厌恶。

  我想还有一种更好的方法——在支撑的浏览器中纵情运用 CSS Custom Properties ,为不支撑的浏览器供给适宜的稍有不同的体会。怎样地?之前咱们也这么干过呀!

 两种色彩的 Stuff & Nonsense

译注:Stuff & Nonsense 是原作者的站点。

  在 IE6 臭名远扬的年代,我为我的站点供给了两套规划

  针对那个年代的现代浏览器,网站上到处都是新潮的各种色彩的箭头和靶子。我运用了 CSS 特色挑选来完成,当年这可是高档特性:

[class="banner"] {
    background-colour: red;
}

  IE6 会疏忽那些无法解析的挑选器,因而,假如用户用 IE6 拜访,会看到一个是非为主的站点,这些款式我运用类挑选器完成的:

.banner {
    background-colour: black;
}

[class="banner"] {
    background-colour: red;
}

Screen shot of the Stuff & Nonsense website side by side in different browsers, showing the differences in rendering between the two browsers.

  不必说,我这样做咱们会觉得我脑子不正常,可是 Microsoft 曾今运用我的网站作为 IE7 支撑特色挑选器的参阅。他们的确做了,就像我说的相同:”做一个更好的浏览器吧!”。

 过期浏览器,一边呆着去

  好了,这个比如和浏览器不支撑 CSS Custom Properties,有什么关系?怎样才干运用这些高档特性?不必忧虑浏览器不支撑,不必完成杂乱的代替计划,不必花数个小时让代替计划和规划保持共同。

  答案就在于 CSS 自身,并且一向如此,浏览器会直接疏忽它们不认识的东西。

  咱们要做的很简略,首要指定一个与规划截然不同的值,然后在再运用 CSS 自界说特色掩盖之。

body{
    color: black;
    color:var(--color-text-default, black);
}

  一切浏览器都懂第一个值(black),假如浏览器满足聪明,懂得 第二个值(var(--color-text-default)),就会掩盖第一个值。过期浏览器不理解就会假装看不到,没作用。这没有问题,更不会死人。

  对一切的自界说特色都做这样的处理。为运用过期浏览器的用户供给更简略的代替规划到款式中,就像我在 Stuff & Nonsense 上做的相同。

 定论

  我信任没人乐意看到网站变坏或许不被他人喜爱——我也不想这样——可是没必要要求在每个浏览器里展现都共同。咱们能够为运用过期浏览器的用供给一个规划相对简略的代替计划。

  做是否启用新的 CSS 特性的决守时,不要老往技术上考量,有时候或许需求改动一下对一切浏览器都要支撑的情绪。对老旧浏览器不要心慈手软,承受 CSS Custom Properties 带来的盈利,坚定地用起来!

  更多资源:

QQ群:凯发娱乐官网官方群(515171538),验证音讯:10000
微信群:加小编微信 849023636 邀请您参加,验证音讯:10000
提示:更多精彩内容重视微信大众号:全栈开发者中心(fsder-com)
CSS
网友谈论(共0条谈论) 正在载入谈论......
沉着谈论文明上网,回绝歹意咒骂 宣布谈论 / 共0条谈论
登录会员中心