Cell. +39 3479684755
Il Blog di Instant Websites
La proprietà CSS3 box-shadow
Una delle proprietà che saranno introdotte con la nuova versione dei Cascading Style Sheet, la CSS3, è quella relativa all’ombreggiatura di un elemento e cioè box-shadow.
Questa proprietà prevede di definire i seguenti quattro valori: offset orizzontale, offset verticale, blur (estensione) e colore.
L’offset orizzontale e verticale consentono di definire l’angolo dell’ombra.
La sintassi CSS è la seguente:
#box {
…
-moz-box-shadow: 0 1px 20px #333; /* nell’ordine: offset orizzontale – offset verticale – blur (estensione) – colore */
-webkit-box-shadow: 0 1px 20px #333;
box-shadow: 0 1px 20px #333; /* per IE9 */
… }
Come già visto per la proprietà border-radius in questo articolo, è necessario indicare il prefisso -moz- per Mozilla (Firefox) e -webkit- per Safari e Chrome; l’unico browser in circolazione che non è in grado di applicare la proprietà è Internet Explorer fino alla versione 8, la più recente in circolazione al momento.
Per vedere un esempio di applicazione della proprietà box-shadow, aprite questa pagina.
Ora, bisogna considerare innanzitutto che il nuovo rilascio HTML5/CSS3 approfondirà e rafforzerà la corrispondenza semantica tra i selettori e gli elementi di pagina, introducendo le voci: <header>, <nav>, <article>, <time>, <aside>, <section>, <footer>.
Considerare cioè solamente le novità riferite alle proprietà grafiche “esteriori” dei box e degli altri elementi di pagina sarebbe estremamente riduttivo.
Tuttavia alcune delle proprietà di prossima introduzione quali quelle menzionate consentiranno agli sviluppatori di ridurre il loro lavoro proprio in alcune parti più noiose e banalmente esecutive, quali la creazione di gif finalizzate all’arrotondamento degli angoli o di jpeg per l’aggiunta di ombre.
E non è poco.
CSS3, HTML5, Flash, jQuery … sarà rivoluzione?
La prossima introduzione a tutti gli effetti della nuova versione di HTML, cioè la 5, e dei Cascading Style Sheet, cioè la 3, lasciano presagire una sorta di rivoluzione nel campo dello sviluppo web per via dei nuovi strumenti che verranno messi a disposizione dei web designer.
Fin da oggi è possibile iniziare a sperimentare alcune delle nuove proprietà dei CSS3, poiché a) queste dovrebbero essere definite nella loro versione definitiva, b) i browser più intelligenti già le supportano, c) nel caso dei browser meno intelligenti (vale a dire IE, ma qualcuno ne dubitava?) la degradazione non comporta problemi di visualizzazione.
Ci siamo ad esempio occupati nel precedente articolo della proprietà fontface che consente di utilizzare font non standard nelle pagine web.
Questa è supportata persino da IE, addirittura nelle sue versioni più vecchie, quindi è utilizzabile da subito.
Un’altra proprietà interessante che andrà a risolvere un problema annoso – e diciamo con sincerità, noioso – è border-radius: questa permette di arrotondare gli angoli di un box in base ad un certo valore di raggio e può essere applicata a tutti gli angoli ovvero solo ad alcuni.
Vediamo un semplice esempio di un contenitore con tutti e quattro i bordi arrotondati:
#angoli-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
-moz-border-radius: 10px; /* per Firefox */
-webkit-border-radius: 10px; /* per Safari e Google Chrome */
border-radius: 10px; /* per IE9 */
}
ed un altro con i soli angoli inferiori arrotondati:
#angoli-inferiori-arrotondati {
width: 450px;
height: 300px;
margin: 20px 0;
background-color: #FF0000;
border: 1px solid #333333;
-moz-border-radius: 0 0 10px 10px; /* per Firefox */
-webkit-border-radius: 0 0 10px 10px; /* per Safari e Google Chrome */
border-radius: 0 0 10px 10px; /* per IE9 */
/*
Le ultime tre righe equivalgono a:
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
*/
}
In questa pagina sono presenti entrambi gli esempi: visualizzandola con Internet Explorer 8 e precedenti, gli angoli non risulteranno arrotondati mentre con tutti gli altri browser l’effetto funziona.
Un’altra questione che ha agitato le acque del web design è rappresentata dall’ostracismo attuato da Apple nei confronti di Flash, non supportato da iPhone né da iPad.
Qualcuno si è affrettato a dichiarare la morte di Flash, con comprensibile scarsa soddisfazione di Adobe; altri hanno affermato che la necessità di questo strumento verrà comunque meno per via delle opportunità offerte dai framework come jQuery e dallo stesso HTML5 che promette di gestire i file multimediali.
Chi scrive non è d’accordo su queste visioni estreme. Flash ha tuttora la sua utilità, a patto che non se ne abusi, soprattutto perché può compromettere la fruibilità di un sito (e la sua accessibilità).
jQuery è un framework duttile ed efficiente ma non sempre di facile utilizzo: i plugin richiedono numerosi test per accertarne la loro efficacia cross-browser e l’applicazione di più d’uno nella stessa pagina può generare incompatibilità.
L’ottica più corretta per uno sviluppatore web che deve garantire la massima fruibilità possibile per il proprio lavoro è ancora costituita dalla scelta dello strumento di volta in volta migliore per ottenere un certo risultato in termini di leggerezza della pagina, universalità tra i vari browser (o quantomeno degradazione accettabile), qualità del risultato ottenuto.
Tutti questi argomenti vengono trattati nell’ambito del nostro Corso Base di Web Design organizzato da INSTANT WEBSITES a Milano.
Il prossimo corso comincerà il 25 gennaio 2011.
Potete trovare i dettagli in queste pagine: http://www.instantwebsites.it/corsi.html e http://www.corsiwebdesign.it/corsobase.php
LA PROPRIETA’ fontface: USO DI FONT NON STANDARD NELLE PAGINE WEB
Una delle limitazioni tecniche più stringenti avvertite, diciamo pure sofferte, dagli sviluppatori web è sempre stata quella di dover usare solo i font c.d. di sistema, cioè quelli presenti su qualsiasi sistema operativo Windows o Mac all’uscita dalla fabbrica (elencati in questa pagina: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html con le rispettive denominazioni).
L’impiego di un set di caratteri diverso da quelli standard avrebbe quasi inevitabilmente comportato la mancata visualizzazione da parte della maggior parte degli utenti, tutti quelli senza il set stesso installato nel proprio computer, pur tenendo conto della possibilità di specificare più alternative nel dichiarare la proprietà font-family nel foglio CSS e quindi di controllare la degradazione.
Una delle novità che saranno introdotte nei CSS3 è costituita dalla proprietà fontface, già da ora supportata da tutti i browser in circolazione e persino – udite! udite! – da Internet Explorer versioni 4 e successive.
Tramite questa proprietà è in pratica possibile usare qualsiasi font non di sistema, caricando sul server il relativo file nei vari formati gestiti e determinandone il caricamento nel browser dell’utente.
La complicazione è determinata dal fatto che, oltre al noto formato TrueType (TTF), bisogna renderne disponibili altri e cioè: Web Open Font Format (WOFF), Microsoft (EOT) e Mobile Safari (SVG).
Esiste però un servizio online gratuito sul sito Font Squirrel che consente di creare un kit di questi formati partendo da un proprio font TrueType, ovvero di scaricarne uno basato su un carattere freeware e liberamente utilizzabile, anche per scopi commerciali.
Già perché bisogna fare bene attenzione al fatto che l’utilizzo di un dato font per il web non sempre è libero: il fatto cioè che tale font sia fornito insieme ad un software, ad esempio, deriva dal pagamento di licenze dello sviluppatore che non prevedono un riutilizzo per applicazioni commerciali. Occhio dunque alla licenza che accompagna ogni font!
La prassi è dunque questa:
– scegliere un certo font TrueType ed accertarsi della possibilità di poterlo utilizzare liberamente, ovvero pagare quanto richiesto dal titolare dei diritti (una tantum o su base annua);
– andare alla pagina http://www.fontsquirrel.com/fontface/generator, caricare il font, generare il kit e scaricarlo;
– copiare i file relativi ai diversi formati nella root del sito oppure in una cartella apposita, ad esempio /type;
– aggiungere al foglio di stile quanto segue, supponendo che il font si chiami MyFont:
@font-face {
font-family: ‘MyFont’;
src: url(‘../type/MyFont-webfont.eot’);
src: local(‘☺’), url(‘../type/MyFont-webfont.woff’) format(‘woff’), url(‘../type/MyFont-webfont.ttf’) format(‘truetype’), url(‘../type/MyFont-webfont.svg#webfontbQkoO1Mm’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Si noti che scaricando il kit da Font Squirrel, questo codice CSS è già fornito nel file stylesheet.css (attenzione al percorso per raggiungere i file ovviamente).
Sempre nel foglio di stile, posso dunque utilizzare il carattere:
h1 {
font-family: MyFont, Geneva, Arial, sans-serif;
…
}
senza dimenticarmi di prevedere come sempre delle alternative.
Il simbolo dello smiley nella proprietà fontface è un trucco per evitare che il browser dell’utente carichi una versione eventualmente già esistente del font dalla cartella dei font di sistema (potrebbe trattarsi di una versione più vecchia e non idonea al web).
Dalla pagina http://www.fontsquirrel.com/fontface è poi possibile scegliere tra numerosi font di libero utilizzo, suddivisi per categorie, ed ottenere il relativo kit.
Quanto sopra esaurisce il discorso puramente tecnico. Resta aperto quello creativo, nel senso che il rendere possibile utilizzare potenzialmente qualsiasi tipo di font sembra spalancare porte fino a poco tempo fa inimmaginabili per i web designer e gli sviluppatori.
Ma …
Innanzitutto, ogni carattere caricato tramite la proprietà fontface comporta un peso per il browser: ciascun file pesa qualche decina di Kb quindi prevederne più di uno può determinare un rallentamento nel caricamento della pagina.
Inoltre grande attenzione deve essere dedicata al mantenimento della leggibilità del testo, requisito fondamentale di fruibilità – oltre che di accessibilità – di un sito.
La nuova versione dei CSS fornirà diversi strumenti agli sviluppatori ma come sempre accade, solo un uso ragionato ed intelligente può far sì che una risorsa diventi un’opportunità e non un semplice esercizio di stile fine a se stesso.