Le nuove tecnologie stanno rendendo lo sviluppo web più eccitante che mai. HTML5 e CSS3 forniscono una doppia dose di pratiche moderne assolutamente rinfrescanti e responsabilizzanti. Sfortunatamente, l'utilizzo di queste tecnologie può complicare notevolmente la tua ricerca di compatibilità tra browser.
Come puoi sapere quali tecniche sono sicure da usare adesso e quali dovresti fornire alternative o evitare del tutto? Unisciti a noi mentre diamo uno sguardo a una manciata delle nostre risorse preferite che ti aiuteranno rapidamente e facilmente a prendere decisioni informate sull'attuazione del mondo reale HTML5 e CSS3.
Semplicemente irresistibile
La compatibilità con i browser incrociati è stata abbastanza difficile alcuni anni fa, prima di iniziare a esplorare nuove fantasiose tecnologie come HTML5 e CSS3. Ora con questi strumenti striscianti in prima linea nei nostri metodi di sviluppo, può essere un vero casino.
I vantaggi dell'utilizzo di HTML5 e CSS3 sono chiari e innegabili. Sono così pieni di leccornie e divertimento che nessuno degli sviluppatori su dieci può resistere almeno immergendo un dito per testare le acque. Per promuovere la campagna pubblicitaria, autori come me sono costantemente alla ricerca di fantastici nuovi tutorial che ti insegnano i dettagli di queste tecnologie, alimentando così il tuo desiderio di metterle in pratica il prima possibile.
Stiamo correndo in anticipo?
Mentre la maggior parte di noi si sta buttando a capofitto nell'utilizzare le ultime e più grandi tendenze di sviluppo del web, poche altre anime razionali ci implorano di rallentare. I nuovi giocattoli sono tutti buoni e buoni ma gran parte di questa roba è ancora in costruzione e il resto non è stato implementato bene su tutti i browser più importanti.
Allora, chi ha ragione? Come potete, in qualità di sviluppatori pratici e reali, sapere se acquistare l'hype e correre con il nuovo o fidarsi degli scettici e attenersi ai metodi provati e veri degli anni passati?
Stop the Guesswork
L'unica cosa migliore che puoi fare per decidere se puoi personalmente iniziare a implementare nuove tecnologie web è educarti sul supporto che puoi aspettarti per ogni nuovo elemento nei vari browser che contano di più per il tuo pubblico.
Sembra un sacco di lavoro vero? Ci sono innumerevoli blogposts, libri e siti web dedicati a insegnarti questa roba, abbastanza da mangiare un'intera vita e molto altro ancora. La quantità di materiale è talmente schiacciante che potresti evitare di imparare semplicemente dall'intimidazione.
Fortunatamente, ci sono alcuni modi molto semplici e diretti per assicurarsi che ciò che stai facendo funzioni bene su vari browser. Non dovrai smistare lunghi post del blog o leggere una pila di libri ogni volta che vuoi lanciarti in un'ombra, avrai solo bisogno di dare un'occhiata veloce ad alcune risorse selezionate per iniziare.
Grafici di compatibilità del browser: il migliore amico di uno sviluppatore
La prima cosa che ti consiglio di fare nella tua ricerca per capire quali nuove tecnologie puoi implementare oggi è quella di aggiungere uno o due solidi grafici di compatibilità del browser.
Queste risorse sono inestimabili e possono farti risparmiare ore di ricerca infinite. Servono da riferimento rapido che ti aiuta immediatamente a identificare quali browser fanno e non supportano le tecniche che stai cercando di implementare. Alcune delle scelte migliori offrono anche aiuto per far funzionare i browser più vecchi.
Quando posso usare?
Caniuse.com non è certamente l'opzione più carina disponibile per i grafici di compatibilità dei browser, ma è uno dei più utili e completi.
L'organizzazione qui è molto semplice e facile da usare: basta fare clic su un elemento da una delle cinque categorie (CSS, HTML5, SVG, API JS e Altro) e sarai indirizzato a un grafico che mostra il supporto per vari browser. Inoltre, la ricerca fornisce risultati istantanei mentre digiti, le risposte a tutte le domande del browser non saranno mai più di poche sequenze di tasti.
Ad esempio, diciamo che leggi il mio recente articolo su: before e: after e vorrei ricontrollare le mie dichiarazioni sulla compatibilità del browser per: dopo pseudo elemento (controlla sempre sempre i tuoi dati!), Tutto ciò che devi fare è digitare? dopo? nella barra di ricerca e apparirà la tabella qui sotto.
Ci sono un sacco di ottime informazioni qui per voi da utilizzare. Il grafico ci informa che abbiamo un grande supporto a tutti i livelli per i browser attuali (anche IE), ma abbiamo qualche problema con due versioni precedenti con IE7 e precedenti.
Oltre al grafico di compatibilità, troverai altri due oggetti di valore: una funzione di confronto tra browser e un elenco di risorse utili.
Quest'ultimo di questi spesso include alcuni link davvero fantastici. Ad esempio, se stai cercando nuove funzionalità CSS3 come i gradienti, potresti ottenere un link per un generatore che farà il lavoro per te. Nel caso sopra abbiamo ricevuto un link per una guida dettagliata che spiega l'uso del contenuto generato da CSS usando pseudo elementi.
La tabella di compatibilità del browser consente di scegliere due browser e di visualizzare una panoramica del supporto per gli articoli in una delle cinque categorie menzionate in precedenza.
FindMeByIP
Se stai cercando di rinunciare a tutte le funzionalità del sito precedente a favore di alcuni semplici vecchi grafici di compatibilità del browser che puoi aggiungere ai segnalibri e fare riferimento in un attimo, consulta la pagina di supporto HTML5 e CSS3 su FindMeByIP.
Come puoi vedere, i grafici qui sono abbastanza attraenti e molto facili da leggere. Questi sono perfetti per quando hai solo bisogno di ricontrollare rapidamente qualcosa o ottenere una panoramica del supporto del browser su tutta la linea.
Dovresti usarlo?
I grafici di compatibilità del browser sono eccezionali per farti sapere se un determinato browser supporta o meno quello che stai cercando di implementare, ma ti consentono solo di prendere decisioni, devi comunque interpretare le informazioni e decidere se è sicuro procedere.
Se sei un nuovo sviluppatore, questo può intimidire. Per aiutarti ulteriormente, assicurati di controllare HTML5 per favore. Questo progetto di sourced community out ti dice se usare o meno una determinata tecnica e formulare raccomandazioni su come procedere. Non dovresti mai seguire ciecamente qualcosa, ma quando sei sulla recinzione puoi sicuramente aiutarti a effettuare la chiamata.
Come con Quando posso usare, la barra di ricerca qui fornisce risultati istantanei durante la digitazione. Diciamo che vuoi sapere se le transizioni CSS sono sicure da implementare, semplicemente inserisci? Transizioni? e i risultati filtreranno come segue:
Subito riceviamo una raccomandazione per l'uso, mostrata nell'angolo in alto a destra del risultato:
? Utilizzare con fallback? è il consiglio che ci viene dato per le transizioni CSS. Ciò è accompagnato da alcune informazioni brevi e dirette che ci dicono che le transizioni sono sicure se non sono necessarie per un'esperienza utilizzabile e che qualsiasi transizione critica di interazione deve essere supportata con un'alternativa per altri browser. Vengono forniti anche i prefissi del browser necessari per l'implementazione. Per molti articoli, vengono forniti i polilibrati consigliati per rendere la tua implementazione più compatibile con i browser.
Modernizr ha la schiena
La risorsa finale di cui hai bisogno per familiarizzare con la ricerca di CSS3 e HTML5 compatibili con più browser è Modernizr. Ne hai già sentito parlare prima, ma è ora di scaricarlo e verificarlo.
La ragione per cui Modernizr è così grande è che può rilevare automaticamente se un browser supporta o meno una determinata funzione e quindi fornire una certa magia JavaScript in risposta. Ciò consente di tenere conto di una vasta gamma di circostanze e fornisce fallback e polyfill JavaScript per i browser meno recenti con uno sforzo minimo.
Modernizr testerà il supporto per oltre 40 funzionalità next-gen, fornirà informazioni in movimento per dirti cosa sarà o non sarà supportato e fornirà le migliori soluzioni disponibili per aiutarti a rispondere a eventuali problemi di supporto.
Conclusione
Le risorse di cui sopra sono tutte finalizzate ad aiutarti a prendere decisioni informate sull'opportunità o meno di implementare una determinata tecnica HTML5 o CSS3.
I grafici di compatibilità del browser forniscono un rapido riferimento a come puoi aspettarti che ciascun browser risponda a una determinata tecnica, HTML5 Ti forniremo solidi e onesti consigli per continuare o meno, e Modernizr ti aiuterà a identificare e colmare le lacune di funzionalità in un design specifico.
Queste risorse non ti mettono in difficoltà per approfondire la comprensione di come implementare correttamente queste funzionalità, ma servono come una guida di partenza eccezionale per come e quando procedere.
Lascia un commento qui sotto e parlaci delle tue risorse preferite in quest'area. Usi qualcuno dei siti sopra elencati? Quali altri strumenti sono inestimabili per il tuo flusso di lavoro?