10 metodi di fallback utili per CSS e Javascript

I fallback di codice sono la soluzione perfetta per compromettere i tuoi numerosi visitatori unici. Non tutti sul Web utilizzano lo stesso sistema operativo, il browser Web o persino l'hardware fisico. Tutti questi fattori sul modo in cui la tua pagina web verrà effettivamente visualizzata sullo schermo. Quando si lavora con nuovi trucchi CSS o JavaScript, si incontrano spesso errori tecnici di questo tipo.

Ma non lasciarti scoraggiare da queste insidie! In questa guida ho messo insieme alcuni dei tecniche di fallback più comuni per i web designer che si concentrano su CSS e JavaScript / jQuery. Quando tutto il resto fallisce, si desidera fornire agli utenti almeno una funzionalità di base della pagina. La semplicità regna sovrana nel campo della progettazione dell'esperienza utente.

Controlla la nostra guida qui sotto e facci sapere i tuoi pensieri e domande nella sezione commenti.

1. Angoli arrotondati con immagini

Le tecniche CSS3 sono salite alle stelle nel web design mainstream. Una delle proprietà più importanti è border-radius che consente di ottenere angoli arrotondati al volo. Questi sono belli praticamente su qualsiasi pulsante, div o casella di testo. L'unico problema è il supporto limitato tra i browser web.

Molti browser meno recenti, incluso Internet Explorer 7, non supportano questa proprietà. Quindi, per mantenere gli angoli arrotondati che funzionano per tutti i browser standard, è necessario creare un fallback con le immagini.

Il codice standard utilizza le normali proprietà CSS3 sul div principale, pur accettando le immagini su ciascuno degli angoli. Probabilmente dovrai configurare alcune div aggiuntive nel contenitore principale che vengono utilizzate per visualizzare le immagini degli angoli sullo sfondo.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') no-repeat in alto a sinistra;  #mainbox .topc span background: url ('corner-tr.png') no-repeat in alto a destra;  #mainbox .btmc background: url ('corner-bl.png') no-repeat in basso a sinistra;  #mainbox .btmc span background: url ('corner-br.png') no-repeat in basso a destra;  

Per salvarti dallo stress ti consiglio caldamente di usare un'app come RoundedCornr. Si tratta di un'applicazione web nel browser che genera CSS angolo arrotondato che utilizza sia CSS3 sia immagini. Ciò sarà particolarmente utile per i progettisti che non hanno accesso a software di grafica come Photoshop o GIMP.

2. Sistema di menu a discesa jQuery

I menu a discesa sono perfetti per il Web di oggi. Tuttavia, il problema più grande sono i visitatori che accedono al tuo sito web senza il JavaScript abilitato. In questo caso nessuno dei tuoi menu funzionerebbe affatto! La soluzione migliore è usare CSS per visualizzare / nascondere ciascuno dei blocchi div sottomenu e visualizzarli su hover.

L'unico problema con questa soluzione è che Internet Explorer 6 non supporta questi selettori hover CSS. Tuttavia IE7 + funziona alla grande; e naturalmente tutti i browser funzioneranno bene se JavaScript è abilitato in primo luogo. Il codice di questo tutorial su CSS Plus è una delle migliori risorse che ho trovato. Fornisce non solo una soluzione con jQuery ma anche il CSS necessario per i problemi di IE.

/ * Una classe di corrente verrà aggiunta tramite jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS fallback * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

fonte

Un'altra soluzione alternativa che puoi provare è semplicemente la visualizzazione di ciascuno dei menu in IE6. È possibile utilizzare i commenti condizionali di Internet Explorer per applicare i fogli di stile in base alla versione del browser. Certo, questa non sarà la soluzione più bella, ma funzionerà semplicemente.

Se non ritieni che Internet Explorer 6 sia più di una preoccupazione, non preoccuparti nemmeno di questo fallback alternativo. Il tutorial e il successivo codice di cui sopra dovrebbero essere sufficienti per caricare il menu JavaScript anche con CSS rigido in tutti i principali browser.

3. Stili di Internet Explorer mirati

Sono sicuro che tutti sappiamo dei problemi di rendering che escono da Internet Explorer di Microsoft. Posso dare un po 'di credito per il loro ultimo IE8 e prospettive future con IE9. Tuttavia, esiste ancora un piccolo pubblico che esegue IE6 / IE7 e non è ancora possibile ignorarli.

(Fonte immagine: github)

I commenti condizionali come menzionato nell'ultima sezione possono essere utili per riformattare le aree della pagina. Ad esempio, se si dispone di un menu a discesa con navigazione secondaria in IE6 che verrà visualizzato solo tramite JavaScript, non si riuscirà a provare CSS come metodo di fallback. Invece la soluzione migliore è visualizzare ciascun sottoelenco come blocco di navigazione.

Aggiungendo il codice sopra all'intestazione del documento è possibile specificare il tipo di visualizzazione per ogni sotto-navigazione. La parte migliore di questo fallback è che puoi sovrascrivere il CSS e mostrare / nascondere i menu in modo dinamico quando JavaScript è abilitato. Altrimenti mostrerai solo un elenco aperto di link. Potresti usare un codice simile a quello che ho aggiunto di seguito.

#nav li position: relativo; larghezza: 150 px; / * deve impostare una larghezza finita per IE * / #nav li ul / * codici sub-nav * / display: block; posizione: assoluta; larghezza: auto; / * definisce la propria larghezza o imposta nell'elemento li * / #nav li ul li larghezza: 100%;  

4. Legacy IE Opacity / Transparency

Uno dei tanti fastidiosi bug di Internet Explorer è l'accordo con l'opacità. Le impostazioni di trasparenza alfa in CSS3 possono essere modificate attraverso la proprietà di opacità. Tuttavia, per quanto riguarda Microsoft, solo Internet Explorer 9 attualmente supporta questa funzione.

La migliore soluzione per il targeting di IE6 + è attraverso filtro, un ambiente proprietario riconosciuto solo da IE. Guarda il breve esempio di codice qui sotto:

.mydiv opacità: 0,55; / * CSS3 * / filter: alpha (opacity = 55); / * IE6 + * / 

Tutto quello che devi fare è includere la riga sopra all'interno di qualsiasi elemento che richiede trasparenza. Si noti che simile alla proprietà CSS3, tutti gli elementi figlio erediteranno anche questa modifica di opacità. Se stai cercando un metodo più recente che si rivolga specificamente a IE8, controlla il codice qui sotto. Si comporta nello stesso modo in cui la nostra proprietà filtro viene riconosciuta dal parser Microsoft IE8.

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * / 

5. Creazione di pulsanti CSS3 con immagini di fallback

I pulsanti sono un fantastico elemento web per tutti i tipi di interfacce. Possono comportarsi come input di moduli, elementi di navigazione o anche collegamenti diretti alle pagine. Con CSS3 è ora possibile formattare pulsanti con molti stili unici come gradienti di sfondo, ombre di riquadri, angoli arrotondati, ecc.

Tuttavia non puoi fidarti che tutti i tuoi visitatori saranno in grado di rendere queste nuove proprietà. Quando si crea un disegno di fallback per pulsanti (o anche elementi di interfaccia utente simili) ci sono due opzioni distinte. Il primo è quello di includere un'immagine di sfondo progettata esattamente come dovrebbe apparire il CSS. Questo può essere facilmente realizzato in Photoshop. Tuttavia, se non sei un esperto nel software, questo potrebbe essere problematico.

L'alternativa è ricorrere a un semplice colore di sfondo e stili CSS più semplici. Sto usando alcuni degli esempi di codice del bel post di CSS-Tricks sui gradienti CSS3. Tutti i principali browser tra cui Safari, Firefox, Chrome e persino Opera supportano queste proprietà. L'area in cui ti imbatterai nei problemi è supportata dai browser legacy: i vecchi motori Mozilla, IE6 / 7, forse persino Mobile Safari.

.gradient-bg background-color: # 1a82f7; / * utilizza una tinta unita nel peggiore dei casi * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 2F2727), a (# 1a82f7)); background-image: -webkit-linear-gradient (in alto, # 2F2727, # 1a82f7); background-image: -moz-linear-gradient (in alto, # 2F2727, # 1a82f7); background-image: -ms-linear-gradient (in alto, # 2F2727, # 1a82f7); background-image: -o-linear-gradient (in alto, # 2F2727, # 1a82f7);  

fonte

L'unico piccolo problema con l'utilizzo esclusivo delle immagini come metodo di fallback è che non si avrà una modifica dello stato attiva quando l'utente fa clic su un pulsante. Potresti creare due immagini diverse per questi stati regolari e attivi, sebbene ci vorrebbe un lavoro extra. Solo questo motivo può spingerti a usare un colore di sfondo a tinta unita invece delle immagini di fallback. Prova un paio di soluzioni diverse per vedere quale è l'aspetto migliore nel tuo layout.

6. Verifica del contenuto mobile

Un'altra enorme tendenza nel 2012 è la popolarità della navigazione Internet mobile. Gli smartphone sono ovunque e i dati su 3G / Wi-Fi stanno diventando sempre più accessibili. Così molti designer cercheranno di fornire un layout di fallback per gli utenti mobili.

Un paio di popolari browser Web mobili renderanno le pagine simili a un ambiente desktop. Safari e Opera Mobile sono meglio conosciuti per questo, anche supportando molti comuni script jQuery. Ma queste pagine non sono sempre ottimizzate per i dispositivi mobili e c'è spazio per espandersi su UX.

Esistono due modi per rilevare i browser mobili e visualizzare un layout o un foglio di stile alternativo. Il primo è attraverso JavaScript che funziona alla grande come strumento di frontend. Lo script che ho aggiunto di seguito è molto semplice e controlla solo gli utenti di iPhone / iPod Touch. Detect Mobile Browsers è un fantastico sito Web che offre uno script più dettagliato che puoi eseguire.

// Reindirizza la funzione iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.yourdomain.com";  

Ora l'altra alternativa è controllare un linguaggio di back-end come PHP. È possibile verificare una variabile nota come HTTP_USER_AGENT. Dozzine di siti web si apriranno se si google questi termini. Comunque raccomando ancora il collegamento Detect Mobile Browsers che ho aggiunto nel paragrafo precedente.

Il sito ha script scaricabili gratuitamente per l'analisi non solo in PHP, ma anche tonnellate di altri linguaggi di backend popolari. Questi includono ASP.NET, ColdFusion, Rails, Perl, Python e anche codice basato su server come IIS e Apache.

7. Slicebox Slider con Graceful Fallback

Il mio preferito CSS3 gratuito del 2011 probabilmente deve essere il Slicebox 3D Image Slider rilasciato da Codrops. Utilizza le bellissime transizioni di animazione CSS nei browser che le supportano, attualmente in Google Chrome e l'ultima di Safari. È strano che anche la versione più recente di Firefox o IE9 non sia ancora in grado di utilizzare queste transizioni.

La parte migliore di questo codice è che sarà ancora fallback per fornire effetti di transizione di base tra le immagini. Garantito che gran parte dell'animazione viene eseguita tramite jQuery, ma l'opzione di fallback CSS standard è ancora molto affidabile considerando quanti browser non supportano animazioni CSS3 appariscenti.

In alternativa, Codrops ha anche rilasciato di recente un altro pannello di immagini scorrevoli che utilizza ancora più creative tecniche CSS3. Questo dispositivo di scorrimento immagine viene creato utilizzando le immagini di sfondo in CSS, quindi anche senza gli effetti di transizione si comporta in modo molto fluido.

8. Metodo Failsafe per script Script di jQuery

La libreria jQuery è diventata quasi essenziale per lo sviluppo di JavaScript sul Web. Molti fornitori di CDN alternativi hanno creato URL statici in cui ospitano tutte le versioni di rilascio di jQuery. Google, Microsoft e persino jQuery stessi hanno creato un portale CDN per gli sviluppatori, tra alcuni altri siti Web meno conosciuti.

Ci sono forse centinaia di migliaia di sviluppatori che dipendono da questi provider. Cosa succederebbe se uno dei collegamenti fosse interrotto per qualsiasi motivo o i server fossero offline? Sarebbe una buona idea ospitare una copia locale e implementarla solo se ne avessi bisogno. Bene, questo fantastico frammento di codice di fallback di CSS-Tricks ti consente di farlo!

fonte

9. Caselle di controllo HTML5 univoche

HTML5 ha aperto la porta ad alcuni nuovi stili per creare siti web. Parte di questa esperienza web potenziata è costituita da moduli e elementi di input. Le caselle di controllo sono solo un esempio che può essere fortemente personalizzato in base alle proprie esigenze.

Mi sono imbattuto in questo meraviglioso tutorial CSS / jQuery pubblicato all'inizio della primavera del 2011. Offre un semplice metodo per creare interruttori in stile Apple per le tue caselle di controllo che si degradano con grazia nei browser più vecchi. Il codice utilizza immagini di sfondo per sostituire gli stili on / off tra le interazioni dell'utente.

Gli elementi della casella di controllo di input originale sono nascosti per impostazione predefinita e il loro valore è determinato tramite le chiamate JavaScript. Ciò significa che puoi caricare dinamicamente il valore in qualsiasi momento tramite jQuery, ma verrà anche passato al modulo dopo aver colpito il valore “Sottoscrivi” pulsante.

Supponendo che JavaScript sia disattivato o non supportato nei browser più vecchi, lo script utilizzerà automaticamente input HTML regolari. Questo disabiliterà anche il CSS per gli stili più recenti, quindi apparirà come se nulla fosse cambiato. Lo script si comporta più come un front runner estetico con un ripiego pulito che altro. Ma questi slider sono fantastici e le stesse tecniche potrebbero essere applicate ad altri campi di input del modulo, ad esempio selezionare menu e pulsanti di opzione.

10. Video supportato HTML5

Le nuove specifiche HTML5 sono state molto progressive in molte aree. Sia gli elementi video che quelli audio hanno un supporto nativo avanzato per un gran numero di file multimediali. Tuttavia, risulta che tra i browser supportati da HTML5 non tutti sono d'accordo sui tipi di file.

Mozilla Firefox generalmente supporta il video .OGG che puoi utilizzare come convertitore VLC. Google Chrome e Safari cercano file .MOV codificati .MP4 o H.264. A causa di queste differenze dovresti normalmente includere tre formati video diversi: i due sopra elencati insieme a un fallback .FLV.

Per fortuna alcuni ragazzi davvero intelligenti hanno messo insieme una biblioteca chiamata VideoJS. È una build JavaScript estremamente piccola che consente una singola implementazione di video Flash e HTML5 in un unico tag. È gratuito da scaricare e open source, quindi anche gli sviluppatori possono contribuire. Entrambi i lettori video Flash e HTML5 sono personalizzati per essere identici, quindi tutti gli utenti avranno la stessa esperienza. Guarda il loro esempio di codice di incorporamento video HTML5:

fonte

Seguendo un percorso simile, il progetto html5media offre un metodo per consolidare tutti i media di streaming in un unico tipo di file. Purtroppo anche VideoJS non è perfetto con ogni singolo browser. Quello che il progetto html5media ha cercato di fare è aggirare le incompatibilità del browser per supportare qualsiasi tipo di file video tra tutte le piattaforme. E in realtà funziona abbastanza bene!

Conclusione

Spero che questa guida di utili metodi di fallback sia utile per gli sviluppatori web di tutto il mondo. Può essere difficile costruire siti web per adattarsi a una vasta gamma di specifiche software. Questo è particolarmente vero quando lavori con molti linguaggi come CSS e JavaScript.

Ma le tendenze indicano che ci stiamo avvicinando a un'era più favorevole nel web design. Mai prima d'ora sono stati concordati più browser e standard web, specialmente all'interno di CSS3 e HTML5. Queste tecniche sono solo alcune delle tante da considerare quando si creano pagine Web conformi agli standard. Come sviluppatore web, vorrai costantemente seguire le ultime tendenze del design e adattarti al meglio al tuo pubblico.