Utilizzo di stili CSS diversi per browser specifici

Question

Qual è il modo migliore per avere CSS separati per IE e altri browser? Sto solo pensando agli utenti di IE, Firefox e Safari. Soprattutto ora con il supporto CSS3 nella maggior parte dei browser ma IE.

I vari modi per farlo che ho incontrato sono

1. caricamento di fogli di stile separati usando condizionalmente <!--[if IE] >
2. sottolineare l'hacking e vari altri hack IE in linea

Preferisco (2) come (1) è un lavoro extra soprattutto durante lo sviluppo. Ma (2) non sembra funzionare tutto il tempo. Qual è il modo più efficiente?

Answer 1

Vorrei un foglio di stile che tutto riprende nella parte superiore del documento.

sotto questo fai il tuo        [! - [if IE]] foglio di stile condizionale.

Qui basta sovrascrivere gli stili che stanno causando problemi in IE. - l'ultimo stile per una particolare classe che viene scelta è quello che verrà seguito.

Answer 2

Il nostro team gestisce i CSS seguendo tre regole:

1. Assicurati che i file CSS generali / comuni funzionino come dovrebbero con tutti i browser il più vicino possibile.
2. Gestisci tutti IE " bugs " in file separati, controlla il caricamento dei fogli di stile con condizioni IE.
3. Non sono consentiti hack a meno che non sia possibile farlo funzionare seguendo le prime due regole.

Answer 3

Sono d'accordo nel mantenere tutti i tuoi CSS principali in un unico file. Se si utilizza ASP.NET, è possibile utilizzare un WebHandler per gestire quale CSS viene effettivamente inviato. Sono sicuro che altre lingue hanno soluzioni simili. Ciò ti consente di inviare solo ciò di cui hai bisogno e di consentirne la memorizzazione nella cache. L'altro vantaggio è che puoi combinare più file CSS (se è così che fai) e presentarne solo uno. Questa è una buona pratica poiché riduci il numero di richieste al server web.

Puoi quindi scrivere cose come [if lt IE 8] margin: 0px; e non verrebbe inviato a IE8 o FF ecc.

Se stai usando solo HTML, devi seguire le condizioni di stile [! - [if IE]] di cui sopra.

Usiamo un WebHandler nel nostro progetto molto ampio e non lo farei mai diversamente.

Vedi http://www.conditional-css.com/download . È disponibile per PHP, C # e C

Buona fortuna.

Answer 4

<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

Questo trucco usa ampiamente Yandex (aka " russo google ") per ridurre le richieste HTTP. market.yandex.ru utilizzando questo, ad esempio.

Answer 5

Puoi usare anche questo; Alcune volte le condizioni potrebbero non funzionare dove dobbiamo scrivere gli stili nel mezzo del codice.

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>  

Seleziona $browser con:

IE & # 8211; & # 8220; MSIE # 8221 &;

Firefox & # 8211; & # 8220; Firefox # 8221 &;

Safari & # 8211; & # 8220; Safari # 8221 &;

Opera & # 8211; & # 8220; Opera # 8221 &;

Chrome & # 8211; & # 8220; Chrome # 8221 &;