Share
I den siste opplæringen pakket vi opp "Quick Start" -delen av denne serien, og vi er nå klare til å flytte inn på PostCSS for å generere stilark, ved hjelp av forskjellige typer plugins for ulike formål.
I denne opplæringen skal vi bruke PostCSS til å lage et stilark som er designet for å krysse nettleserens kompatibilitet. Vi vil:
Accentsconagua
Kommer til å endres eiendomLa oss begynne!
Det første du må gjøre er å sette opp prosjektet ditt for å bruke enten Gulp eller Grunt, avhengig av dine preferanser. Hvis du ikke allerede har en preferanse for den ene eller den andre, anbefaler jeg at du bruker Gulp, da du trenger mindre kode for å oppnå de samme ender.
Du kan lese om hvordan du konfigurerer Gulp eller Grunt-prosjekter for PostCSS i de tidligere opplæringsprogrammene
henholdsvis.
Hvis du ikke vil opprette prosjektet manuelt fra starten, kan du laste ned kildefilene som er vedlagt denne opplæringen, og trekke ut enten det forsynte Gulp- eller Grunt-startprosjektet i en tom prosjektmappe.
Deretter kjører kommandoen med en terminal eller kommandoprompt i mappen npm installasjon.
Nå som du har ditt tomme Gulp eller Grunt + PostCSS-prosjekt klar, må vi installere plugins du skal bruke i denne opplæringen.
Vi skal installere ganske mange plugins, så i stedet for å installere dem en om gang som vi gjorde i "Quickstart Guides" for Gulp and Grunt, installerer vi dem alle samtidig med en enkelt kommando.
Enten du bruker Gulp eller Grunt, kjør følgende kommando inne i prosjektmappen din for å installere pluginene vi skal bruke:
npm installere autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change -save-dev
Nå er plugins installert, la oss gå videre og laste dem inn i prosjektet ditt.
Hvis du bruker Gulp, legger du til disse variablene under variablene som allerede finnes i filen:
var autoprefixer = krever ('autoprefixer'); var color_rgba_fallback = krever ('postcss-color-rgba-fallback'); var opacity = krever ('postcss-opacity'); var pseudoelements = krever ('postcss-pseudoelements'); var vmin = krever ('postcss-vmin'); var pixrem = krever ('pixrem'); var will_change = krever ('postcss-will-change');Legg nå til hver av de nye variabelenavnene i din prosessorer matrise:
var prosessorer = [will_change, autoprefixer, color_rgba_fallback, opacity, pseudoelements, vmin, pixrem];
Gjør en rask test at alt fungerer ved å kjøre kommandoen gulp css og deretter sjekker du at en ny "style.css" -fil har dukket opp i prosjektets "dest" -mappe.
Hvis du bruker Grunt, oppdaterer du prosessorer objekt, som er nestet under opsjoner objekt til følgende:
prosessorer: [krever ('postcss-will-change') (), krever ('autoprefixer') (), krever ('postcss-color-rgba-fallback') (), krever ('postcss-opacity') , krever ('postcss-pseudoelements') (), krever ('postcss-vmin') (), krever ('pixrem') ()]Utfør en rask test ved å kjøre kommandoen grunt postcss Sjekk deretter at prosjektets "dest" -mappe nå inneholder en ny "style.css" -fil.
Du har nå alle pluginene som er installert som kreves for denne opplæringen, og du er klar til å gå videre og se hvordan du bruker dem for å forbedre stilarkets kryssleser-kompatibilitet.
Noen av tiltakene for kryssbrowser-kompatibilitet vi vil dekke, vil bare være nødvendige for spesielle brukstilfeller. Automatisert leverandør prefixing, derimot, er noe jeg foreslår at det skal gjøres med hver prosjekt, via Autoprefixer-plugin laget av Andrey Sitnik.
Det kan være vanskelig å holde faner på hvilke egenskaper som krever hvilken leverandør som prefikser til enhver tid, og ved å bruke Autoprefixer du ikke trenger å. Bruk Autoprefixer som en del av hvert prosjekt, og det vil sjekke koden din mot dataene fra CanIUse.com, og deretter legge til leverandørprefikser etter behov uten at du må tenke på det.
La oss gjøre en liten test for å se Autoprefixer i aksjon. Legg til følgende animasjon og flexbox kode i prosjektets "src / style.css" -fil:
@keyframes animasjon Eksempel fra bredde: 0; til bredde: 100%; .animateThis animasjon: animasjon Eksempel 2s; display: flex;
Løpe gulp css eller grunt postcss å kompilere filen din, og din "dest / style.css" bør nå inneholde denne leverandørens prefixed kode:
@ -webkit-keyframes animasjon Eksempel fra bredde: 0; til bredde: 100%; @keyframes animasjon Eksempel fra bredde: 0; til bredde: 100%; .animateThis -webkit-animasjon: animasjon Eksempel 2s; animasjon: animasjon Eksempel 2s; display: -webkit-boks; display: -webkit-flex; display: -ms-flexbox; display: flex;
Som du kan se, har leverandørprefikser automatisk blitt lagt til, som diktert av dataene fra CanIUse.com på animasjon og flexbox.
Autoprefixer bruker nettleserlisten for å finne ut hvilke nettleserversjoner den vil legge til støtte for. Under standardinnstillinger vil det bruke leverandørprefikser etter behov for:
Eksemplet vi løp gjennom ovenfor ble samlet under Autoprefixers standardinnstillinger. Dette betydde støtte for IE10 og Safari 8 ble inkludert, så -ms- og -webkit- prefiks de krever for animasjon og flexbox ble automatisk satt inn.
Imidlertid krever IE11 og Safari 9 ikke disse prefiksene, så hvis du skulle stille inn nettleserkartskonfigurasjonen for å bare støtte IE11 + og Safari 9+, vil disse prefikser ikke lenger bli lagt til.
Prøv dette ved å passere a lesere sette inn til Autoprefixer i Gulpfile eller Gruntfile slik:
// I Gulpfile-prosessorens array: autoprefixer (browsers: 'safari> = 9, ie> = 11') 'safari> = 9, dvs.> = 11']),
Nå, hvis du kompompillerer CSS, vil du se at det ikke er noen forskjell mellom den opprinnelige og kompilerte koden. Dette skyldes at uten støtte for Safari 8 eller IE10, har ingen leverandørprefikser blitt lagt inn for å passe dem.
De Kommer til å endres Egenskapen er brukt til å la en nettleser vite før tiden at bestemte elementer i ditt design skal animeres. Dette gjør at nettleseren kan optimalisere gjengivelsesprosessen og forhindre forsinkelser og flimmer. Men for tiden er denne egenskapen ikke støttet av IE / Edge, Safari eller Opera Mini.
Postcss-will-change-pluginet, også skapt av Andrey Sitnik, legger til en tilbakebetaling som vil hjelpe disse nettleserne til å gjøre en bedre jobb med gjengivelse, selv om ikke med effektiviteten de kunne, hvis de støttet Kommer til å endres. Det gjør det ved å legge til backface-synlighet eiendom som utløser opprettelsen av et kompositorlag som skal håndteres av GPU.
For eksempel, legg til denne koden i filen "src / style.css":
.thisWillChange will-change: transform;
Samle stilarket ditt, og du bør se fallbacken i filen "dest / style.css":
.thisWillChange backface-synlighet: hidden; vil-endre: transformere;
Merk: dette pluginet skal lastes inn før Autoprefixer i Gulpfile / Gruntfile. Dette gjør at Autoprefixer kan legge til leverandørprefikser til backface-synlighet eiendom, slik som:
/ * Fallback med leverandør prefikser * / .thisWillChange -webkit-backface-synlighet: skjult; backface-synlighet: skjult; vil-endre: transformere;
Takket være forbedrede nettleserversjoner fra Microsoft, og store grupper som fører veien til å slippe støtte for gamle IE, går vi gradvis nærmere ved ikke å hele tiden vurdere tilbakebetalinger og løsningsmuligheter for problematiske eldre nettlesere. Microsoft selv vil slippe støtte for IE8 i 2016. Bootstrap 4 alpha ble nylig utgitt, og den har også falt støtte for IE8. Google sluttet å støtte IE8 i 2012 og droppet IE9-støtte i 2013.
Alt som er sagt, på slutten av dagen må hvert prosjekt vurderes fra sak til sak, og hvis du målretter mot en demografisk som har høye bruksfrekvenser for eldre nettlesere, har du kanskje ikke annet valg enn å gjøre ditt beste å støtte dem. Hvis det er tilfelle, kan følgende plugins hjelpe deg med å gjøre prosessen litt mindre smertefull.
RGBA () Farge FallbacksIE8 har ingen støtte for RGBA () farger, slik at plug-in-farge-rgba-fallback-plugin av Guillaume Demesy legger til en flat hexadecimal farge som en tilbakekalling.
For eksempel, legg til denne koden i filen "src / style.css":
.rgbaFallback bakgrunn: rgba (0,0,0,0,5);
Kompilere og du bør se heksekode fall tilbake lagt til din "dest / style.css" -fil:
.rgbaFallback bakgrunn: # 000000; bakgrunn: rgba (0,0,0,0,5);
opasitet fallbacksIE8 kan ikke håndtere opasitet eiendom, slik at plug-in-opacity-plugin av Vincent De Oliveira legger til et IE-spesifikt filter for å oppnå samme effekt.
Legg til denne koden i kilde stilarket ditt:
.opacityFallback opacity: 0.5;
Etter samling bør du se riktig -ms-filteret fallback lagt til:
.opacityFallback opacity: 0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)";
:: inn i : på pseudo-elementerDet anses best praksis når du genererer pseudo-elementer som for eksempel .element :: før å bruke en dobbelt kolon notasjon ::. Dette er for å skille dem fra pseudo-klasser som for eksempel .element: hover som skal bruke en enkelt kolon notasjon :.
Imidlertid støtter IE8 ikke den dobbelte kolonnotasjonen :: For å skape pseudo-elementer, støtter det bare en enkelt kolon :. Ved å bruke postcss-pseudoelements plugin av Sven Tschui kan du kode i henhold til beste praksis, og har notasjonen endret automatisk.
Legg til følgende dobbelte :: notasjonskode:
.pseudo-element :: før innhold: ";
Kompilér filen din, og du bør se at den har blitt redusert til singelen : notasjon:
.pseudo-element: før innhold: ";
Ved å kryptere til beste praksis og bruke dette pluginet, når IE8 er fullstendig pensjonert, kan du bare reprosessere CSS uten plugin og ha riktig syntaks på plass.
vm Fallback for Vmin I IE9 er visningsportenheten Vmin støttes ikke, men bruker i stedet den tilsvarende enheten vm. Hvis du er catering til IE9, vil postcss-vmin-pluginet av Vincent De Oliveira legge til vm enheter som en tilbakebetaling.
Legg til denne koden i filen "src / style.css":
.vmFallback bredde: 50vmin;
Kompompilere, og den resulterende koden skal ha vm enhet fallback lagt i:
.vmFallback bredde: 50vm; bredde: 50vmin;
px Fallback for rem enheterIE8 støtter ikke rem enheter i det hele tatt, og i både IE9 og IE10 støttes de ikke kvasielementer og font shorthand deklarasjon. Med node-pixrem plugin av Vincent De Oliveira og Rob Wierzbowski kan du ha px baserte fallbacks lagt til automatisk hvor du bruker rem enheter.
Legg til denne koden i kilde stilarket ditt:
.remFallback høyde: 10rem; font: 2rem Arial; .remFallback :: før innhold: "; linjehøyde: 1rem;
Kompompilere og du bør se alt riktig px fallbacks lagt til:
.remFallback høyde: 160px; høyde: 10rem; skrifttype: 32px Arial; font: 2rem Arial; .remFallback: før innhold: "; linjehøyde: 16px; linjehøyde: 1rem;
For å oppsummere hva vi har dekket i det ovennevnte:
Kommer opp neste i vår PostCSS Deep Dive-serie er en veiledning om hvordan du bruker plugins for å redusere og optimalisere CSS. Vi vil dekke inlining @importere filer, kombinere media spørringer, stripping hvit plass og flere flere metoder for å gjøre stilarkene dine så strømlinjeformede som mulig. Ser deg der!
