it-swarm.it

Quali sono i modi migliori per implementare i CSS cross-browser?

Quali sono i modi migliori per implementare i CSS cross-browser?

Regola: un approccio per una risposta.

4
stacker

Puoi usare commenti condizionali per risolvere problemi con Internet Explorer. A parte questo, non dovresti mai aver bisogno di indirizzare Firefox/Chrome/Opera separatamente l'uno dall'altro, tutti supportano gli standard.

La cache non dovrebbe entrare in esso; dovresti offrire lo stesso codice per tutti i browser.

4
DisgruntledGoat

Il modo migliore e più semplice è usare una libreria. Librerie come OOCSS, Blueprint o 960gs sono già progettate per replicare il loro display sui principali browser. Tutto ciò che ti rimane dopo, il più delle volte, è assicurarti che i tuoi stili personalizzati siano compatibili con più browser e che il tuo markup non produca alcun problema.

Evita gli hack come la peste, se possibile (sì, usa i condizionali).

2
Kenneth Love

Quando leggo domande e risposte come questa, comincio a pensare che potrei essere pazzo, ma ho scritto siti Web abbastanza complessi usando un bel po 'di CSS, tra cui CSS3 e altre complicazioni, e non ho mai dovuto ricorrere nemmeno a commenti condizionali.

Tuttavia, controllo costantemente il mio lavoro su più browser (codice principalmente in Chrome e test in Firefox e ie7) durante la codifica. Quando vedo sorgere problemi, faccio solo un passo indietro, capisco perché le cose stanno andando diversamente e spesso scelgo un approccio leggermente diverso.

Detto questo, ho un interesse intellettuale nei confronti di questi diversi hack e metodi. Mi piace particolarmente leggere le tecniche utilizzate da CSS3 PIE e modernizr.

Il modo migliore per avvicinarsi alla codifica cross-browser è essere consapevoli dei diversi modi in cui i diversi browser interpreteranno il tuo codice e lo scriveranno in modo tale da non poter fare a meno di farlo correttamente.

1
Zach Lysobey

progettare e sviluppare con gli standard web
convalida costantemente i tuoi documenti e i fogli di stile!
test cross-browser/multipiattaforma ogni giorno!
almeno prima di inviare una richiesta pull o eseguire un commit in un repository.

dovresti comunque scrivere documenti conformi, ma questo è cruciale per scrivere CSS cross-browser/cross-platform.

nota: il vero potere di validazione non è conforme al 100% delle volte; otterrai super poteri una volta compreso ciò che non deve essere convalidato, può essere rimandato e deve essere corretto immediatamente.
e questo è il potere: la convalida costante rafforza le regole delle specifiche e sarai esperto. il costante test cross-browser/multipiattaforma ti tiene appassionato ai fogli di stile dell'agente utente del browser con cui stai combattendo di più. conforma i tuoi stili in quanto tali, hai ancora meno problemi.

puoi usare librerie e framework se vuoi, ma stai estraendo tutta la sofferenza e il dolore dai tuoi flussi di lavoro e non otterrai mai l'occhio dettagliato per gli stili che stai richiedendo qui. tuttavia, libs/frameworks fanno un buon lavoro nel concederti quel potere, anche se in genere viene fornito con il bloat della pagina.

reset.css, normalizr.css e persino il *{border:none; margin:0; padding:0) reset sono armi nel tuo arsenale per uniformare il campo di gioco tra il browser che renda i tuoi stili o il suo.

sì, ho consigliato * "hack", con altre due opzioni. ognuno ha il proprio posto quando si fa battaglia con gli user-agent.

inoltre, è assurdo non trarre vantaggio dai difetti che alcuni user-agent hanno, poiché tali difetti non si renderanno con continuità al 100% e dovranno essere affrontati. nel fare ciò, i difetti stessi ti forniscono il gancio perfetto per rilevare le caratteristiche, o persino per annusarli, in modo che possano essere trattati di conseguenza!

usa ogni hack, difetto, funzionalità, non funzionalità su cui puoi mettere le mani per piegare il dom e forzare i browser in linea.

...... se devi. ma se stai sviluppando con gli standard web, scoprirai che non ne avrai bisogno tanto quanto in passato.

e poiché fai affidamento su di essi meno, quando hai l'opportunità di usarne uno per risolvere un problema, usalo con la rapidità! sai già qual è il problema e hai anche una soluzione mirata al problema e nient'altro.

ogni browser ha i propri modi di essere mirato esclusivamente, i più ovvi sono i commenti condizionali.
usa i commenti condizionali per ie6-9 e usa la compilazione condizionale per renderizzare gli stili per ie10 e ie11.
ma ancora una volta, se sei un dww e un dvww, puoi includerli in ogni documento che crei, ma scopri che i fogli di stile sono sterili, ospitando una manciata di stili semplicemente mirati a differenze di 1-3 pixel o ottenendo uno sfondo -colori da allungare (o meno) 100%, ecc.

1
albert

Quello che faccio è usare un reset CSS e quindi le istruzioni condizionali. Il reset CSS risolve quasi tutti i problemi e il condizionale corregge eventuali problemi in IE. Se ci sono differenze tra gli altri browser, di solito provo a aggirarli, ad esempio aumentando la larghezza di tutti i browser o una dimensione del carattere.

Personalmente uso il CSS di ripristino YUI.

0
Darryl Hein

CSS3 PIE sembra piuttosto promettente come livello di compatibilità CSS3. Naturalmente, ci sono altri problemi tra browser per le precedenti versioni CSS.

Domanda correlata su IE6, molte informazioni utili: Dovrei preoccuparmi di supportare IE6?

0
JasonBirch

Prefazione di questo con un avvertimento contro l'uso di hack CSS.

Da un puro punto di vista delle prestazioni, la memorizzazione nella cache sarà più efficace con un singolo file se per nessun altro motivo se non risponde una volta a una singola richiesta HTTP dal client. Oltre a offrire lo stesso file a tutti gli utenti, indipendentemente dal browser, Download dei commenti condizionali in alcune situazioni.

Per indirizzare tutte le diverse versioni di Internet Explorer in un singolo file ci sono vari hack CSS. Tieni presente che questi renderanno il tuo CSS non valido (se la convalida è un problema per te).

body {
 colore: rosso;/* tutti i browser */
 colore: verde\9;/* IE8 e precedenti */
 * Colore: giallo;/* IE7 e precedenti */
 _Colore: arancione;/* IE6 */
}

Il blocco dei commenti condizionali è in realtà solo un problema in alcuni casi in IE8 quando è presente un commento condizionale. A seconda di cosa pensi di supportare Internet Explorer, questo potrebbe non essere un problema.

Personalmente uso i commenti condizionali. Personalmente credo che gli hack CSS siano terribili e che qualsiasi hit delle prestazioni che deriva da commenti condizionali, sia reali che immaginati, non vale che non vale la pena che gli hack CSS causa spesso.

I commenti condizionali sono relativamente facili da implementare e c'è un ottimo articolo sul loro uso su Quirksmode. Quanto segue riguarderà solo IE6:

<! - [if IE 6]> 
 <link rel = "stylesheet" type = "text/css" href = "/ media/css/ie6.css" /> [ .____]. <[endif] ->

Esiste una sintassi che ti consentirà di scegliere come target Internet Explorer una versione uguale, minore di, maggiore di, minore o uguale a, maggiore o uguale a un determinato numero di versione. L'esempio sopra è uguale a.

0
Bryson