Share
În ultimul tutorial am încheiat secțiunea "Începerea rapidă" a acestei serii și acum suntem gata să ne mutăm folosind PostCSS pentru a genera foi de stil, folosind diferite tipuri de pluginuri pentru diverse scopuri.
În acest tutorial vom folosi PostCSS pentru a crea o foaie de stil creată pentru compatibilitatea cu browserul încrucișat. Noi vom:
Accentsconagua
se va schimba proprietateSa incepem!
Primul lucru pe care trebuie să-l faceți este să configurați proiectul dvs. pentru a utiliza fie Gulp, fie Grunt, în funcție de preferințele dvs. Dacă nu aveți deja o preferință pentru unul sau altul, vă recomandăm să utilizați Gulp, deoarece veți avea nevoie de un cod mai mic pentru a obține aceleași scopuri.
Puteți citi despre cum să configurați proiectele Gulp sau Grunt pentru PostCSS în tutorialele anterioare
respectiv.
Dacă nu doriți să configurați manual proiectul dvs. de la zero, puteți descărca fișierele sursă atașate acestui tutorial și extrageți fie proiectul Gulp sau Grunt starter furnizat într-un dosar gol al proiectului.
Apoi, cu un terminal sau un prompt de comandă indicat în dosar, executați comanda npm install.
Acum că aveți pregătit proiectul Gulp sau Grunt + PostCSS gol, trebuie să instalați pluginurile pe care le veți folosi în acest tutorial.
Vom instala câteva plug-in-uri, așa că în loc să le instalăm una câte una, așa cum am făcut-o în "Ghidurile Quickstart" pentru Gulp și Grunt, le vom instala pe rând cu o singură comandă.
Indiferent dacă utilizați Gulp sau Grunt, executați următoarea comandă în dosarul proiectului pentru a instala pluginurile pe care le vom folosi:
npm instalare autoprefixer postcss-color-rgba-fallback postcss-opacitate postcss-pseudoelemente postcss-vmin pixrem postcss-will-change -save-dev
Acum, plug-in-urile sunt instalate, să mergem mai departe și să le încărcăm în proiectul dvs..
Dacă utilizați Gulp, adăugați aceste variabile sub variabilele deja în fișier:
var autoprefixer = necesită ("autoprefixer"); var color_rgba_fallback = cer ('postcss-color-rgba-fallback'); var opacitate = necesită ("postcss-opacity"); var pseudoelements = necesită ("postcss-pseudoelements"); var vmin = necesită ('postcss-vmin'); var pixrem = necesită ('pixrem'); var will_change = necesită ('postcss-will-change');Acum adăugați fiecare dintre aceste nume de variabile noi în dvs. procesoare matrice:
var procesoare = [will_change, autoprefixer, color_rgba_fallback, opacitate, pseudoelements, vmin, pixrem];
Faceți un test rapid că totul funcționează prin rularea comenzii gulp css verificând apoi că un nou fișier "style.css" a apărut în folderul "dest" al proiectului.
Dacă utilizați Grunt, actualizați procesoare obiect, care este imbricat sub Opțiuni obiect, la următoarele:
procesoare: [cere ('postcss-will-change') (), necesită ('autoprefixer') (), necesită ('postcss-color-rgba-fallback' , cer ("postcss-pseudoelements") (), necesită ('postcss-vmin') (), necesită ('pixrem'Faceți o compilație rapidă de testare executând comanda zgâria postcss verificând apoi că dosarul proiectului "dest" conține acum un nou fișier "style.css".
Acum aveți toate plugin-urile instalate care sunt necesare pentru acest tutorial și sunteți gata să vă deplasați pe modul de utilizare a acestora pentru a îmbunătăți compatibilitatea browser-ului de corespondență.
Unele dintre măsurile privind compatibilitatea browser-ului încrucișat pe care o vom acoperi vor fi necesare doar pentru cazuri specifice de utilizare. Vânzarea automată a prefixelor, pe de altă parte, este ceva ce aș sugera că ar trebui făcut fiecare proiect, prin pluginul Autoprefixer creat de Andrey Sitnik.
Poate fi dificil să păstrați tab-urile cu privire la care proprietăți necesită prefixul vânzătorului la un moment dat și nu trebuie să utilizați Autoprefixer. Utilizați Autoprefixer ca parte a fiecărui proiect și vă va verifica codul împotriva datelor de la CanIUse.com, apoi adăugați prefixele furnizorilor, dacă este necesar, fără a fi nevoie să vă gândiți la ele.
Să facem un mic test pentru a vedea Autoprefixer în acțiune. Adăugați următoarea animație și codul flexbox în fișierul "src / style.css" al proiectului:
@ animații de chei de cheiExemplu de la width: 0; la width: 100%; .animateAceasta animație: animațieExemplu 2; afișaj: flex;
Alerga gulp css sau zgâria postcss pentru a compila fișierul dvs., și "dest / style.css" dvs. ar trebui să conțină acum acest cod prefixat furnizor:
@ -webkit-keyframes animationExemplu din width: 0; la width: 100%; @ animații de chei de cheiExemplu de la width: 0; la width: 100%; . animateAceastă -webkit-animație: animațieExemplu 2; animație: animațieExemplu 2s; afișare: -webkit-box; afișare: -webkit-flex; afișare: -ms-flexbox; afișaj: flex;
După cum puteți vedea, prefixele furnizorilor au fost adăugate automat, așa cum sunt dictate de datele furnizate de CanIUse.com în animație și flexbox.
Autoprefixer utilizează lista de browsere pentru a determina care versiuni de browser pentru care va adăuga suport pentru. În setările implicite se vor aplica prefixele furnizorilor după cum este necesar pentru:
Exemplul prin care am trecut mai sus a fost compilat în setările implicite ale Autoprefixer. Acest lucru a însemnat sprijin pentru IE10 și Safari 8 a fost inclus, astfel încât -Domnișoară- și -WebKit- prefixele de care au nevoie animaţie și flexbox au fost introduse automat.
Cu toate acestea, IE11 și Safari 9 nu necesită aceste prefixe, așadar dacă ați seta configurația listei dvs. de browser pentru a suporta doar IE11 + și Safari 9+, aceste prefixe nu vor mai fi adăugate.
Încercați acest lucru prin trecerea unui browsere setarea la Autoprefixer în Gulpfile sau Gruntfile așa cum este:
// În matricea procesoarelor Gulpfile: autoprefixer (browsere: 'safari> = 9, ie> = 11')), // În matricea procesoarelor Gruntfile: 'safari> = 9, adică> = 11']),
Acum, dacă vă recompilați CSS, veți vedea că nu există nicio diferență între codul dvs. original și cel compilat. Acest lucru se datorează faptului că, fără asistență solicitată pentru Safari 8 sau IE10, nu au fost adăugate prefixe furnizorilor pentru a le potrivi.
se va schimba proprietatea este folosită pentru a permite unui browser să știe înainte de timp că anumite elemente ale designului tău vor fi animate. Acest lucru permite browserului să optimizeze procesul de redare și să prevină întârzierile și pâlpâirea. Cu toate acestea, în prezent, această proprietate nu este acceptată de IE / Edge, Safari sau Opera Mini.
Pluginul postcss-will-change, creat și de Andrey Sitnik, adaugă o alternativă care le va ajuta pe acești browsere să facă o treabă mai bună de randare, chiar dacă nu cu eficiența pe care ar putea-o dacă ar susține se va schimba. Ea face acest lucru prin adăugarea fata de jos vizibilitate proprietate, care declanșează crearea unui strat compozitor care va fi gestionat de GPU.
De exemplu, adăugați acest cod în fișierul "src / style.css":
.thisWillChange va-schimba: transforma;
Compilați foaia de stil și ar trebui să vedeți că în fișierul "dest / style.css" apar fișierele de rezervă:
.thisWillChange backface-visibility: hidden; vor-schimba: transforma;
Notă: acest plugin trebuie încărcat inainte de Autoprefixer în Gulpfile / Gruntfile. Aceasta este pentru a permite Autoprefixer să adauge prefixele furnizorilor la fata de jos vizibilitate proprietăți, cum ar fi:
/ * Fallback cu prefixele furnizorilor * / .thisWillChange -webkit-backface-visibility: hidden; spate-vizibilitate: ascuns; vor-schimba: transforma;
Datorită versiunilor îmbunătățite ale browserului de la Microsoft și a grupurilor majore care duc spre scăderea suportului pentru vechiul IE, ne apropiem treptat de faptul că nu trebuie să luăm în considerare în mod constant schimbările și soluțiile pentru browserele moștenite problematice. Microsoft în sine va renunța la suportul pentru IE8 în 2016. Bootstrap 4 alpha a fost recent lansat și a scăzut de asemenea suportul pentru IE8. Google a oprit suportul IE8 în 2012 și a renunțat la suportul IE9 în 2013.
Tot ce a fost spus, la sfârșitul fiecărei zile, fiecare proiect trebuie evaluat de la caz la caz, iar dacă vizați o categorie demografică care are rate mari de utilizare a browserelor vechi, este posibil să nu aveți altă alegere decât să vă faceți cea mai bună pentru a le sprijini. În acest caz, următoarele pluginuri vă pot ajuta să faceți acest proces puțin mai puțin dureros.
RGBA () Întoarceți culoareaIE8 nu are nici un sprijin pentru RGBA () culorile, astfel încât pluginul postcss-color-rgba-fallback de Guillaume Demesy adaugă o culoare plană hexazecimală ca o rezervă.
De exemplu, adăugați acest cod în fișierul "src / style.css":
.rgbaFallback background: rgba (0,0,0,0,5);
Compilați și ar trebui să vedeți căderea de hexcode adăugată în fișierul "dest / style.css":
.rgbaFallback background: # 000000; fundal: rgba (0,0,0,0,5);
opacitate fallbacksIE8 nu se poate descurca opacitate proprietatea, așa că pluginul de opacitate postcss de Vincent De Oliveira adaugă un filtru specific IE pentru a obține același efect.
Adăugați acest cod în foaia dvs. de stil sursă:
.opacitateFallback opacitate: 0,5;
După compilație, ar trebui să vedeți corespunzător -ms-filtru backback a adăugat:
.opacitateFallback opacitate: 0,5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacitate = 50)";
:: în : pe pseudoelementeSe consideră cea mai bună metodă atunci când se generează pseudo-element precum .Element :: înainte pentru a utiliza o notație dublă de colon ::. Acest lucru este de a ajuta la distingerea lor de pseudo-clase precum .Element: Hover care ar trebui să utilizeze o singură notație de colon :.
Cu toate acestea, IE8 nu acceptă notația de colon dublu :: pentru a crea pseudo-elemente, suportă doar un singur colon :. Utilizând pluginul postcss-pseudoelements de Sven Tschui, puteți să codificați în conformitate cu cele mai bune practici și să aveți notația modificată automat.
Adăugați următorul text dublu :: cod de notație:
.pseudo-element :: înainte de content: ";
Compilați fișierul dvs. și ar trebui să vedeți că acesta a fost redus la unic : notaţie:
.pseudo-element: înainte de content: ";
Prin codarea la cele mai bune practici și prin utilizarea acestui plugin, odată ce IE8 este complet retras, puteți să reprocesați CSS fără plugin și să aveți o sintaxă adecvată.
vm Fallback pentru Vmin În IE9, unitatea relativă pentru vizualizare Vmin nu este acceptată, ci utilizează unitatea echivalentă vm. Dacă sunteți de catering pentru IE9, plugin-ul postcss-vmin de Vincent De Oliveira va adăuga vm ca rezervă.
Adăugați acest cod în fișierul "src / style.css":
.vmFallback width: 50vmin;
Recompilați, iar codul rezultat ar trebui să aibă vm unitate de rezervă adăugată în:
.vmFallback lățime: 50vm; lățime: 50vmin;
px Fallback pentru rem UnitățiIE8 nu acceptă rem unități la toate, și în ambele IE9 și IE10 acestea nu sunt suportate în Elemente-Psuedo și font stenograma. Cu pluginul nod-pixrem de Vincent De Oliveira și Rob Wierzbowski puteți avea px backbacks bazate pe date adăugate în mod automat oriunde ați utiliza rem Unități.
Adăugați acest cod în foaia dvs. de stil sursă:
.remFallback înălțime: 10rem; font: 2rem Arial; .remFallback :: înainte de content: "; line-height: 1rem;
Recompilați și ar trebui să vedeți toate cele potrivite px backbacks adăugat:
.remFallback height: 160px; înălțime: 10rem; font: 32px Arial; font: 2rem Arial; .remFallback: înainte de content: "; line-height: 16px; line-height: 1rem;
Pentru a rezuma ceea ce am abordat în cele de mai sus:
Veniți în continuare în seria noastră PostCSS Deep Dive este un tutorial cu privire la modul de utilizare a pluginurilor pentru a minimiza și optimiza CSS. Vom acoperi inlining @import fișiere, combinând interogările media, eliminând spațiul alb și mai multe metode pentru a vă face foile de stil cât mai eficiente posibil. Ne vedem acolo!
