检测浏览器对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 详细的求证,能够参照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会管理加载脚本, 所以你能够用它来做些别的事情. 比方, 在Google或微软提供的第三方CDN不管用的时候,你能够用Modernizr来加载本地的脚本. Modernizr文书档案中提供了在CDN挂掉后提供地点jQuery后备进程的躬体力行:
代码会先尝试从Google CND加载jQuery. 一旦脚本下载完结(只怕下载退步)就能调用有个别方法. 这些方法会检查jQuery对象是或不是可行,假设不算就加载本地的jQuery脚本. 并在其后加载叁个名字为needs-jQuery.js的脚本.

最终想说的是,若是您计划开荒基于 HTML5 和 CSS3 的 Web 应用的话,那Modernizr 就是您至关重要的工具,除非,除非您确认你具备顾客所选拔的浏览器扶助您所写的代码。

那篇文章主要介绍了检查实验浏览器对HTML5和CSS3帮助度的方法,使用Modernizr来检查评定浏览器对HTML5和...

什么是 CSS hack

哈克是指向不一样浏览器去写不一样的CSS样式,进而让各浏览器能抵达同等的渲染效果,那么针对分裂的浏览器写分歧的CSS CODE的进度就叫做CSS Hack。然后将哈克放在浏览器特定的CSS文件中,让适合条件的浏览器去深入分析那几个代码,切合条件的就解析,不适合的就不解析,进而完成所急需的页面渲染效果。总的一言以蔽之正是使用CSS 哈克将会使您的CSS代码部分失去成效,然后依靠条件样式,使用其原CSS代码在部分浏览器分析,而CSS 哈克代码在切合条件要求的浏览器中代替原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 的浏览器会一向跳过两段代码,那只怕就太倒霉了。

意思正是,除非浏览器百分百扶植成效查询,不然大家就无语使用了啊?当然不是,大家一起可以运用成效查询,并且应当利用效率查询,只要不像上边那样写代码就行。

那就是说,如何做才对吧?其实与使用媒体询问类似,我们在浏览器完全支持媒体询问早先就初步使用了不是吗?事实上,功效查询利用起来比媒体询问更简短,只要脑子放聪Bellamy(Bellamy)点就行了。

你想要让您的代码知道浏览器是或不是帮忙成效查询大概正在测量试验的有个别意义,小编来报告您怎么做。

本来,在未来,浏览器 百分之百 扶持作用查询的时候,大家能够大大方方运用 @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 哈克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 哈克差不离有3种表现情势,CSS属性前缀法、采取器前缀法以至IE条件注释法(即HTML底部援引if IE)哈克,实际项目中CSS Hack半数以上是本着IE浏览器差异版本之间的表现行反革命差而引进的。常见的哈克写法:

.box{
//属性前缀法 
color: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow9; /*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/

本文由pc28.am发布于前端技术,转载请注明出处:检测浏览器对HTML5和CSS3支持度的方法,中使用功

上一篇:美化加载失利的图样,样式化加载失败的图片 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 我的前端之路,收藏指数满格
    我的前端之路,收藏指数满格
    作者的前端之路 2016/07/18 · 前端职场 · 4评论 ·职场 原著出处: 王下邀月熊    作者的Web前端开荒小说索引目录 行文本文的时候小编阅读了以下小说,不
  • index积聚法则,层叠上下文
    index积聚法则,层叠上下文
    CSS3 中的层叠上下文初探 2015/10/09 · CSS ·层叠上下文 初藳出处: HaoyCn    前言:关于层叠上下文,小编还未有去阅读更详实的 W3C规范来打探更本质的规律
  • png图片制作自便颜色的小Logo,PNG格式小Logo的CS
    png图片制作自便颜色的小Logo,PNG格式小Logo的CS
    PNG格式小Logo的CSS率性颜色赋色技艺 2016/06/08 · CSS · 1评论 ·PNG 原著出处:张鑫旭(@张鑫旭)    一、眼见为实 本内容要是是对张鑫旭PNG格式小Logo的CSS跋
  • 的居中效果,纯CSS七大居中方法
    的居中效果,纯CSS七大居中方法
    使用 Sass mixin 达成 CSS 的居中效能 2015/08/15 · CSS ·Sass 原来的小讲出处: HugoGiraudel   译文出处:公子肥马轻裘    就算使用 CSS创造居中功用需求耍一些噱
  • UI组件化的一些思想,js长远学习详细深入分析
    UI组件化的一些思想,js长远学习详细深入分析
    前端 UI组件化的一些思考 2017/04/10 · 基础技术 ·组件化 原文出处: 王一蛋    最近公司推起了共用 UI 组件化的大潮,创建了一个新的 Repo 来放置共用的