E tu utilizzi tutti i selettori CSS disponibili?

selettoricssCome conclusione della serie di articoli sui selettori CSS, ho voluto prendere degli esempi non banali dal “mondo reale” e mostrarti come gli sviluppatori utilizzano combinazioni di selettori per realizzare i loro lavori. Devo dire che questa ricerca non è stata molto semplice: infatti, oltre ai selettori di classe e di ID, e combinazioni dei due, sono molto pochi i webdesigner che sfruttano le potenzialità di tutti i selettori e mi è sorta questa domanda: sono davvero tutti indispensabili? Prima di provare a rispondere, però, andiamo a vedere qualche applicazione pratica.

Selettore di attributo per evidenziare i campi di testo

Questo esempio è preso dal sito della web company Pixelmatrix Design, nella sezione “Contact”.

Con queste regole viene definito l’aspetto dei campi di testo per il modulo email e un feedback visivo per il campo selezionato. Vediamo come:

input[type="text"]{
  border: solid 1px rgba(0,0,0,0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  color: #666;
}

input[type="text"]:focus {
  border-width: 2px;
  border-color: #709d21;
  padding: 4px;
  outline: 0;
  color: #444;
}

Innanzitutto il campo di testo viene selezionato attraverso il selettore di attributo:

input[type="text"]

Poi viene applicato un sottile bordo grigio, un padding e viene modificato il font. Nota l’uso di due regole CSS “proprietarie”:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;

rispettivamente per ottenere i bordi arrotondati su Safari e Firefox.

La seconda regola agisce invece solo quando il campo viene selezionato, grazie allo pseudo-selettore :focus. In questo caso, viene applicato un bordo verde, più spesso del precedente.

pixelmatrix

Selettore di elemento adiacente

Questo esempio è tratto dal sito di HappyCog, una web company americana, nella sezione “About”.

In questa pagina vengono presentate le persone che lavorano nelle varie sezioni della compagnia. Ogni elenco è contenuto in un div con una classe “reference” e preceduto da un titolo, con un tag h2. Ad esempio:

<h2>Happy Cog New York</h2>
  <div class="reference following">
    <div id="kissane" class="entry">
      <h3>
      </h3>
      <h4>Content Strategy Director</h4>
      <p>A writer and strategist who focuses on clear and precise business communication as a prerequisite for strong relationships with employees and customers.</p>
    </div>
    <div id="hess" class="entry">
    ....
    </div>
    <div id="gustafson" class="entry">
    ...
    </div>
    <div id="murtaugh" class="entry">
    ...
    </div>
</div>

Questa è la porzione di codice CSS che ci interessa:

#main h2 {
  border-bottom:1px solid #E6DFCE;
  padding:0 0 0.25em;
}

.reference {
  border-top:1px solid #E6DFCE;
  float:left;
  margin:0 0 4em;
}

Come si può notare facilmente, la classe “reference” prevede un bordo superiore spesso un pixel, così come il titolo h2 prevede un bordo inferiore, dalle stesse caratteristiche. Le due regole vanno chiaramente in contrasto portando alla seguente situazione:

happycog1

Per eliminare il doppio bordo si sarebbe potuto facilmente ricorrere ad una classe apposita da applicare al titolo, ma gli sviluppatori del sito sono stati più accorti ed hanno utilizzato la seguente regola:

h2 + .reference {
  border: none;
  margin-top: -15px;
}

In questo caso è sfruttato il fatto che, nel markup, il titolo si viene a trovare sempre appena prima del div con classe “reference”. In questo modo viene eliminato il bordo di troppo, e ridotto il margine tra i due elementi.

Rollover di immagini e selettori di attributo

Questo esempio, preso dal sito di “An Event Apart“, una conferenza su standard web e web design in generale che si tiene negli USA, è quello che mi ha colpito maggiormente. In pratica viene realizzato un effetto roll-over, utilizzando i selettori di attributo.

Partiamo dal codice html:

<a href="https://alistapart.com/">
  <img alt="A List Apart" src="/i/09/ala-logo.gif"/>
</a>
<a href="https://happycog.com/">
  <img alt="Happy Cog" src="/i/09/happycog-logo.gif"/>
</a>

Dei semplici link, rappresentati da immagini.
Il concetto alla base del codice CSS che vedremo è: caricare le immagini da mostrare al passaggio del mouse come background del link e nascondere l’immagine frontale, in modo da mostrare lo sfondo.

In codice:

.associated a {
  display: block;
  width: 121px;
  background: 50% 0 no-repeat;
}
.associated a[href*="alistapart"] {
  background-image: url(/i/09/ala-logo-h.gif);
}
.associated a[href*="happycog"] {
  background-image: url(/i/09/happycog-logo-h.gif);
}

Queste regole modificano l’aspetto dei link e applicano le due immagini di sfondo. Ma la vera “chicca” è:

.associated a[href]:hover img {
  visibility: hidden;
}

aneventapart
Analizziamo questa regola: essa si applica a tutti gli elementi img figli di un elemento a con un attributo href, però solo al passaggio del mouse. In questo modo essi vengono nascosti, mostrando l’immagine sottostante e creando un effetto roll-over desiderato.

Considerazioni finali

Facendo un’analisi dei selettori realmente utilizzati dai webdesigners si viene a scoprire che, attualmente, il 90% dei siti, anche graficamente complessi, viene realizzato con il 10% dei selettori messi a disposizione dalle specifiche del W3C. Le ragioni di un tale scenario possono essere diverse: spesso le introduzioni fatte nelle specifiche non sono basate su applicazioni e bisogni reali, bensì su una presunta utilità teorica; d’altro canto i webdesigners tendono spesso ad ignorare soluzioni basate sulle varie combinazioni di selettori, preferendo una soluzione più comoda, ovvero aggiungere classi e/o ID ai vari tag interessati. Quindi viene spontaneo chiedersi: ma sono davvero necessari tutti i selettori esistenti?

Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

9 commenti

Trackback e pingback

  1. E tu utilizzi tutti i selettori CSS disponibili?
    [...] E tu utilizzi tutti i selettori CSS disponibili? giovedì 1 ottobre 2009 | Tratto da: https://www.yourinspirationweb.com/ Nessun commento [...]
  2. E tu utilizzi tutti i selettori CSS disponibili? | Your Inspiration Web « MikyPedia
    [...] via E tu utilizzi tutti i selettori CSS disponibili? | Your Inspiration Web. [...]