快捷搜索:
来自 新京葡娱乐场网址 2019-08-04 11:57 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

中使用功能查询,深入探讨

一流执行

于是,大家理应怎么写功用查询的代码呢?像上面那样:

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 收藏 评论

图片 1

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

团组织你的代码

今后,或许你心急的想要使用那一个工具来将您的代码分为多个支行,使其变得深透一些。“Hey,浏览器,倘使您鉴定区别Viewport 单位,就实行那一个,不然,推行其他的”。以为很不利,有系统。

CSS

@supports ( height: 100vh ) { // 帮助 viewport height 的体制 } @supports not ( height: 100vh ) { // 对于旧浏览器的代表样式 } // 大家愿意是好的,但那是一段烂代码

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

这段代码并不佳,至少当前线总指挥部的来说是如此的。开采难题了啊?

难点不怕,并非具备的浏览器都扶助作用查询,不精通 @supports 的浏览器会直接跳过两段代码,这可能就太倒霉了。

意思便是,除非浏览器百分之百支撑功效查询,不然大家就无助使用了吗?当然不是,我们一同能够应用功用查询,何况应该运用效果查询,只要不像上面那样写代码就行。

那正是说,如何做才对吗?其实与应用媒体询问类似,我们在浏览器完全支持媒体询问以前就从头利用了不是啊?事实上,成效查询利用起来比媒体询问更简明,只要脑子放聪惠氏(WYETH)点就行了。

你想要令你的代码知道浏览器是还是不是协助功效查询也许正在测量检验的有些效能,笔者来报告您怎么办。

自然,在未来,浏览器 百分百 帮助效用查询的时候,大家得以大大方方使用 @supports not 来组织大家的代码。

深切商量 CSS 性格检查测验 @supports 与 Modernizr

2017/03/01 · CSS · Modernizr

本文作者: 伯乐在线 - chokcoco 。未经小编许可,禁止转发!
迎接出席伯乐在线 专栏撰稿人。

如何是 CSS 性格检验?我们知晓,前端技能风起云涌的前日,各个新技能新属性见惯不惊。在 CSS 层面亦不例外。

有的新属质量一点都不小提高用户体验以及减弱程序猿的职业量,况且在即时的前端空气下:

  • 多数试验性意义未成为专门的学业却被多量应用;
  • 亟需相称多终端,多浏览器,而各浏览器对某一新功用的落到实处表现的天渊之别;

于是有了优雅降级和遵纪守法巩固的说教,在这种背景下,又想使用新的技术给用户提供越来越好的感受,又想办好回降机制保障低版本终端用户的核温中降逆验,CSS 天性检查评定就涌出了。

CSS 天性检查测量检验便是针对分化浏览器终端,推断当前浏览器对某些天性是还是不是帮忙。运用 CSS 天性检查评定,我们能够在协助当前特点的浏览器意况下采纳新的本领,而不协理的则做出一点回落机制。

正文将重点介绍三种 CSS 天性检查实验的办法:

  1. @supports
  2. modernizr

在 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。借使两个浏览器没有准确的(或许完全的)完毕三个 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 中稳固设计,渐进加强的一个着力的标准。浏览器会一直跳过她们没辙解析的讲话,不会抛出别样错误。

图片 2

大多浏览器都会应用 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;
}

图片 3

那是在 Safari 上的效果与利益

让我们看看在其他浏览器上的机能。

图片 4

可以吗,几乎没办法接受。除了运用 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 的浏览器会显示多个巨大加粗高亮的段首大字。其余浏览器的行事就像这些段首大字不设有一样。当然,假使更加多的浏览器援助了那个天性,那么,他们的一言一动也将会是有三个段首大字。

图片 5

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

作用查询的支持意况

所以,@supports 未来补助度什么样了吧?

自从 2013 年中,@supports 就可见在 Firefox,Chrome 和 Opera 中利用了。在 Edge 的顺序版本中也受协理。Safari 在 贰零壹陆年晚秋才落实那几个效果。具体的援助情形,请看上边那张图:

图片 6

你可能会认为 IE 不辅助此意义会是一个大主题材料,但是,其实不是这样的。待会儿就能告知您原因。小编深信不疑,最大的三个障碍是 Safari 8,大家供给专注在那些浏览器上发出的事务。

让大家来看别的三个事例。假如我们有个别布局代码,为了健康运维,须要动用 object-fit: cover;。对于不辅助这几个特性的浏览器,我们想要使用不相同的体制。

图片 7

因此,我们得以如此写:

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,就有供给加以说 CSS.supports() 。

它是当做 @supports 的另一种样式出现的,我们得以行使 javascript 的措施来获取 CSS 属性的匡助意况。

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

图片 8

若无本人完毕 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

图片 9

这它有怎么着用吧?假如您的页面必要动态拉长一些你不明确什么浏览器帮忙的新的属性,那它可能会派上用场。以及,它能够兼容大家下文即将要讲的 modernizr 。

特点检查评定原理

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

图片 10

上边图片截取的只是打印出来的一小部分。如若我们要检查实验有个别属性样式是不是被援救,在自由的 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 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.

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 。

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:中使用功能查询,深入探讨

关键词: