Quante volte ci è capitato di notare differenze di stili su siti web a seconda del Browser utilizzato?
Come ben saprete, purtroppo i diversi browser in circolazione non interpretano il codice CSS allo stesso modo.
La soluzione per risolvere questo inconveniente è creare dei Conditional-CSS!
Fogli di Stile (CSS) che hanno la funzione di verificare tramite condizioni la versione del browser e di conseguenza attivare o meno alcune proprietà alla classe.
Vediamo insieme la sintassi del codice da inserire nei nostri CSS
Ecco un esempio di Conditional-CSS:
.box {
width: 400px;
[if IE 6] width: 600px;
padding: 100px 0;
}
In questo caso se il browser prescelto sarà Internet Explorer 6 la larghezza della nostra classe chimata box sarà larga 600 pixel altrimenti 400 pixel
Sintassi Base
[if {!} browser]
[if IE] oppure se è diverso da IE6 [if ! IE]
[if {!} browser version]
[if IE 6] oppure se è diverso da IE6 [if ! IE 6]
[if {!} condition browser version]
[if lt IE 6] oppure se non è Minore di IE6 [if ! lt IE 6]
Browser
- IE – Internet Explorer
- Gecko – Gecko based browsers (Firefox, Camino etc)
- Webkit – Webkit based browsers (Safari, Shiira etc)
- Opera – Opera’s browser
- IEMac – Internet Explorer for the Mac
- Konq – Konqueror
- IEmob – IE mobile
- PSP – Playstation Portable
- NetF – Net Front
Condizioni
- lt – Minore di
- lte – Minore di o Uguale a
- eq – Uguale a
- gte – Maggiore di o Uguale a
- gt – Maggiore di
Per quanto riguarda l’inclusione di fogli di stile su piattaforme server come PHP, C, C# è possibile utilizzare il sito opensource conditional-css.com
Il sito permette di compilare automaticamente in due sempici click i codici necessari per adoperare o includere CSS condizionati ottimizzati al meglio
Ecco una pagina demo in cui potremo vedere l’utilizzo di un CSS condizionale a seconda del browser usato per visualizzare la pagina.
25 Commenti
[…] JuliusDesign ci presenta Conditional-CSS, cioè un foglio Css, che […]
Hai ragione bel argomento,
diciamo però che se il codice css è pulito e se uno sa molto bene i fogli di stile si riesce a fare a meno di questo Conditional-CSS
IE e Mozzila non vanno per niente daccordo…specialmente con le nuove versioni.
Peccato che adesso IE 6 e IE 7 ad esempio visualizzano diversamente il css perciò la questione si complica ulteriormente anche tra lo stesso browser….hehehehehe
Ciao
Non li conscevo! va be non sono un espero!
Comunque funzionano figata!
Mi hai salvato!
Ottima soluzione!
Oramai i browser sono davvero troppi, e ci sono ancora persone poco esperte che utilizzando IE6, davvero mostruosa la cosa…
Non si potrebbe unificare tutto a Firefox? sarebbe meglio…
@Marchino magari
Molto interessante l’argomento, vista la continua evoluzione/aumento dei browser…
COMPLIMENTI JULIUS!
@Marco ottimo portfolio, belli anche i fotoritocchi bravo!
Mi stanno capitando spesso sottomano negli ultimi tempi lavorando un po di piu lato codice, e il tuo articolo capita a fagiuuuolo! Bentornato
Oppure si può utilizzare il PHP:
<?php
if (ereg("MSIE", $_SERVER['HTTP_USER_AGENT'])) {
echo "";
}
else {
echo "";
}
?>
Sinceramente preferisco questa di opzione, in questa maniera non si appesantisce troppo il singolo file .css, settando più regole.
L’unico inconveniente e che non potrete salvare le pagine con il solito .html, ma in .php.
Ciao!
Zio preferisco .php fa + figo
.html sembra pagina statica hahahahahah :):)
Ho trovato un altro articoletto interessante…
http://tinyurl.com/5usce5
@Gigi Ottima segnalazione ;)
Ciao julius, per caso sai se c’è qualcosa relativo a Safari su Mac come condizionale? :) Grazie
Ciao Julius ti segnalo una correzione di dovere.
Ho testato i conditional css come hai proposto tu,il problema è che non funzionano.
Questo perchè il codice css non ha la capacità di riconoscere il browser del client.
Il conditional css è giusto ma non va utilizzato nella dichiarazione degli stili stessi, bensì quando inserisci il link al file css. In questo modo:
<!--[if IE 6]>-->Spero di essere stato utile.
Ciao alla prossima!
Ciao, così come sono riportate le condizioni non funzionano in alcun modo. Sarebbe necessario creare dei files d’ esempio anche perchè, vedendo quanto scrive Riggio Filippo Matteo non è molto chiaro dove/come inserirlo inoltre è una riga commentata e non verrebbe eseguita…..
Riggio Filippo Matteo ha scritto:
Invece funziona, basta andare sull’apposito sito che ti crea il file php col nome del tuo file css (e lo importi con @import).
E’ noto che, purtroppo, non si possono usare i commenti condizionali direttamente nel css per farli interpretare dal browser ed infatti di ciò si occupa lo script in php (o in C) che viene eseguito lato server.
ciao,
Gabriele
@ Julius:
Ciao,
sto usando anch’io il sistema del conditional-css, ma ha una limitazione grossa: non distingue le “sotto versioni” del motore di rendering.
Ad esempio tra gecko 1.9 e 1.9.2.
Probabilmente modificando il file c-css.php si può fare, ma io non riesco bene a capire come. Mi pare sia la funzione ‘fnSetUserBrowser’ e quella successiva che arrotonda ad un solo decimale il riconoscimento…
Tu hai forse idea di come fare?
grazie :)
Gabriele
aiuto, sono confuso!
ho costruito un sito su firefox/Mac e l’unica differenza tra altri browser/SO è solo la lunghezza del menu orizzontale.
vorrei quindi applicare giusto una regoletta per i vari IE, a questo punto la mia domanda è dove va inserito il giusto codice? nel CSS? o nel file dove risiede il codice del menu?
si può fare una differenza anche in base al SO?
grazie ragazzi scusate le mille domande
infatti così non funziano gli stili condizionali. Il problema è che sono regole interpretate dall’html e non dai file css…
@ZioSteve: con la potenza computazionale dei computer moderni e la velocità delle connesioni sarebbe meglio appesantire i file css ( o html e js) piuttosto che appesantire il server con un controllo inutile. Inoltre per la separazione dei compiti concettualmente è meglio inserire regole che definiscono il layout nei file html. Mi spiego: se un giorno un grafico deve rifare la grafica del sito ma non conosce il php (come è giusto che sia) si può trovare in difficoltà. Separando la logica di presentazione tramite i css il grafico si occupa di fare il grafico e il programmatore di fare il programmatore…
Ciao,
Ho provato con gli ID ma sembra non andare. Come posso farE?
non mi ha mai funzionato.
Meglio il * e il _
credo che http://lesscss.org/ potrebbe essere utile a qualcun altro :P
Come sempre una montagna di confusione, io sono anni che ci litigo con la visualizzazione cross-browser…tante guide, articoli, consigli, etc….ma alla fine ognuno interpreta le cose alla propria maniera, peccato!!
Ci sarebbero i presupposti per uniformare tutto con la validazione w3c peccato che anche lei sia liberamente interpretata dai vari browser……
Ciao Julius, sto cercando da diverso tempo informazioni sulle iterazioni del css, purtroppo però ho trovato solo quelle relative al browser agent, come in questo caso.
Ho trovato interessante il tuo sito, che ho scoperto ora per la prima volta, per cui ho deciso di porre a te questa domanda:
Esistono delle iterazioni nel CSS non destinate al cross browsing? Mi spiego meglio: se io ad esempio volessi scrivere un iterazione del tipo “if [a:hover] then div.dropdown {visibility:visible;}” esiste una sintassi simile nel CSS?
Questo semplificherebbe molto la vita sostituendo alternative validissime ma macchinose come l’utilizzo degli elementi figli o di librerie jquery, risparmiando anche in leggibilità del codice, fogli di stile esterni e velocità di visualizzazione del sito.
Grazie!
Danilo Gentile ha scritto:
hahaha, che risateee, questa è la bellezza del tornare a casa davanti al pc, dopo un sabato sera in 5 persone e 2 bottiglie di super alcolici, convinto di esser sobrio…
Puoi leggere… fissare lo schermo… pensare e ripensare… per poi partorire invenzioni che rivoluzioneranno il modo di programmare… senza ricordarti che esistono già, e che le usi tutti i giorni…
Poi dopo quasi 20 ore ti ricorderai di quel momento e dirai… “ODDIOOO, MA L’HO FATTO DAVVERO??? ” hahaha… (sarebbe bello conoscere il numero di “ma ci sei o ci fai?” che ho collezionato e continuerò a collezionare grazie a questo commento, ma dovrei mettere una stringa di Google Analytics sulle labbra di tutti i lettori per saperlo…)
con affetto… Alessandro Volta :)