Test: Contenuto generato ed immagini

Premessa

I presenti test nascono da una "lacuna" nelle specifiche dei fogli di stile di secondo livello (revisione 1, sezione 12.1). Leggiamo infatti che:

«Queste specifiche non definiscono interamente l'interazione di :before ed :after con elementi rimpiazzati (come IMG nell'HTML). Ciò verrà definito con più dettagli in specifiche future.»

Nel concreto, ogni browser è libero di scegliere se estendere il supporto degli pseudoelementi :before ed :after alle immagini o meno. Con Internet Explorer 6 (e precedenti) il problema non sussiste, in quanto questo browser non supporta il contenuto generato per nessun elemento. I browser moderni basati su Gecko (come Mozilla e Firefox) hanno scelto di non estendere tale supporto. Opera supporta invece il contenuto generato per le immagini, ma con risultati soddisfacenti solo per la versione 9 beta (anche se la più recente in ordine di tempo sembra non supportarlo). Le versioni 7.54, 8.01 e 8.53 hanno un supporto discreto. Nessun supporto per Opera 7.

Per i test ho scelto di unire gli pseudoelementi :before ed :after con la pseudoclasse dinamica :hover. Il codice base XHTML è il seguente: 

  <body>
  <div>
    <img src="ambling.jpg"  alt="" title="" />
  </div>
  </body>

Test n.1: rollover con didascalia 1

Questo test crea una didascalia sopra l'immagine al passaggio del mouse. La particolarità di Opera è che considera gli elementi rimpiazzati (e quindi anche le immagini) come inline-block, quindi per ottenere risultati accettabili si è scelto di usare tale dichiarazione in tutti i test, sia per l'immagine che per il contenuto generato degli pseudoelementi :before ed :after. Il codice CSS è il seguente: 

  body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font: 100% Georgia, serif;
  text-align: center;
  }
  
  div {
  margin: 0 auto;
  text-align: left;
  width: 450px;
  }
  
  img {
  display: inline-block;
  width: 250px;
  height: 153px;
  margin: 2em auto;
  padding: 0;
  }
  
  img:hover:before {
  content: "This image extends to infinity";
  margin: 0;
  padding: 2px 0;
  background: #f0f0f0;
  color: #000;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 1.5em;
  display: inline-block;
  width: 250px;
  }

Test n.2: rollover con didascalia 2

Questo test crea una didascalia sotto l'immagine al passaggio del mouse. Ho sfruttato lo pseudoelemento :after per inserire il contenuto nel riquadro dell'immagine dopo di essa. Il cambiamento nel codice CSS è il seguente: 

  img:hover:after {
  /* ... stesse regole del test n.1 ... */
  }

Test n.3: rollover che mostra il titolo dell'immagine

Questo test mostra il titolo dell'immagine al passaggio del mouse. Ho usato la funzione attr() della proprietà content, che visualizza l'attributo di un elemento, in questo caso il title di <img>. Il cambiamento nel codice CSS è il seguente: 

  img:hover:before {
  content: attr(title);
  /* ... stesse regole del test n.1 ... */
  }

Test n.4: rollover con immagine speculare

Questo test mostra un'immagine sopra la prima immagine al passaggio del mouse. Ho usato il valore url() (un URI) della proprietà content per generare l'immagine grazie allo pseudoelemento :before. Il cambiamento nel codice CSS è il seguente: 

  img:hover:before {
  content: url(amblingn.jpg);
  /* ... stesse regole del test n.1 ... */
  }

Conclusione

Questi test sono da intendersi a scopo puramente presentazionale. Una loro futura implementazione consisterebbe nell'eliminare la pseudoclasse dinamica :hover, ed ovviamente non prendere in considerazione il quarto. Così facendo si avrebbero a disposizione degli ottimi requisiti per migliorare l'accessibilità delle nostre pagine, ed in particolare quello che riguarda la gestione delle immagini. Sperando sempre nel futuro supporto dei browser.