Share
Nell'ultimo tutorial abbiamo concluso la nostra sezione "Avvio rapido" di questa serie, e ora siamo pronti per passare a utilizzare PostCSS per generare fogli di stile, utilizzando diversi tipi di plugin per vari scopi.
In questo tutorial utilizzeremo PostCSS per creare un foglio di stile progettato per la compatibilità tra browser. Noi:
Accentsconagua
cambierà proprietàCominciamo!
La prima cosa che devi fare è impostare il tuo progetto in modo che utilizzi Gulp o Grunt, a seconda delle tue preferenze. Se non hai già una preferenza per l'uno o l'altro, ti consiglio di utilizzare Gulp in quanto avrai bisogno di meno codice per raggiungere gli stessi fini.
Puoi leggere come configurare i progetti Gulp o Grunt per PostCSS nelle esercitazioni precedenti
rispettivamente.
Se non si desidera configurare manualmente il progetto da zero, è possibile scaricare i file sorgente allegati a questo tutorial ed estrarre il progetto di avviamento Gulp o Grunt in una cartella di progetto vuota.
Quindi, con un terminale o un prompt dei comandi puntato sulla cartella, eseguire il comando installazione di npm.
Ora che hai pronto il tuo progetto Gulp o Grunt + PostCSS vuoto, dobbiamo installare i plug-in che utilizzerai in questo tutorial.
Installeremo un bel po 'di plugin, quindi invece di installarli uno alla volta come abbiamo fatto nelle "Guide Quickstart" per Gulp e Grunt, li installeremo tutti insieme con un singolo comando.
Sia che tu stia utilizzando Gulp o Grunt, esegui il seguente comando all'interno della cartella del progetto per installare i plug-in che utilizzeremo:
npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev
Ora i plugin sono installati, andiamo avanti e li cariciamo nel tuo progetto.
Se stai usando Gulp, aggiungi queste variabili sotto le variabili già presenti nel file:
var autoprefixer = require ('autoprefixer'); var color_rgba_fallback = require ('postcss-color-rgba-fallback'); var opacity = require ('postcss-opacity'); var pseudoelements = require ('postcss-pseudoelements'); var vmin = require ('postcss-vmin'); var pixrem = require ('pixrem'); var will_change = require ('postcss-will-change');Ora aggiungi ognuno di questi nuovi nomi di variabili nel tuo processori array:
processori var = [will_change, autoprefixer, color_rgba_fallback, opacity, pseudoelements, vmin, pixrem];
Fai un rapido test per verificare che tutto funzioni eseguendo il comando gulp css quindi controlla che un nuovo file "style.css" sia apparso nella cartella "dest" del tuo progetto.
Se stai usando Grunt, aggiorna il processori oggetto, che è annidato sotto il opzioni oggetto, al seguente:
processori: [require ('postcss-will-change') (), require ('autoprefixer') (), require ('postcss-color-rgba-fallback') (), require ('postcss-opacity') () , require ('postcss-pseudoelements') (), require ('postcss-vmin') (), require ('pixrem') ()]Esegui un test rapido eseguendo il comando grunt postcss quindi controlla che la cartella "dest" del tuo progetto ora contenga un nuovo file "style.css".
Ora hai tutti i plug-in installati che sono necessari per questo tutorial e sei pronto per passare a vedere come usarli per migliorare la compatibilità tra browser dei tuoi fogli di stile.
Alcune delle misure per la compatibilità tra browser che tratteremo saranno necessarie solo per casi d'uso specifici. D'altra parte, il prefisso automatico del venditore è qualcosa che vorrei suggerire di fare ogni progetto, tramite il plugin Autoprefixer creato da Andrey Sitnik.
Può essere difficile tenere sotto controllo le proprietà che richiedono i prefissi dei produttori in un dato momento e utilizzando Autoprefixer che non è necessario. Utilizza Autoprefixer come parte di ogni progetto e controllerà il tuo codice con i dati di CanIUse.com, quindi aggiungerà i prefissi dei fornitori se necessario senza che tu debba pensarci.
Facciamo un piccolo test per vedere in azione Autoprefixer. Aggiungi il seguente codice di animazione e codice flessibile al file "src / style.css" del tuo progetto:
@keyframes animationEsempio da larghezza: 0; a larghezza: 100%; .animateThis animation: animationExample 2s; display: flex;
Correre gulp css o grunt postcss per compilare il tuo file, e il tuo "dest / style.css" dovrebbe ora contenere questo codice prefissato dal fornitore:
@ -webkit-keyframes animationEsempio da larghezza: 0; a larghezza: 100%; @keyframes animationEsempio da larghezza: 0; a larghezza: 100%; .animateQuesto -webkit-animation: animationExample 2s; animazione: animationExample 2s; mostra: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
Come puoi vedere, i prefissi dei fornitori sono stati aggiunti automaticamente, come dettato dai dati forniti da CanIUse.com su animazione e flexbox.
Autoprefixer utilizza la lista dei browser per determinare a quali versioni del browser aggiungere il supporto. Nelle impostazioni predefinite verranno applicati i prefissi dei fornitori come richiesto per:
L'esempio sopra riportato è stato compilato nelle impostazioni predefinite di Autoprefixer. Ciò significava che il supporto per IE10 e Safari 8 era incluso, quindi -Signorina- e -webkit- prefissi che richiedono per animazione e FlexBox sono stati inseriti automaticamente.
Tuttavia, IE11 e Safari 9 non richiedono questi prefissi, quindi se si dovesse impostare la configurazione della lista dei browser per supportare solo IE11 + e Safari 9+ questi prefissi non verrebbero più aggiunti.
Prova questo facendo passare a i browser impostando su Autoprefixer nel tuo Gulpfile o Gruntfile in questo modo:
// Nell'array dei processori Gulpfile: autoprefixer (browser: 'safari> = 9, ie> = 11'), // Nell'array 'processors' di Gruntfile: require ('autoprefixer') (browser: [ 'safari> = 9, cioè> = 11']),Ora se ricompili il tuo CSS vedrai che non c'è differenza tra il tuo codice originale e quello compilato. Questo perché, senza il supporto richiesto per Safari 8 o IE10, non sono stati aggiunti prefissi ai fornitori per adattarli.
Il cambierà la proprietà viene utilizzata per consentire a un browser di sapere in anticipo che alcuni elementi del tuo progetto verranno animati. Ciò consente al browser di ottimizzare il processo di rendering e prevenire ritardi e sfarfallio. Tuttavia, al momento questa proprietà non è supportata da IE / Edge, Safari o Opera Mini.
Il plugin postcss-will-change, anch'esso creato da Andrey Sitnik, aggiunge un fallback che aiuterà questi browser a fare un miglior lavoro di rendering, anche se non con l'efficienza che potrebbero se supportassero cambierà. Lo fa aggiungendo il controfaccia visibilità proprietà, che attiva la creazione di un livello di composizione che verrà gestito dalla GPU.
Ad esempio, aggiungi questo codice al tuo file "src / style.css":
.thisWillChange will-change: transform;
Compila il tuo foglio di stile e dovresti vedere il fallback apparire nel tuo file "dest / style.css":
.thisWillChange backface-visibility: hidden; cambierà: trasformare;
Nota: questo plugin dovrebbe essere caricato prima Autoprefixer nel tuo Gulpfile / Gruntfile. Questo per consentire a Autoprefixer di aggiungere i prefissi dei fornitori al controfaccia visibilità proprietà, in questo modo:
/ * Fallback con prefissi fornitore * / .thisWillChange -webkit-backface-visibility: hidden; backface-visibility: hidden; cambierà: trasformare;
Grazie alle migliori versioni dei browser di Microsoft e ai principali gruppi che hanno contribuito a far cadere il supporto per il vecchio IE, ci avviciniamo gradualmente a non dover considerare costantemente fallback e soluzioni alternative per i browser legacy problematici. Microsoft stessa lascerà il supporto per IE8 nel 2016. Bootstrap 4 alpha è stato rilasciato di recente e ha anche abbandonato il supporto per IE8. Google ha smesso di supportare IE8 nel 2012 e ha abbandonato il supporto di IE9 nel 2013.
Detto questo, alla fine della giornata ogni progetto deve essere valutato caso per caso, e se hai come obiettivo una fascia demografica con alti tassi di utilizzo di browser legacy, potresti non avere altra scelta che fare del tuo meglio per sostenerli. In questo caso, i seguenti plugin possono aiutarti a rendere quel processo un po 'meno doloroso.
RGBA () Fallback a coloriIE8 non ha supporto per RGBA () colori, quindi il plugin postcss-color-rgba-fallback di Guillaume Demesy aggiunge un colore esadecimale piatto come ripiego.
Ad esempio, aggiungi questo codice al tuo file "src / style.css":
.rgbaFallback background: rgba (0,0,0,0,5);
Compilati e dovresti vedere il codice esadecimale di fallback aggiunto al tuo file "dest / style.css":
.rgbaFallback background: # 000000; sfondo: rgba (0,0,0,0,5);
opacità fallbackIE8 non può gestire il opacità proprietà, quindi il plugin postcss-opacity di Vincent De Oliveira aggiunge un filtro specifico IE per ottenere lo stesso effetto.
Aggiungi questo codice al tuo foglio di stile sorgente:
.opacityFallback opacità: 0.5;
Dopo la compilazione dovresti vedere l'appropriato -ms-filtro ripiego aggiunto:
.opacityFallback opacità: 0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)";
:: in : su Pseudo-elementiÈ considerato una buona pratica quando si genera pseudo-elementi ad esempio .elemento :: prima usare una doppia notazione dei due punti ::. Questo per aiutarli a distinguerli dallo pseudo-classi ad esempio .Elemento: hover che dovrebbe usare una notazione di due punti :.
Tuttavia, IE8 non supporta la notazione dei due punti :: per creare pseudo-elementi, supporta solo un singolo punto :. Usando il plugin postcss-pseudoelements di Sven Tschui puoi codificare secondo le migliori pratiche e far cambiare automaticamente la notazione.
Aggiungi il seguente doppio :: codice di notazione:
.pseudo-elemento :: before content: ";
Compila il tuo file e dovresti vedere che è stato ridotto al singolo : notazione:
.pseudo-elemento: prima di content: ";
Mediante la codifica delle best practice e l'utilizzo di questo plug-in, una volta che IE8 è completamente ritirato puoi semplicemente rielaborare il tuo CSS senza il plugin e avere una sintassi corretta in atto.
vm Fallback per Vmin In IE9 l'unità relativa del viewport Vmin non è supportato, ma utilizza invece l'unità equivalente vm. Se ti occupi di IE9, il plugin postcss-vmin di Vincent De Oliveira aggiungerà vm unità come ripiego.
Aggiungi questo codice al tuo file "src / style.css":
.vmFallback width: 50vmin;
Ricompila e il codice risultante dovrebbe avere il vm unità di riserva aggiunta in:
.vmFallback width: 50vm; larghezza: 50vmin;
px Fallback per rem unitàIE8 non supporta rem unità, e in entrambi IE9 e IE10 non sono supportati in pseudo-elementi e font dichiarazione stenografica. Con il plugin node-pixrem di Vincent De Oliveira e Rob Wierzbowski puoi avere px fallbacks basati automaticamente aggiunti ovunque tu usi rem unità.
Aggiungi questo codice al tuo foglio di stile sorgente:
.remFallback height: 10rem; font: 2rem Arial; .remFallback :: before content: "; line-height: 1rem;
Ricompila e dovresti vedere tutto il necessario px aggiunte di fallback:
.remFallback height: 160px; altezza: 10rem; font: 32px Arial; font: 2rem Arial; .remFallback: before content: "; line-height: 16px; line-height: 1rem;
Per riassumere ciò che abbiamo trattato in precedenza:
Il prossimo articolo della serie PostCSS Deep Dive è un tutorial su come usare i plugin per minimizzare e ottimizzare il tuo CSS. Copriremo inlining @importare file, combinando le query multimediali, eliminando lo spazio bianco e molti altri metodi per rendere i fogli di stile il più semplici possibile. Ci vediamo lì!
