Mantenere il codice CSS3 Slim

Questo articolo è parte del nostro "Serie di tutorial HTML5 / CSS3" - dedicato a farti diventare un designer e / o sviluppatore migliore. Clicca qui per vedere più articoli della stessa serie.

Gli sviluppatori Web possono risparmiare molto tempo utilizzando una sintassi CSS3 più sofisticata. Gli utenti che visitano la tua pagina si aspettano il tempo di caricamento più veloce possibile, il che rende tua responsabilità mantenere le dimensioni dei file verso il basso. Ci sono molti trucchi stenografici con CSS e soprattutto con il nuovo modello CSS3.

Ho messo insieme alcune di queste idee nella guida qui sotto. Dovremmo anche toccare altre aree come la minimizzazione del codice CSS. Sono disponibili strumenti in-browser per aiutare gli sviluppatori nel processo di styling, ma si vorrebbe combinare shortcode con questa riduzione della dimensione dei file per ottimizzare in definitiva il processo di rendering del proprio sito Web.

Suggerimenti di base sulla formattazione

Prima di passare alla sintassi CSS attuale, voglio approfondire l'argomento di Come scrivere il tuo CSS. Se hai familiarità con il web design, probabilmente hai già visto un foglio di stile, probabilmente più di una volta. La prima parte di ogni comando è chiamata il selettore. Si rivolge al tipo di elemento che riceverà gli stili aggiunti all'interno delle parentesi graffe, noto anche come proprietà.

Livello in linea

Con gli stili inline ogni proprietà viene scritta una dopo l'altra con solo spazi per separarle. Questo metodo si applica meglio ai selettori in cui è necessario solo un paio di proprietà. Ti farà risparmiare spazio sulla pagina e scorrere il tuo foglio di stile sarà molto più veloce. Nel caso in cui non hai mai incontrato CSS in linea, ho aggiunto un piccolo esempio di targeting dei link di ancoraggio HTML.

a color: # 648cc8; font-weight: bold;  a: hover color: # 739cda; decorazione del testo: nessuna;  a.alt color: # bd4949! important;

Livello di blocco

D'altra parte le proprietà in stile blocco vengono immesse in una riga per coppia chiave / valore e sono spesso rientrate per modifiche più rapide durante la scansione del codice. Circa il 99% dei fogli di stile più puliti che utilizzo in questa formattazione è diventato uno standard del settore per molti designer. Se il tuo selettore utilizza più di 6 o 7 proprietà, questa è la migliore formattazione da applicare.

Quando prendi in considerazione le molte nuove proprietà CSS3, ti rendi conto anche di quanto velocemente i tuoi fogli di stile si riempiono. E molte di queste proprietà supportano le copie specifiche del browser che richiedono voci di codice quasi duplicate (come il raggio del bordo). Puoi controllare il mio esempio di un insieme di proprietà di blocco sotto il targeting di un div wrapper campione.

.avvolgere display: block; imbottitura: 6px 10px; sfondo: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;

Nessun modo di scrivere CSS è specificamente migliore dell'altro. In definitiva, è la tua scelta come sviluppatore quale stile preferisci, e anche in base al progetto su cui lavori. È anche comune trovare CSS in cui i designer si sono mischiati insieme! Lo sento personalmente “lavori in corso” tendono ad essere più facili con gli stili di blocco poiché sto esaminando costantemente il foglio di stile per apportare modifiche o aggiunte. Ma per i domini che sfruttano il traffico, la minimizzazione del file CSS è il modo migliore in assoluto.

Tenendoli sottili

Utilizzando i numerosi codici brevi disponibili in CSS3 è possibile risparmiare un sacco di tempo di sviluppo. La modifica di elementi HTML diventerà molto più semplice se si comprende questo gergo che consente di risparmiare tempo. Inoltre, il tuo codice apparirà più pulito e più facile da guardare.

L'unico svantaggio è che non tutti i browser supportano pienamente queste proprietà. Esistono soluzioni alternative per molti dei problemi esistenti, ad esempio in Internet Explorer e Netscape. Fortunatamente il Web sta progredendo sempre di più e con l'aumentare della popolarità di CSS3, sperimenteremo senza dubbio anche una crescita della compatibilità dei browser.

RGBa Colore Trasparenza / Opacità

Il nuovo RGBavalue non è esattamente un CSS3 proprietà, ma la trasparenza alfa è specifica solo per CSS3. Al posto dei comuni valori "Rosso verde blu" si passa per il colore che si può ora includere una quarta opzione di trasparenza del colore. Per questo motivo, gli sviluppatori web sono quasi completamente realizzati con PNG trasparenti.

La sintassi di base richiede un valore compreso tra 0 e 255 nei primi tre (3) slot e 0-1.0 nella posizione alpha. L'intervallo di colori è specifico per la quantità di ciascuna tonalità (RGB) visibile con 0 che non è nulla e 255 pieno.

 / ** sintassi ** / background: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** esempio ** / div background: rgba (255, 255, 255, 0,3);

Compatibilità cross-browser

Un'altra proprietà opacità può essere usato in alcune circostanze. Tuttavia questo influenzerà l'intero elemento HTML e il contenuto interno, non solo lo sfondo come hai visto nel mio esempio.

Sfortunatamente Internet Explorer non supporta ancora il valore del colore RGBa. In genere dovresti includere una proprietà di fallback con piena opacità per questi browser meno standard. Si imposta con gli stessi valori ma escludendo il 4 ° (opacità). Sarebbe qualcosa di simile rgba (255, 255, 255)

Inoltre, Internet Explorer può essere gestito in modo un po 'più elegante attraverso i condizionali. È possibile verificare se il browser esegue IE e visualizzare un filtro CSS Microsoft proprietario su comando. L'ho dimostrato nel mio esempio qui sotto (nota che questo apparirebbe da qualche parte nel tuo file HTML):

CSS3 Border Raggio

Ho letto alcuni thread di forum confusi sulla creazione di bordi arrotondati con CSS3 - non tanto sul lato di come è fatto, ma con il supporto del browser schizzinoso, gli sviluppatori web stanno rimescolando per il codice più semplice da inserire e funzionano come previsto.

 / ** sintassi ** / border-radius: in alto a sinistra in alto a destra in basso a destra in basso a sinistra;

Il border-radius la proprietà condivide una sintassi simile alla creazione di un bordo standard, tranne che in questo caso stiamo mirando agli angoli del riquadro. Questa proprietà accetterà in realtà 1 - 4 valori e ognuno di essi mira a una diversa configurazione degli angoli.

1 valore: Tutti e quattro gli angoli sono arrotondati allo stesso valore
2 valori: Il primo valore si applica a in alto a sinistra e in basso a destra mentre il secondo valore colpisce in alto a destra e in basso a sinistra
3 valori: Prima si applica al in alto a sinistra angolo, il secondo è entrambi in basso a sinistra & in alto a destra mentre il 3 ° e il valore finale è applicato a in basso a destra
4 valori: Tutti e 4 i valori puntano agli angoli nel seguente ordine: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra

 / ** esempio ** / div border-radius: 4px 4px 8px 4px;  div border-radius: 4px 4px 8px;

Quindi nel codice qui sopra stiamo usando border-radius applicare un effetto arrotondato di 4px su tutto tranne il in basso a destra bordo che ottiene una curva lisciata di 8px. Se l'hai notato, entrambi questi codici applicheranno effettivamente lo stesso effetto di stile.

Compatibilità cross-browser

Ora il problema principale è questo border-radius è supportato solo da alcuni browser. Internet Explorer 9 ha recentemente aggiunto un ottimo supporto e Opera lo renderà anche. Tuttavia, anche Opera ha creato la propria proprietà con -o-border-radius targeting per il loro motore di browser specifico. Inoltre -moz-border-radius è supportato dal software Firefox / Gecko e -webkit-border-radius per Google Chrome / Safari.

Il codice seguente è un esempio del mio modello bare-bone per la creazione di angoli arrotondati con il più grande supporto per browser globale.

 div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;

Fancy a Drop Shadow?

L'altro aspetto davvero impressionante di CSS3 è il supporto per scatola e ombre di testo. Questo è stato un problema per gli sviluppatori in passato poiché le immagini di sfondo erano l'unica opzione realistica. Questa sintassi segue effettivamente un ruolo stenografico molto più semplice rispetto alle altre proprietà che abbiamo trattato. È difficile ricordare l'ordine corretto dei valori chiave in un primo momento, ma più pratica metti, più facile diventerà.

Sfortunatamente Internet Explorer è ancora una volta fuori di testa. Tutti gli altri principali browser, tra cui Firefox, Google Chrome, Safari e Opera supportano pienamente text-shadow proprietà. Gli sviluppatori hanno cercato di creare il proprio supporto IE, ma è ancora molto limitante. La sintassi di base è scritta come segue:

 / ** sintassi ** / text-shadow: x-offset y-offset sfocatura-raggio di colore; / ** esempio ** / div text-shadow: 2px 2px 1px # 111;

Gli scostamenti X e Y indicano al browser quanto deve apparire in alto a destra e in basso l'ombra. Puoi usare valori negativi per posizionare l'ombra sopra e sopra a sinistra, rispettivamente. Ma questo sembra molto imbarazzante, quindi raccomando interi positivi. Inoltre, il valore del raggio di sfocatura può essere utilizzato per appianare i bordi rigidi, se l'ombreggiatura del testo appare innaturale.

Questa sintassi sta esaminando la notazione di base quando si crea un singolo effetto di ombreggiatura. Designer altamente avanzati hanno studiato per creare anche più ombre contemporaneamente! Mi riferisco a questo fantastico post sul blog risalente ad aprile 2011, che entra in grande dettaglio sull'imposizione di ombre di testo. Se hai tempo, sfoglia i contenuti solo per farti un'idea delle funzioni più avanzate e assicurati di segnalarlo come riferimento futuro!

Compatibilità cross-browser

Il più grande detrattore che incontriamo è Internet Explorer. Di tanto in tanto Microsoft ha eliminato il proprio motore di rendering del browser che ha eseguito il paragone al meglio. Ora, anche con i CSS3 che prendono il controllo delle ombre del testo, IE è ancora indietro. C'è un ottimo sito web demo in cui è possibile trovare esempi di codice e commenti condizionali CSS tradizionali.

Fondamentalmente stai cercando di verificare se il browser utilizzato dall'utente corrisponde a qualsiasi versione di Internet Explorer 9 o inferiore. Quindi usando i filtri MS possiamo applicare un'ombra in qualsiasi elemento di testo (sopra, stiamo usando un paragrafo).

Facilitando le transizioni

CSS3 transizione è la proprietà più calda sul mercato del design da quando le frittelle della nonna! I web designer hanno fatto tanto scalpore riguardo alle transizioni CSS pure, anche se il supporto è principalmente limitato ai browser Webkit. Ovviamente è possibile utilizzare proprietà secondarie per Mozilla e Opera e simili. Ma la notazione abbreviata è davvero accattivante, specialmente se sei contro le animazioni JavaScript per qualsiasi motivo.

Per prima cosa diamo un'occhiata alla proprietà di transizione originale. Ciò richiederà 4 valori che potresti anche scomporre in proprietà. Corrispondono alla transizione proprietà(qual è l'effetto), durata(quanto tempo per estrarlo), temporizzazione funzione(cambiamenti di velocità rispetto all'animazione), e ritardo(numero di secondi da attendere prima di animare).

/ ** sintassi ** / transizione: ritardo della funzione temporizzazione della funzione; / ** esempio ** / img transizione-proprietà: opacità; durata della transizione: 2 secondi; funzione di temporizzazione della transizione: easy-in; ritardo di transizione: 0,5 s;

Dovresti comprendere intuitivamente lo scopo della maggior parte di queste proprietà, ad eccezione forse della funzione di cronometraggio. Inizialmente confusa, questa proprietà anima semplicemente la transizione in modo diverso in modo che l'effetto inizi più lentamente, termini più lentamente o qualcosa di simile.

W3 Schools ha una funzione di sincronizzazione online che elenca tutti i possibili valori che puoi provare. Mi trovo costantemente a cercare su Google queste guide, eppure fanno questi segnalibri a portata di mano.

Compatibilità cross-browser

Ora mettiamo in gioco il supporto completo del browser. Per impostazione predefinita, la proprietà di transizione è solo supportato dalle nuove versioni di Safari. Eppure molti utenti richiedono ancora il -webkit prefisso che si applica anche a Google Chrome e motori di rendering simili. Di seguito è un “finalizzato” modello di blocco di codice che consiglio di salvare e utilizzare se hai bisogno del supporto per la transizione dalla maggior parte dei browser web.

 img transition: opacity 2s ease-in 1s; -webkit-transition: opacity 2s ease-in 1s; / * chrome, safari, flock * / -moz-transition: opacity 2s ease-in 1s; / * mozilla + gecko * / -o-transition: opacity 2s ease-in 1s; /* musica lirica */

Effetti del tratto di testo

Questa proprietà non è enorme e non troverai molti web designer che lo utilizzano oggi. Ma puoi usare text-stroke per creare alcuni effetti davvero accurati con i tuoi font. I browser Webkit come Safari e Chrome sono gli unici veri sostenitori di questa proprietà fino ad ora. Opera e Firefox hanno difficoltà nel rendering di oggetti di testo con questi stessi contorni.

 / ** sintassi ** / p -webkit-testo-tratto: larghezza colore;  / ** example ** / p -webkit-text-stroke: 1px # 222;

Compatibilità cross-browser

Se senti la necessità di effetti del tratto di testo, dovresti sempre includere un colore di backup. Mozilla e Opera possono farcela, tuttavia gli utenti di Internet Explorer non hanno altre opzioni. Purtroppo questa è una delle nuove proprietà CSS3 che non ha raccolto abbastanza supporto dalla comunità di sviluppatori del browser web. Dovresti passare un po 'di tempo a giocare con questo fantastico strumento web creato appositamente per costruire questi contorni di testo CSS3.

Box-dimensionamento

La proprietà di ridimensionamento della casella offre un maggiore controllo sulla larghezza / altezza totale di qualsiasi elemento del blocco. Di default la larghezza / altezza + bordo + margine + riempimento costituiscono la dimensione totale di una scatola. Tuttavia, usare border-box sul tuo contenuto spinge tutto il tuo padding e i tuoi margini interiore per mantenere la larghezza esattamente uguale. Ci sono solo due valori per questa proprietà, con contenuti-box essere il default.

div width: 550px; imbottitura: 9px; dimensionamento della scatola: border-box; / * la larghezza rimarrà a 550px * /

Come puoi immaginare, questo ti tornerà utile durante la tua carriera in CSS. Il riempimento e i margini possono essere un vero dolore e quando si aggiungono bordi si tende a perdere la traccia dei pixel.

Compatibilità cross-browser

Opera e IE 8 supportano questa nuova proprietà per impostazione predefinita. IE7 e versioni successive sono bloccati con l'impostazione della casella di contenuto a meno che i visitatori non utilizzino la modalità quirk. Le uniche aggiunte che dovresti sapere su come target specifici webkit e motori di browser basati su Mozilla.

div -webkit-box-dimensionamento: border-box; / * Safari / Chrome * / -moz-box-dimensionamento: border-box; / * Firefox * / dimensionamento della scatola: border-box; / * Opera / IE8 + * /

Pure CSS3 Columns

Le colonne sono un po 'complicate con i CSS3 ma possono essere realizzate con un codice minimo. Le 2 proprietà su cui vuoi focalizzarti sono column-count e column-gap. Il conteggio fa riferimento al numero totale di colonne che si desidera applicare mentre il divario crea un margine tra ciascuna.

 div # cols numero-colonna: 3; column-gap: 10px;

Nel mio esempio possiamo vedere i #coli ID usati come contenitori. All'interno dividiamo il div in 3 colonne con una distanza di 10px tra ciascuna. Inoltre potresti impostare larghezza della colonna che viene utilizzato per impostare la larghezza totale di ogni colonna invece di elencare un numero solido.

Compatibilità cross-browser

Qualsiasi cosa prima di IE8 semplicemente non sarà in grado di utilizzare questa proprietà. Ma come abbiamo visto in ogni esempio, Mozilla e Webkit offrono le proprie soluzioni per più browser. Se hai bisogno di un modello controlla il mio piccolo codice di esempio qui sotto:

 div # sidebar width: 210px; -moz-column-count: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; numero di colonne: 3; column-gap: 7px;

Custom @ font-face

Devi aver sentito parlare dell'eccitazione riguardante i font personalizzati CSS3. Bene usando la proprietà @ font-face possiamo importare stili di font esterni e usarli come qualsiasi altra famiglia. La sintassi è alquanto complicata e dovrai dedicare del tempo a farlo bene. Il blocco per @ Font-face è usato per definire un nome di famiglia, in seguito puoi usare questo nel tuo famiglia di font proprietà ovunque!

 @ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Solo Internet Explorer * /

Quindi vedi sopra che non sto mirando a nessun tipo di carattere specifico, ma la sintassi è ciò che dovrebbe risaltare. Si noti che Internet Explorer supporta solo .EOT tipi di carattere, mentre .ttf e .otf sono opzioni popolari per gli altri browser. Inoltre, è importante comprendere che è possibile trasferire gli URL dei caratteri da collegamenti diretti, ad es. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');

Non c'è un vero problema di cross-browser con questa configurazione poiché tutti i motori di rendering possono analizzare questi tipi di file di font. Ricorda che per il supporto di IE devi includere una versione di eot e l'originale. Ritengo che l'articolo delle W3 Schools abbia un catalogo delle informazioni più importanti da verificare.

Conversione in CSS miniatura

Questo argomento viene discusso frequentemente in quanto serve a uno scopo diverso per ciascun progetto. Da un lato, gli sviluppatori web dedicano molto tempo a scrivere i loro fogli di stile. Non c'è modo di crittografare questo tipo di dati in chiaro e nasconderlo da occhi snooping. Se stai cercando di impedire agli altri di rubare sfacciatamente il tuo codice, il meglio che puoi fare è ingombrare gli stili e rimuovere tutte le interruzioni di riga / spazi.

Questo processo può essere etichettato come miniaturizzazione il tuo codice. Generalmente gli sviluppatori scriveranno il CSS in formato standard e quindi rimuoveranno tutti gli spazi bianchi prima di caricarli sul server web. Quindi è possibile modificare rapidamente una copia locale fornendo al tempo stesso una versione più piccola sul progetto live. Questo metodo può ovviamente essere utile per ridurre i carichi di pagina e tenere a bada i dirottatori di codice.

Il link che ho postato sopra che porta a Minify CSS ha alcuni materiali di lettura terrificanti sull'argomento. Il sito fornisce anche uno strumento basato su browser per rimuovere tali spazi bianchi e restituzioni di chiavi dal codice. CSS Compressor è un'altra opzione con una semplice interfaccia che viene eseguita direttamente all'interno del tuo browser web. Ho anche sentito cose positive su Clean CSS, anche se non ho mai usato l'app da solo.

Link correlati

Per continuare a spingere in avanti ho fornito sei collegamenti utili da tutto il Web. Questi includono non solo la notazione abbreviata, ma anche guide e tutorial utili per accedere quando si pratica questo nuovo codice CSS abbreviato.

Guida per principianti al CSS3
Guida stenografica CSS
Stai usando CSS3 in modo appropriato?
Contenuto CSS e tabella di compatibilità del browser
Miglioramento progressivo CSS3 + = Design intelligente
Completa l'indice delle proprietà CSS / CSS3

Conclusione

Ci vuole molta dedizione e pratica per scrivere codice CSS per costruire un programma concreto che puoi seguire per ogni progetto. La maggior parte dei web designer è felice di raccogliere nuovi progetti e idee, quindi troverai sicuramente il tempo per esercitarti con questi utili suggerimenti di codifica. Prova a copiare un piccolo foglio di riferimento per la tua convenienza nel caso in cui non riesca a trovare nessun cheat-sheet o, peggio ancora, perdi la connessione a Internet!

Conosci altre utili proprietà CSS3 o scorciatoie? Ci piacerebbe sentire i tuoi pensieri e le tue idee nei commenti della discussione. Gli sviluppatori Web stanno spingendo per una maggiore standardizzazione all'interno del W3C e chiaramente la transizione è diventata più semplice. CSS3 offre fantastici vantaggi e se riesci a padroneggiare la codifica stenografica, questo manterrà le dimensioni del tuo file basse e scoraggerà i copycats dal rubare il tuo codice.