Progressive Enhancement (1) : Selettori di attributo, selettori adiacenti e bordi arrotondati

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

Questo post fa parte della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“.

Come anticipato, iniziamo a prendere in esame alcune delle tecniche di progressive enhancement più semplici da mettere in pratica. Vorrei ricordare prima di iniziare come questi articoli trattino di tecniche atte a migliorare esteticamente i nostri layout, e che non non vanno pertanto considerate come basi con le quali costruirne la struttura stessa. Per una lettura più approfondita vi rimando all’articolo principale della serie.

Un foglio di stile separato

Anche se molti dei selettori che verranno esplorati in seguito possono essere implementati direttamente nel nostro foglio di stile principale, questa si rivela una cattiva pratica nell’ottica di un manutenzione futura.

Ricordiamo che l’obiettivo del progressive enhancement è di fornire un miglioramento ai nostri layout partendo sempre e comunque da una solida struttura di base, struttura che deve dimostrarsi autonoma e dotata della maggiore compatiblità cross browser realizzabile. E’ su di essa che andremo a lavorare apportandovi dei migliroamenti progressivi.

Converrà perciò aggiungere al nostro foglio di stile un secondo foglio “exra” dedicato a tutti i miglioramenti che vogliamo implementare.

I vantaggi di una simile scelta sono evidenti:

  • maggiore mantenibilità del codice
  • eventuale possibilità di filtrare il caricamento del secondo foglio di stile da javascript

Per i browser che se lo possono permettere (in virtù di una maggiore apertura all’implementazione di futuri standard), iniziamo quindi a considerare qualche utile selettore.

1. Selettori di attributo

Questi selettori, già spesso usati nelle specifiche CSS2 (qui una traduzione), con i CSS 3 acquistano nuove caratteristiche interessanti per ampliarne l’utilità.

Teoria:

  • selettore[att^="val"]: dove l’attributo del selettore inizia con il valore “val”
  • selettore[att$="val"]: dove l’attributo del selettore termina con il valore “val”
  • selettore[att*="val"]: dove l’attributo del selettore contiene con il valore “val”

Il principale utilizzo dei selettori di attributo è di personalizzare in maniera automatica i link a seconda della loro destinazione. Un link esterno potrà beneficiare di un’icona che richiami l’apertura di una nuova finestra, mentre un link verso un file PFD potrà beneficiare della caratteristica icona di Acrobat.

Pratica:

I selettori, nell’esempio che consideriamo, vanno applicati su classici elementi “<a>”.

<div class="esempio">
<h2>Selettori di attributo</h2>
<a href="mailto:test@test.it">Sono un link di tipo "mailto"</a>
<a href="htto://test.pdf">Punto ad un PDF</a>
<a href="http://delicious.com">Contengo la parola "delicious"</a>
</div>

Andiamo ad associare dunque l’icona tipica dei PDF ad tutti i link che terminano con il valore “.pfd”, la tipica icona della busta ai link che iniziano per “mailto:” e (ad esempio) l’icona di Delicious a tutti i link che contengono la parola “delicious”.

a[href$=".pdf"]{
background: url(img/page_white_acrobat.png) no-repeat center right;
padding: 0 20px 5px 0;
}

a[href^="mailto"]{
background: url(img/email_open.png) no-repeat center right;
padding: 0 20px 5px 0;
}

a[href*="delicious"]{
background: url(img/delicious.jpg) no-repeat center right;
padding: 0 20px 5px 0;
}

Una volta individuato il giusto obiettivo, non si fa altro che posizionare come sfondo dei link corrispondenti la giusta immaine (più una spruzzata di allineamenti e padding per una corretta resa visiva). IE 6 e precedenti, assieme a tutti gli altri brower non in grado di interpretare correttamente le regole, continuerano correttamente a visualizzare il link senza immagini.

Selettori di attributo

2. Selettori adiacenti

I selettori adiacenti permettono di differenziare un selettore particolare solo se questo si trova direttamente adiacente ad un atro da noi indicato.

Teoria:
Indicando come nell’esempio a seguire “h2 + p” andiamo a puntare direttamente ogni elemento “p” che si trovi in diretta successione ad un elemento “h2″. Una delle applicazioni migliori è, come nell’esempio, nel caratterizzare in maniera più forte il primo paragrafo di una pagina, ma gli utilizzi sono moltissimi e limitati solo dalla propria abilità.

Pratica:

<div class="esempio selettori_adiacenti">
<h2>Selettori adiacenti</h2>
<p>Questo &egrave; il primo paragrafo, e come tale &egrave; speciale.</p>
<p>Lorem ipsum dolor sit amet..</p><p>Lorem ipsum dolor sit amet..</p>
</div>
.selettori_adiacenti h2 + p {
font-size: 200%;
border-bottom : 1px dotted #000;
}

Il primo paragrafo ha dimensione doppia e bordo inferiore un singolo pixel nero. Tutti gli altri paragrafi successivi al primo non subiscono modifiche. Viene generata una resa di questo tipo.

Selettori Adiacenti

3. Bordi arrotondati

L’applicazione di bordi arrotondati all’interno dei layout inizia diversi anni fa, quando ancora si lavorava a tabelle per definire le strutture e si faceva largo uso di immagini di sfondo, celle vuote e simili. Si è negli anni arrivati a soluzioni (ottimali) che abbandonavano le tabelle in favore di (x)HTML, CSS e qualche javascript per realizzare questo semplice effetto. I “Nifty Corners Cube” di Alessandro Fulciniti sono stati (e sono ancora per me) un punto di riferimento.

Teoria:

Con gli adeguati selettori CSS3 è possibile realizzare lo stesso effetto in sole tre righe, senza ricorrere a JS esterni e potendo controllarne con facilità raggio e angolo di applicazione.

I selettori “basilari” sono:

  • “border-radius” (la versione standard CSS3)
  • “-moz-border-radius” per Mozilla
  • “-webkit-border-radius” per Webkit
  • “-o-border-radius” per Opera
  • “-icab-border-radius” per iCab
  • “-khtml-border-radius” per Konqueror

(lista riaggiornata grazie a Undolog)

Con questa sintassi, la proprietà “border-radius” (e relativa variante -webkit) supporta due soli parametri: nell’ordine raggio orizzontale e raggio verticale. Da notare che Firefox non seque queste specifiche e la variante -moz accetta invece i due parametri considerandoli accoppiati come angoli superiore sinistro/inferiore destro e angoli superiore destro/inferiore sinistro.

Naturalmente possono venire indicati i singoli angoli.

Per Mozilla:

  • -moz-border-radius-topright (angolo alto a destra)
  • -moz-border-radius-bottomright (angolo basso a destra)
  • -moz-border-radius-bottomleft (angolo basso a sinistra)
  • -moz-border-radius-topleft (angolo alto a sinistra)

Per Webkit:

  • -webkit-border-top-right-radius (angolo alto a destra)
  • -webkit-border-bottom-right-radius (angolo basso a destra)
  • -webkit-border-bottom-left-radius (angolo basso a sinistra)
  • -webkit-border-top-left-radius (angolo alto a sinistra)

Pratica:

Definiamo quindi un bordo sui quattro angoli di 20 pixel di raggio.

border-radius : 20px;
-moz-border-radius : 20px; /* Specifico per Mozilla */
-webkit-border-radius : 20px; /* Specifico per Webkit */

Oppure andiamo a definire singolarmente ogni angolo.

.angoli_arrotondati {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-top-left-radius: 20px;

-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 20px;
}

O ancora, lavoriamo sulle coppie di parametri per qualcosa di più esteso.

.angoli_arrotondati {
-webkit-border-radius: 20px 10px;
/* Raggio orizzontale 20 pixel, raggio verticale 10 pixel */

-moz-border-radius: 20px 10px; 
/* Angoli superiore sinistro/inferiore destro a 20 pixel e 
angoli superiore destro/inferiore sinistro a 10 pixel*/
}

Il che ci permette di lavorare selettivamente sul tipo di browser su cui vogliamo andare a lavorare.

Bordi arrotondati con i CSS3

Sperimentate!

Si conclude con queste tre regole il nostro primo articolo sulle tecniche di progressive enhancement che sono applicabili oggi, subito, per migliorare l’esperienza dei nostri utenti. Molte di queste sono rapide da implementare e veloci da “mantenere” in futuro. Possono adattarsi con rapidità ai nostri layout migliorandone il feeling con pochi accorgimenti.

Altri appuntamenti come questo arriveranno nei giorni prossimi. Se siete interessati all’argomento e avete trovato questo articolo interessante prendete in considerazione l’idea di iscrivervi al Feed RSS.

Ci vediamo nei commenti! :D

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!

11 Commenti

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

  1. TheNorba ha detto:

    Ottimo post, anche se non sono molto “ferrato” sul argomento, lo considero utile e ricco di dettagli interessanti!
    bravo Francesco :)

    Rispondi
  2. Tom ha detto:

    Ottimo articolo.

    Per restare in tema io consiglio anche la lettura di Understanding Progressive Enhancement su A List Apart, appena pubblicato.

    Rispondi
  3. Francesco Gavello ha detto:

    Stupendo l’articolo di ALA :D Con l’ M&M rappresentativa dei diversi “strati” di miglioramento! Adoro il loro stile.

    Come dicevo ad altri in chat, se avete qualche punto critico o interesse particolare da sviscerare fate un fischio che ne sviluppo un bel post :)

    Rispondi
  4. [...] Progressive Enhancement (1) : Selettori di attributo, selettori adiacenti e bordi arrotondati [...]

    Rispondi
  5. Kobayashi ha detto:

    Finalmente qualcuno che mi spiega, in 2 minuti e senza complicati giri di parole o tecnicismi, la teoria e l’applicazione dei bordi arrotondati, su cui tanto mi sono arrabattato a forza di esperimenti e maldestri tentativi di intervento sul codice.
    Pian piano mi studio anche tutto il resto, intanto grazie.

    Rispondi
  6. Sheik ha detto:

    …hum, bell’articolo, ma non sono convintissimo che i border-radius siano una buona soluzione.
    magari sono io che ho sempre sbagliato, ma credo che sui vecchi browser e su IE7 non funzionino.
    i Nifty Corners per quanto richiedano un misto di css e js (quindi rappresentano una soluzione un po’ sporca) sono supportati da praticamente tutti i browser in circolazione.
    ovviamente border-radius è un ottima soluzione, elegante, rapida…ma ogni volta cha c’è qualcosa di buono Microsoft deve rovinare tutto con il suo aborto di browser. forse si potrebbe specificare una versione pulita per i browser furbi e una meno efficiente per “la pecora nera”…a a questo punto ne vale la pena?

    Rispondi
  7. Francesco Gavello ha detto:

    @Sheik: dipende sempre dalle esigenze del progetto.

    Io uso ancora molto spesso i Nifty (quando possibile) ma se voglio dare “quel qualcosa in più” come il bordo arrotondato a 1-2 pixel, non sto a caricare tutto quel popò di roba.

    In casi come questo border-radius diventa utile :)

    Rispondi
  8. [...] Progressive Enhancement (1) : Selettori di attributo, selettori adiacenti e bordi arrotondati [...]

    Rispondi
  9. MaiNick ha detto:

    Come ho verificato anche io, con questa nuova specifica dello standard CSS3, si possono fare tantissime cose che prima era più complicato applicarle.
    Speriamo in un veloce upgrade da parte di tutta la rete verso browser più moderni.

    Rispondi
  10. [...] “Progressive 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 [...]

    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!