Per chi, come me, fa a botte con i vari browser per adattare gli stili CSS per ciascuno di essi, non può fare null’altro che usare vie traverse, come sfruttare i bug di ciascun browser per fargli leggere delle regole CSS adattate per questi ultimi, oppure l’applicazione di javascript che rileva il browser utilizzato dall’utente che specifica i fogli CSS da utilizzare, eccetera.
Spesso questi metodi sono anche un po’ troppo scomodi per la non-pulizia del codice, che lo fa irrimediabilmente invalidare.
La soluzione al problema è Conditional-CSS, uno script in un file PHP che ci permette di leggere il CSS in modo condizionale per ogni browser. Con questo metodo si risparmia molto tempo e la manutenzione è più immediata. Un esempio delle possibilità di questo script è questo:
.box { width: 400px; [if IE 6] width: 600px; [if Opera] width: 500px; }
Indovinate un po’? Esatto, normalmente il div con classe “box” è grande 400px, ma grazie a Conditional-CSS, con le regole del CSS condizionale se vediamo la pagina da IE 6, il box appare di 600px mentre in Opera lo vedremo di 500px!
Il tutto mantenendo il codice pulito e perfettamente conforme agli standard W3C. Questo perchè lo script PHP rileva dinamicamente il browser utlizzato e la sua versione, così applica il valore da mostrare come default, senza – ovviamente – i parametri impostati (cioè i vari [if IE 6], eccetera).
I browser supportati attualmente sono questi:
- IE - Internet Explorer
- Gecko - Gecko based browsers (Firefox, Camino, ecc)
- Webkit - Webkit based browsers (Safari, Chrome, ecc)
- SafMob – Mobile Safari (iPhone / iPod Touch)
- Opera - Opera’s browser
- IEMac - Internet Explorer per il Mac
- Konq - Konqueror
- IEmob - IE mobile
- PSP - Playstation Portable
- NetF - Net Front
Implementare lo script di Conditional-CSS è alquanto semplice. Prima di tutto si va in questo sito e si immettono i valori necessari nel form a destra. Tutto quello che avete bisogno di specificare è solamente il nome del foglio di stile (normalmente dovrete mettere style.css ma varia a seconda dei casi) e, se siete vanitosi, anche il vostro nome e il copyright da usare (ma non è vitale per il funzionamento dello script).
Dopo di chè, premendo su “Go!“, la pagina vi darà da scaricare un file “c-css.php“. Questo va messo esattamente nello stesso percorso dell’attuale style.css.
Infine, andate a modificare la pagina dove avete specificato il vostro foglio di stile css (solitamente header.php nel caso di un tema WordPress) e modificatene il riferimento, in modo che debba puntare al file “c-css.php”:
<!--
@import url('c-css.php');
-->Ora, se avete finito potete iniziare ad adattare il vostro foglio di stile CSS in modo condizionale ai vari browser, il tutto con una flessibilità davvero disarmante. 
La legenda dei parametri impostabili la trovate nel sito conditional-css.com.
La sapevo già
Però bel post
Rispondi al commento di Bl@ster
@Bl@ster:
Rispondi al commento di Piplos
Io per esempio non me lo ricordavo…
)
Css l’ho subito dimenticato il giorno dopo! (
Comunque si potrebbe storpiare qualche css per dire “Guarda come si vede con IE!!! SCARICA FIREFOX!!!”
Rispondi al commento di koalalorenzo
@koalalorenzo: E’ un idea, guarda non è neanche tanto difficile da realizzare
Rispondi al commento di Piplos
gran bel post ma per me non del tutto chiaro
io mi trovo a modificare il css per wordpress, ho seguito le istruzioni alla lettera ma non so di preciso come modificare la stringa nell’header.
qualcuno riesce ad aiutarmi con questo passaggio? grazie mille
p.s. anche io nell’eterna lotta contro IE
Rispondi al commento di sergio
@sergio: Posta qui la stringa contenente la dichiarazione CSS del tuo tema wordpress.
Rispondi al commento di Piplos
grazie mille
questo il testo del mio header
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="; charset=" />
<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="pingback" href="" />
però il css del mio menu che vorrei modificare è in un altra cartella in quanto si tratta di un plugin.
Rispondi al commento di sergio
@sergio: Il foglio di stile non è dichiarato correttamente. Manca il percorso del file nell’attributo href. Dovresti fare così:
<style type=”text/css”>@import url(‘path/per/c-css.php’);</style>
Rispondi al commento di Piplos
scusa mi mi sono accorto solo adesso che non mi ha copiato il codice per bene.
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="; charset=" />
<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="pingback" href="" />
<body >
Rispondi al commento di sergio
@sergio: Non cambia molto. Dovresti cambiare la linea relativa al CSS con quella che ti ho indicato nel precedente commento.
Fai attenzione a cambiare “/path/per/c-css.php” con il percorso del tuo file c-css.php
Rispondi al commento di Piplos
scusami ma proprio non riesco a capire questo discorso.
nell’header ho la dichiarazione per il css (style.css)
io vorrei applicare il conditional css al mio menu creato con un plugin e che quindi ha un suo foglio di stile css.
c-css.php l’ho creato da quest’ultimo e l’ho caricato sia nella root del mio template sia in quello del plugin.
e adesso? disperazione totale
Rispondi al commento di sergio
@sergio: Non serve caricare lo stesso stile CSS in due parti. Va bene nella root del template. In pratica ora dovresti sostituire la linea del CSS così:
<style type="text/css">@import url('<?php bloginfo('template_url'); ?>/c-css.php');</style>
Rispondi al commento di Piplos