Best practice CSS3 per i progettisti
Se sei principalmente un designer e hai appena iniziato a imparare CSS, probabilmente hai iniziato a incorporare alcune delle nuove funzionalità CSS che sono state aggiunte alla lingua in CSS3 .
Ma se non hai molta esperienza con i CSS, probabilmente stai cercando di capire qual è il modo migliore per gestire alcune delle sfide che sorgono dall'uso di più prefissi dei fornitori, che riguardano le versioni precedenti di Internet Explorer, e altri dilemmi specifici per CSS3.
In questo articolo, cercherò di illustrare alcune delle cose importanti da ricordare quando si tratta di questi problemi. Tieni presente che nulla qui è scolpito nella pietra, ma queste dovrebbero essere solo linee guida per aiutarti a scrivere codice più efficace, più facile da mantenere e a prova di futuro.
Conosci i tuoi grafici di supporto
Probabilmente non dovrai memorizzare quali funzioni funzionano in quali browser. Nella maggior parte dei casi, le funzionalità CSS3 non funzioneranno in tutti i browser in uso. E in alcuni casi, anche le versioni più recenti dei browser non hanno il pieno supporto.
Quindi la prima cosa che dovresti fare è capire dove manca il supporto. La risorsa principale che dovresti usare è la Quando posso usare ... sito, che include grafici per CSS3, HTML5 e altre ancora. Puoi anche fare confronti fianco a fianco con diversi browser, come mostrato nello screenshot sottostante confronta il supporto CSS3 in Firefox 3.6 rispetto a IE9 :
Sebbene When can I use ... è probabilmente l'unica fonte di grafici di supporto di cui avrai bisogno, ecco alcune altre opzioni da considerare:
- Grafico clic CSS3
- Compatibilità con contenuti e browser CSS
- Compatibilità CSS e Internet Explorer
- Confronto tra i motori di layout (CSS)
Ma sappi che sebbene una caratteristica CSS possa essere elencata da qualche parte come "supportata", ciò non significa che non ci siano errori o incongruenze. Quindi prova a fondo.
Non usare eccessivamente i polifragi
A causa della pressione del cliente o dell'agenzia, o semplicemente del fatto che vuoi che tutto funzioni e funzioni allo stesso modo ovunque, potresti essere tentato di usare i molti Polyfills CSS .
Ma molti di questi script possono rallentare notevolmente le pagine, specialmente se ne usate più di una. Ci sono molti studi e fonti ciò dimostra l'importanza della velocità di un sito Web, quindi qualsiasi polifratura dovrebbe essere considerata attentamente e tenendo conto del miglior interesse generale del tuo sito o dell'app.
Per aiutarti a decidere cosa fare il polyfill e cosa permettere di degradare a un'esperienza minore, usa il HTML5 per favore luogo. Come mostrato nello screenshot di esempio di seguito, HTML5 ti consigliamo spesso di evitare i polyfill per alcune funzionalità:
Prova come degradano le caratteristiche
Se stai evitando un sacco di polyfill, allora naturalmente dovrai consentire a molte funzionalità di CSS3 di degradarsi a un'esperienza più primitiva nei browser più vecchi (di solito IE6-8). Ma non dare per scontato che ciò avverrà automaticamente.
In molti casi (ad esempio, quando si utilizzano più sfondi), si dovrà dichiarare una proprietà che viene sovrascritta dalla funzione CSS3, ma che verrà comunque visualizzata nei browser più vecchi.
Ad esempio, per più sfondi, potresti fare questo:
.element {background: url(images/fallback.jpg) no-repeat;background: url(images/example.png) center center no-repeat,url(images/example-2.png) top left repeat;}Si noti la singola immagine di sfondo dichiarata prima della riga di più immagini di sfondo. I browser non di supporto visualizzeranno la singola immagine ma ignoreranno la seconda linea. I browser di supporto leggeranno entrambe le righe, ma la prima riga verrà sovrascritta dalla seconda.
Alcune altre funzionalità CSS3 che potrebbero beneficiare di questo tipo di fallback sono i colori RGBA, i colori HSLA e le sfumature.
Per aiutarti a vedere come le funzionalità CSS3 si degradano nei browser più vecchi, puoi utilizzare un bookmarklet chiamato deCSS3 .
Attualmente funziona solo in Chrome e Safari, ma è sufficiente trascinare il link sulla barra dei preferiti e quindi fare clic sul collegamento in qualsiasi sito che desideri "de-CSS3" e visualizzerà il sito con ombre di testo, angoli arrotondati e altro nuove cose rimosse. Ovviamente, questo non è un sostituto per i veri test del browser, ma può fungere da utile guida per uno sviluppo più veloce prima di eseguire i test finali verso la fine del progetto.
Un altro strumento per aiutare a gestire fallback è il Modernizr Libreria JavaScript Ma se sei intimidito dalle biblioteche, non essere. Modernizr non è difficile da trattare da una prospettiva CSS. Check-out questo tutorial per un'introduzione senza dolore.
Gestione dei prefissi dei fornitori
Una delle parti disordinate di CSS3 sta avendo a che fare con tutti i diversi prefissi dei fornitori. Mantenere il codice che utilizza tutti i prefissi è noioso e in alcuni casi non è necessario averli tutti. Chi può ricordare quando includere "-o-" o "-ms-" e quando no?
Bene, come accennato, l'utilizzo delle tabelle di supporto aiuterà. Ma ecco alcuni suggerimenti per aiutare a gestire i prefissi dei fornitori.
Usa un preprocessore CSS
I preprocessori sono di gran moda in questo momento. Ma i principianti ei designer di CSS che non sono sviluppatori o programmatori esperti potrebbero avere difficoltà a gestire questi nuovi strumenti.
Quindi, anche se i pre-processori non sono certamente per tutti, sono sicuramente da considerare, perché possono seriamente migliorare i tempi di produzione e manutenzione.
Un'ampia discussione sui preprocess è certamente al di là di questo articolo, ma qui ci sono alcuni link per iniziare:
E se trovi quella roba troppo pesante, Chris Coyier di CSS-Tricks ne ha alcuni pensieri sui preprocessori questo potrebbe aiutarti a ottenere una visione d'insieme. Ed ecco un post su Nettuts + che copre alcune delle caratteristiche e dei vantaggi dell'utilizzo di alcuni dei più famosi preprocessori CSS.
Sii coerente nel tuo codice
Se si sceglie di non preelaborare il CSS utilizzando una delle tecnologie sopra citate, sarà necessario gestire tutti i prefissi dei fornitori. Quindi assicurati di scegliere uno stile e un ordine per i prefissi dei tuoi fornitori e di attenervisi. In questo modo, il tuo codice sarà più facile da leggere e conservare.
Ad esempio, alcuni sviluppatori CSS inseriscono le loro linee di prefisso del fornitore in ordine alfabetico e utilizzano il rientro in modo che i valori vengano allineati in questo modo:
.element {-moz-transition: background-color linear .8s;-ms-transition: background-color linear .8s;-o-transition: background-color linear .8s;-webkit-transition: background-color linear .8s;transition: background-color linear .8s;}Questo è solo un modo per farlo. Ma qualunque metodo tu scelga, sii coerente con tutto il codice. Questo sarebbe particolarmente importante se lavori su una squadra in cui gli altri devono leggere e / o mantenere il tuo codice.
Naturalmente, non tutte le funzionalità CSS3 sono facili da organizzare (ad esempio, il codice per le animazioni dei fotogrammi chiave è molto più complicato), ma per la maggior parte delle funzionalità dovresti essere in grado di avere uno stile coerente che rende più agevoli lo sviluppo e la manutenzione.
E la proprietà standard?
Noterai nell'esempio nella sezione precedente, l'ultima proprietà dichiarata dopo che le linee del venditore sono la versione standard della proprietà. Se hai intenzione di includere la proprietà standard, questo è sicuramente come dovresti farlo. Quindi includilo sempre per ultimo quando lo aggiungi.
Questo per garantire che l'implementazione del fornitore della funzione venga sovrascritta dall'implementazione standard. Ma c'è un avvertimento qui.
Per alcune animazioni e interazioni complesse, è concepibile che l'implementazione possa cambiare così tanto che quando il browser inizia a supportare la proprietà standard, potrebbe avere effetti indesiderati. Quindi in alcuni casi, potrebbe essere meglio lasciare del tutto la proprietà standard.
Ho scritto su questo argomento in modo più approfondito sul mio blog , quindi verificalo se vuoi una discussione più completa su questo problema.
Utilizza Prefixr
Uno dei modi più semplici per gestire tutte le stranezze dei venditori cross-browser consiste nell'utilizzare un piccolo strumento pratico chiamato Prefixr . Con Prefixr, devi solo sviluppare il tuo codice come sempre, e puoi semplicemente utilizzare un unico prefisso del venditore (ad esempio, solo "-moz-") per tutti i tuoi CSS3. Quindi, una volta terminato il test in quell'unico browser e tutto funziona come preferisci, inserisci il tuo codice in Prefixr e genererà tutto il codice del fornitore aggiuntivo.
Prefixr può anche essere integrato automaticamente con il tuo editor di testo e include il supporto per il lungo codice di animazioni di fotogrammi chiave. In alternativa, puoi anche provare uno strumento che ho creato chiamato Codice di riempimento dell'animazione che aggiunge il codice del fornitore aggiuntivo per le animazioni dei fotogrammi chiave.
Prova accuratamente
L'ultimo suggerimento che darò qui è di testare accuratamente tutti i browser che stai supportando. Puoi utilizzare dozzine di strumenti e librerie per assisterti nello sviluppo di CSS3, ma nulla può sostituire test approfonditi in ambienti di browser reali.
E questo consiglio sarebbe particolarmente importante se hai a che fare con un sacco di CSS3 reattivi legati alla progettazione (ad es. Query multimediali) e un uso massiccio di funzionalità tipografiche. Desideri che i tuoi contenuti siano utilizzabili e leggibili su tutti i browser, anche se le funzionalità CSS3 non sono disponibili.