您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net深远研讨,中应用作用查询

新葡亰496net深远研讨,中应用作用查询

发布时间:2019-08-24 18:10编辑:新葡亰官网浏览(120)

    在 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 中稳步设计,渐进加强的三个基本的标准。浏览器会直接跳过她们没辙分析的讲话,不会抛出别样错误。

    新葡亰496net 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;
    }

    新葡亰496net 2

    那是在 Safari 上的意义

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

    新葡亰496net 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 的浏览器会展现八个光辉加粗高亮的段首大字。其他浏览器的作为就如那一个段首大字官样文章同样。当然,假若越来越多的浏览器帮忙了那一个特性,那么,他们的一言一动也将会是有三个段首大字。

    新葡亰496net 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 代码。 
    新葡亰496net 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后备进程的示范:
    代码会先尝试从Google CND加载jQuery. 一旦脚本下载达成(大概下载失败)就能够调用某些方法. 那一个方法会检查jQuery对象是否可行,假若不行就加载本地的jQuery脚本. 并在其后加载一个名称叫needs-jQuery.js的脚本.

    末段想说的是,假如您企图开荒基于 HTML5 和 CSS3 的 Web 应用的话,那Modernizr 就是您不能缺少的工具,除非,除非您明确你具有顾客所使用的浏览器援助您所写的代码。

    那篇文章首要介绍了检查评定浏览器对HTML5和CSS3补助度的章程,使用Modernizr来检验浏览器对HTML5和...

    什么是 CSS hack

    哈克是针对性不一样浏览器去写不相同的CSS样式,进而让各浏览器能落得同样的渲染效果,那么针对差异的浏览器写不一样的CSS CODE的进度就叫做CSS 哈克。然后将哈克放在浏览器特定的CSS文件中,让符合条件的浏览器去深入分析这个代码,符合条件的就分析,不相符的就不解析,进而达成所急需的页面渲染效果。总的简单来讲正是采纳CSS 哈克将会使您的CSS代码部分失去功用,然后借助条件样式,使用其原CSS代码在局地浏览器分析,而CSS 哈克代码在符合条件必要的浏览器中代表原CSS那部分代码。

    什么是 CSS hack?

    CSS hack由于不一样厂家的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,大概是同样厂家的浏览器的不相同版本,如IE6和IE7,对CSS的深入分析认知不完全一致,由此会招致变化的页面效果不平等,得不到大家所急需的页面效果。 那年大家就供给针对分化的浏览器去写差异的CSS,让它亦可同一时候协作区别的浏览器,能在差异的浏览器中也能博得我们想要的页面效果。一言以蔽之,CSS hack的目标正是使您的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 的浏览器会一贯跳过两段代码,那也许就太糟糕了。

    情趣就是,除非浏览器百分百扶助作用查询,否则我们就万般无奈使用了吗?当然不是,我们一起能够应用作用查询,况兼应该运用效果查询,只要不像上面那样写代码就行。

    那便是说,如何做才对吧?其实与应用媒体询问类似,大家在浏览器完全援救媒体询问以前就开头使用了不是吧?事实上,功能查询利用起来比媒体询问更简便,只要脑子放聪可瑞康(Karicare)点就行了。

    您想要让您的代码知道浏览器是或不是协理功用查询可能正在测量试验的某部意义,小编来告诉你如何是好。

    不容置疑,在今后,浏览器 百分百 协理成效查询的时候,我们能够大大方方行使 @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技艺检查实验做一些修修补补。

    谈一谈浏览器包容的思路

    威名昭著要不要做同盟
    1.从成品的角度思虑那个限制,举例利用产品的人,使用各浏览器的比例,效果优先依旧基本效率优先。
    2.从财力的角度。
    显著要合作的限定
    明朗要同盟的浏览器范围,没有要求相配的浏览器就足以一并管理。
    减轻兼容难题
    1.基于包容要求引进手艺框架/库
    2.依照包容须要选拔杰出工具。比方(html5shiv.js、respond.js、css reset、Modernizr、postCSS)
    3.用到css hack,条件注释,js 工夫检验做一些修修补补。

    功效查询的帮助境况

    所以,@supports 将来协助度什么样了啊?

    自从 2013 年中,@supports 就能够在 Firefox,Chrome 和 Opera 中采纳了。在 Edge 的逐一版本中也受帮忙。Safari 在 贰零壹伍年凉秋才促成那一个职能。具体的支撑情形,请看上边那张图:

    新葡亰496net 6

    你大概会以为 IE 不接济此意义会是贰个大标题,不过,其实不是那样的。待会儿就可以报告您原因。小编深信不疑,最大的四个障碍是 Safari 8,大家须要专心在那几个浏览器上发生的政工。

    让我们来看别的一个事例。假设大家有些布局代码,为了健康运作,需求采取 object-fit: cover;。对于不扶助那天性情的浏览器,大家想要使用不相同的体裁。

    新葡亰496net 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

    新葡亰496net,gt [if gt IE 5]大于 IE5

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

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

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

    1. 规范化注释
    <!--[if !IE]> 除IE外都可识别 <![endif]-->
    <!--[if IE]> 所有的IE可识别 <![endif]-->
    <!--[if IE 6]> 仅IE6可识别 <![endif]-->
    <!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
    <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
    <!--[if (IE 6)|(IE 7)]> IE6或者IE7版本可识别 <![endif]-->
    

    2.类内属性前缀法
    比如

    div{
    background:green;
    *background:red;/*forIE6*/(bothIE6&&IE7)
     background:red;
    _background:green;
    background:red9;
    background:red9;
    }
    

    证实:在正规方式中
    “-″减号是IE6专有的hack
    “9″ IE6/IE7/IE8/IE9/IE10都生效
    “新葡亰496net深远研讨,中应用作用查询。0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    “9″ 只对IE9/IE10生效,是IE9/10的hack
    随意是何许形式,书写的一一都是健康的写在头里,IE7的写在中间,IE6的写在终极面

    3.精选器前缀法

    *html #demo { color:red;} /* 仅IE6 识别 */ 
    * html #demo { color:red;} /* 仅IE7 识别 */ 
    body:nth-of-type(1) #demo { color:red;} /* IE9 、FF3.5 、ChromeSafari、Opera 可以识别 */
     head:first-child body #demo { color:red; } /* IE7 、FF、Chrome、Safari、Opera 可以识别 */ 
    :root #demo { color:red9; } : /* 仅IE9识别 */
    

    4.利用html5shiv.js、respond.js、css reset、Modernizr、postCSS等同盟工具。
    5.浏览器的前缀 如-webkit- ,-moz-,-ms-,-o-。

    至上试行

    之所以,大家应该怎么写功用查询的代码呢?像下边那样:

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

    新葡亰496net 8

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

    CSS Hack

    CSS 哈克大约有3种表现情势,CSS属性前缀法、采纳器前缀法以及IE条件注释法(即HTML尾部引用if IE)哈克,实际项目中CSS 哈克当先八分之四是针对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]-->
    

    以下工具/名词是做什么的

    1.口径注释
    基准注释是于HTML源码中被 Microsoft Internet Explorer,有准绳解释的口舌。条件注释可被用来向 Internet Explorer 提供及藏匿代码。
    2.IE Hack
    一样商家的浏览器的不及版本,如IE6和IE7,只怕分歧浏览器对CSS的剖释认知不完全等同,由此会促成变化的页面效果不同,得不到大家所急需的页面效果。 那个时候大家就供给针对分化的浏览器去写不相同的CSS。
    3.js 本事检验
    力量检验的靶子不是可辨特定的浏览器,而是识别浏览器的力量。选拔这种方法不必顾及特定的浏览器怎样如何,只要显明浏览器补助特定的力量,就足以交到施工方案。
    4.html5shiv.js
    HTML5 Shiv是JavaScript的一种备选方案,该方案在IE9版本中优先启用HTML5成分样式,但分化意利用未有由JavaScript定义过的因素样式。html5shiv.js用于在IE9以下的浏览器模拟html5的价签。
    5.respond.js
    依傍css3的媒体询问,使ie6援助媒体询问包容响应式布局。
    6.css reset
    最先的浏览器支持和透亮的CSS规范不相同,导致渲染页面时效果区别样,会并发过多包容性难点,所以利用CSS Reset正是为着解决全部浏览器默许样式,让它一切归零!
    7.normalize.css
    Normalize.css是一种CSS reset的代替方案,当多少个因素在差别的浏览器中有分化的暗许值时,Normalize.css会力求让这么些样式保持一致并尽或许与现时期职业相适合,实际不是把装有的私下认可样式都清零。
    8.Modernizr
    Modernizr 是一个用来检验浏览器功用支撑情形的 JavaScript 库。 如今,通过核实浏览器对一名目好多测验的拍卖状态,Modernizr 能够检查实验18项 CSS3 功效以及40多项关于HTML5 的职能。举例,假设页面帮助 box-shadow 属性,那么 Modernizr 会加多 boxshadow 类。假如不帮忙,那么它用 no-boxshadow 类作为代表实行加多。
    9.postCSS
    把 CSS 分析成 JavaScript 能够操作的悬空语法树结构AST,并调用插件来拍卖 AST 获得结果。

    @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;}

    相似在哪些网站查询属性包容性?

    https://caniuse.com/

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

    新葡亰496net 9

    那仍是二个尝试中的功效,就算许多浏览器都早就支撑了,可是当前看来,便是在活动端想要全体相配仍急需静观其变一段时间。

    然而大家早已足以早先使用起来了,使用 @supports 达成渐进巩固的效应。

    渐进增强(progressive enhancement):针对低版本浏览器进行创设页面,有限帮忙最宗旨的机能,然后再针对高端浏览器实行效能、交互等改革和充实功效到达越来越好的客商体验:

    条件注释

    规格注释 (conditional comment) 是于HTML源码中被IE有规范化解释的讲话。条件注释可被用来向IE提供及藏匿代码。(IE10不再支持标准注释)。

    CSS.supports()

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

    它是作为 @supports 的另一种情势出现的,我们能够利用 javascript 的不二等秘书籍来收获 CSS 属性的支撑意况。

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

    新葡亰496net 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

    新葡亰496net 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);
    }

    新葡亰496net 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;
    }

    简言之测验一下:

    新葡亰496net 13

    软件工程尚未银弹,所以不管哪一类办法,都有适合的景观,大家要做的正是调控通晓它们的法则,依据差别的现象灵活运用就能够。

    多如牛毛 CSS 小说汇总在本身的 Github 。

    到此本文截止,假设还大概有哪些疑点照旧提出,能够多多调换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    打赏支持作者写出更加的多好著作,多谢!

    打赏笔者

    respond.js

    Respond.js 是一个高速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体询问的 min-width 和 max-width 性情,完毕响应式网页设计。(Responsive Web Design)

    打赏帮助本人写出越来越多好小说,多谢!

    任选一种支付办法

    新葡亰496net 14 新葡亰496net 15

    2 赞 收藏 评论

    css reset

    HTML标签在浏览器中都有暗中同意的体裁,举例p标签有上上边距,strong标签有字体加粗样式等。分歧浏览器的私下认可样式之间存在差距,比方ul暗许带有缩进样式,在IE下,它的缩进是由margin达成的,而在Firefox下却是由padding完毕的。开荒时浏览器的默许样式也许会给咱们带来多浏览器包容难题,影响开垦功用。消除措施在那之中之一是始于就将浏览器的暗许样式全体蒙面掉,那便是CSS reset。

    关于笔者:chokcoco

    新葡亰496net 16

    经不住小运似水,逃但是此间少年。 个人主页 · 笔者的稿子 · 63 ·    

    新葡亰496net 17

    normalize.css

    Normalize.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/

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net深远研讨,中应用作用查询

    关键词: