Regole ad hoc con CSS Browser Selector
Lunedì 27 Ottobre 2008 - 09:26
di Cesare Lamanna
Non so se è una genialata o una delle tante cose che lasciano il tempo che trovano (potrebbe anche essere in effetti un’inutile genialata…).
Parliamo di CSS Browser Selector una piccola libreria Javascript (appena 1kb) che potete scaricare da Github. Cosa fa? Semplice. Visualizzate la pagina ufficiale, date un’occhiata al codice HTML con Firebug, il Web Inspector di Safari/WebKit o altri strumenti simili per IE oppure Opera, in particolare all’elemento html. Noterete la presenza di una serie di classi: sono aggiunte, appunto, dalla libreria e nell’ordine indicano il motore di rendering del browser, il browser stesso, il sistema operativo, il supporto di Javascript. Ecco come si presenta sul mio Safari:
class="webkit safari mac js"
Ed ecco su Firefox:
class="gecko ff3 mac js"
Facile a questo punto capire cosa si può fare nei CSS. Sfruttando i selettori si possono a questo punto creare regole ad hoc per ogni singolo browser tra quelli supportati dalla libreria e anche per sistema operativo. Vogliamo uno sfondo giallo su Opera per Mac? Ecco come si fa:
.mac.opera body {background: yellow}
Commenti
1
Sono abbastanza scettico su queste soluzioni, che siano js o semplicemente degli hack css.
Quando realizzo un sito cerco sempre di fare in modo che la resa sia ottimale senza utilizzare soluzioni “su misura”, altrimenti il codice diventa sempre più complesso da mantenere. Realizzare un sito che abbia una buona resa cross-browser non è impossibile.
Se poi vogliamo fornire ad IE6 qualcosa di diverso per spingere all’upgrade è un altro discorso, questo può essere uno dei modi :)
2
Concordo Tom. A margine: uno dei commenti che ho letto in giro è più o meno di questo tono: oggi avere un browser specifico come target significa per lo più parlare di IE. E per questo ci sono già i commenti condizionali.
# - postato da Cesare Lamanna - 27 Ottobre 2008 - 11:17
3
Quoto in pieno Cesare
Ci sono già i commenti condizionali per IE che è il problema più grande.
Se si vogliono fare “le figate” si può normalmente usare del codice javascript per switchare le classi css ma basare tutto su javascript anche là dove non serve! I commenti condizionali sono una delle più belle cose che IE ci mette a disposizione (è vero anche che se fosse standard non servirebbero) perchè non usarli?# - postato da Marco Ronchese - 27 Ottobre 2008 - 13:13
4
questa è l’voluzione del sistema basato su commenti condizionali e selettori css, comodissimo e pulitissimo, in questa variante è ancora più flessibile e preciso (utile l’individuazione di safari) adesso manca solo una versione con il riconoscimento del browser sul server(più veloce, ma invalida la cache del server) e js come fallback.
con un sistema basato sul solo js si ha un rendering + lento o addirittura “flash of unstyled content” se lo script è mal posizionato.
è una autentica genialata.
la mia umile opinione è che per non avere bisogno di soluzioni simili un programmatore
- o è estremamente competente con css e usa hack che rendono il codice difficile da mantenere
- o non usa css oltre che per dare il colore ai testi
- o non testa su niente altro che FF# - postato da devsmt - 27 Ottobre 2008 - 22:20
5
ecco, io personalmente rientro nella categoria dei programmatori server-side che di css sanno veramente poco, e soprattutto di cross-browsing, e questa micro-libreria mi è di enorme aiuto :)
grazie