10 suggerimenti da notare durante la creazione di un sito Web multi browser

In teoria, creare una pagina web è facile. Gli aspetti principali includono la scrittura di un codice HTML, il test su un browser Web e il caricamento. HTML e CSS sono standard, il che significa che una pagina web che funziona bene su un particolare browser potrebbe non essere pulita su altri browser.

Naturalmente, le cose non risultano così semplici in pratica. C'è una varietà di browser, con ogni browser che visualizza l'HTML e CSS in un modo diverso.

Per garantire che le pagine Web funzionino in modo uniforme su tutti i browser Web, i web designer dovrebbero praticare la codifica cross-browser. In questo post, discuteremo 10 dei trucchi collaudati che puoi seguire per ottenere un sito Web privo di errori e pronto per più browser.

Una breve introduzione ai CSS

CSS o Cascading Style Sheets è un insieme di istruzioni di formattazione web che controlla l'aspetto delle pagine web. Alcuni browser compatibili con CSS sono:

• CIOÈ
• Bordo
• Firefox
• Cromo
• Safari
• musica lirica
• iOS Safari
• musica lirica
• Browser Android
• Chrome per Android

Ma prima di giungere alla conclusione che ti farà risparmiare molto tempo, dovresti capire che la maggior parte dei browser Web non supporta completamente tutte le sue funzionalità.

I CSS agiscono come un componente rappresentativo che caratterizza i componenti di una pagina web. Allo stesso tempo, i fogli di stile a cascata controllano il design di varie pagine contemporaneamente.

Sebbene non ci sia un segreto per curare un sito Web compatibile con più browser che garantisca l'estetica perfetta che desideri, ci sono alcuni aspetti che possono essere presi in considerazione per migliorare le tue possibilità. Ecco dieci suggerimenti facili da seguire ma efficaci per la codifica di un sito Web cross-browser.

1. Più semplice è, meglio è

Più l'HTML e il CSS diventano complessi, più è probabile che siano soggetti a errori e bug. Prova a mantenere il layout elementare in fase di progettazione, ovvero: un'intestazione, alcune colonne e un piè di pagina. Se il tuo progetto ha più caselle della barra laterale, le cose si riveleranno frenetiche man mano che il processo avanza.

Evita di utilizzare molti elementi nidificati e integra solo gli elementi richiesti. Per creare un menu, usa ul e li invece di una tabella o una serie di p elementi.

2. Convalida il tuo codice HTML, CSS e RSS

Niente infastidisce un designer più di uno stile accurato di una pagina web e quando arriva il momento di testarla, un errore sconosciuto continua a comparire. In tali situazioni, un designer dovrebbe mantenere i nervi saldi e iniziare con il markup e la convalida dei fogli di stile.

Ci sono molti strumenti gratuiti ea pagamento disponibili sul Web per vedere se i tuoi markup HTML e CSS sono legittimi. Con l'aiuto di questi strumenti, puoi essere certo che i markup sono perfetti e le pagine Web visualizzano il contenuto nel modo desiderato.

Firebug

Firebug è un debugger ed editor tutto in uno. Consente a uno sviluppatore di lavorare sui markup HTML, JavaScript e CSS. Puoi monitorare i markup in tempo reale, evidenziarli e rimuoverli.

Validatore HTML

Mentre convalidi l'origine della pagina, i bug e gli errori vengono segnalati. E se non riesci a scoprire cosa c'è che non va, lo strumento ti fornisce alcuni suggerimenti.

Validatore.w3.org

Devi caricare il file che vuoi convalidare. Il validatore ti mostrerà i risultati in diversi formati, come ad esempio:

• con raccomandazioni
• come contorno

puzzle.w3.org

Lo strumento controlla il tuo markup per potenziali errori e bug. Puoi impostare più profili CSS, scegliere un determinato supporto per il foglio di stile e controllare le informazioni nel report.

Relaxed.vse.cz

Questo strumento non utilizza le regole del W3C per la convalida, ma si basa sui protocolli personalizzati integrati. Puoi scegliere dalla versione di HTML che desideri utilizzare, se vuoi vedere il codice sorgente e molte altre opzioni.

3. Non lavorare con la modalità stranezze del browser

Alcuni browser web dispongono di una modalità stranezze. In questo, il browser si confronta con le sue versioni precedenti che sono spesso piene di bug. Sebbene consenta a un sito Web più vecchio di essere compatibile con i browser Web di oggi, diventa piuttosto un compito se stai cercando pagine Web standardizzate. Questo perché in una modalità stravagante , le pagine Web non vengono visualizzate in modo standardizzato, ma in un modo unico.

Per impostazione predefinita, un browser Web passa alla modalità stranezze se non si include la dichiarazione del tipo di documento o il DOCTYPE. Quindi, dovresti sempre ricordarti di aggiungere un DOCTYPE valido alla fine della pagina web.

4. Esercitati con le regole di ripristino CSS

Ogni browser web ha i propri valori predefiniti per alcuni aspetti come l'altezza e la larghezza della linea. Questi valori predefiniti sono spesso in conflitto con le regole CSS personalizzate e distorcono l'aspetto generale delle pagine web.

Per evitare il dilemma di personalizzare ogni regola CSS che scrivi, puoi eseguire tutto questo ripristino all'inizio del tuo file CSS. Dopo aver aggiunto queste regole nel tuo foglio di stile, puoi essere certo che stai lavorando dallo stesso punto per tutti i browser.

5. Usa Firefox

In genere, gli sviluppatori testano le pagine Web su un singolo browser contemporaneamente. Quindi, passano ad altri browser e continuano ad apportare le modifiche necessarie mentre passano da un browser all'altro. Questo è un approccio ideale piuttosto che convalidare un sito Web su tutti i browser in un'unica esecuzione.

Per creare il tuo sito Web, Firefox è il browser preferito in quanto semplifica la risoluzione di eventuali problemi di compatibilità rispetto ad altri browser. Firefox viene fornito con una miriade di componenti aggiuntivi, il che lo rende molto adatto agli sviluppatori. Se le pagine Web vengono visualizzate pulite su Firefox, puoi essere certo che funzioneranno bene su altri browser.

6. Test

I browser Web di oggi hanno stranezze di rendering, quindi diventa responsabilità dello sviluppatore testare i markup su ognuno di essi. Ecco un elenco dei principali browser web:

• Internet Explorer
• Firefox
• Safari
• Opera (44.0.2510.1218)
• Microsoft Edge
• Browser UC

Come approccio rapido, puoi optare per un servizio di test online. Esistono molti siti Web come Browsershots che acquisiscono schermate del tuo sito e ti mostrano come appariranno su diversi sistemi operativi e browser Web. Questi screenshot vengono inviati tramite e-mail o semplicemente resi disponibili per il download. Alcuni degli strumenti sono a pagamento, ma sicuramente ti fanno sapere in anticipo i problemi di compatibilità che le pagine web potrebbero dover affrontare.

I trucchi CSS non danno frutti se non sei in grado di testarli sui principali browser web. Ecco alcuni strumenti utili per autenticare la compatibilità cross browser dei markup HTML e CSS:

Modalità stranezze

Questo è un modo semplice ma efficace per dare la caccia ai problemi tecnici del cross-browser. Quirksmode interpreta il CSS e mostra tutte le possibili preoccupazioni.

Browsershot

Lo strumento Browsershots acquisisce schermate delle pagine Web e mostra come verrà visualizzato il tuo sito Web su diversi browser Web e sistemi operativi.

Tester di IE

Si tratta di un'app Web affidabile che consente di analizzare l'aspetto delle pagine Web su diverse versioni di Internet Explorer. Lo strumento verifica il modello su diverse versioni di browser e sistemi operativi e visualizza i risultati in un'interfaccia simile a Ms Word.

7. Usa i commenti condizionali

Ci sono momenti in cui provi il tuo livello al meglio, ma non riesci comunque a ottenere i risultati desiderati su determinati browser, in particolare Internet Explorer. Qui, hai bisogno di alcuni affidabili e testati per essere veri hack.

Un'alternativa semplice per questo, puoi includere il markup solo di IE con i commenti. Con questo semplice trucco, puoi includere HTML o JavaScript aggiuntivi solo per IE.

8. Rendi IE6 compatibile con il formato PNG

I PNG sono prodigiosi. Puoi avere oltre 250 gradi di trasparenza in un'immagine. Per creare elementi visivi ottimizzati per la retina, puoi mostrare le tue capacità di progettazione come aggiungere bordi lisci e sfondi personalizzati.

Ma Internet Explorer non è in grado di visualizzare in modo efficace PNG trasparenti e mostrare foul box dove dovrebbe essere trasparente. Con un po' di ottimizzazione, puoi far funzionare i PNG senza problemi in IE6. Ciò non richiederà modifiche importanti al CSS.

Puoi usare IE PNG Fix per lo stesso.

9. Aggiungi fallback

La maggior parte dei browser Web è compatibile con Flash e JavaScript. È possibile avvalersi di fallback nel caso in cui il browser Web di un visitatore non supporti tali funzionalità.

Ad esempio, nel caso di Safari su iPhone, i menu di navigazione di Flash diventano inutili poiché il browser non supporta Flash.

Ecco un rapido cheat sheet per risparmiare tempo a sperimentare con diversi file multimediali:

• Immagini : con ogni tag img, aggiungi un attributo alt che descriva l'immagine.
• Filmati Flash : evita di utilizzare Flash per le funzioni principali, come la navigazione.

10. Optare per la codifica manuale

Questo potrebbe essere un punto di discussione tra i web designer. Molti webmaster al giorno d'oggi utilizzano strumenti automatizzati per risparmiare tempo. Sono utili soprattutto se non sei esperto di HTML. Tuttavia, è importante notare che tali strumenti non corrispondono alla flessibilità e all'eleganza di un designer che codifica abilmente a mano i markup HTML cross-browser.

La codifica manuale dei markup HTML, XHTML e CSS fa molto. Hai il controllo totale di ciò che stai sviluppando e modifichi sempre il programma secondo le esigenze delle preferenze.

Se trovi la codifica manuale frenetica, puoi utilizzare un editor di pagine Web basato su testo. Ci sono molti di questi strumenti disponibili su Internet. Puoi provare uno dei seguenti:

• Editore CK
• Tazza di caffè
• Testo sublime dell'atomo
• Coda

Avvolgendo

Ecco un rapido elenco di controllo che puoi prendere in considerazione dopo aver terminato la codifica di un sito Web cross browser:

• Ogni browser web ha una linea d'azione individuale. Con la codifica HTML nei documenti CSS, dovresti contrassegnare le pagine Web in modo tale che appaiano pulite su ogni browser.
• Per mantenere il tuo sito libero da bug ed errori, elimina i codici XHTML, HTML o CSS non validi che possono essere evidenziati dagli strumenti sopra menzionati.
• Tieni sotto controllo i browser che portano il traffico massimo al tuo sito web.
• Esegui un controllo fondamentale sul tuo sito per misurarne l'efficacia sui browser.
• Esplora il modello box CSS per saperne di più sui formati cross-browser.
• Usa abilmente i piani di ombreggiatura e le tonalità dello stile del testo.
• Tieni presente di stabilire il miglioramento dei contenuti, la disposizione e lo spazio.

Dedicare un po' di tempo in più per far funzionare perfettamente le pagine Web su quanti più browser possibile ripaga sempre. Non solo assicurerai che il sito Web sia accessibile al massimo pubblico, ma manterrai anche felici i visitatori, il che è importante.