Qual è la tecnica migliore per ottenere forme e funzioni coerenti tra tutti i browser Web (incluso Google Chrome)?

Question

Versione breve:Qual è la tecnica più pulita e gestibile per una presentazione coerente e una funzione AJAX su tutti i browser utilizzati sia dagli sviluppatori Web che dagli utenti finali degli sviluppatori Web?

• Cioè 6, 7, 8
• Firefox 2, 3
• Safari
• Google Chrome
• musica lirica

Versione lunga:Ho scritto un app web rivolta ad altri sviluppatori web.Voglio che la mia app supporti i principali browser Web (più Google Chrome) sia nella presentazione che nel comportamento AJAX.

Ho iniziato con Firefox/Firebug, poi ho aggiunto commenti condizionali per uno stile coerente con IE 6 e 7.Successivamente, con mio grande stupore, ho scoperto che jQuery non si comporta in modo identico in IE;così io ho cambiato il mio Javascript per renderlo portabile su FF e IE utilizzando condizionali e jQuery meno puro.

Oggi ho iniziato a testare su Webkit e Google Chrome e ho scoperto che non solo gli stili non sono coerenti sia con FF che con IE, ma Javascript non viene eseguito affatto, probabilmente a causa di un errore di sintassi o di analisi.Mi aspettavo un po' di lavoro sui CSS, ma ora ho più debugging Javascript da fare!A questo punto voglio fare un passo indietro e riflettere prima di scrivere pile di casi speciali per tutte le situazioni.

Sono non sto cercando una soluzione miracolosa, ma solo le migliori pratiche per mantenere le cose quanto più comprensibili e mantenibili possibile.Preferisco che funzioni senza intelligenza lato server;tuttavia, se c'è un vantaggio, ad esempio, controllare lo user-agent e quindi restituire file diversi a browser diversi, va bene se la comprensibilità e la manutenibilità totali dell'app Web sono inferiori.Grazie mille a tutti!

Answer 1

Mi trovo in una situazione simile, sto lavorando su un'app Web destinata ai professionisti IT e che deve supportare lo stesso set di browser, meno Opera.

Alcune cose generali che ho imparato finora:

• Prova spesso, nel maggior numero possibile di browser di destinazione.Assicurati di avere tempo per questo nel tuo programma di sviluppo.
• I toolkit possono aiutarti in parte al supporto multibrowser, ma alla fine mancheranno qualcosa su alcuni browser.Pianifica del tempo per il debug e la ricerca di correzioni per browser specifici.
• Se hai bisogno di qualcosa che non è presente in un toolkit e non riesci a trovare uno snippet di codice gratuito, investi un po' di tempo per scrivere funzioni di utilità che incapsulano il comportamento dipendente dal browser.
• Informati sui bug noti del browser, in modo da poter orientare la tua implementazione attorno ad essi.

Alcune cose più specifiche che ho imparato:

• Utilizza il codice condizionale basato sullo user-agent solo come ultima risorsa, perché diverse generazioni dello "stesso" browser potrebbero avere caratteristiche diverse.Invece, verifica prima il comportamento conforme agli standard, ad es. if(node.addEventListener)..., quindi funzioni comuni non standard, ad esempio if(window.attachEvent)..., e quindi, se necessario, esamina l'agente utente per un tipo di browser e un numero di versione specifici.
• Sapere quando il DOM è "pronto" per l'accesso allo script è diverso in quasi tutti i browser.Un buon toolkit ti astrarrà da questo.
• I gestori di eventi sono diversi in quasi ogni browser.Un buon toolkit ti astrarrà da questo.
• La creazione di elementi DOM, in particolare controlli di moduli o elementi con attributi, può essere complicata con document.createElement e element.setAttribute.Sebbene non sia standard (e piuttosto schifoso), l'utilizzo di node.innerHTML con stringhe che contengono bit di HTML sembra essere più affidabile su tutti i tipi di browser.Devo ancora trovare un toolkit che ti permetta di utilizzare element.setAttribute per aggiungere un "nome" a un elemento del modulo in IE.
• Le differenze (e i bug) CSS sono importanti tanto quanto le differenze JS.
• Le funzionalità Javascript "principali" (funzioni String, Date, RegExp, Array) sembrano essere piuttosto affidabili e coerenti tra i browser, in particolare rispetto alle funzioni DOM/CSS/Window.C'è una piccola gioia nel fatto che la lingua non sia completamente diversa su ogni piattaforma.:-)

Non ho riscontrato alcun bug JS specifico di Chrome, ma è sempre uno dei primi browser che provo.

HTH

Answer 2

Chrome è in realtà un po' diverso da Safari, utilizza un'implementazione Javascript completamente diversa e sono stati segnalati problemi sia con il prototipo che con jquery.Non me ne preoccuperei troppo per ora, è ancora una versione beta iniziale del browser e tali incongruenze verranno probabilmente trattate come bug.Ecco il riportare un errore.

Answer 3

Una "proiettile d'argento" a cui potresti rivolgerti è Kit di strumenti web di Google (GWT).

Credo che supporti tutti i browser che ti interessano e ti dia la possibilità di codificare la tua interfaccia utente in un IDE compatibile con Java come Eclipse.Il vantaggio di ciò è che puoi utilizzare gli strumenti IDE per il completamento del codice e il controllo degli errori in fase di compilazione, il che migliora notevolmente lo sviluppo su progetti di interfaccia utente su larga scala.

Se utilizzi i componenti dell'interfaccia utente GWT, nasconderai molti problemi specifici del browser da dover affrontare, ma quando compili, creerà un file compatto e distribuito per ciascuna piattaforma del browser.In questo modo non scaricherai mai alcun codice specifico di IE se stai visualizzando l'app in Firefox.Avrai anche generato uno stub lato client che caricherà il bundle compilato appropriato di JS.Per addolcire l'affare, questi file sono memorizzabili nella cache, quindi le prestazioni percepite sono generalmente migliorate per i visitatori di ritorno.

Answer 4

Il panorama si è evoluto notevolmente per accogliere lo sviluppo cross-browser. jQuery, Prototipo e altri framework esistono per Javascript cross-browser. Il CSS si ripristina sono utili per iniziare su una tela bianca comune per tutti i browser. Planimetria E 960 sono entrambi framework CSS per aiutare con l'utilizzo dei layout Layout della griglia CSS tecniche che sembrano diventare molto popolari in questi giorni.

Come per altre peculiarità CSS nei diversi browser, qui non esiste il Santo Graal e l'unica opzione è testare il tuo sito web su diversi browser e utilizzare questo risorsa fantastica e sicuramente iscriviti a una mailing list per risparmiare tempo.

Se stai lavorando su un sito di produzione ad alto volume, puoi utilizzare un servizio come browsercam.com alla fine del gioco per assicurarti che il sito non si rompa in modo orribile in alcuni browser.

Infine, non cercare di far sì che il sito abbia lo stesso aspetto in tutti i browser.Il tuo progetto principale dovrebbe mirare a IE/FF e dovresti accettare compromessi ragionevoli sugli altri.Usa il grafico del browser classificato per restringere il campo del supporto del browser.

Per quanto riguarda le migliori pratiche, iniziare a utilizzare wireframe su carta bianca o un servizio simile Mockup di Balsamiq.Sono ancora sorpreso di quanti sviluppatori inizino con un editor invece che con un wireframe, ma poi sono passato solo un anno fa prima di rendermi conto di quanto sia grande il risparmio di tempo.Avere una netta separazione tra layout (HTML), presentazione (CSS) e comportamenti (Javascript).Non dovrebbero esserci elementi di stile in HTML, nessuna presentazione in Javascript (use .addClass('highlight') invece di .css({'background-color': 'red'});).

Se non hai familiarità con nessuno dei termini in grassetto presenti in questo post, cercarli su Google dovrebbe essere fruttuoso per la tua carriera e produttività nello sviluppo web.

Answer 5

Se stai iniziando da un ripristino di base o da un framework e hai tenuto conto di IE ma è ancora tutto strano, potresti voler ricontrollare quanto segue:

• Tutto è valido?CSS e HTML?
• Eventuali collegamenti interrotti a un file incluso (js, css, ecc.?).In Chrome/Safari, se il collegamento al foglio di stile viene danneggiato, tutti i collegamenti potrebbero diventare rossi.(qualcosa a che fare con lo stile 404 predefinito, credo)
• Qualche strano requisito dei tuoi plugin js che potresti utilizzare?(il file css deve precedere il file js, come con jquery.thickbox?)

Answer 6

Per l'interfaccia utente, controlla Est.

È ottimo come libreria autonoma, sebbene possa essere utilizzato anche con jQuery, YUI, Prototype e GWT.

Campioni: http://extjs.com/deploy/dev/examples/samples.html

Answer 7

Ho trovato quattro cose utili nello sviluppo di applicazioni JavaScript:

• Rilevamento delle funzionalità
• Biblioteche
• Sviluppo iterativo utilizzando la virtualizzazione
• JavaScript:La guida definitiva, Douglas Crockford e John Resig

Rilevamento delle funzionalità

Utilizza la riflessione per chiedere se il browser supporta la funzionalità desiderata.Se vuoi sapere quale gestione degli eventi è supportata da un browser, puoi usare if(el.addEventHandler) per la conformità W3C, if(el.attachEvent) per il tipo IE e infine ricorrere a el.['onSomeEvent'].

UN GRANDE MA!

I browser a volte mentono sulle funzionalità che supportano.Non ricordo, ma ho riscontrato un problema in cui Firefox implementava una funzionalità DOM, ma restituiva false se avessi testato quella funzionalità!

Biblioteche

Dato che stai già lavorando con jQuery, salverò la spiegazione.Ma se riscontri problemi potresti prendere in considerazione YUI per la sua meravigliosa compatibilità tra browser.Lavorano anche insieme.

Sviluppo iterativo con la virtualizzazione

Forse il mio miglior consiglio:Esegui tutti i tuoi ambienti di test contemporaneamente.Ottieni una distribuzione Linux, Compiz Fusion e un sacco di RAM.Scarica una copia di VMWare Server di VMWare o Virtual Box di Sun e installa alcuni sistemi operativi.Ottieni immagini per Windows XP, Windows Vista e Mac OS X.

L'idea di base è questa:Compiz Fusion ti offre 4 desktop mappati su un cubo.Uno di questi desktop è il tuo computer Linux, il successivo il tuo sistema virtuale Windows XP, quello dopo Vista, l'ultimo Mac OS X.Dopo aver scritto del codice, esegui il tasto Alt-Tab nel computer virtuale e dai un'occhiata al tuo lavoro.Inoltre sembra fantastico.

JavaScript:La guida definitiva, Douglas Crockford e John Resig

Queste tre fonti forniscono la maggior parte delle mie informazioni per lo sviluppo di JavaScript.La guida Definitive è forse il miglior libro di riferimento per JavaScript.

Douglas Crockford è un guru di JavaScript (odio questa parola) su Yahoo.Cerca le sue serie "Douglas Crockford Theory of the DOM", "Douglas Crockford Advanced JavaScript", "Douglas Crockford Theory of the Dom" e ""Douglas Crockford The Good Parts" su Yahoo!Video.

John Resig (come sai) ha scritto jQuery.Il suo sito web su ejohn.org contiene moltissime informazioni su JavaScript e se scavi su Google scoprirai che ha tenuto una serie di presentazioni sulle tecniche difensive di JavaScript.

...Buona fortuna!

Answer 8

Per avere un browser in meno di cui preoccuparsi, Chrome utilizza lo stesso motore di rendering di Safari.Quindi, se funziona in Safari, dovrebbe funzionare esattamente allo stesso modo in Chrome.

Vedere questo post sul blog di Matt Cutts.

Google Chrome utilizza WebKit per il rendering, che è lo stesso motore di rendering del browser Safari di Apple, quindi se il tuo sito è compatibile con Safari dovrebbe funzionare perfettamente in Chrome.

Aggiornamento:Sembra che queste informazioni siano ormai obsolete.Si prega di vedere il commento di Vox su questa risposta.

Answer 9

Se la tua massima priorità è una presentazione esattamente coerente su tutti i browser elencati senza disparità, probabilmente dovresti guardare AS3 e Flex.

Answer 10

Personalmente, utilizzo Mootools come un semplice framework Javascript leggero.È semplice da usare e supporta tutti i browser sopra indicati (tranne Chrome, ma sembra funzionare anche per quanto ne so).

Inoltre, per garantire la coerenza tra i browser, ottengo una funzione/stile/comportamento/ecc.per funzionare prima in un browser (solitamente Firefox 3 con firebug), quindi controllare immediatamente per assicurarsi che funzioni in tutti gli altri browser (lasciando IE6 per ultimo).In caso contrario, investo il tempo per risolverlo immediatamente, perché altrimenti so che non avrò tempo in seguito (nella mia esperienza, far funzionare le cose su più browser richiede circa il 50% del mio lavoro di sviluppo).tempo ;-) )

Answer 11

Convalida il tuo Javascript con "parti buone" + browser attivo JsLint.com rende meno probabile che JavaScript si comporti diversamente in FF, Safari ecc.

Altrimenti, l'utilizzo degli standard e la convalida del codice, nonché lo sviluppo di tecniche esistenti come jQuery, dovrebbero far sì che il tuo sito si comporti allo stesso modo in tutti i browser tranne IE - e non esiste una ricetta magica per IE - sono solo bug ovunque...