Utilizzare i CSS3 significa spesso avere fogli di stile non validi. Come affrontare il problema?
Uno dei problemi principali nell’utilizzo dei CSS3 è la creazione di fogli di stile con codice valido. I CSS2 sono ormai uno standard, ma non è così per le nuove specifiche.
Escludendo qualche rara eccezione, la maggior parte delle proprietà hanno nomi diversi e sono supportate in maniera differente a seconda del browser: questo non semplifica il lavoro degli sviluppatori. Basti pensare ad una proprietà ormai diffusa su tutti i browser (escludendo il solito Internet Explorer): border-radius. Su Firefox è necessario utilizzare il prefisso “moz-“, su Safari e Chrome bisogna anteporre “webkit-“ , ed ognuna di queste forme ovviamente non è riconosciuta dal W3C.
Il risultato è che se si desidera utilizzare i CSS3 per dare ad una parte dei propri utenti una migliore esperienza di navigazione, non sarà possibile validare il foglio di stile.
Come comportarsi in questo caso? L’unica soluzione è trovare un compromesso. Su questo sito ad esempio l’unica proprietà particolare che ho utilizzato è text-shadow, ben supportata nella sua forma standard. Ho invece trascurato proprio border-radius e altre proprietà simili, che però utilizzo su altri progetti come il mio blog personale, dove sono meno rigido per quanto riguarda la validazione dei CSS.
La colpa di questa situazione è da attribuire soprattutto alla lentezza del W3C, perchè i produttori di browser stanno dimostrando una grande attenzione alle novità. Supportare certe funzionalità è comunque motivo di vanto sulla concorrenza. Non è possibile però chiedere ai produttori di utilizzare fin da subito la forma standard delle proprietà: le specifiche potrebbero cambiare prima del raggiungimento della loro forma standard.
Proprio sull’uso dei CSS3 sarei curioso di conoscere anche il vostro punto di vista: li utilizzate? Vi preoccupate della validazione del foglio di stile?
Uno dei migliori suggerimenti sull’argomento, segnalato su CSS3.info, riguarda una possibile modifica al validatore del W3C. La soluzione ideale infatti sarebbe vedere segnalate come “experimental” o “warning” le proprietà dei CSS3 ancora sperimentali, consentendone l’uso senza problemi. Gli errori sparirebbero per la felicità di tutti, ma è una speranza probabilmente troppo ottimista.
Personalmente alcune proprietà come il border radius e l’opacity sto incominciando ad usarle sempre più spesso. Dopotutto un effetto gestito dal CSS sicuramente pesa di meno alla pagina piuttosto che usare un Javascript che fa lo stesso effetto. Il problema della validazione per ora l’ho “risolto”, se risolto si può definire, creando un nuovo foglio di stile dove uso solo queste proprietà. Ha i suoi svantaggi, come una nuova richiesta HTTP, codice non ottimizzato ecc, però almeno ho il codice principale pulito e ben validato e un unico foglio di stile che contiene gli errori.
Io uso i fogli di stile CSS3 solo se richiesto dalle proprietà del layout grafico, altrimenti meglio tenersi sul 2.1 standard… Non é facile non essere tentati dall’uso della trasparenza o dei div con angoli stondati, anche se poi bisogna correre ai fix per IE. Per avere fogli di stile validati, bisogna cambiare il link sull’icona che rimanda alla pagina di validazione del W3C: infatti è possibile indicare al validatore che stiamo usando un CSS 3, e quindi validarlo correttamente. Unico problema sono i valori specifici dei vari browser, indicati nell’articolo: per ovviare a questo spiacevole inconveniente io solitamente creo dei fogli di stile di ‘fix’ e li faccio caricare con dei condcom, che essendo scritti dentro commenti non vengono presi in considerazione dal validatore W3C.
Io ho sempre aspettato gli standard, finora. A lungo andare l’attesa diventa seccante e ultimamente ho iniziato a usare proprietà come border-radius a costo di non validare il CSS. Text-shadow, invece, da Firefox 3.5 lo uso tranquillamente, con buona pace per IE.
Evito in genere di usare js correttivi per lo stile.
La soluzione di Marco Pedota, dei condcom, mi pare la migliore.
@Marco: molte persone però nemmeno mettono il link (tra cui io che su siti di aziende non mi sembra molto professionale) alla validazione quindi è ovvio che validando direttamente dal W3C ricevi gli errori. Però non mi è chiara una cosa riguardo le proprietà specifiche dei browser. Hai detto di usare commenti condizionali ad hoc ma come li gestisci per browser diversi da ie? Usi una unica specifica “diverso da ie” dove includi il foglio di stile o altro?
@Ted: se Firefox 3.5 supporta pienamente Text-shadow, tieni conto che non tutti aggiornano il browser, nemmeno quando compare un avviso: “c’è Firefox 3.5 lo aggiorniamo?”. Essendo una “miglioria estetica” non predominante nell’aspetto di una pagina, puoi tranquillamente includerla e pazienza per chi non la supporta.
Ripensando al discorso “uso di browser web non aggiornati” rimando tutti all’articolo di Tom https://www.tomstardust.com/archives/spingere-gli-utenti-ad-aggiornare-explorer-6/
@Simone: Questione di gusti. Io ritengo che un link alla validazione di xhtml e css sul sito di un cliente sia una cosa più positiva che negativa: è infatti una specie di “marchio di qualità” indicare che il sito rispetta gli standard ed oltretutto permette di controllare la veridicità di tale informazione. Ciò che io ritengo veramente poco professionale sono banner pubblicitari o adsense.
Se il discorso dei condcom, purtroppo vangono solo per IE, quindi “diverso da IE” mi pare l’unica soluzione (se non si vogliono usare funzioni JS che controllano la versione del browser e sostituiscono il foglio di stile onload, ma mi sembra una soluzione non accessibile e alquanto macchinosa)
@Marco: si però se il sito è di una azienda il 99,9% dei suoi clienti non sa nemmeno cosa significhi sito accessibile,usabile e validato. Non lo sa nemmeno il cliente stesso infatti! Ma almeno in questo ci perdo tempo all’inizio a spiegarglielo; non cambierò il mondo ma almeno ci voglio provare. Sulla pubblicità non posso che darti ragione, finora un solo cliente l’ha voluta per motivi suoi (non economici) e nonostante i miei sforzi non ho ottenuto successo e sono stato costretto a mettergliela.
Riguardo i condcom: quindi era quello che avevo supposto io. Sinceramente non ci avevo pensato ad usarli per questo, è una sorta di broglio ma dopotutto non è colpa nostra. Se validazione non vuol andare di pari passo con il progresso non possiamo sempre e solo restare arretrati. Usare Js per questo lo escludo a priori, sono dell’opinione che “ad ognuno il suo”. Comunque se non ti spiace credo che “copierò” l’idea dei commenti condizionali, finalmente rivedrò quel bel pallino verde! :)
Salve a tutti,
avrei un quesito che tratta la validazione.
è chiaro che qui si parla di validazione css3, il mio problema riguarda la validazione html,
non sapendo dove scrivere ho pensato che fosse il più attinente.
Nella mia pagina ho esteso l’html con un mio personale markup language.
Nel validare chiaramente riscontro errori come ad esempio:
Line 34, Column 59: element “xxxx” undefined
oppure
Attribute “xxxxx” is not a valid attribute
Qualcuno sa per caso come far capire al validatore che quelli non sono tag errati ma ben si una mia estensione ???
ciao, io mi son ritrovato con questo problema proprio oggi e ho risolto inserendo la dichiarazione con un css incorporato. Non è il massimo ma nel mio caso si tratta solo di quella proprietà e così ottengo comunque un file html valido e un css altrettanto valido. :)
Ho pensato che per browser diversi da IE si potrebbe fare un controllo con un javascript ed identificare il motore di rendering… non è precisissimo in quanto diversi browser possono condividere lo stesso motore, ma forse è meglio di un semplice if != IE
Ho trovato questo js: http://webmaster.lycos.it/topics/technic/javascript/javascript-workshop4/1/
Per quanto mi riguarda le proprietà dei Css 3 sono come una torta al cioccolato per uno a dieta!!!
Mi piaciono molto le implementazioni che forniscono ma chiaramente cerco di non utilizzarle per rispettare la validazione del codice.
Certo che è difficile dire di no ! per questo proprio oggi ho utilizzato un bel effetto text-shadow sul mio sito personale, non è più valido aimè, ma penso che comunque oltre a chi è del settore il resto del mondo non da molto peso a questo, l’aspetto grafico invece viene valutato anche dai profani, quindi credo che se mi devo rapportare con un head hunter che valuta il mio lavoro spiegherò lui questo ! altrimenti l’utenza media sarà ben lieta di vedere gli effetti dei Css 3.
Ciao
alcune proprietà però come @font-face e background-clip su firefox non funzionano nemmeno utilizzando il prefisso -moz, mentre border-radius, box-shadow si. Mi sapete dire come mai?
@terrucch non tutte le proprietà funzionano allo stesso modo purtroppo, anche col prefisso. Per @font-face puoi usare il generatore di Font Squirrel che funziona molto bene.
Ma ha ancora senso la validazione??
Cioè io ormai neanche ci faccio più caso, fra Jquery,css3 e via discorrendo e praticamente impossibile creare un sito web con un pò di animazione senza far arrabbiare il wc3
Anche io come Marco preferisco utilizzare il 2.1 standard, ma mi trovo anche in linea col pensiero di alfy, in quanto anche io gradisco parecchio le implementazione offerte dal css3