在 CSS 中央银行使功效查询

2016/09/04 · CSS ·
意义查询

原稿出处: Jen
Simmons   译文出处:Erichain_Zain   

在 CSS
里,有三个你或然未有听过的工具,不过它早就面世风度翩翩段时间了,况且足够有力。只怕,它会成为
CSS 中您最欢腾的事物之生龙活虎。

那正是说,是何许呢?即是 @support,也正是意义查询。

通过 @support,你能够在 CSS
中运用一小段的测量试验来查看浏览器是不是帮助三个特定的 CSS 效用(这些职能能够是
CSS
的某种属性也许有些属性的有些值卡塔尔(قطر‎,然后,依据测试的结果来决定是或不是要利用某段样式。比方:

CSS

@supports ( display: grid 卡塔尔 { // 假设浏览器帮助Grid,那中间的代码才会试行 }

1
2
3
@supports ( display: grid ) {
    // 如果浏览器支持 Grid,这里面的代码才会执行
}

生机勃勃经浏览器能够精通
display: grid,那么,大括号里的代码都会被应用,否则,那一个样式就能够被跳过。

明日,对于效能查询是哪些,你只怕还应该有有个别迷惑。这并非通过某种额外的辨证来分析浏览器是不是业已相当的贯彻了某个CSS 属性。如若您必要查阅额外的认证,可以查阅 Test the Web
Forward。

功用查询让浏览器自身就可以知道表现出是还是不是帮助有个别 CSS 属性大概 CSS
属性值。然后通过这么些结果来推断是或不是要接纳某段
CSS。假使二个浏览器未有科学的(恐怕完全的卡塔尔(英语:State of Qatar)完成八个 CSS
属性,那么,@supports 就不曾什么样用了。它实际不是三个可以预知让浏览器的 bug
消失的魔杖。

不过,小编曾经发掘 @supports
是那么出乎意料的有扶助。比起早前尚未那脾特性的时候,@supports
能够让自家反复的应用新的 CSS 功效。

连年来讲,开采者们都在行使 Modernizr
来实现效果与利益查询,可是 Modernizr 须要 JavaScript。即便那有个别 JavaScript
极小,然而,CSS 构造中增加了 Modernizr 的话,在 CSS
被利用早先,就须求下载 JavaScript 然后等待推行到位。比起使用 CSS,参与了
JavaScript 总是会更加慢。何况,要是 JavaScript
施行倒闭了吧?别的,Modernizr
还要求生龙活虎层额外复杂的、超级多类型都没办法儿知道的事物。相比较之下,效能查询更加快,作用更有力,使用起来更简明。

你恐怕注意到了,@supports
的写法和传媒询问很相近,我认为他们大概就是堂兄弟的涉嫌。

CSS

@supports ( display: grid ) { main { display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

1
2
3
4
5
6
@supports ( display: grid ) {
    main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

多数时候,你实在不需求这么的测验。比方,你能够一向那样写:

CSS

aside { border: 1px solid black; border-radius: 1em; }

1
2
3
4
aside {
    border: 1px solid black;
    border-radius: 1em;
}

若是浏览器能够通晓
border-radius,那么,在相应的器皿上就能够选择圆角样式。假若它不能够分晓那些性子,那么,就能够直接跳过并继续施行下边包车型地铁言辞。容器的边缘也就保持直角了。完全没要求选用功能查询或许测量试验,CSS
正是如此运转的。那是归属 CSS
中稳固设计,渐进加强的叁个着力的条件。浏览器会直接跳过她们没辙解析的言语,不会抛出别的错误。

永利开户送38元体验金 1

大部浏览器都会应用
border-radius: 1em;,然后体现出左边的功效。可是,在 IE6,7,8
上你却不可能来看圆角,你看看的将是右侧的效力。可以看看这么些例子:A
Rounded Corner Box。

对于那些事例,未有应当要运用功能查询。

那正是说,哪一天才要求使用 @supports 呢?功用查询是将 CSS
申明绑定在联合签名的八个工具,以便于这么些 CSS
法规能够在某种条件下以二个整合的办法运维。当你必要混合使用 CSS
的新法则和旧准绳的时候,况且,仅当 CSS
新功效被协理的时候,就足以选用效果与利益查询了。

翻译注:以下例子中的 initial-letter
属性现在在全数今世浏览器中都不受帮助,所以,以下例子中的代码恐怕都以没用的代码。若是下文中有涉及此属性在某某浏览器中接收帮衬助的话,请忽视。要求精晓
initial-letter 详细的验证,能够参见initial-letter |
MDN。

来看二个有关接受 initial-letter
的例子。这特性情告诉浏览器要将特指的不胜成分变得更加大,就如二个段首大字同样。在此边,大家要做的就是让段落的第三个字母的朗朗上口为四行文字那么大。同期,我们再对它进行加粗,在它的侧面设置某些margin,还给它设置叁个高亮的橘色。OK,很科学了。

CSS

p::first-letter { margin-right: 0.5em; color: #FE742F; font-weight:
bold; -webkit-initial-letter: 4; initial-letter: 4; }

1
2
3
4
5
6
7
p::first-letter {
    margin-right: 0.5em;
    color: #FE742F;
    font-weight: bold;
    -webkit-initial-letter: 4;
    initial-letter: 4;
}

永利开户送38元体验金 2

那是在 Safari 上的法力

让大家看看在别的浏览器上的成效。

永利开户送38元体验金 3

好啊,大致没有办法选择。除了行使 initial-letter
来到达我们想要的功力之外,我们并不想要改造字体的
colormargin,和font-weight。所以,大家要求二个格局来测量检验浏览器是或不是扶持
initial-letter
这些脾气,然后在浏览器协理那个天性的时候再利用相关的体制。所以,使用成效查询:

CSS

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color:
#FE742F; font-weight: bold; margin-right: 0.5em; } }

1
2
3
4
5
6
7
8
9
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}

瞩目,测量试验的时候供给实行完全的测验,CSS
属性和值都得写上。一同先笔者也正如狐疑,为何非得测验
initial-letter: 4呢?4 那么些值很关键呢?要是本身写成 17
呢?莫非是急需协作本身快要要利用的 CSS 中的样式吗?

由来是如此的:@supports
在测量检验的时候,必要提供属性和值,因为有的时候候测验的是性质,临时候测量检验的是值。对于
initial-letter ,你输入多少值并不重大。可是,假诺是
@suports ( dislay: grid ) 就差别等了,全数浏览器都识别
display,然而,并不是富有浏览器都识别 display: grid

归来大家的例子,当前的 initial-letter 只在 Safari 9
上受协助,况兼须求加前缀。所以,作者加了前缀,同期,保持着不加前缀的平整,並且,作者还写了测验来测量试验别的的性质。没有错,在功能查询中,还是能使用
and, or, not 声明。

下边是新的结果。领悟 initial-letter
的浏览器会显示多少个宏伟加粗高亮的段首大字。别的浏览器的作为就如那些段首大字不真实相像。当然,假若越多的浏览器协理了这一个性子,那么,他们的一坐一起也将会是有一个段首大字。

永利开户送38元体验金 4

深远探究 CSS 本性检查实验 @supports 与 Modernizr

2017/03/01 · CSS ·
Modernizr

正文作者: 伯乐在线 –
chokcoco
。未经作者许可,幸免转发!
接待参与伯乐在线 专栏审核人。

哪些是 CSS
特性检查测量试验?大家精通,前端技能如火如荼的前几日,种种新本领新属性多如牛毛。在
CSS 层面亦不例外。

风姿洒脱对新属品质异常的大提高客户体验以致收缩程序猿的专业量,并且在及时的前端空气下:

  • 不菲实验性意义未成为专门的学业却被一大波应用;
  • 亟需协作多终端,多浏览器,而各浏览器对某后生可畏新效能的得以达成表现的云泥之别;

故此有了高贵降级和渐进巩固的说教,在此种背景下,又想利用新的技术给客户提供更加好的阅世,又想做好回落机制确定保证低版本终端顾客的骨干经历,CSS
个性检查测量检验就现身了。

CSS
性子检查评定便是本着区别浏览器终端,推断当前浏览器对某些特性是或不是补助。运用
CSS
性子检查评定,大家能够在帮忙当前特点的浏览器情状下利用新的本领,而不扶植的则做出一点回落机制。

正文将注重介绍二种 CSS 性子检查测量检验的方法:

  1. @supports
  2. modernizr

团体你的代码

今昔,只怕你发急的想要使用那个工具来将你的代码分为多少个支行,使其变得明窗净几一些。“Hey,浏览器,就算你识别
Viewport 单位,就施行那几个,不然,实行此外的”。认为很科学,有系统。

CSS

@supports ( height: 100vh 卡塔尔(英语:State of Qatar) { // 帮助 viewport height 的体制 } @supports
not ( height: 100vh 卡塔尔(قطر‎ { // 对于旧浏览器的代表样式 } //
我们愿意是好的,但那是一段烂代码

1
2
3
4
5
6
7
@supports ( height: 100vh ) {
    // 支持 viewport height 的样式
}
@supports not ( height: 100vh ) {
    // 对于旧浏览器的替代样式
}
// 我们希望是好的,但这是一段烂代码

这段代码并不好,起码当前看来是这般的。开掘题目了吗?

主题素材纵然,而不是享有的浏览器都扶助功用查询,不精晓 @supports
的浏览器会一贯跳过两段代码,那大概就太不好了。

乐趣便是,除非浏览器百分百支撑效用查询,不然我们就无语使用了吧?当然不是,大家全然能够接纳效果与利益查询,並且应该使用作用查询,只要不像下面那样写代码就能够。

那正是说,怎么做才对吗?其实与应用媒体询问形似,我们在浏览器完全扶持媒体询问从前就带头使用了不是吗?事实上,功效查询利用起来比媒体询问更简短,只要脑子放聪美素佳儿(Friso卡塔尔(英语:State of Qatar)点就能够了。

您想要让您的代码知道浏览器是不是支持作用查询也许正在测验的有个别功用,作者来告诉您怎么办。

当然,在以后,浏览器 百分之百 帮忙效能查询的时候,大家可以大大方方选用
@supports not 来组织大家的代码。

CSS @supports

历史观的 CSS 性格检查评定都以通过 javascript 完毕的,可是以往,原生 CSS
就能够兑现。

CSS @supports 通过 CSS 语法来促成性格检查评定,并在在那之中 CSS
区块中写入假如个性检查实验通过希望实现的 CSS 语句。

意义查询的支撑景况

所以,@supports 以后支撑度什么样了吗?

自从 2013 年中,@supports 就可以看到在 Firefox,Chrome 和 Opera
中使用了。在 Edge 的次第版本中也受支持。Safari 在 二零一五年上秋才贯彻那么些意义。具体的支撑景况,请看下边那张图:

永利开户送38元体验金 5

你只怕会感觉 IE
不支持此效率会是二个大主题素材,不过,其实不是那般的。待会儿就能够告知您原因。笔者信赖,最大的三个阻力是
Safari 8,大家供给留意在这里个浏览器上发生的事情。

让我们来看其余三个事例。借使大家某些结构代码,为了健康运维,须求动用
object-fit: cover;。对于不协助那一个特性的浏览器,大家想要使用不一样的体裁。

永利开户送38元体验金 6

于是,大家得以如此写:

CSS

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color:
#FE742F; font-weight: bold; margin-right: 0.5em; } } div { width:
300px; background: yellow; } @supports (object-fit: cover) { img {
object-fit: cover; } div { width: auto; background: green; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}
 
div {
    width: 300px;
    background: yellow;
}
@supports (object-fit: cover) {
    img {
        object-fit: cover;
    }
    div {
        width: auto;
        background: green;
    }
}

会发生哪些吧?@supports 有接济依然不扶助的场地,object-fit
也许有支撑照旧不扶持的景象,所以,就有了三种或然:

功能查询支持情况 属性(或者值)支持情况 会发生什么 是否我们想要的
支持 不支持 CSS 将会被应用
支持 不支持 CSS 不会被应用
不支持 支持 CSS 不会被应用
不支持 不支持 CSS 不会被应用

语法:

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 说明式。除了这种最健康的用法,还足以相称其余多少个根本字:

至上施行

永利开户送38元体验金,为此,大家应当怎么写效率查询的代码呢?像上边那样:

CSS

// fallback code for older browsers @supports ( display: grid ) { //
code for newer browsers // including overrides of the code above, if
needed }

1
2
3
4
5
6
// fallback code for older browsers
 
@supports ( display: grid ) {
    // code for newer browsers
    // including overrides of the code above, if needed
}

翻译注:本文的根本内容是介绍功效查询和 @supports
的行使方法,所以,有些代码或然是力不胜任运营的,希望读者们注意。同有时间,由于最早的作品中的一些剧情彰显相比冗余,所以部分内容并不曾翻译。借使急需掌握详细内容,请查看原来的书文。

1 赞 1 收藏
评论

永利开户送38元体验金 7

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

@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) on
CodePen.

@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 混合使用。感兴趣的能够尝试一下。

Can i use?

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

永利开户送38元体验金 8

那仍然为多少个试验中的功效,即使好多浏览器都曾经支撑了,但是当前总的来说,就是在移动端想要全部极度仍亟需等待意气风发段时间。

而是我们早就得以初叶接受起来了,使用 @supports 完毕渐进巩固的法力。

渐进巩固(progressive
enhancement):针对低版本浏览器进行创设页面,有限支撑最中央的功效,然后再指向高等浏览器进行功效、人机联作等改过和扩展功用达到更好的顾客体验:

CSS.supports()

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

它是当作 @supports 的另后生可畏种样式现身的,大家能够动用 javascript
的章程来收获 CSS 属性的支撑境况。

能够张开调节台,输入 CSS.supports 试试:

永利开户送38元体验金 9

只要未有和煦完成 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

永利开户送38元体验金 10

那它有如何用呢?若是你的页面必要动态拉长一些您不显著哪些浏览器帮助的新的质量,那它只怕会派上用途。以致,它能够合作大家下文将要在讲的 modernizr 。

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!’卡塔尔(英语:State of Qatar); } }卡塔尔(英语:State of Qatar); // 或然是看似
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 。

特点检查评定原理

假定嫌引进整一个 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);
}

永利开户送38元体验金 11

上面图片截取的只是打字与印刷出来的一小部分。假若大家要检查实验有个别属性样式是或不是被扶植,在自由的
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
赋值操作,所以我们选取用于推断的元素应该是三个藏身在页面上的因素。

各类办法间的高低

  • 原生的 @supports 的性质鲜明是最佳的,何况无需引进外界 javascript
    ,主要推荐那些,可是无法宽容难点,这段日子来看不是最棒的选用。

  • Modernizr 作用强盛,包容性好,可是急需引进外界 javascript,多叁个http 须要,假若只是实行多少个特色检验,有一点杀鸡用牛刀的感到到。

  • 本发急需的性状检查测量试验,使用 javascript
    落成一个简便的函数,再把上面用到的办法封装一下:

JavaScript

/** * 用于轻易的 CSS 特性检查测试 * @param [String] property
须求检验的 CSS 属性名 * @param [String] value 样式的具体性质值 *
@return [Boolean] 是不是经过检查 */ function cssTest(property, value卡塔尔(英语:State of Qatar) {
// 用于测验的成分,隐蔽在页面上 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;
}

简轻便单测验一下:

永利开户送38元体验金 12

软件工程尚未银弹,所以无论哪个种类方法,都有符合的光景,大家要做的便是调整领会它们的规律,根据分歧的场馆灵活运用就可以。

种种 CSS 作品汇总在本人的 Github 。

到此本文结束,假使还应该有哪些疑点照旧提议,能够多多交换,原创文章,文笔有限,四六不通,文中若有不正之处,万望告知。

打赏帮忙自个儿写出更加多好文章,感激!

打赏小编

打赏帮忙笔者写出越多好文章,多谢!

任选风度翩翩种支付情势

永利开户送38元体验金 13
永利开户送38元体验金 14

2 赞 收藏
评论

有关小编:chokcoco

永利开户送38元体验金 15

经不住光阴似箭,逃可是此间少年。

个人主页 ·
小编的篇章 ·
63 ·
   

永利开户送38元体验金 7

相关文章