Share
I den sista handledningen slog vi in vår "Snabbstart" -sektion i den här serien och vi är nu redo att flytta på med PostCSS för att skapa stylesheets, med olika typer av plugins för olika ändamål.
I den här handledningen kommer vi att använda PostCSS för att skapa ett stilark som är utformat för cross-browser kompatibilitet. Vi ska:
Accentsconagua
kommer att ändras fast egendomLåt oss börja!
Det första du behöver göra är att ställa in ditt projekt för att använda antingen Gulp eller Grunt, beroende på vad du föredrar. Om du inte redan föredrar en eller annan, rekommenderar jag att du använder Gulp eftersom du behöver mindre kod för att uppnå samma ändar.
Du kan läsa om hur du konfigurerar Gulp eller Grunt-projekt för PostCSS i de tidigare handledningarna
respektive.
Om du inte vill manuellt konfigurera ditt projekt från början, kan du ladda ner källfilerna som bifogas denna handledning och extrahera antingen det angivna Gulp eller Grunt-startprojektet i en tom projektmapp.
Sedan, med en terminal eller kommandotolk som pekas på mappen, kör kommandot npm installera.
Nu när du har ditt tomma Gulp eller Grunt + PostCSS-projekt redo, måste vi installera de plugins du ska använda i denna handledning.
Vi ska installera en hel del plugins, så istället för att installera dem en i taget, som vi gjorde i "Quickstart Guides" för Gulp and Grunt, installerar vi dem på en gång med ett enda kommando.
Oavsett om du använder Gulp eller Grunt, kör följande kommando i din projektmapp för att installera plugins som vi ska använda:
npm installera autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change -save-dev
Nu är plugins installerade, låt oss gå och ladda dem till ditt projekt.
Om du använder Gulp, lägg till dessa variabler under de variabler som redan finns i filen:
var autoprefixer = kräver ("autoprefixer"); var color_rgba_fallback = kräver ('postcss-color-rgba-fallback'); var opacity = kräver ("postcss-opacity"); var pseudoelements = kräver ("postcss-pseudoelements"); var vmin = kräver ('postcss-vmin'); var pixrem = kräver ('pixrem'); var will_change = kräver ('postcss-will-change');Lägg nu till var och en av de nya variabla namnen i din processorer array:
var processorer = [will_change, autoprefixer, color_rgba_fallback, opacity, pseudoelements, vmin, pixrem];
Gör ett snabbt test att allt fungerar genom att köra kommandot gulp css Kontrollera sedan att en ny "style.css" -fil har dykt upp i projektets "dest" -mapp.
Om du använder Grunt, uppdatera processorer objekt som är nestat under alternativ objekt till följande:
processorer: (kräver "postcss-will-change") (), kräver ('autoprefixer') (), kräver ('postcss-color-rgba-fallback') , kräver ('postcss-pseudoelements') (), kräver ('postcss-vmin') (), kräver ('pixrem') ()]Gör ett snabbt test kompilera genom att köra kommandot grunt postcss Då kontrollerar du att ditt projekts "dest" -mapp nu innehåller en ny "style.css" -fil.
Du har nu alla insticksprogram installerade som krävs för denna handledning, och du är redo att flytta till se hur du använder dem för att förbättra dina stylesheets cross-browser-kompatibilitet.
Några av åtgärderna för cross-browser-kompatibilitet som vi kommer att täcka är bara nödvändiga för specifika användningsfall. Automatiserad leverantör prefixing, å andra sidan, är något jag skulle föreslå att göra med varje projekt, via autoprefixer plugin skapad av Andrey Sitnik.
Det kan vara svårt att hålla flikar på vilka egenskaper som kräver vilken leverantör prefixar vid vilken tidpunkt som helst och genom att använda Autoprefixer behöver du inte. Använd Autoprefixer som en del av varje projekt och det kommer att kontrollera din kod mot data från CanIUse.com och sedan lägga till leverantörs prefix som behövs utan att du behöver tänka på det.
Låt oss göra ett litet test för att se Autoprefixer i funktion. Lägg till följande animations- och flexboxkod i ditt projekts "src / style.css" -fil:
@keyframes animationExample from width: 0; till bredd: 100%; .animateThis animation: animationExample 2s; display: flex;
Springa gulp css eller grunt postcss för att kompilera din fil, och din "dest / style.css" ska nu innehålla den här fördefinierade koden:
@ -webkit-keyframes animationExempel från bredd: 0; till bredd: 100%; @keyframes animationExample from width: 0; till bredd: 100%; .animateThis -webkit-animation: animationExample 2s; animering: animationExempel 2s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
Som du kan se har leverantörs prefix automatiskt lagts till, som dikterats av data från CanIUse.com på animering och flexbox.
Autoprefixer använder Browserlist för att bestämma vilka webbläsarversioner den ska lägga till stöd för. Under standardinställningarna gäller det för leverantörs prefix som krävs för:
Exemplet som vi körde igenom ovan sammanställdes under Autoprefixers standardinställningar. Detta innebar stöd för IE10 och Safari 8 inkluderades, så -Fröken- och -webkit- prefix som de behöver för animering och Flexbox infogades automatiskt.
IE11 och Safari 9 kräver emellertid inte dessa prefix, så om du skulle ställa in din webbläsarlista konfiguration för att bara stödja IE11 + och Safari 9+ skulle dessa prefix inte längre läggas till.
Prova detta genom att passera en webbläsare inställning till Autoprefixer i din Gulpfile eller Gruntfile som så:
// I Gulpfile-processorns array: autoprefixer (webbläsare: 'safari> = 9, dvs> = 11'), // I Gruntfile-processorns array: kräver ('autoprefixer') (webbläsare: 'safari> = 9, dvs> = 11']),Nu om du kompilerar din CSS så ser du att det inte finns någon skillnad mellan din ursprungliga och sammanställda kod. Detta beror på att inga leverantörs prefix har lagts till för att passa dem utan stöd som begärts för Safari 8 eller IE10.
De kommer att ändras egendom används för att låta en webbläsare veta förut att vissa delar av din design kommer att animeras. Detta gör det möjligt för webbläsaren att optimera renderingsprocessen och förhindra förseningar och flimmer. För närvarande stöds denna egenskap inte av IE / Edge, Safari eller Opera Mini.
Postcss-will-Change-plugin, som också skapats av Andrey Sitnik, lägger till en återgång som hjälper dessa webbläsare att göra ett bättre jobb att göra, även om de inte har den effektivitet de kunde om de stödde kommer att ändras. Det gör det genom att lägga till backface-synlighet egenskap som utlöser skapandet av ett kompositörlager som kommer att hanteras av GPU.
Till exempel lägg till den här koden i din "src / style.css" -fil:
.thisWillChange will-change: transform;
Kompilera ditt stilark och du bör se fallbacken i din "dest / style.css" -fil:
.thisWillChange backface-visibility: hidden; kommer att förändra: transformera
Notera: den här plugin ska laddas innan Autoprefixer i din Gulpfile / Gruntfile. Det här gör att Autoprefixer kan lägga till leverantörs prefix till backface-synlighet egendom, som så:
/ * Fallback med leverantörs prefix * / .thisWillChange -webkit-backface-visibility: hidden; backface-visibility: hidden; kommer att förändra: transformera
Tack vare förbättrade webbläsarversioner från Microsoft, och stora grupper som leder till att vi släpper support för gamla IE, går vi successivt närmare vid att inte ständigt överväga återgångar och lösningar för problematiska äldre webbläsare. Microsoft själv kommer att släppa stöd för IE8 år 2016. Bootstrap 4 alpha släpptes nyligen och det har också tappat stöd för IE8. Google slutade stödja IE8 2012 och släppte IE9-stöd 2013.
Allt sagt, i slutet av dagen måste varje projekt utvärderas från fall till fall, och om du riktar in en demografisk med höga användningsnivåer för äldre webbläsare, kan du ha något annat val än att göra ditt bästa att stödja dem. Om så är fallet kan följande plugins hjälpa dig att göra processen lite mindre smärtsam.
RGBA () Färg FallbacksIE8 har inget stöd för RGBA () färger, så Guillaume Demesys postcss-color-rgba-backning-plugin lägger till en platt hexadecimal färg som fallback.
Till exempel lägg till den här koden i din "src / style.css" -fil:
.rgbaFallback background: rgba (0,0,0,0,5);
Kompilera och du ska se hexcode fall tillbaka till din "dest / style.css" -fil:
.rgbaFallback background: # 000000; bakgrund: rgba (0,0,0,0,5);
opacitet gångarnaIE8 kan inte hantera opacitet egendom, så lägger Vincent de Oliveira postcss-opacity-plugin ett IE-specifikt filter för att uppnå samma effekt.
Lägg till den här koden i ditt kalkylblad:
.opacityFallback opacity: 0.5;
Efter sammanställning borde du se lämpligt -ms-filter fallback tillagt:
.opacityFallback opacity: 0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)";
:: in i : på pseudo-elementDet anses bästa praxis när man skapar pseudo-element som .elementet :: innan att använda en dubbel kolon notation ::. Det här hjälper till att skilja dem från pseudo-klasser som .elementet: hover som ska använda en enda kolon notation :.
IE8 stöder dock inte dubbelt kolon notationen :: att skapa pseudo-element, stöder det bara en enda kolon :. Genom att använda plug-in-pseudoelements-plugin av Sven Tschui kan du koda enligt bästa praxis och ändra notationen automatiskt.
Lägg till följande dubbel :: noteringskod:
.pseudo-element :: före innehåll: ";
Kompilera din fil och du bör se att den har reducerats till singeln : notation:
.pseudo-element: före innehåll: ";
Genom att koda till bästa praxis och använda det här pluginet, när IE8 är helt pensionerad kan du bara uppdatera din CSS utan plugin och ha ordentlig syntax på plats.
vm Fallback för Vmin I IE9 är den relativa enheten för visningsporten Vmin stöds inte, men använder istället motsvarande enhet vm. Om du är catering till IE9, kommer Vincent De Oliveira postcss-vmin-plugin att lägga till vm enheter som en backning.
Lägg till den här koden i din "src / style.css" -fil:
.vmFallback width: 50vmin;
Kompilera, och den resulterande koden ska ha vm enhet fallback läggas i:
.vmFallback width: 50vm; bredd: 50vmin;
px Fallback för rem EnheterIE8 stöder inte rem enheter i alla, och i både IE9 och IE10 stöds de inte psuedo-element och font kortfattad deklaration. Med plugin för nod-pixrem av Vincent De Oliveira och Rob Wierzbowski kan du få px baserade fallbacks läggs automatiskt till var du än använder rem enheter.
Lägg till den här koden i ditt kalkylblad:
.remFallback höjd: 10rem; typsnitt: 2rem Arial; .remFallback :: före innehåll: "; linjehöjd: 1rem;
Kompilera och du bör se allt lämpligt px fallbacks tillagt:
.remFallback höjd: 160px; höjd: 10rem; typsnitt: 32px Arial; typsnitt: 2rem Arial; .remFallback: före innehåll: "; linjehöjd: 16px; linjehöjd: 1rem;
För att sammanfatta vad vi har behandlat ovanstående:
Kommer upp nästa i vår PostCSS Deep Dive-serie är en handledning om hur du använder plugins för att minska och optimera din CSS. Vi täcker inlining @importera filer, kombinera mediasökningar, strippa vitt utrymme och flera fler metoder för att göra dina stylesheets så strömlinjeformade som möjligt. Vi ses där!
