中选拔效益查询,检测浏览器对HTML5和CSS3帮助度的章程

在 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
中逐步设计,渐进增强的一个基本的条件。浏览器会直接跳过他们不可能解析的话语,不会抛出别的不当。

美高梅开户网址 1

大部浏览器都会应用
border-radius: 1em;,然后显示出右边的效率。然则,在 IE6,7,8
上您却不可以收看圆角,你看来的将是左边的效用。可以看看那一个例子:A
Rounded Corner Box。

对于那些事例,没有必须求利用效益查询。

那就是说,哪一天才必要动用 @supports 呢?效能查询是将 CSS
注解绑定在一起的一个工具,以便于这几个 CSS
规则可以在某种条件下以一个结合的艺术运行。当您需求混合使用 CSS
的新规则和旧规则的时候,并且,仅当 CSS
新成效被援助的时候,就可以运用功能查询了。

翻译注:以下例子中的 initial-letter
属性以后在有着现代浏览器中都不受支持,所以,以下例子中的代码只怕都以行不通的代码。借使下文中有提到此属性在某某浏览器中受襄助的话,请忽略。须要了然
initial-letter中选拔效益查询,检测浏览器对HTML5和CSS3帮助度的章程。 详细的表达,可以参照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;
}

美高梅开户网址 2

那是在 Safari 上的出力

让大家看看在其余浏览器上的效应。

美高梅开户网址 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
的浏览器会突显一个英雄加粗高亮的段首大字。其余浏览器的一坐一起就如那个段首大字不设有一样。当然,假若越多的浏览器帮助了这几个天性,那么,他们的作为也将会是有一个段首大字。

美高梅开户网址 4

长远切磋 CSS 性子检测 @supports 与 Modernizr

2017/03/01 · CSS ·
Modernizr

正文作者: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
迎接插足伯乐在线 专辑小编。

哪些是 CSS
性格检测?大家清楚,前端技术热气腾腾的前天,各个新技巧新属性屡见不鲜。在
CSS 层面亦不例外。

局地新属质量极大升高用户体验以及收缩工程师的工作量,并且在当时的前端空气下:

  • 比比皆是实验性意义未成为标准却被多量行使;
  • 内需卓绝多终端,多浏览器,而各浏览器对某一新功效的落成表现的天差地别;

就此有了优雅降级和渐进增强的传教,在那种背景下,又想利用新的技能给用户提供更好的体会,又想办好回退机制确保低版本终端用户的为主经验,CSS
本性检测就现身了。

CSS
个性检测就是针对性不一致浏览器终端,判断当前浏览器对某本性子是还是不是援助。运用
CSS
个性检测,我们得以在支撑当前特色的浏览器环境下使用新的技术,而不援救的则做出一点回退机制。

正文将重点介绍两种 CSS 性子检测的法门:

  1. @supports
  2. modernizr

检测浏览器对HTML5和CSS3协助度的艺术,html5css3

那篇小说主要介绍了检测浏览器对HTML5和CSS3匡助度的法子,使用Modernizr来检测浏览器对HTML5和CSS3代码的合营程度,需求的朋友可以参考下

 HTML5, CSS3 以及任何有关技术例如 Canvas、WebSocket 等等将 Web
应用开发带到了一个新的万丈。该技能通过结合 HTML、CSS 和 JavaScript
可以付出出桌面应用具有的效应。就算 HTML5 承诺很多,但具体中对 HTML5
辅助的浏览器以及 HTML5
标准本人的一应俱全程度都还尚无到一个很成熟的品位。将来统统不担心浏览器帮忙是不现实的,还要求时刻,因而当大家决定要利用
HTML5 技术开发 Web 应用的时候,咱们必要对浏览器所支撑的特色开展检测。

而 Modernizr 就可以辅助你落成对浏览器所支撑 HTML5 性子的检查。

上面代码检测浏览器是或不是辅助 Canvas:
 

代码如下:<script>
window.onload = function () {
if (canvasSupported()) {
alert(‘canvas supported’);
}
};

function canvasSupported() {
var canvas = document.createElement(‘canvas’);
return (canvas.getContext && canvas.getContext(‘2d’));
}
</script>

上面代码检测浏览器是不是协助地方存储:
 
代码如下:
<script>
window.onload = function () {
if (localStorageSupported()) {
alert(‘local storage supported’);
}
};

function localStorageSupported() {
try {
return (‘localStorage’ in window && window[‘localStorage’] != null);
}
catch(e) {}
return false;
}
</script>

地点的三个例子中大家可以很直观的对浏览器的天性开展自我批评以确保我们在相应的浏览器上采纳的出力是还是不是健康运行。

而使用 Modernizr
的益处还在于你不必要如此一项项去反省,还有更不难的主意,上面大家开端:

当自个儿第两回听到 Moderizr 这么些项目时,我觉着那是一个让有些老的浏览器能支持HTML5 的 JS 库,事实上不是,它根本是检测的效用。

Modernizr 能够因此网址
来访问,该网站还要还提供一个定制脚本的效应,你可以规定你须求检测什么特色,并依此来扭转对应的
JS 文件,那样可以减去不须求的 JS 代码。 
美高梅开户网址 5

 一旦下载了 Modernizr 的 JS 文件后,就可以透过 <script>
标签引入到网页中。
 

代码如下:<script src=”Scripts/Modernizr.js”
type=”text/javascript”></script>

检测 HTML 元素

假若我们在页面上引入了 Modernizr 后就可以立即使用,我们得以在
<html> 成分中宣示不一致的 CSS
类,这个类定义了所急需帮助仍然不协理的特点,不扶助的特点其类名一般是
no-FeatureName,例如 no-flexbox。下边是一个在 chrome 上可运行的事例:

 
代码如下:
<html class=” js flexbox canvas canvastext webgl no-touch geolocation
postmessage
websqldatabase indexeddb hashchange history draganddrop websockets rgba
hsla
multiplebgs backgroundsize borderimage borderradius boxshadow textshadow
opacity
cssanimations csscolumns cssgradients cssreflections csstransforms
csstransforms3d
csstransitions fontface generatedcontent video audio localstorage
sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths”>

还足以如此来判断浏览器是还是不是启用了 JavaScript 帮助:
 

代码如下:<html class=”no-js”>

您可以在 HTML5 Boilerplate () 或者是
Initializr ()
看到部分入门的例证,依照地点的步调,扩展 no-js
类可以断定浏览器是不是启用了 JavaScript 扶助。
 
使用 HTML5 和 CSS3 特性

您为 <html> 标签增添的 CSS 属性,可以直接在 CSS
中定义所急需的体裁,例如:
 
代码如下:
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}

.no-boxshadow #MyContainer {
border: 2px solid black;
}

即使浏览器援救 box-shadows 的话,将会为 <html> 成分扩大 boxshadow
这一个 CSS 类,否则的话就应用 no-boxshadow 那个类。那样只要浏览器不协理box-shadow 的话,大家得以运用其余的样式来举办定义。

除此以外大家也足以应用 Modernizr
的对象来操作这几个作为,例如上面的代码用来检测浏览器是还是不是协助 Canvas 和
本地存储:

 
代码如下:
$(document).ready(function () {

if (Modernizr.canvas) {
//Add canvas code
}

if (Modernizr.localstorage) {
//Add local storage code
}

});

大局的 Modernizr 对象同样可用来测试 CSS3 本性是不是协理:
 
代码如下:
$(document).ready(function () {

if (Modernizr.borderradius) {
$(‘#MyDiv’).addClass(‘borderRadiusStyle’);
}

if (Modernizr.csstransforms) {
$(‘#MyDiv’).addClass(‘transformsStyle’);
}

});

使用Modernizr加载脚本

在产出了浏览器不支持少数功效的的情形下,你非但能够提供一个不错的备用方案,仍能加载shim/polyfill脚本在适龄意况下补充缺失的功效(想打听越多关于shims/polyfills的音讯,请查看
).
Modernizr拥有一个平放的本子加载器,可以用来测试一个功用,并在职能失效的时候加载另一个脚本.
脚本加载器是内置在Modernizr中的,并且是有效的独立yepnope(.
脚本加载器相当不难上手,它根据特定浏览器作用的可用性,真的会简化加载脚本的进度.

您可以采纳Modernizr的load()方法来动态加载脚本,该办法接受定义被测作用的品质(test属性),
如测试成功后要加载的脚本(yep属性), 如测试退步后要加载的本子(nope属性),
和无论测试成功只怕败诉都要加载的台本(both属性).
使用load()及其性质的言传身教如下:
 
代码如下:
Modernizr.load({
test: Modernizr.canvas,
yep: ‘html5CanvasAvailable.js’,
nope: ‘excanvas.js’,
both: ‘myCustomScript.js’
});

在这几个事例中Modernizr在加载脚本时还会测试是或不是协助canvas功效 .
倘诺目的浏览器帮衬HTML5 canvas就会加载html5CanvasAvailable.js脚本及
myCustomScript.js脚本 (在这么些例子中行使yep属性有点牵强  –
那只是为着演示load()方法中的属性怎么着运用 ). 否则的话, 就会加载
excanvas.js那些 polyfill脚本来为IE9此前版本的浏览器添加效果支撑 .
一旦excanvas.js被加载,myCustomScript.js也会随之被加载.

是因为Modernizr会处理加载脚本, 所以你可以用它来做些其余事情. 比如,
在谷歌或微软提供的第三方CDN不管用的时候,你可以用Modernizr来加载本地的脚本.
Modernizr文档中提供了在CDN挂掉后提供当地jQuery后备进度的示范:
代码会先尝试从谷歌 CND加载jQuery.
一旦脚本下载达成(或然下载失利)就会调用某个方法.
那些方法会检查jQuery对象是还是不是行得通,如若不算就加载本地的jQuery脚本.
并在其后加载一个名为needs-jQuery.js的脚本.

终极想说的是,若是你打算开发基于 HTML5 和 CSS3 的 Web 应用的话,那Modernizr
就是你必不可少的工具,除非,除非您认可你有所客户所运用的浏览器帮忙你所写的代码。

那篇小说主要介绍了检测浏览器对HTML5和CSS3帮助度的法子,使用Modernizr来检测浏览器对HTML5和…

什么是 CSS hack

Hack是本着差距浏览器去写不一样的CSS样式,从而让各浏览器能达标平等的渲染效果,那么针对不一致的浏览器写不相同的CSS
CODE的经过就叫做CSS
Hack。然后将Hack放在浏览器特定的CSS文件中,让符合条件的浏览器去分析这么些代码,符合条件的就解析,不符合的就不解析,从而达成所急需的页面渲染效果。总的一言以蔽之就是应用CSS
Hack将会使你的CSS代码部分失去效用,然后借助条件样式,使用其原CSS代码在有些浏览器解析,而CSS
Hack代码在符合条件须要的浏览器中代表原CSS那部分代码。

团队你的代码

最近,大概你心急的想要使用那几个工具来将您的代码分为七个分支,使其变得到底一些。“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
的浏览器会直接跳过两段代码,那说不定就太不好了。

情趣就是,除非浏览器百分之百匡助成效查询,否则大家就没办法使用了呢?当然不是,大家完全可以动用效果查询,而且应当选择效益查询,只要不像上边那样写代码就行。

那么,如何做才对吧?其实与利用媒体询问类似,大家在浏览器完全帮助媒体询问以前就开首选择了不是吧?事实上,功效查询利用起来比媒体询问更简便易行,只要脑子放聪可瑞康(Ausnutria Hyproca)点就行了。

您想要让您的代码知道浏览器是不是帮忙功效查询恐怕正在测试的某部意义,我来报告您如何做。

本来,在今后,浏览器 100% 协理功用查询的时候,我们得以大大方方施用
@supports not 来协会大家的代码。

CSS @supports

观念的 CSS 性格检测都以通过 javascript 完成的,然而将来,原生 CSS
即可兑现。

CSS @supports 通过 CSS 语法来完成特性检测,并在其中 CSS
区块中写入假如天性检测通过希望达成的 CSS 语句。

谈一谈浏览器包容的思绪

最紧要从几个方面去考虑:
要不要去做?紧要从成品的角度和资本的角度去考虑;产品的角度来说我们要考虑清楚产品的利用群体,以及受众的浏览器比例,从中分析大家必要功力优先依然效能优先。从财力的角度分析,就是我们做某个意义值不值得,有没有必不可少,付出和获取是还是不是不成比例。
如果做,做到什么程度?具体到需求让那一个浏览器帮忙什么功能,在分歧的浏览器侧重点也不比。例如:渐进增强和优雅处理。渐进增强是指针对低版本浏览器进行页面打造,保险最基本的效果,在那基础上补偿部分高档浏览器的功用,作用,交互;优雅降级:针对高档浏览器,创设一体化的效益,再针对低版本的浏览器去做一些合作。
如何去做?依照包容的须要选取分歧的技巧或框架(比如jQuery)Bootstrap;jQuery
1.~(>=ie6),jQuery 2.~(>=ie9);Vue(>=ie9)等
按照包容要求选用万分工具(html5shiv.js , respond.js , css.reset ,
normalize.css , Modernizr)postCSS条件注释 CSS Hack
js能力检测做一些修修补补。

成效查询的支撑意况

所以,@supports 未来支撑度什么样了啊?

自从 2013 年中,@supports 就可以在 Firefox,Chrome 和 Opera
中接纳了。在 Edge 的逐条版本中也受匡助。Safari 在 2015
年夏天才促成这些成效。具体的支撑意况,请看上面那张图:

美高梅开户网址 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_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 表明式。除了那种最健康的用法,仍能匹配其他多少个重点字:

列举5种以上浏览器包容的写法

规则注释:

<!--[if IE 6]> <p>You are using Internet Explorer 6.</p> <![endif]-->
<!--[if !IE]><!--> <script>alert(1);</script> <!--<![endif]-->
 <!--[if IE 8]> <link href="ie8only.css" rel="stylesheet"> <![endif]-->

! [if !IE] 非IE

lt [if lt IE 5.5] 小于IE 5.5

lte [if lte IE 6]低于等于IE6

gt [if gt IE 5]大于 IE5

gte [if gte IE 7]过量等于IE7

| [if (IE 6)|(IE 7)]IE6或者IE7

最佳实践

由此,大家应该怎么写功效查询的代码呢?像上面那样:

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

美高梅开户网址 8

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

CSS Hack

CSS
Hack大概有3种表现方式,CSS属性前缀法、选拔器前缀法以及IE条件注释法(即HTML尾部引用if
IE)Hack,实际项目中CSS
Hack半数以上是指向IE浏览器不一致版本之间的展现差异而引入的。常见的Hack写法:

.box{
//属性前缀法 
color: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow\9; /*ie/edge 6-8*/}

//选择器前缀法
.ie7 .clearfix{ zoom: 1;}

//IE条件注释法
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

@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.

天性包容难点

常见的本性包容情状如下:
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
大规模处理范例如下:
.clearfix:after{content: ”;display: block;clear: both;}.clearfix{zoom:
1; /
仅对ie67有效 /}
.target{display: inline-block;
display: inline;*zoom: 1;}

@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 吧:

美高梅开户网址 9

那仍是一个尝试中的效用,纵然多数浏览器都早已支撑了,不过当前看来,即是在运动端想要全体匹配仍亟需拭目以待一段时间。

不过我们早就得以起来应用起来了,使用 @supports 达成渐进增强的效能。

渐进增强(progressive
enhancement):针对低版本浏览器进行构建页面,保险最基本的功用,然后再指向高档浏览器举办职能、交互等革新和扩大作用达到更好的用户体验:

规则注释

原则注释 (conditional comment)
是于HTML源码中被IE有规则解释的言辞。条件注释可被用来向IE提供及藏匿代码。(IE10不再协助标准注释)。

CSS.supports()

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

它是作为 @supports 的另一种样式出现的,大家得以采纳 javascript
的点子来赢得 CSS 属性的支持景况。

能够打开控制台,输入 CSS.supports 试试:

美高梅开户网址 10

一旦没有和谐完结 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

美高梅开户网址 11

这它有何用啊?如果您的页面须要动态增加一些你不确定哪些浏览器援助的新的质量,那它或者会派上用场。以及,它可以合营我们下文即将要讲的 modernizr 。

IE Hack

越发准对IE浏览器不一致版本间的包容性难点的拍卖,使之力所能及渲染出想要的效应。

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 。

js 能力检测

是指js中包容性难题的一些打包。通过js封装函数或对象来解决浏览器的包容难题。

特点检测原理

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

美高梅开户网址 12

地点图片截取的只是打印出来的一小部分。假若大家要检测某个属性样式是不是被支持,在随意的
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
赋值操作,所以大家挑选拔于判断的因素应该是一个逃匿在页面上的要素。

html5shiv.js

用以消除IE9以下版本浏览器对HTML5新增标签不识别,并促成CSS不起功用的标题。使用Javascript来使不接济HTML5的浏览器支持HTML标签。利用脚本document.createElement(“”)创设对应的剧本,CSS选取器便可科学利用到该标签。

各样措施间的三六九等

  • 原生的 @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;
}

简短测试一下:

美高梅开户网址 13

软件工程没有银弹,所以无论是哪一类形式,都有符合的现象,我们要做的就是左右了然它们的原理,依照分歧的情况灵活运用即可。

一日千里 CSS 作品汇总在自己的 Github 。

到此本文截至,如若还有何样疑点依旧指出,可以多多互换,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏匡助本身写出更多好小说,感谢!

打赏小编

respond.js

Respond.js 是一个飞跃、轻量的 polyfill,用于为 IE6-8 以及别的不匡助 CSS3
Media Queries 的浏览器提供媒体询问的 min-width 和 max-width
天性,已毕响应式网页设计。(Responsive Web Design)

打赏支持我写出更加多好作品,多谢!

任选一种支付格局

美高梅开户网址 14
美高梅开户网址 15

2 赞 收藏
评论

css reset

HTML标签在浏览器中都有专擅认同的体制,例如p标签有上下面距,strong标签有字体加粗样式等。差异浏览器的暗中认可样式之间存在差别,例如ul暗中同意带有缩进样式,在IE下,它的缩进是由margin完毕的,而在Firefox下却是由padding完结的。开发时浏览器的暗许样式恐怕会给我们带来多浏览器包容难点,影响开发功能。消除措施其中之一是初阶就将浏览器的暗许样式全体覆盖掉,那就是CSS
reset。

有关小编:chokcoco

美高梅开户网址 16

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

个人主页 ·
我的小说 ·
63 ·
   

美高梅开户网址 17

normalize.css

诺玛lize.css
是一个方可定制的CSS文件,它让差别的浏览器在渲染网页成分的时候格局更统一。它可以保存有用的默许值,不相同于许多
CSS
的重置,其规范的体制,适用范围广的成分。考订错误和宽广的浏览器的不相同性。一些细小的革新,升高了易用性。使用详细的诠释来分解代码。

Modernizr

Modernizr是一个检测用户浏览器HTML5和CSS3能力的JavaScript库。Modernizr在页面加载时火速运行来检测功效;之后它会创设一个保留检测结果的JavaScript对象,然后为你页面中的html标签上添加一多重class属性来衔接你的CSS。Modernizr帮忙大气的测试和可选地包含YepNope.js来视景况加载外部的js和css资源。

postCSS

PostCSS 是运用 JS 插件来更换 CSS 的工具,支持变量,混入,以往 CSS
语法,内联图像等等。PostCSS是CSS变成JavaScript的数量,使它成为可操作。PostCSS是基于JavaScript插件,然后实施代码操作。PostCSS本身并不会转移CSS,它只是一种插件,为执行其余的更动铺平道路。

诚如在哪些网站查询属性包容性?

http://caniuse.com/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图