css feature detection: modernizr eller træk forespørgsler?,,,, i denne forelæsning, går jeg over to metoder til påvisning af, hvorvidt en browser støtter visse css karakteristika eller ej.den første, der udnytter modernizr, en populær javascript bibliotek og den anden   træk forespørgsler, en lovende css løsning.,,, så lad os starte!,, at detektere kendetegn ved hjælp af modernizr, som nævnt ovenfor, modernizr er en letvægter javascript bibliotek, der påviser html5 og css3 elementer i deres browser.så længe din side belastninger, det løber bag kulisserne og udfører træk prøver.så det opbevarer resultaterne som egenskaber af en javascript genstand, og som klasser af, html element.mere om det senere.,, at montere og anvende modernizr, kan du besøge anlægsområdet og downloade det foretrukne version.,,,,,,,: på nuværende tidspunkt modernizr nuværende overgang er 2.8.3, version 3 er næsten klar.faktisk, holdet bag biblioteket forventer at iværksætte den i de kommende uger.en kort oversigt over denne frigivelse kan ses her.desuden, du kan tage beta - version af det, som i denne forbindelse.,,, når overførslen af sted javascript fil i deres projekt og inddrage det i, < head >, din html side.sidst, men ikke mindst, for at gøre det muligt for modernizr funktioner, du burde tilføje, er, at den klasse, html element.,, i de næste to afsnit, jeg dækker de grundlæggende elementer i modernizr.for mere avancerede koncepter, husk at læse dokumenter.  , css påvisning, som omtalt ovenfor, modernizr tilføjer en række kurser til, html element.klasse navne, afhænger af om støtte.hvis browser ikke genkende nogle af de træk, test, modernizr tilføjer, nej, præfiks før dens indbyggede klasse navne.for eksempel, hvis vi tester for overvejelserne virkninger, html element på krom 40 ser sådan ud:,,,,, men om firefox 35:,,,,, bemærker også, er klasse.når modernizr løber, hvis javascript er aktiveret i vores browser,   erstatter den gamle, ingen er, klasse med den nye.  , baseret på resultater fra modernizr er test, vi kan bygge vores stylesheets.,, eksempler, til at begynde med, her er den grundlæggende http: //- kode, vi bruger til resten af tutor:,, < h2 id = "tænkepause" > css overvejelser < /h2 >, ved hjælp af de klasser, som blev givet til os af modernizr   vi ændre stilen af, h2, element som følger:,, h2 (farve:&#skrifttype c0ccdb; størrelse: 3em.}. cssreflections h2 (- webkit rubrik afspejle: nedenfor. 45em - webkit hældning (lineær, venstre øverste, venstre røv fra (gennemsigtige), farve, stop (0%, gennemsigtig), (rgba (255 255 255, 75)))). cssreflectionsh2 (tekst skygge: 0 1px 0ˆed1, 0 2px 0~ac9, 0 3px 0҈b6, 0 4px 0icad, 0 5px 0�f56a2, 0 6px 1px rgba (0,0,0, 1) 0 0 5px rgba (0,0,0, 1) 0 1px 3px rgba (0,0,0, 3), 0 3px 5px rgba (0,0,0,. 2) 0 5px 10px rgba (0,0,0,. 25), 0 10px 10px rgba (0,0,0,. 2) 0 20px 20px rgba (0,0,0,. 15)), webkit baseret browsere, der støtter overvejelser vil vise, h2, element som følger:,,,,,, mens resten af dem (mindst   dem, der støtter den, tekst skygge, ejendom) vil anvende en anden virkning, baseret på en 3d tekst virkning af mark otto:,,,,,, det er her, f.eks. codepen:,, javascript påvisning, den anden måde til at kontrollere resultater opnået vedmodernizr er test er gennem javascript.som allerede nævnt, modernizr skaber et objekt med ejendom navne på   træk, som er konfigureret til at prøve.de fleste af de gange, deres værdier tilbage, sand eller falsk,.,, skærmbillede nedenfor viser, hvordan firefox 35 viser modernizr objekt (konsol regning):,,,,,, så vi kan se, modernzir.cssreflections, ejendom, returnerer et falsk værdi.det sker, fordi krom, safari og opera er den eneste browsere, der støtter overvejelser (på tidspunktet for udarbejdelsen af). her er, hvordan vi kan reproducere det foregående eksempel med javascript, ved at tilføje den, refleksion og ingen overvejelser, for at vores < h2 id = "tænkepause" >,   manuelt:,, var element = dokument. getelementbyid ('reflection '); hvis (modernizr. cssreflections) (element.classname = "betænkningstid";} andre (element.classname = "ikke noget"}, så stil med   relevante css:,,. overvejelser {/* anvende overvejelser ejendom * /}, ikke afspejler {* anvendes tekst skygge ejendom * /), og den nye demo på codepen:,, at detektere kendetegn ved hjælp af   træk, søgninger, without tvivl, modernizr er et værdifuldt redskab i hver frontend udviklerens arsenal.men ville det ikke være bedre, hvis vi kunne gentage modernizr forsøg med ren css?heldigvis kan vi gøre det ved hjælp af træk forespørgsler.disse er underlagt regler, der giver os mulighed for at anvende forskellige former, afhængigt af om støtte.de virker bare som media forespørgsler.og ja, udover css udgave er de også kommer til at javascript.,, klar til at se?,, css påvisning, at definere kendetegn forespørgsler i vores forskning er vi nødt til at bruge den, @ støtter og @ støtter ikke reglerne.deres syntaks ser sådan ud:,, @ støtter (prøvningsbetingelser) {* anvende regler * /} @ støtter ikke (prøvningsbetingelser) {* anvende regler * /}, den betingelse, omfatter ejendom: værdi, par   træk, som vi vil prøve.at støtte de elementer,   browsere anvende target - regler, som vi nævner   i, @ støtter reglen.i modsat fald stilarter inden for, @ støtter ikke regel udføres, ved hjælp af den, og /eller logiske aktører kan vi skabe komplekse undersøgelser.men husk på, at disse operatører bør være adskilt af parentes.,, lad os se to eksempler.som vi allerede ved, vores html er død simpelt!det er bare en  , h2, element. i dette første eksempel, vi bruger, baggrund, farve, ejendom, at specificere baggrund farve af, et organ, et element.for at gøre det mere interessant er, at vi også skabe en css variabel.- støtte er opdelt i følgende kategorier:,,, - browsere, der støtter træk forespørgsler og css variabler (i øjeblikket kun firefox 31 +).,,, at støtte ved browsere forespørgsler, men ikke støtte css variabler, der ikke støtte ved browsere forespørgsler eller css variabler.,,, afhængigt af disse omstændigheder den krop, element vil vise en anden baggrund farve,.,, her er css kode baseret på antagelser ovenfor:,, organ {- bg farve:bfb98; baggrund farve: khaki.} @ støtter (baggrund farve: var (- bg farve)) (organ {baggrund farve: var (- bg farve)}} @ støtter ikke (baggrund farve: var (- bg farve)) (organ {baggrund farve: tomater,),for eksempel på safari, som tilhører den tredje kategori vores element ville se sådan ud:,,,,,, så krom, som kan fortolke del spørgsmål, men ikke støtter css variabler, hører til den anden kategori:,,,,, endelig firefox, som sidder i den første   kategori:,,,,, og det indbyggede eksempel på codepen:,, et andet eksempel er, at vi i denne sag vil udvide prøvningsbetingelser, indeholder en anden regel.mere specifikt, at vi nu er rettet mod at støtte ikke blot browsere overvejelser, men også   tekst slagtilfælde virkninger.,, her er koden for den opførsel:,, @ støtter ((/* overvejelser betingelse * /) og (- webkit tekst slagtilfælde: 1px tomat)) (h2 {* anvende overvejelser ejendom * /- webkit tekst slagtilfælde: 1px tomat;}} @ støtter ikke (/* overvejelser betingelse * /) (/* slagtilfælde betingelse * /)) (h2 {* anvendes tekst skygge ejendom * /}}, f.eks. browsere (på tidspunktet for denne kun skrive krom 28 +), som støtte ved forespørgsler, overvejelser og tekst slagtilfælde virkninger vil udvise, h2, element som følger:,,,,, nedenfor er emgodkendt eksempel på codepen:,, javascript påvisning, ved forespørgsler kan også defineres gennem javascript.for at gøre det, er vi nødt til at bruge den, css.supports metode.her er de mulige parametre:,, css. støtter (propertyname, propertyvalue) css. støtter (prøvningsbetingelser), resultatet af denne metode er en boolean, værdi, som angiver, om browser støtter element (er) eller ej.endelig bør vi afslutte parametre i et enkelt eller dobbelt citater, ved hjælp af javascript udgave af del spørgsmål, vores sidste eksempel kan gengives som følger:,, var resultat = css. støtter ("(/* overvejelser betingelse * /) (/* slagtilfælde betingelse * /) '), var element = dokument. getelementbyid ('reflection'); hvis (følge) (element.classname =" betænkningstid ";} andre (element.classname =" ikke noget "), og den tilsvarende demo:,, om støtte, generelt browseren støtte ved forespørgsler er god.i skrivende stund firefox (22 +), chrom (28 +) og opera (12 +) støtte dette css funktionalitet.forhåbentlig kommende udgaver af ie vil forstå den betingelse regler (de arbejder på det.-,,,,,, polyfills.,,,, hvis du ønsker at bruge træk forespørgsler i deres projekter, men du er lidt skeptisk med hensyn til browsere at forstå dem, finder du nogle nyttige polyfills nedenfor:,,, css-supports.js,, css.supports, tm polyfill, sidst i denne forelæsning, gik jeg gennem to nyttige metoder, vi kan bruge til at levere pålidelige cross - erfaringer.for at drage fordel af modernizr og /eller træk, vil hjælpe dig med at forstå fordelene ved at udforme, træk, og ikke for, browsere.modernizr er den nuværende stabil løsning, men træk forespørgsler kommer, det er dit valg.,