【亚洲必赢官网】特征检测,CSS3读书笔记之linear

长远商量 CSS 特性检测 @supports 与 Modernizr

2017/03/01 · CSS ·
Modernizr

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转载!
迎接参与伯乐在线 专栏小编。

如何是 CSS
特性检测?大家领略,前端技术百尺竿头的前天,各类新技巧新属性不乏先例。在
CSS 层面亦不例外。

一对新属质量极大提高用户体验以及减弱工程师的工作量,并且在当时的前端空气下:

  • 无数试验性意义未成为标准却被多量运用;
  • 内需同盟多终端,多浏览器,而各浏览器对某一新功效的兑现表现的天差地别;

由此有了优雅降级和安分守己增强的传教,在那种背景下,又想行使新的技巧给用户提供更好的体会,又想做好回退机制确保低版本终端用户的着力经验,CSS
特性检测就涌出了。

CSS
特性检测就是针对性差距浏览器终端,判断当前浏览器对某个特性是不是协理。运用
CSS
特性检测,大家得以在支撑当前特色的浏览器环境下使用新的技术,而不援助的则做出一点回退机制。

正文将重点介绍二种 CSS 特性检测的章程:

  1. @supports
  2. modernizr

怎样是 CSS
特性检测?大家通晓,前端技术百废俱兴的前几日,各样新技巧新属性习以为常。在
CSS 层面亦不例外。

什么样是 CSS
特性检测?大家知晓,前端技术新生事物正在蓬勃发展的前几日,各样新技巧新属性司空眼惯。在
CSS 层面亦不例外。

原文链接:http://www.fx114.net/qa-264-77177.aspx
我觉着CSS3很正确,自己也有点看过,并且尝试过部分特性。对自家自己而言,我没有勇气说自家学过CSS3,我觉得任何自己看来很小的事务,也只是站在和谐的角度来评判。纵然的是“简单的”HTML在我看来也是很值得研商的,唯有每日保持一个谦逊的神态,才可以看得更远,走得更稳。
在那边要感谢一下网站:
w3cplus,W3School
,W3C
等等一些网上的课程啊博客什么的(还有为数不少就不一一列举了),我到底从这几个地点初阶接触传说中的CSS3和HTML5,而自己的就学笔记自然也会从中借鉴。
提出:大多数CSS3的特性尚在草案之中,使用的时候最好或者都增长各自浏览器的个人前缀
eg:
{
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}

CSS @supports

价值观的 CSS 特性检测都是经过 javascript 完结的,可是未来,原生 CSS
即可完毕。

CSS @supports 通过 CSS 语法来已毕特性检测,并在中间 CSS
区块中写入假诺特性检测通过希望已毕的 CSS 语句。

一对新属质量极大进步用户体验以及收缩工程师的工作量,并且在登时的前端空气下:

局地新属质量极大进步用户体验以及减弱工程师的工作量,并且在立即的前端空气下:

今日介绍的是CSS3的渐变 :linear-gradient
渐变在网页上应有算是很广泛的一种功能。不过在CSS3出现从前,渐变效果必须利用图片才能形成。这就会冒出难题了,就好像在此之前说的圆角和影子一样,因为使用了图片,在自然水准上影响网页的性质是任其自然的,同时还有网站前期维护和改动的难点。CSS3的渐变诞生很久了,到近期截至,只要是支撑该属性的浏览器,除了它们的私有前缀之外,其余写法都是同等的。
在刚初步的时候,在webkit下行使的是:
-webkit-gradient(<type>, <point> [, <radius>]?,
<point> [, <radius>]? [, <stop>]*)
//老式语法书写规则

语法:

CSS

@supports <supports_condition> { /* specific rules */ }

1
2
3
@supports <supports_condition> {
    /* specific rules */
}

举个例证:

Sass

{ position: fixed; } @supports (position:sticky) { div {
position:sticky; } }

1
2
3
4
5
6
7
8
9
{
    position: fixed;
}
@supports (position:sticky) {
    div {
        position:sticky;
    }
}

上边的例证中,position: sticky 是 position
的一个新属性,用于落到实处黏性布局,可以轻松已毕部分过去亟需 javascript
才能落到实处的布局(戳我打听详情),可是当前唯有在
-webkit- 内核下才拿走支持。

地方的写法,首先定义了 div
的 position: fixed ,紧接着上边一句 @supports (position:sticky) 则是特色检测括号内的内容,假诺当前浏览器协理 @supports 语法,并且辅助 position:sticky 语法,那么
div 的 则会被装置为 position:sticky 。

咱俩得以看到,@supports 语法的着力就在于这一句:@supports (...) { } ,括号内是一个
CSS
表明式,倘若浏览器判断括号内的表明式合法,那么接下去就会去渲染括号内的
CSS 表明式。除了那种最健康的用法,仍可以够包容其他多少个第一字:

  • 许多实验性意义未成为正式却被大批量使用;
  • 亟待极度多终端,多浏览器,而各浏览器对某一新功用的落实表现的天差地别;
  • 成千上万实验性意义未成为标准却被大批量行使;
  • 内需般配多终端,多浏览器,而各浏览器对某一新功用的贯彻表现的天差地别;

而到后天,在webkit下使用的是:
-webkit-linear-gradient( [<point> || <angle>,]?
<stop>, <stop> [, <stop>]* )//最新书写语法

@supports not && @supports and && @supports or

于是有了优雅降级和渐进增强的说法,在那种背景下,又想选取新的技艺给用户提供更好的体验,又想办好回退机制确保低版本终端用户的主题经验,CSS
特性检测就涌出了。

故而有了优雅降级和渐进增强的布道,在这种背景下,又想接纳新的技艺给用户提供更好的感受,又想办好回退机制有限接济低版本终端用户的主干经验,CSS
特性检测就应运而生了。

前几天,新式语法与任何浏览器,包罗firefox,opera的语法书写统一(现在的opera已经使用了webkit内核);

@supports not — 非

not
操作符可以放在其他表达式的前方来发出一个新的表明式,新的表达式为原表明式的值的否定。看个例子:

Sass

@supports not (background: linear-gradient(90deg, red, yellow)) { div {
background: red; } }

1
2
3
4
5
@supports not (background: linear-gradient(90deg, red, yellow)) {
    div {
        background: red;
    }
}

因为添加了 not
关键字,所以与地点第二个例证相反,那里如果检测到浏览器不扶助线性渐变 background: linear-gradient(90deg, red, yellow) 的语法,则将
div 的水彩设置为黑色 background: red 。

h3>@supports and — 与

其一可以精通,多重判断,类似 javascript 的 && 运算符符。用 and
操作符连接八个原始的表明式。唯有四个原始表达式的值都为真,生成的表达式才为真,反之为假。

当然,and 可以连接任意多个表明式看个例证:

Sass

p { overflow: hidden; text-overflow: ellipsis; } @supports
(display:-webkit-box) and (-webkit-line-clamp:2) and
(-webkit-box-orient:vertical) { p { display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical; } }

1
2
3
4
5
6
7
8
9
10
11
p {
    overflow: hidden;
    text-overflow: ellipsis;
}
@supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
    p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

地点同时,检测 @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) 了多个语法,若是还要支持,则设定三个CSS
规则。这两个语法必须同时获得浏览器的支撑,假若表达式为真,则可以用于落到实处多行省略效果:

Demo戳我

See the Pen @supportAnd by
Chokcoco (@Chokcoco【亚洲必赢官网】特征检测,CSS3读书笔记之linear。) on
CodePen.

CSS
特性检测就是对准分歧浏览器终端,判断当前浏览器对某个特性是或不是扶助。运用
CSS
特性检测,大家得以在支撑当前特色的浏览器环境下行使新的技巧,而不支持的则做出一点回退机制。

CSS
特性检测就是指向不一样浏览器终端,判断当前浏览器对某个特性是不是协理。运用
CSS
特性检测,大家可以在协助当前特点的浏览器环境下接纳新的技艺,而不匡助的则做出一点回退机制。

其实gradient,分成三种一种是线性渐变(linear-gradient),另一种是径向渐变(radial-gradient)。大家得以将linear-gradient和radial-gradient添加到任何可以承受图片的特性,比如:backgorund-images,list-style-image等等。前些天自家要介绍的就是标题上的linear-gradient。
线性渐变

@supports or — 或

理解了 @supports and,就很好精晓 @supports or 了,与 javascript
的 || 运算符类似,说明式中借使有一个为真,则变化表达式表明式为真。看例子:

Sass

@supports (background:-webkit-linear-gradient(0deg, yellow, red)) or
(background:linear-gradient(90deg, yellow, red)){ div {
background:-webkit-linear-gradient(0deg, yellow, red);
background:linear-gradient(90deg, yellow, red) } }

1
2
3
4
5
6
@supports (background:-webkit-linear-gradient(0deg, yellow, red)) or (background:linear-gradient(90deg, yellow, red)){
    div {
        background:-webkit-linear-gradient(0deg, yellow, red);
        background:linear-gradient(90deg, yellow, red)
    }
}

上边的例证中,只有检测到浏览器接济 background:-webkit-linear-gradient(0deg, yellow, red) 或者(or) background:linear-gradient(90deg, yellow, red) 其中一个,则给
div 元素添加渐变。

Demo戳我

See the Pen @supports or by
Chokcoco (@Chokcoco) on
CodePen.

当然,关键字 not 还足以和 and 或者 or 混合使用。感兴趣的可以尝试一下。

正文将重视介绍二种CSS 特性检测的措施:

本文将紧要介绍三种CSS 特性检测的方式:

在我看来渐变的参数云谲波诡,有点复杂,所以先从简单的伊始讲起
linear-gradient最简易的语法:
linear-gradient(源点,开端颜色,截至颜色);

Can i use?

兼容性来看,先看看 Can i
use 吧:

亚洲必赢官网 1

那仍是一个试行中的功用,固然多数浏览器都已经协理了,不过当前看来,即是在运动端想要全部格外仍急需拭目以待一段时间。

唯独大家曾经足以初叶接纳起来了,使用 @supports 达成渐进增强的效劳。

渐进增强(progressive
enhancement):针对低版本浏览器举行创设页面,有限帮忙最中央的效益,然后再针对高档浏览器举办职能、交互等革新和增添作用达到更好的用户体验:

  1. @supports
  2. modernizr
  1. @supports
  2. modernizr

源点表示渐变起头的地方,颜色是从初阶颜色渐变到停止颜色。
渐变源点有很各类写法:
1、使用top,right,bottom,left中的一个来指定渐变的源点
.test{

CSS.supports()

谈到了 @supports,就有必不可少加以说 CSS.supports() 。

它是当做 @supports 的另一种方式现身的,大家可以动用 javascript
的不二法门来赢得 CSS 属性的支撑意况。

可以打开控制台,输入 CSS.supports 试试:

亚洲必赢官网 2

一旦没有自己完毕 CSS.supports
那个主意,输出上述音讯,表示浏览器是支撑 @supports 语法的,使用如下:

JavaScript

CSS.supports(‘display’, ‘flex’) // true CSS.supports(‘position’,
‘sticky’) // true

1
2
CSS.supports(‘display’, ‘flex’)  // true
CSS.supports(‘position’, ‘sticky’)  // true

亚洲必赢官网 3

那它有如何用吧?假若你的页面需求动态增加一些您不确定怎么样浏览器协助的新的特性,这它也许会派上用场。以及,它可以匹配大家下文即将要讲的 modernizr 。

及应用 javascript
进行特色检测的法则。

及运用 javascript
举行特色检测的规律。

background:-webkit-linear-gradient(top,#fff,#000);

modernizr

上边介绍了 CSS 形式的性状检测,在原先,常常是使用 javascript
来展开特色检测的,其中 modernizr 就是其中最为美妙的尖子。

modernizr(戳我翻看
Github )是一个开源的
javascript 库。有着近乎 2W 的 star ,其可以水平见微知著。

简易看看使用办法,如果页面已经引用了 modernizr ,语法如下:

JavaScript

// Listen to a test, give it a callback Modernizr.on(‘testname’,
function( result ) { if (result) { console.log(‘The test passed!’); }
else { console.log(‘The test failed!’); } }); // 或者是看似
CSS.supports() Modernizr.testAllProps(‘background’,
‘linear-gradient(90deg, #888, #ccc)’); // true

1
2
3
4
5
6
7
8
9
10
11
12
// Listen to a test, give it a callback
Modernizr.on(‘testname’, function( result ) {
  if (result) {
    console.log(‘The test passed!’);
  }
  else {
    console.log(‘The test failed!’);
  }
});
// 或者是类似 CSS.supports()
Modernizr.testAllProps(‘background’, ‘linear-gradient(90deg, #888, #ccc)’);  // true

举个实在的事例,倘若大家希望对是或不是扶助渐变这么些样式浏览器下的一个 div
分裂对待,有如下 CSS:

CSS

div { background: #aaa; } .linear-gradient div{ background:
linear-gradient(90deg, #888, #ccc); }

1
2
3
4
5
6
7
div {
    background: #aaa;
}
.linear-gradient div{
    background: linear-gradient(90deg, #888, #ccc);
}

运用 Modernizr
进行判定,借使协助渐变,则在根元素添加一个 .linear-gradient 样式,方便示例,使用了
jquery 语法:

JavaScript

if (Modernizr.testAllProps(‘background’, ‘linear-gradient(90deg, #888,
#ccc)’)) { $(‘html’).addClass(‘linear-gradient’); }

1
2
3
if (Modernizr.testAllProps(‘background’, ‘linear-gradient(90deg, #888, #ccc)’)) {
    $(‘html’).addClass(‘linear-gradient’);
}

Demo戳我

See the Pen modernizr by
Chokcoco (@Chokcoco) on
CodePen.

自然,Modernizr 还有不少别样的功效,可以去翻翻它的 API 。

 

 

background:-moz-linear-gradient(top,#fff,#000);

特征检测原理

一旦嫌引入整一个 Modernizr
库太大,页面又不协理 @supports ,其实大家协调用简单的 javascript
完成也越发有益不难。

想要知道浏览器支持多少 CSS 属性,可以在调节窗口试试:

JavaScript

var root = document.documentElement; //HTML for(var key in root.style) {
console.log(key); }

1
2
3
4
5
var root = document.documentElement; //HTML
for(var key in root.style) {
    console.log(key);
}

亚洲必赢官网 4

地点图片截取的只是打印出来的一小部分。借使我们要检测某个属性样式是不是被辅助,在随心所欲的
element.style
检测它是还是不是留存即可,即上边代码示例的 root 可以替换成任意元素。

自然,元素可能有 background 属性,不过不支持具体的 linear-gradinet() 属性值。那一个时候该怎么检测呢?只要求将具体的值赋值给某一因素,再查询这么些属性值能或不能被读取。

JavaScript

var root = document.documentElement; root.style.backgroundImage =
‘linear-gradient(90deg, #888, #ccc)’; if(root.style.backgroundImage) {
// 支持 } else { // 不支持 }

1
2
3
4
5
6
7
8
9
var root = document.documentElement;
root.style.backgroundImage = ‘linear-gradient(90deg, #888, #ccc)’;
if(root.style.backgroundImage) {
  // 支持
} else {
  // 不支持
}

之所以地点 Modernizr 的事例里,javascript 代码能够改成:

JavaScript

var root = document.documentElement; root.style.backgroundImage =
‘linear-gradient(90deg, #888, #ccc)’; if(root.style.backgroundImage) {
$(‘html’).addClass(‘linear-gradient’); }

1
2
3
4
5
6
var root = document.documentElement;
root.style.backgroundImage = ‘linear-gradient(90deg, #888, #ccc)’;
if(root.style.backgroundImage) {
  $(‘html’).addClass(‘linear-gradient’);
}

自然,做那种特定属性值判断的时候由于有个 CSS
赋值操作,所以大家挑拔取于判断的要素应该是一个逃匿在页面上的元素。

CSS @supports

历史观的 CSS
特性检测都是通过 javascript 完结的,不过将来,原生 CSS 即可兑现。

CSS @supports 通过
CSS 语法来达成特性检测,并在中间 CSS
区块中写入即使特性检测通过希望完结的 CSS 语句。

CSS @supports

价值观的 CSS
特性检测都是透过 javascript 落成的,然则将来,原生 CSS 即可兑现。

CSS @supports 通过
CSS 语法来已毕特性检测,并在里头 CSS
区块中写入倘诺特性检测通过希望完结的 CSS 语句。

background:-o-linear-gradient(top,#fff,#000);

各个办法间的上下

  • 原生的 @supports 的特性肯定是最好的,而且无需引入外部 javascript
    ,首推这一个,不过无法包容难点,方今来看不是最好的取舍。

  • Modernizr 功用强大,包容性好,不过须要引入外部 javascript,多一个
    http 请求,如果只是举办多少个特点检测,有点杀鸡用牛刀的感觉。

  • 针对要求的特性检测,使用 javascript
    完成一个简约的函数,再把上边用到的方法封装一下:

JavaScript

/** * 用于简单的 CSS 特性检测 * @param [String] property
要求检测的 CSS 属性名 * @param [String] value 样式的有血有肉性质值 *
@return [Boolean] 是还是不是经过检查 */ function cssTest(property, value) {
// 用于测试的因素,隐藏在页面上 var ele =
document.getElementById(‘test-display-none’); // 只有一个参数的事态
if(arguments.length === 1) { if(property in ele.style) { return true; }
// 八个参数的情状 }else if(arguments.length === 2){
ele.style[property] = value; if(ele.style[property]) { return true;
} } return false; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
* 用于简单的 CSS 特性检测
* @param [String] property 需要检测的 CSS 属性名
* @param [String] value 样式的具体属性值
* @return [Boolean] 是否通过检查
*/
function cssTest(property, value) {
    // 用于测试的元素,隐藏在页面上
    var ele = document.getElementById(‘test-display-none’);
    // 只有一个参数的情况
    if(arguments.length === 1) {
        if(property in ele.style) {
            return true;
        }
    // 两个参数的情况
    }else if(arguments.length === 2){
        ele.style[property] = value;
        if(ele.style[property]) {
            return true;
        }
    }
    return false;
}

简单测试一下:

亚洲必赢官网 5

软件工程没有银弹,所以随便哪个种类格局,都有合乎的情景,大家要做的就是左右驾驭它们的原理,按照差其余风貌灵活运用即可。

多元 CSS 文章汇总在自己的 Github 。

到此本文停止,如若还有何疑难仍旧提议,可以多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏协助自己写出更多好文章,谢谢!

打赏小编

语法:

@supports <supports_condition> {
    /* specific rules */
}

举个例子:

div {
    position: fixed;
}

@supports (position:sticky) {
    div {
        position:sticky;
    }
}

地点的例子中,position: sticky 是
position 的一个新属性,用于落实黏性布局,可以轻松达成部分陈年急需
javascript
才能落到实处的布局(戳我通晓详情),可是近日唯有在
-webkit- 内核下才得到协助。

上边的写法,首先定义了
div
的 position: fixed ,紧接着下边一句 @supports (position:sticky) 则是特色检测括号内的始末,假使当前浏览器扶助 @supports 语法,并且协助 position:sticky 语法,那么
div 的 则会被装置为 position:sticky 。

咱俩得以看来,@supports 语法的主导就在于这一句:@supports (...) { } ,括号内是一个
CSS
表明式,即使浏览器判断括号内的表明式合法,那么接下去就会去渲染括号内的
CSS 表明式。除了那种最健康的用法,还是能包容其余多少个根本字:

语法:

@supports <supports_condition> {
    /* specific rules */
}

举个例证:

div {
    position: fixed;
}

@supports (position:sticky) {
    div {
        position:sticky;
    }
}

上边的事例中,position: sticky 是
position 的一个新属性,用于落到实处黏性布局,可以轻松完结部分过去急需
javascript
才能兑现的布局(戳我询问详情),不过当前只有在
-webkit- 内核下才得到扶助。

地点的写法,首先定义了
div
的 position: fixed ,紧接着上面一句 @supports (position:sticky) 则是特点检测括号内的情节,假若当前浏览器协助 @supports 语法,并且支持 position:sticky 语法,那么
div 的 则会被安装为 position:sticky 。

俺们得以看看,@supports 语法的中央就在于这一句:@supports (...) { } ,括号内是一个
CSS
表明式,如若浏览器判断括号内的表明式合法,那么接下去就会去渲染括号内的
CSS 表达式。除了那种最健康的用法,仍是可以够包容其余多少个主要字:

background:linear-gradient(top,#fff,#000);

打赏扶助自己写出越多好小说,谢谢!

任选一种支付办法

亚洲必赢官网 6
亚洲必赢官网 7

2 赞 收藏
评论

 

 

}

有关小编:chokcoco

亚洲必赢官网 8

经不住大运似水,逃但是此间少年。

个人主页 ·
我的稿子 ·
63 ·
   

亚洲必赢官网 9

@supports not && @supports and && @supports or

@supports not && @supports and && @supports or

image

@supports not — 非

not
操作符可以放在其他表明式的面前来发生一个新的表明式,新的表明式为原表明式的值的否定。看个例证:

@supports not (background: linear-gradient(90deg, red, yellow)) {
    div {
        background: red;
    }
}

因为添加了
not
关键字,所以与地方首个例证相反,那里要是检测到浏览器不接济线性渐变 background: linear-gradient(90deg, red, yellow) 的语法,则将
div 的水彩设置为粉红色 background: red 。

@supports not — 非

not
操作符可以置身其余表明式的先头来暴发一个新的表明式,新的表达式为原表明式的值的否认。看个例证:

@supports not (background: linear-gradient(90deg, red, yellow)) {
    div {
        background: red;
    }
}

因为添加了
not
关键字,所以与地点第四个例证相反,那里假诺检测到浏览器不辅助线性渐变 background: linear-gradient(90deg, red, yellow) 的语法,则将
div 的颜色设置为黑色 background: red 。

2、稍微复杂一点,可以运用top与left或者right组合,也足以行使bottom与left或者

 

 

right组合来改变渐变起源。不过切记:top不可以和bottom组合,left无法和right组合

@supports and — 与

那些可以领悟,多重判断,类似
javascript 的 && 运算符符。用 and
操作符连接五个原始的表达式。只有三个原始表明式的值都为真,生成的表明式才为真,反之为假。

当然,and
可以接连任意三个表明式看个例证:

p {
    overflow: hidden;
    text-overflow: ellipsis;
}
@supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
    p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

地方同时,检测 @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) 了多少个语法,要是还要辅助,则设定七个CSS
规则。那四个语法必须同时取得浏览器的支撑,如若表达式为真,则足以用于落实多行省略效果:

Demo戳我

@supports and — 与

那么些可以领悟,多重判断,类似
javascript 的 && 运算符符。用 and
操作符连接多少个原始的表明式。唯有三个原始表明式的值都为真,生成的表明式才为真,反之为假。

自然,and
可以连接任意八个表明式看个例子:

p {
    overflow: hidden;
    text-overflow: ellipsis;
}
@supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) {
    p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

地点同时,检测 @supports (display:-webkit-box) and (-webkit-line-clamp:2) and (-webkit-box-orient:vertical) 了三个语法,如果还要帮助,则设定五个CSS
规则。那三个语法必须同时得到浏览器的支撑,如若表达式为真,则可以用于落到实处多行省略效果:

Demo戳我

.test{
background:-webkit-linear-gradient(top right,#fff,#000);
background:-moz-linear-gradient(top right,#fff,#000);
background:-o-linear-gradient(top right,#fff,#000);
background:linear-gradient(top right,#fff,#000);
}

 

 

image

@supports or — 或

理解了 @supports and,就很好了然 @supports or 了,与
javascript
的 || 运算符类似,表明式中假设有一个为真,则变化表达式表明式为真。看例子:

@supports (background:-webkit-linear-gradient(0deg, yellow, red)) or (background:linear-gradient(90deg, yellow, red)){
    div {
        background:-webkit-linear-gradient(0deg, yellow, red);
        background:linear-gradient(90deg, yellow, red)
    }
}

上面的例证中,唯有检测到浏览器协助 background:-webkit-linear-gradient(0deg, yellow, red) 或者(or) background:linear-gradient(90deg, yellow, red) 其中一个,则给
div 元素添加渐变。

Demo戳我

当然,关键字 not 还足以和 and 或者 or 混合使用。感兴趣的可以尝试一下。

@supports or — 或

理解了 @supports and,就很好了然 @supports or 了,与
javascript
的 || 运算符类似,表明式中假诺有一个为真,则变化表明式表明式为真。看例子:

@supports (background:-webkit-linear-gradient(0deg, yellow, red)) or (background:linear-gradient(90deg, yellow, red)){
    div {
        background:-webkit-linear-gradient(0deg, yellow, red);
        background:linear-gradient(90deg, yellow, red)
    }
}

上边的例证中,唯有检测到浏览器接济 background:-webkit-linear-gradient(0deg, yellow, red) 或者(or) background:linear-gradient(90deg, yellow, red) 其中一个,则给
div 元素添加渐变。

Demo戳我

当然,关键字 not 还足以和 and 或者 or亚洲必赢官网 , 混合使用。感兴趣的可以尝试一下。

.test{
background:-webkit-linear-gradient(bottom left,#fff,#000);
background:-moz-linear-gradient(bottom left,#fff,#000);
background:-o-linear-gradient(bottom left,#fff,#000);
background:linear-gradient(bottom left,#fff,#000);
}

 

 

image

Can i use?

包容性来看,先看看 Can
i use 吧:

亚洲必赢官网 10

那仍是一个试行中的功能,即便超过一半浏览器都已经协助了,不过近来看来,即是在活动端想要全体协作仍需求拭目以待一段时间。

而是大家曾经可以早先采取起来了,使用 @supports 落成渐进增强的听从。

style=”font-size: 14px; font-family: verdana, geneva;”>渐进增强(progressive
enhancement):针对低版本浏览器举行创设页面,保障最中心的法力,然后再针对高档浏览器举办职能、交互等革新和充实作用达到更好的用户体验:

Can i use?

兼容性来看,先看看 Can
i use 吧:

亚洲必赢官网 11

那仍是一个尝试中的功用,即使一大半浏览器都早就支撑了,不过如今总的来说,即是在运动端想要全体匹配仍急需等待一段时间。

只是我们早就足以初阶利用起来了,使用 @supports 完毕渐进增强的法力。

style=”font-size: 14px; font-family: verdana, geneva;”>渐进增强(progressive
enhancement):针对低版本浏览器实行营造页面,有限帮衬最要旨的职能,然后再指向高档浏览器举行职能、交互等革新和增添功效达到更好的用户体验:

3、上面三种写法只好够画出点儿的二种渐变。大家得以运用角度来安装渐变的起源。
以上面的代码为模板,将“0deg”修改成你想要的角度
.deg0{
background:-webkit-linear-gradient(0deg,#fff,#000);
background:-moz-linear-gradient(0deg,#fff,#000);
background:-o-linear-gradient(0deg,#fff,#000);
background:linear-gradient(0deg,#fff,#000);
}

 

 

自身添加了12个div,以30deg为差值。

CSS.supports()

谈到了 @supports,就有要求加以说 CSS.supports() 。

它是作为 @supports 的另一种样式出现的,大家得以应用
javascript 的措施来获取 CSS 属性的帮忙情况。

可以打开控制台,输入 CSS.supports 试试:

亚洲必赢官网 12

若果没有自己已毕CSS.supports
这么些方式,输出上述信息,表示浏览器是永葆 @supports 语法的,使用如下:

CSS.supports('display', 'flex')  // true
CSS.supports('position', 'sticky')  // true

亚洲必赢官网 13

那它有何用呢?即使你的页面须要动态增加一些您不确定什么浏览器协理的新的品质,那它也许会派上用场。以及,它可以包容大家下文即将要讲的 modernizr 。

CSS.supports()

谈到了 @supports,就有须求加以说 CSS.supports() 。

它是当做 @supports 的另一种样式出现的,大家可以应用
javascript 的不二法门来收获 CSS 属性的支撑处境。

可以打开控制台,输入 CSS.supports 试试:

亚洲必赢官网 14

要是没有团结完毕CSS.supports
那么些格局,输出上述音信,表示浏览器是支撑 @supports 语法的,使用如下:

CSS.supports('display', 'flex')  // true
CSS.supports('position', 'sticky')  // true

亚洲必赢官网 15

那它有怎么着用呢?假若您的页面要求动态增进一些你不确定哪些浏览器扶助的新的属性,那它也许会派上用场。以及,它可以合作我们下文即将要讲的 modernizr 。

image

 

 

按照结果,我又画出了那张图

modernizr

地点介绍了
CSS 格局的特点检测,在在此从前,平日是应用 javascript 来展开特色检测的,其中
modernizr 就是中间最为理想的探花。

modernizr(戳我查看
Github )是一个开源的
javascript 库。有着近乎 2W 的 star ,其美永州平知秋一叶。

简短看看使用办法,倘若页面已经引用了
modernizr ,语法如下:

// Listen to a test, give it a callback
Modernizr.on('testname', function( result ) {
  if (result) {
    console.log('The test passed!');
  }
  else {
    console.log('The test failed!');
  }
});

// 或者是类似 CSS.supports()
Modernizr.testAllProps('background', 'linear-gradient(90deg, #888, #ccc)');  // true

举个实在的例证,若是大家期望对是还是不是援救渐变那几个样式浏览器下的一个
div 差别对待,有如下 CSS:

div {
    background: #aaa;
}

.linear-gradient div{
    background: linear-gradient(90deg, #888, #ccc);
}

采用Modernizr
举办判定,如若辅助渐变,则在根元素添加一个 .linear-gradient 样式,方便示例,使用了
jquery 语法:

if (Modernizr.testAllProps('background', 'linear-gradient(90deg, #888, #ccc)')) {
    $('html').addClass('linear-gradient');
}

Demo戳我

当然,Modernizr
还有好多别的的效率,可以去翻翻它的 API 。

modernizr

上边介绍了
CSS 格局的特性检测,在此前,经常是利用 javascript 来开展特色检测的,其中
modernizr 就是内部最为了不起的魁首。

modernizr(戳我翻看
Github )是一个开源的
javascript 库。有着近乎 2W 的 star ,其完美水平一叶知秋。

简短看看使用方法,假设页面已经引用了
modernizr ,语法如下:

// Listen to a test, give it a callback
Modernizr.on('testname', function( result ) {
  if (result) {
    console.log('The test passed!');
  }
  else {
    console.log('The test failed!');
  }
});

// 或者是类似 CSS.supports()
Modernizr.testAllProps('background', 'linear-gradient(90deg, #888, #ccc)');  // true

举个实际的例子,借使大家期望对是不是协理渐变那一个样式浏览器下的一个
div 分裂对待,有如下 CSS:

div {
    background: #aaa;
}

.linear-gradient div{
    background: linear-gradient(90deg, #888, #ccc);
}

使用
Modernizr
举行判断,假如匡助渐变,则在根元素添加一个 .linear-gradient 样式,方便示例,使用了
jquery 语法:

if (Modernizr.testAllProps('background', 'linear-gradient(90deg, #888, #ccc)')) {
    $('html').addClass('linear-gradient');
}

Demo戳我

自然,Modernizr
还有许多别样的法力,可以去翻翻它的 API 。

image

 

 

可以看到,在采纳角度设定渐变起源的时候,0deg对应botton,90deg对应left,180deg对应top,360deg对应right。整个经过就是以bottom为起源逆时针旋转。
有关源点的始末我暂时只精通到如此多,将来如若草案做了修改,我询问之后会马上更新。

特点检测原理

若是嫌引入整一个
Modernizr 库太大,页面又不援救 @supports ,其实大家温馨用简易的
javascript 已毕也分外有利于简单。

想要知道浏览器匡助多少
CSS 属性,可以在调节窗口试试:

var root = document.documentElement; //HTML

for(var key in root.style) {
    console.log(key);
}

亚洲必赢官网 16

地点图片截取的只是打印出来的一小部分。若是大家要检测某个属性样式是不是被协助,在任意的
element.style
检测它是或不是存在即可,即下边代码示例的 root 可以替换成任意元素。

自然,元素可能有 background 属性,可是不协助具体的 linear-gradinet() 属性值。这么些时候该怎么着检测呢?只要求将现实的值赋值给某一要素,再查询这些属性值能或不能被读取。

var root = document.documentElement;

root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';

if(root.style.backgroundImage) {
  // 支持
} else {
  // 不支持
}

所以地方Modernizr 的例子里,javascript 代码可以改成:

var root = document.documentElement;
root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';

if(root.style.backgroundImage) {
  $('html').addClass('linear-gradient');
}

当然,做那种特定属性值判断的时候是因为有个
CSS
赋值操作,所以我们选用用于判断的要素应该是一个东躲广西在页面上的元素。

特点检测原理

若果嫌引入整一个
Modernizr 库太大,页面又不协理 @supports ,其实大家团结用不难的
javascript 落成也相当便宜简单。

想要知道浏览器支持多少
CSS 属性,可以在调节窗口试试:

var root = document.documentElement; //HTML

for(var key in root.style) {
    console.log(key);
}

亚洲必赢官网 17

地点图片截取的只是打印出来的一小部分。即便我们要检测某个属性样式是或不是被协理,在随心所欲的
element.style
检测它是否存在即可,即下边代码示例的 root 可以替换成任意元素。

自然,元素可能有 background 属性,不过不帮忙具体的 linear-gradinet() 属性值。那几个时候该怎么检测呢?只须求将现实的值赋值给某一因素,再查询那个属性值能依然不能被读取。

var root = document.documentElement;

root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';

if(root.style.backgroundImage) {
  // 支持
} else {
  // 不支持
}

从而地方Modernizr 的例子里,javascript 代码可以改成:

var root = document.documentElement;
root.style.backgroundImage = 'linear-gradient(90deg, #888, #ccc)';

if(root.style.backgroundImage) {
  $('html').addClass('linear-gradient');
}

本来,做那种特定属性值判断的时候是因为有个
CSS
赋值操作,所以我们挑接纳于判断的要素应该是一个隐藏在页面上的元素。

潜移默化颜色设置也足以花样繁多:
潜移默化的水彩可以不断二种,在源点颜色和顶峰颜色之间可以拉长更加多颜色。
.test{
background:-webkit-linear-gradient(top,#fff,red,#000,red);
background:-moz-linear-gradient(top,#fff,red,#000,red);
background:-o-linear-gradient(top,#fff,red,#000,red);
background:linear-gradient(top,#fff,red,#000,red);
}

 

 

image

各类方式间的优劣

  • 原生的 @supports 的性质肯定是最好的,而且无需引入外部
    javascript
    ,首推那几个,不过没办法包容难点,近期来看不是最好的取舍。

  • Modernizr
    作用强大,包容性好,然而须要引入外部 javascript,多一个 http
    请求,即使只是进行多少个特色检测,有点杀鸡用牛刀的痛感。

  • 本着急需的特性检测,使用
    javascript 已毕一个简短的函数,再把地点用到的法门封装一下:

    /**

    • 用以不难的 CSS 特性检测
    • @param [String] property 要求检测的 CSS 属性名
    • @param [String] value 样式的求实属性值
    • @return [Boolean] 是还是不是因此检查
      */
      function cssTest(property, value) {
      // 用于测试的因素,隐藏在页面上
      var ele = document.getElementById(‘test-display-none’);

      // 唯有一个参数的景观 if(arguments.length === 1) {

       if(property in ele.style) {
           return true;
       }
      

      // 多个参数的情状 }else if(arguments.length === 2){

       ele.style[property] = value;
      
       if(ele.style[property]) {
           return true;
       }
      

      }

      return false;
      }

粗略测试一下:

亚洲必赢官网 18

软件工程并未银弹,所以随便哪一类情势,都有合乎的情状,我们要做的就是了解精通它们的法则,根据差别的光景灵活运用即可。

 

多元 CSS
文章汇总在自家的 Github 。

到此本文截至,若是还有何样疑点依然提出,可以多多调换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

各类措施间的三六九等

  • 原生的 @supports 的特性肯定是最好的,而且无需引入外部
    javascript
    ,首推那个,不过迫于兼容难点,近来来看不是最好的抉择。

  • Modernizr
    作用强大,包容性好,可是急需引入外部 javascript,多一个 http
    请求,假使只是举行多少个特征检测,有点杀鸡用牛刀的感觉。

  • 针对要求的特征检测,使用
    javascript 落成一个粗略的函数,再把下面用到的点子封装一下:

    /**

    • 用来简单的 CSS 特性检测
    • @param [String] property 需求检测的 CSS 属性名
    • @param [String] value 样式的求实属性值
    • @return [Boolean] 是或不是通过检查
      */
      function cssTest(property, value) {
      // 用于测试的因素,隐藏在页面上
      var ele = document.getElementById(‘test-display-none’);

      // 唯有一个参数的情况 if(arguments.length === 1) {

       if(property in ele.style) {
           return true;
       }
      

      // 四个参数的状态
      }else if(arguments.length === 2){

       ele.style[property] = value;
      
       if(ele.style[property]) {
           return true;
       }
      

      }

      return false;
      }

简不难单测试一下:

亚洲必赢官网 19

软件工程尚未银弹,所以无论哪一类办法,都有契合的场地,大家要做的就是左右通晓它们的规律,根据不相同的现象灵活运用即可。

 

洋洋洒洒 CSS
小说汇总在自己的 Github 。

到此本文停止,借使还有何疑难仍然提议,可以多多交换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

或者:
.test{
background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange);
background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange);
background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange);
background:linear-gradient(top,red,yellow,blue,green,purple,orange);
}

image

上边的例子中,颜色的渐变都是均匀的,大家也足以给每一种颜色引导渐变的职责,从而使渐变不是唯有的均匀变化,那一个也很简短,只要在您想修改的水彩前面加上渐变的文职就可以了。为了简单直观,我只用三种颜色。
均匀变化
.test{
background:-webkit-linear-gradient(red ,green,blue);
background:-moz-linear-gradient(red ,green,blue);
background:-o-linear-gradient(red ,green,blue);
background:linear-gradient(red ,green,blue);
}

image

添加了职分后
.test{
background:-webkit-linear-gradient(red 50% ,green,blue);
background:-moz-linear-gradient(red 50% ,green,blue);
background:-o-linear-gradient(red 50% ,green,blue);
background:linear-gradient(red 50% ,green,blue);
}

image

自然,假设颜色格式使用CSS3中的rgba格式,那么渐变将会是晶莹剔透的。

网站地图xml地图