Progettare per il web è già abbastanza difficile, senza doversi preoccupare di compatibilità cross-browser. Tuttavia, dal momento che ogni motore di layout si è evoluto per interpretare le linee guida (W3C) del World Wide Web Consortium per Cascading Style Sheets (CSS) e HyperText Markup Language (HTML) in modo diverso, le pagine web spesso mostrano discrepanze sorprendenti da un browser all'altro. Per creare un sito web in modo affidabile coerente in tutti i principali browser, è necessario un approccio sistematico, efficiente e pratico per gli errori di risoluzione dei problemi. Avrete anche bisogno di una conoscenza pratica degli standard compliant CSS e HTML.

istruzione

1 Costruisci la tua progettazione per Firefox. Firefox ha costantemente tenuto al corrente delle ultime modifiche in CSS e tende ad essere stabile, che lo rende il punto di partenza candidato per tutti i vostri progetti web. Completare il lavoro prima in Firefox, per poi passare ad altri browser per verificare la presenza di incongruenze.

2 Lavora con le estensioni di progettazione di Firefox. Estensioni vi aiuterà a individuare errori nel Document Object Model (DOM), trovare opportuni selettori CSS e suggerimenti sul codice di scansione per le proprietà CSS.

3 Prova il tuo disegno nel browser WebKit (Chrome / Safari). di accesso Chrome costruito in strumento di debug facendo clic destro della pagina e selezionando "Inspect Element". Dal momento che sia Chrome e Safari utilizzano lo stesso motore WebKit, normalmente è necessario testare in uno di questi due browser, anche se è ancora buona norma controllare entrambi.

4 Annotare eventuali incongruenze si osservano in Chrome vs Firefox. Aprire il lato due browser a fianco. Se si vede incoerenze, procedere direttamente alla sperimentazione in Internet Explorer al punto 8. Se incongruenze appaiono in Chrome, quindi consultare i passaggi 5, 6 e 7.

5 tecniche di studio CSS. Evitare o aggirare i problemi e le incongruenze del browser mediante l'applicazione di una varietà di tecniche al problema. Scopri questi studiando il lavoro di altri, ad esempio nei numerosi blog on-line dedicati a discutere e insegnare le tecniche CSS. Leggi regolarmente, o cercare attraverso di loro quando si verifica un problema specifico.

6 Scrivere markup strutturale e di presentazione CSS. Utilizzare i tag HTML per organizzare la struttura del documento della tua pagina web, ma usare esclusivamente i CSS per definire le proprietà di stile della pagina. Ad esempio, non usare grassetto, corsivo o forti tag HTML per lo stile il testo. Utilizzare le proprietà CSS dei font, invece.

7 Aggiungere un foglio di stile specifico per Chrome. Fare solo se non è possibile correggere incongruenze tra Chrome e Firefox, migliorando sulla codifica stile condivisa tra di loro. Frammenti e JavaScript per fogli di stile specifico per Chrome sono disponibili on-line.

8 Test nelle ultime versioni di Internet Explorer (IE). Non lasciatevi scoraggiare da problemi; Spesso, un semplice trucco stile o adeguamento strutturale per il codice HTML è tutto ciò che devi fare. programmi debugging, come IE Tester, facilitano il processo di test in diverse versioni di IE, nonché per il controllo del codice stesso.

9 Creare un foglio di stile IE-specifici. Non spendere troppo tempo cercando di manipolare i CSS per creare un aspetto coerente in IE. È sufficiente creare un nuovo foglio di stile specifico per IE, e modificare i selettori CSS e le proprietà necessari. Frammenti per l'aggiunta di fogli di stile di IE per i modelli HTML sono disponibili on-line.

10 Tenere un manuale di riferimento CSS nelle vicinanze. Comprare un manuale tascabile o accedere alla documentazione in linea W3C in una finestra separata del browser.

Consigli e avvertenze

• Regolarmente consultare le statistiche di utilizzo del browser W3C per dare giudizi istruiti su quale browser per testare e design per. i browser più vecchi vengono regolarmente sostituiti da quelli più recenti, più conformi agli standard.
• Tieniti aggiornato sulle ultime novità CSS e HTML e imparare nuove tecniche leggendo i siti web e di design W3C blog.
• Porre domande in progettazione web forum.
• I browser sono sempre in evoluzione. Tieniti aggiornato sui browser più popolari e più stabili, e sostituire l'ultima e più grande per "Firefox" in questo articolo.
• Applicare il foglio di stile IE per tutte le versioni di IE che si sta verificando. È possibile creare fogli di stile per tutte le versioni di IE o quelli individuali (ad esempio, IE7, IE8). Se si fa riferimento in modo non corretto di una certa versione di Internet Explorer, le proprietà di stile non si applicano ad esso.
• Evitare che inizia in IE, come si prevede di utilizzare il motore del browser quirkiest come fondamento e punto di riferimento per l'implementazione del codice.