Progressive Enhancement (2): pseudo elementi, ombre e elementi NOT

scritto da Francesco Gavello [+] il 20 ottobre 2008 | 5 Commenti in: Web Design & UX

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ù.

Utilizzo dell'attributo first-line con i CSS3

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.

Ombra su contenitore tramite CSS3 .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.

Selettore NOT nei CSS3Progressive Enhancement: migliorare l’esperienza utente per i browser moderni

  • Progressive Enhancement (1) : Selettori di attributo, selettori adiacenti e bordi arrotondati
  • Al prossimo appuntamento! ;)

    Trovato questo articolo interessante?

    Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

    5 Commenti

    Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

    1. Tom ha detto:

      Consiglio a chiunque usando questi selettori ed attributi di verificare sempre il risultato su tutti i browser: il miglioramento deve essere progressivo, non esclusivo.

      Meglio ricordarlo una volta di più, comunque ottima presentazione del post :)

      Rispondi
    2. MaiNick ha detto:

      Ti faccio i miei complimenti per questa grandissima serie di post che ci stai regalando.
      Premesso ciò, guardando il selettore NOT mi è venuta un idea: con tale selettore è possibile, secondo me, eliminare del tutto gli hack CSS. Potremo impostare il layout della pagina html utilizzando regole accessibile a tutti i browser, e attivare regole o visualizzare elemento esclusivamente a browser che supportano tale selettore.

      Rispondi
    3. Francesco Gavello ha detto:

      @Mainick: in effetti l’idea è azzeccata.

      L’unico vantaggio di usare hack CSS (o costrutti condizionali) è quello di poter puntare con “facilità” ad un singolo browser/device, mentre può capitare che il selettore NOT sia adottato (o meno) da più browser tutti in una volta, e utilizzarlo per definire l’intero layout può portare a risultati meno precisi sulla singola incompatibilità.

      Rispondi
    4. [...] Enhancement: migliorare l’esperienza utente per i browser moderni“. La prima, seconda e terza parte hanno già visto analizzati i più interessanti selettori CSS3 che possono esssere [...]

      Rispondi

    Lascia un commento

    Anteprima commentatore

    Personalizza il tuo avatar!
    Vai su gravatar.com e carica quello che preferisci!

    I commenti sono modificabili entro 5 minuti dal loro inserimento.
    Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!