Continua l’appuntamento con le tecniche di progressive enhancement che sono disponibili sin da ora per migliorare l’esperienza utente nella costruzione vostri layout. Potete leggere l’introduzione alla serie e tutte le altre puntate disponibili all’articolo principale “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“.

E ora via, con altri tre selettori decisamente utili e rapidi da implementare.

4. Pseudo Elementi

Parlando di aspetti prettamente tipografici, definire in maniera particolare la prima riga di un paragrafo può agevolarne la lettura ponendo l’attenzione su ciò che state scrivendo. Utilizzeremo per questo compito l’attributo “first-line“, oramai utilizzato da gran parte dei browser (escluso Internet Explorer 6).

Teoria

Nel nostro contenitore con classe “esempio” andiamo a puntare tutti i paragrafi che seguono un titolo di secondo livello e in particolare solamente la loro prima linea (first-line, appunto).

Indichiamo una variazione del font sul maiuscolo completo, una maggiore grandezza regolata sui 18 pixel e una spaziatura delle lettere a 2 pixel rispetto allo standard.

Pratica

.esempio h2 + p:first-line {
font-variant : small-caps;
font-size : 18px;
letter-spacing : 2px;
}

La resa, come si può notare dall’immagine, è di colpire immediatamente il lettore rispetto ad un anonimo blocco di testo Un piccolo dettaglio che aggiunge quel qualcosa in più.

5. Ombre

Qualche ombra ben posizionata riesce a dare un senso di maggiore profondità e in genere un feeling meno “freddo”. Solitamente gestire le ombre sui contenitori richiede l’utilizzo di contenitori vuoti e in alcuni casi molto annidati, mentre con i CSS3 il tutto viene ridotto ad una essenziale quanto potente regola.

Attualmente solo Safari e Firefox 3.1 (alpha) supportano le ombre.

Teoria

I selettori per generare ombre tramite CSS3:

• box-shadow (standard CSS3)
• -webkit-box-shadow (specifico per Webkit, con il classico attributo -webkit che abbiamo imparato a conoscere)

I parametri che accettano sono quattro, rappresentanti rispettivamente

• spostamento orizzontale
• spostamento in verticale
• sfocatura
• colore dell’ombra proiettata

Pratica

box-shadow : 5px 5px 20px #333;
-webkit-box-shadow : 5px 5px 20px #333;

I selettori presentati producono come effetto un’ombra spostata a destra e in basso di 5 pixel, che sfuma a 20 pixel di distanza con colore #333333.

.attributo_not img { display: none; /* nascondiamo di default l'immagine */ } .attributo_not img:not([border]) { /*rendiamola nuovamente visibile solo se non ha bordo*/ display: block; float: left; margin: 0 10px 10px 0; }

L’attributo “:not([border])” va a colpire tutte le immagini all’interno della classe .attributo_not che NON hanno un bordo definito. Gli utilizzi sulla base della negazione di attributi sono pressoché infiniti e trovano ottime applicazioni come miglioramento estetico per i browser che se lo possono permettere.

Progressive Enhancement: migliorare l’esperienza utente per i browser moderni

Al prossimo appuntamento!