Nei molti articoli su HTML.it ho sempre cercato di evitare sia hack che commento
condizionale, mantenendo il CSS il più pulito e semplice possibile. In certi
casi però servire dichiarazioni e/o regole specifiche per determinati browser
sembra necessario per ottenere una consistenza di resa cross-browser.
àˆ pur vero che, sebbene si tratti di pratiche di sviluppo che ho sconsigliato più volte, si tratta di strumenti che uno sviluppatore dovrebbe conoscere per poter usare in caso di necessità . àˆ per questo che non molto tempo fa è stato pubblicato l'articolo Hack per IE7 con la relativa tabella di compatibilità .
Qui sul blog ho presentato le diverse soluzioni per miniature centrate, tra cui Miniature centrate con i CSS. In questo caso non sono riuscito ad evitare la discriminazione per IE, e ho dovuto usare il commento condizionale. Vorrei proporre qui sul blog l'alternativa che usa invece gli hack. Ecco il remake.
Nel caso dell'esempio originale ho dovuto usare il commento condizionale per servire una regola specifica per tutte le versioni di IE:
<!--[if IE]>
<style type="text/css"> ul#gallery li{font-size:150px;height:auto}
</style>
<![endif]-->
Ora vediamo come nel remake sia possibile procedere ad includere la regola nel foglio di stile principale servendola esclusivamente alle varie versioni di IE:
* html ul#gallery li{font-size: 150px;height: auto} /* hack per IE5.5 e IE6 */
*:first-child+html ul#gallery li{font-size: 150px; height:auto} /* hack per IE 7 */
La prima regola (che usa il selettore * html ul#gallery li
) usa un'hack noto come star html e servirà il blocco dichiarativo solo ad IE fino alla versione 6 inclusa; mentre
la seconda (il cui selettore *:first-child+html ul#gallery li
) è necessaria per IE7. Nota: per qualche strano motivo, se si accorpano le due regole in una sola separando i due selettori da una virgola, la soluzione non ha effetto su IE5.5 e IE6.
Con queste due regole aggiuntive il remake ha la stessa compatibilità attuale dell'esempio originale, e non necessita del commento condizionale. A voi la scelta sulla strategia da utilizzare.