Ho provato a mettere il IE condizionale in un file CSS, ma che non sembra funzionare. Esiste un costrutto per CSS in modo che tu possa dire di usare questo colore di sfondo se il browser è IE? Anche io non sono riuscito a trovare nulla se poi altri condizionali, esiste? Qualcuno può fornire un esempio.si fa a mettere condizionali di IE nel file css o nel file html?
L'IE condizionale (s) andare in HTML, e dovrebbe essere usato per includere un file CSS aggiuntivo che andrà a sovrascrivere i CSS come necessario per hack IE.
Esempio:
<head>
<style type="text/css">
@import url(/styles.css);
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
</head>
Il [commenti condizionali] (http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx) sono commenti HTML e quindi non può essere utilizzato in un contesto CSS
Se si vuole puntare regole CSS specifiche solo per. IE, devi usare gli hack CSS
Ho preso spunto da jQuery e uso la mia formattazione condizionale per creare elementi contenitore
<body class="center">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
<div class="site text-left">
</div>
<!--[if IE]></div><![endif]-->
</body>
poi posso mettere le informazioni condizionale in css come tali
.site { width:500px; }
.ie .site { width:400px; }
#ie5 .site { width:300px; }
Non esiste condizionali in CSS, ma è possibile utilizzare la "Holly hack" se le differenze tra le varie versioni di IE aren 't significativo:
div.class { /* whatever */ }
* html div.class { /* IE-only */ }
Suggerirei di usare qualcosa di simile alla soluzione proposta da bendewey, ma andare per le classi condizionali in tutto il tag HTML invece. Per quanto ne so questa è stata la prima volta nel Blog di Paul Irish (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
e poi nel css si utilizza:
.box {background: blue;}
.ie7 .box {background: green;}
Questo ha alcuni vantaggi rispetto alla soluzione con un extra div. Per i dettagli controlla il post sopra.
Io uso questo trucco, io stesso. Rende i file CSS più ordinati * e * ti impedisce di preoccuparti della precarietà del selettore. –
Approccio interessante, non l'avevo mai visto prima. Personalmente preferirei mantenere il mio markup in ordine rispetto al mio CSS. Ma a ciascuno il proprio! –
+1 per il trucco elegante. – Ishmael