Accettabile hack CSS/correzioni

Question

C'è un elenco di "buoni" pulito hack CSS, che sono certi di essere a prova di futuro?

Per esempio, zoom:1 è sicuro, come è servita solo per IE, e ti ricordi che c'è.Il comune hack di bambini, selettori è non cassetta di sicurezza, perché IE7 che li supporta.Utilizzando height:1% appena si sente sporco (ma che potrebbe essere solo me).

So di ie7 js, così bug di IE6 non mi preoccupa più di tanto.Inoltre, io non sto cercando una religiosa dibattito, solo fonti.

---

Grazie per le risposte, l'ho selezionato il video con le migliori fonti come risposta.

Grazie anche per i suggerimenti per l'uso separate, CSS file, o di non preoccuparsi.Mi sono completamente d'accordo con te, e per me, quelli sono dati di fatto.Ma quando si è di fronte con un layout problema, voglio cassetta di sicurezza fix che sarà ridurre al minimo il rischio che dovrò rivedere il problema in $IE o $FF + 1.Mi dispiace non ho fatto che più chiaro.

Answer 1

Questo è un buon posto per ben documentato e ben testato browser bug e hack permette di lavorare intorno a loro:

http://www.positioniseverything.net/

Answer 2

Per la maggior parte dei bug di IE penso che si sta meglio fuori uso i commenti condizionali circa un link a un browser foglio di stile specifico.Si tende a mantenere le cose abbastanza carino ed è abbastanza auto di documentare.

Answer 3

Ho usato Peter-Paul Koch "QuirksMode"il sito web un sacco di problemi che coinvolgono CSS e compatibilità cross-browser.Egli tende a cipiglio sul browser metodi specifici, ma ha anche una pagina su Hack CSS.

Answer 4

Nicole Sullivan (AKA Stubbornella) che lavora per la Finanza di Performance team suggerito in Le 7 Abitudini Eccezionali, in Perf si consiglia di utilizzare il CSS sottolineatura hack per patch fino a IE6 bug perché:

• Hack dovrebbe essere pochi e lontani tra loro.
• Se hai solo 5-6 hack (che è già abbastanza) quindi non avrebbe senso inserire tali in un file esterno e, di conseguenza, che la separa dal suo contesto.
• Un extra di file potrebbe portare a sanzioni prestazioni (Yahoo Best Practices, La Regola 1).

Va rilevato, tuttavia, che questo non è un valido CSS.

Answer 5

Non c'è nessuna tale cosa come una buona pulizia/accettabile [css] hack - sempre di codice Standard, e quindi utilizzare browser+versione specifici fogli di stile per qualsiasi hack necessari per far funzionare le cose.

Per esempio:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
ecc

Poi, quando la nuova versione di un browser, viene rilasciato, copia della versione precedente hack e rimuovere i bit che non è più applicabile (e aggiungere nuovi pezzi, se necessario).

(Caricare i singoli fogli di stile utilizzando i Commenti Condizionali per IE, e l'agente di sniffing per gli altri browser.)

Answer 6

Underscore-hack per IE6-roba funziona abbastanza bene, ad esempio.

min-height:50px;
_height:50px;

Non richiede lo spostamento di cose al di fuori del contesto in nuovo css file, solo IE6 li ottiene e sono facili da filtro, se si dovesse decidere di interrompere il supporto IE6.Sono anche molto minimal e non ingombrare il CSS che molto.

Answer 7

Modificare il CSS per browser con supporto specifico non è mai sbagliato, come lungo come si può facilmente lo contengono.Come si noterà, browser standard-compliant, * tosse * tutto salvo MSIE, non sarà mai rompere con i rilasci futuri.Nuovo standard W3C anche non rompere le precedenti norme, di solito deprecare o estendere le precedenti norme il più possibile.

Hanno detto i commenti condizionali che sono grandi per la gestione di IE.Ma avrete bisogno di un po ' di più per la gestione di tutti i browser (mobile, il geco, il webkit, opera, etc.).Di solito, analizzare la richiesta in arrivo intestazioni per recuperare il tipo e versione del browser da parte dell'Utente-Agente param.Sulla base di che è possibile iniziare a caricare il vostro file CSS.

Io credo che il modo in cui la maggior parte di noi fare questo è:

• Primo sviluppo di uno standard-compliant browser (prendiamo FF per esempio)
• Una volta che il CSS è completa approccio providig supporto per IE (questo può essere fatto facilmente con i commenti condizionali, come precedentemente menzionato)
  • Prima di creare un file CSS che sarà regolare tutto per IE6 e qualsiasi altra versione qui sotto
  • Quindi creare un file CSS che gestisce tutto per IE7
  • Infine, creare un file CSS che gestisce tutto per IE versioni di IE8 e maggiore
    • Una volta IE9 viene fuori, assicurarsi di impostare IE8+ gestione per IE8 specifico e creare un IE9+ CSS file con le correzioni richieste
• Infine, creare un ulteriore file CSS per webkit correzioni
  • Se necessario, è anche possibile creare file aggiuntivi specificamente per Chrome o Safari, se necessario

Riguardo browser CSS specifiche implementazioni, io di solito gruppo di tutti coloro che sono nel mio css principale del file (si può facilmente fare una ricerca e per coloro che li sostituiscono in un unico documento, se necessario).Quindi, se qualcosa deve essere trasparente, mi piacerebbe impostare sia l'opacità e filtri (MSIE) nello stesso blocco.Browser basta ignorare le implementazioni di non sostenere, in modo sicuro.Specifiche implementazioni avevo tendono ad evitare sono le implementazioni personalizzate (ehi, mi piace l'-moz casella sopra W3C, ma io proprio non si vuole fare affidamento su di essa).

Come va con i CSS eredità e prevalente, non è necessario ridefinire tutte le dichiarazioni CSS e definizioni in ogni file CSS.Ogni consecutivamente caricato file CSS dovrebbe solo contenere il selettore e definizioni specifiche necessarie per la correzione, e nient'altro.

Che cosa si finisce con è il tuo (enorme) principali file css ed altri, contenente poche righe ciascuno, per il browser specifico correzioni - che è la sintesi di qualcosa che non è molto difficile da mantenere e tenere traccia di.E ' una preferenza personale che browser vostra base css file sarà basato fuori, ma normalmente si rivolgono a un browser con cui creare il minor numero di problemi per gli altri browser (quindi sì, in via di sviluppo per IE6 sarebbe molto poveri decisione a quel punto).

Come sempre, seguendo le buone pratiche e di essere pragmatici e meticoloso con i selettori e le specifiche per ciascuna classe e utilizzo di framework vi condurrà lungo il sentiero della bontà con raramente correzioni necessarie.Strutturare il vostro file CSS è un enorme vantaggio a meno che non si vuole finire con una non ordinata senso di confusione.

Answer 8

Centricle ha una buona lista di CSS hack e la loro compatibilità.

Non credo che troverete un elenco di hack che sarà a prova di futuro, come sapere che cosa stupida, sarà attuato in IE avanti.

Answer 9

Questo articolo è una buona sintesi di CSS hack: http://www.webdevout.net/css-hacks

Answer 10

Ecco un buona lista di filtri che sono molto stabili:

/* Opera */
.dude:read-only { color: green; } 

/* IE6/IE7 */
@media, 
  { 
  .dude { color: silver;} 
  }

/* IE8  \0 */
@media all\0 
  { 
  .dude { color: brown; } 
  }

/* IE9 monochrome and \9 */
@media all and (monochrome: 0) 
  { 
  .dude { color: pink\9; } 
  }

/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
    /* 
    * > /**/ 
    /* hides from IE7; remove if unneeded */


/* Firefox */
@-moz-document url-prefix() 
  { 
  .dude { color: green; }
  }

Answer 11

Quando la definizione di regole, la trovo buona per consentire la naturale degradazione prendere posto, per esempio, in CSS3 c'è il supporto per RGBA modelli Colori, ma non c'è nei CSS2, così mi trovo a fare:

 background-color: #FF0000; 
 background-color: rgba( 255,0,0, 50% );

In modo che quando la regola non su vecchi browser che non li supportano, ridurrà precedentemente stile definito.

Answer 12

Io preferisco il globale commento condizionale tecnica descritta da Hiroki Chalfant;

Utile per mantenere il mio IE-norme mirate side-by-side con i miei standard di mirate regole in un unico valido foglio di stile.