"Bello, bellissimo, chissà quante cose potrei farci... Peccato che il browser X non lo supporta e non lo supporterà mai...". àˆ un grido di dolore a cui siamo/siete abituati. Prendiamo i CSS3. La specifica è ben lungi dall'essere giunta alla sua definitiva sanzione da parte del W3C, ma molte parti importanti sono già implementate nei principali browser (per un quadro riassuntivo rimando all'ottimo CSS3.info o alle tabelle comparative di Quirksmode).
Non sono pochi, dunque, quanti suggeriscono di adottare al riguardo una strategia centrata sul cosiddetto progressive enhancement. Così chiarisce il concetto Alessandro Fulciniti nell'articolo CSS3 a piccoli passi:
Il primo e più importante concetto è che dovremo introdurre soluzioni simili attraverso quello che è il progressive enhancement, ovvero l'arricchimento progressivo. Dovremo fare quindi in modo che i browser capaci siano in grado di beneficiarne, ma garantire soprattutto che sugli altri browser non vengano compromessi aspetti fondamentali quali resa visuale, usabilità , accessibilità e fruibilità dei contenuti.
Un caso da manuale rispetto a questa impostazione è quello del cosiddetto General sibling combinator (~
) definito nella specifica CSS3 e che si affianca, concettualmente, al selettore dell'elemento adiacente (+
) introdotto con i CSS2.
Come chiarisce bene in questo post Eric Wendelin, la differenza è che con il selettore + applichiamo uno stile solo all'elemento immediatamente adiacente di un altro elemento, mentre con ~ lo applichiamo, genericamente, a tutti gli elementi adiacenti di un altro elemento. Gli esempi presenti nel post di Wendelin sono chiari ed esaustivi.
E se navigate con un browser di ultima generazione (IE7+, FF2+, Opera 9.5+, Safari 3+) non avrete problemi a visualizzarli correttamente. Non sarebbe cosa sensata, attuando la strategia del progressive enhancement di cui sopra, iniziare ad usarlo se necessario e utile? Come vi comportate in questi casi?