Modernizr: incominciare ad utilizzare i CSS3
This entry was posted on November 11th, 2009 and is filed under CSS, javascript.
Qualche giorno fa ho scritto un articolo in cui mi sono occupato del supporto che i moderni browser hanno per HTML5 e CSS3 da cui si è notato quanto molti dei browser risultino arretrati alle innovazioni.
Per chi volesse però incominciare ad utilizzare queste novità e garantire allo stesso tempo il cross-browsing del layout web, recentemente è stata rilasciata una libreria Javascript che fa proprio al nostro caso.
Questa libreria si chiama Modernizr e, giorno dopo giorno, sta divenendo sempre più famosa, complice anche l’estrema semplicità di utilizzo che la caratterizza.
Per chi volesse provarla e vedere come funziona, è stato pubblicato su Html.it un mio articolo in cui analizzo le potenzialità della libreria e fornisco alcuni semplicissimi esempi di utilizzo che realizzano alcune delle proprietà più diffuse del CSS3.
L’articolo è raggiungibile al seguente link: Implementare i CSS3 con Modernizr
Si accettano ovviamente critiche. 
Benvenuto! Mi chiamo
April 1, 2010 at 9:35 am
Io ho caricato nel mio sito la libreria, ho messo un include della libreria ma a video mi mostro un file di testo anche perchè dal sito ufficiale quello che scarichi è un file di testo ho provato anche a salvarlo come js ma la situazione non cambia.
April 1, 2010 at 9:57 am
I file js sono file di testo solo con l’estensione js anzichè txt.
Da come mi dici sembra che tu abbia fatto l’inclusione nel php; se lo fai in php è ovvio che ti mostrerà il testo.
L’include va fatto nell’html come tutti i file javascript.
Comunque un esempio di utilizzo e di importazione corretta lo puoi trovare all’esempio dell’articolo su Html.it, a questo link:
http://www.html.it/articoli/3211/modernizr-example/index.html
April 1, 2010 at 10:12 am
Sono riuscito a caricare in modo corretto la libreria.
Sarà che è mattina e sono rinco ma includevo cosi:
ora ho incluso con :
Quello che non capisco però è come richiama il valore alternativo, mi spiego dall’esempio che hai indicato ( e che avevo trovato anche io )
.borderradius div
oppure
.no-borderradius div
vengono caricati automaticamente?
April 1, 2010 at 10:17 am
io ho fatto una cosa cosi sbagliata…
h1{
font-family:verdana,helvetica,arial,sans-serif;
color:#CF3B19;
text-align:left;
font-size:x-large;
font-style:normal;
padding-left:80px;
}
/* Modernizr border-radius */
.text-shadow h1 {
color:#fff;
text-shadow: 1px 1px 2px #CF3B19;
}
.no-text-shadow h1 {
color:#CF3B19;
}
April 1, 2010 at 10:19 am
Se leggi l’articolo originale è spiegato nell’introduzione il funzionamento e come fa a verificare il supporto.
.border-radius e .no-borderradius (o comunque tutte le restanti classi) vengono assegnate all’elemento html una volta caricata la libreria in base al supporto del browser.
Se non esiste uno stile nel CSS la classe viene ignorata, se esiste uno stile nel CSS esso viene interpretato e assegnato direttamente dal browser.
Una volta caricata la libreria, se usi Firebug potrai vedere che l’elemento html contiene molte classi che stanno ad indicare il supporto o meno di una proprietà.
April 1, 2010 at 10:21 am
Concettualmente nel codice non sembrano esserci errori, al massimo controlla che il nome delle classi sia esatto, non le ricordo tutte a memoria.
April 1, 2010 at 10:27 am
quindi i nomi delle classe sono specifici della libreria non posso assegnarle io.
April 1, 2010 at 10:34 am
Eh si, per forza.
Altrimenti come fai a collegare la proprietà alla libreria?
April 1, 2010 at 10:37 am
Ovviamente ora ho capito il meccanismo credo che comunque non sia stata implementata la classe text-shadow
April 1, 2010 at 10:40 am
Leggi la documentazione ufficiale, troverai sicuramente quello che ti interessa:
http://www.modernizr.com/docs/#boxshadow
April 1, 2010 at 11:30 am
Allora innanzi tutto c’era un errore grande come una casa e come sempre accade le cose ovvie non vengono notate per pensare alle piu complicate l’errore stava nella versione di modernizr ora hanno distribuito la 1.1 e gli esempi erano tutti con la 1.0, ho provato a fare il boreder radius e funziona perfettamente.
-A
April 1, 2010 at 11:44 am
Rimane pur sempre il problema della validazione…
Aspettando css3
April 1, 2010 at 11:51 am
Qualche trucchetto per farlo validare sarebbe mettere il css3 dentro l’html direttamente.
Ma sinceramente la validazione di queste proprietà a me non interessa perchè non dipende dalla mia cattiva progettazione. Chi va a guardare la validazione sa benissimo a cosa sono dovuti quegli errori.
Io personalmente li metto in un altro file esterno che uso solo per quelle proprietà ma non mi interessa molto la loro validazione. Metterli in un altro file mi dà la possibilità di verificare che il restante codice sia validato, è questo che è importante secondo me!
April 1, 2010 at 3:21 pm
Si be questa è una scelta anche io la penso così, in un file esterno intendi un’altro foglio di stile che richiami solo per quelle specifiche di css 3 che ti interessano?
D’altro canto come ho già detto su di un’altro blog i css3 sono per i web designer come la cioccolata per uno a dieta è dura non usarli !
Si spera che le agenzie che guardano il tuo sito siano abbastanza competenti da capire cosa sia non validato e perchè
April 1, 2010 at 3:27 pm
Si intendo un altro CSS con solo quelle proprietà.
Io non faccio il sito per le agenzie, ma per il cliente che me lo commissiona.
L’agenzia che eventualmente ti contatta se non sa cosa sia un CSS3 allora forse è meglio che non ti viene a cercare.
April 1, 2010 at 3:33 pm
ma lo dichiare nell’head o lo richiami sul tag specifico? ma come poi ? io dichiaro il css in linea direttamente
oppure richiamo il foglio esterno
tu cosa fai dichiari nell’head gia la presenza di un foglio alternativo?
April 1, 2010 at 3:49 pm
Se vuoi farlo validare includi il codice direttamente dentro l’head con il tag style.
Io invece richiamo un file .css esterno che contiene le proprietà, sempre dentro l’head.