Nomi di classe condizionali
Lunedì 20 Ottobre 2008 - 10:59
di Cesare Lamanna
Come tutti sapete, il metodo forse più seguito per risolvere i problemi CSS di Internet Explorer senza ricorrere all’utilizzo di hack di vario genere nel foglio di stile principale consiste nell’uso dei commenti condizionali. Dall’articolo di Alessandro Fulciniti che ho linkato:
Usare i commenti condizionali e dichiarare le regole necessarie ad IE in un foglio di stile a parte ci consente di creare un CSS principale il più pulito possibile, libero da hack o workaround.
Bene, dalle segnalazioni di Simon Willison traggo il riferimento a questa alternativa presentata da Paul Hammond sotto la denominazione di nomi di classe condizionali.
Il problema che intende risolvere è semplice: creare uno o più CSS ad hoc per Internet Explorer aumenta il numero di richieste HTTP. Se si intende ridurre il numero di tali richieste e dei fogli di stile incorporati nella pagina, si può adottare questa strategia, sempre basata sui commenti condizionali.
Ecco il codice:
<!--[if IE ]> <body class="ie"> <![endif]--> <!--[if !IE]>--> <body> <!--<![endif]-->
Se il browser è Internet Explorer, verrà aggiunto un attributo class="ie" all’elemento body. In tal modo, nel nostro CSS, potremo creare regole specifiche per IE agganciandoci a questo riferimento:
div.foo {
color: inherit;
}
.ie div.foo {
color: #ff8000;
}
Qualcuno conosceva o ha mai applicato un approccio simile? Lo trovate interessante?
Commenti
1
Ho trovato poco tempo fa un approccio simile, realizzato però utilizzando jQuery per assegnare una classe al body. Interessante come approccio, però ha qualcosa che non mi convince del tutto….
2
Anni fa facevo così, un CSS per ognuno dei principali browser, poi parlando con professionisti del settore mi convinsero ad usare gli hack e a non perdere tempo con molti fogli di stile.
Ho notato che questa regola funziona bene, negli anni ho creato sempre un solo foglio di stile piuttosto che diversi fogli e ha funzionato.
Il problema che sto riscontrando oggi è un altro, ovvero le varie versioni di IExplorer che rendono inutile il lavoro alla base di un hack, ma tornare alla creazione di più fogli di stile è una cosa che mi fa solo inorridire.
A volte però si può ovviare creando un foglio di stile minimale con le sole regole da modificare per il browser in questione, ma bisogna stare molto attenti a dove si pone, alla cascata delle regole per capirci e a sovrapporle in modo funzionale, insomma i commenti condizionali funzionano bene ma secondo me per farlo al meglio dovrebbero implementare altre forme di condizione, come un select/case, sarebbe comodo escludere una serie di browser in favore di uno solo senza giri di strani hack.m.
# - postato da Marco GRAZIA - 20 Ottobre 2008 - 11:27
3
Assegnare una classe al body solo per ie così da poter applicare correzioni di stile potrebbe essere un ottima idea, ma farlo con i commenti condizionali mi sembra una cosa veramente sporca (io li odio, forse per questo non mi piace l’idea).
Comunque sempre meglio applicare quest’idea con un js.
4
Questa soluzione, oltre a far aumentare il codice css (come nel caso dei commenti condizionali), comporta anche una modifica nel template stesso e ciò potrebbe non essere banale, soprattutto se la modifica riguarda molte pagine.
Forse l’esempio preso non è propriamente utile, però avrebbe già più senso se il mio scopo fosse quello di servire markup differente (come ad esempio per l’inserimento di un filmato swf)
infine, se volessi riconoscere IE dai browser restanti potrei usare una regola CSS con la concatenazione di classi (che, se non ricordo male, IE non supporta), ovvero se il mio codice fosse direttamente
<div class=”notIE classe”>…<div>
in Explorer mi basta creare una regola css .classe { … }
nei restanti browser moderni ne sovrascrivo successivamente il comportamento con .notIE.classe { … }# - postato da Fabrizio Calderan - 20 Ottobre 2008 - 11:30
5
Mi sembra una soluzione molto sporca. Molto meglio avere nel commento condizionale la richiesta al file css alternativo in cui sono dichiarate alcune regole apposite per IE che sovrascrivono quelle di principali.
# - postato da Martin Sarsini - 20 Ottobre 2008 - 11:57
6
Anche io preferisco decisamente il tipo di approccio suggerito da @Marco Sarsini.
Tiene ben separati hack e regole aggiuntive specifiche per IE e non intacca le performance utilizzando altri browser, inoltre l’approccio suggerito nel post porterebbe, nel caso si usassero regole non standard, ad invalidare l’intero foglio di stile.
L’uso di javascript lo escluderei a priori, visto che la loro interpretazione è la cosa che incide di più nella velocità di resa di un browser ed inoltre non è sempre detto che siano abilitati.
# - postato da Gianluca S. - 20 Ottobre 2008 - 12:36
7
Credo che l’approccio presentato possa essere interessante solamente in presenza di minime variazioni rispetto al codice principale.
Rimango dell’idea quindi che vada meglio utilizzare i commenti condizionali quasi esclusivamente per includere dei fogli di stile esterni; il codice risulta più pulito e più snello.
8
Sono d’accordo con copsteve.
Un approccio così va bene se hai solo qualche variazione minima e non ti tiene al riparo dal dover mettere cmq degli hack nel foglio di stile. E poi bisogna considerare le varie versioni di ie…
Boh…# - postato da milus - 20 Ottobre 2008 - 20:10
9
Io non ho mai usato condizionali. Ho sempre comunque cercato soluzioni semplici che comunque si adattassero un pò a tutti i browser. Ma vale la pena testare e valutare un pò. Ma la mia idea è sempre la stessa… i tipi di browser stanno aumentando, firefox, ie, safari, google chrome, flock…ecc…ecc… a che serve? tutti si somigliano alla fine, grosso modo. Complica solo la vita a noi sviluppatori. Meglio forse iniziare ad usarne uno oppure usarne tanti ma che leggano i vari siti in html/css allo stesso IDENTICO modo. Stop! :)
10
Scusate se magari la risposta non centrava nulla, ma a mio parere…andava detto :D
11
“aumenta il numero di richieste HTTP” capirai, per siti aziendali o con pochi accessi non vedo quale sia il problema, magari si perde del tempo per evitare una richiesta e poi si eccede con gli slice gif o con una marea di javascript che pianta il browser.
La domanda è: l’utente finale se ne accorge di tutte queste migliorie??? riposta: NO.
Il tuning estremo dell’ html\css\js ha senso solo in progetti dove bisogna fare i conti con centinaia di accessi contemporanei (corriere.it, ebay.it amazon.com) il sito www.metalmeccanicasondtriospa......it con 30 accessi al giorno non ha bisogno di questo tuning in quanto non sarebbe percepito ne dal server ne dal client.
Magari chi ha un housing potrebbe decidere di non stressarlo… ma il tempo il tempo che una persona perde nel risparmiare una manciata di KB moltiplicato per un’anno di lavoro…. è maggiore del costo di upgrade della macchiana\banda?
Io noto che i grandi siti poco badano a questo tipo di ottimizzazione che…di base è un OTTIMA pratica ma in molti casi è FINE A SE STESSA, come se fosse un’esercizio di stile.
Io ho abbandonato molte di queste pratiche, l’ottimizzazione del codice la faccio solo a livello macroscopico.
12
Nella mia (per ora) breve esperienza, non mi sono ancora scontrato con problemi che richiedessero hack.
Mi è sempre bastato (con grande fatica in verità) cercare soluzioni cross-browser.
Nell’unico caso di piena incompatibilità ho dovuto però creare un css ad hoc per ie6 (problemi vari con float e position:absolute).
penso che in quel momento, una soluzione come quella proposta da questo post mi sarebbe stata piuttosto utile e mi avrebbe fatto risparmiare tempo..# - postato da Zave - 21 Ottobre 2008 - 12:11
13
mi sembra un’idea eccelente, permette di evitare di scrivere hack complicati e non validi che sporcano tremendamente il codice, permette massima libertà nell’organizazione del css, si può tranquillamente usare una sola richiesta http se opportuno.
molto bello!
# - postato da devsmt - 21 Ottobre 2008 - 18:19
14
l’idea di usare hack mi disgusta così come l’idea di usare i commenti condizionali. Non li ho mai usati e mai li userò.
L’uso di javascript per applicare i css è ridicolo, per quanto anche non accessibile.
15
Quali richieste HTTP?
!–[if IE ]
link rel bla bla bla href=”percorso al file css
![endif]–se il browser e’ differente da IE6 non viene fatta alcuna richiesta HTTP
# - postato da Martin Sarsini - 22 Ottobre 2008 - 11:58
16
Ho sempre detestato i commenti condizionali così come i tag proprietari. D’altronde i browser si comportano diversamente e usare in modo appropriato le cascate dei fogli di stile mi pare la soluzione più corretta.
Si potrebbe usare come già segnalato un foglio base con tutte le regole generali e tanti fogli di stile minimi (1 per ogni browser).
Però invece di usare i commenti condizionali di IE non si potrebbero usare le struttura condizionali lato server ? Tipo SSI per Apache ? A seconda del browser carico SOLO il css di base e le regole ridefinite del browser richiedente.# - postato da Mazangaz - 23 Ottobre 2008 - 09:42