Gli elementi ins e del

Basta soffermarsi qualche secondo e lo scopo di ins e del lo si capisce dai nomi stessi. Si tratta in ogni caso di elementi che modificano il documento e rappresentano semanticamente un’aggiunta (ins) e una rimozione (del).

Quando si usano?

Come ho anticipato sopra ins e del entrano in gioco quando occorre apportare una modifica ad una sezione del documento. Si potrebbero ad esempio utilizzare in queste occasioni:

  • Modifica di un documento ufficiale.
  • Modifica di un articolo giornalistico mantenendone l’integrità editoriale.
  • Aggiornamento di una versione di un file.

Si tratta quindi di elementi che mantengono vivo un documento determinando le differenze tra più versioni dello stesso. Quando è spesso sottoposto a modifiche.

Come si usano?

Ins e del sono elementi inline e vengono rappresentati dal browser rispettivamente con un sottolineato ed un barrato.

<p>Lorem ipsum <del>Lorem</del> ipsum <ins>Lorem ipsum</ins></p>

lorem

Una cosa però è insolita rispetto agli altri elementi inline, ins e del possono racchiudere elementi blocco. Il codice che segue è quindi considerato legittimo dal validatore HTML5 e gli elementi in questo caso sono visualizzati come se fossero un elemento blocco.

<ins><p>lorem ipsum <del>Lorem</del></p></ins>
<del><p>lorem ipsum <ins>Lorem</ins></p></del>

lorem2

Oltre agli attributi globali html5 ins e del hanno due attributi specifici: datetime e cite. Datetime indica la data e l’ora della modifica, cite invece indica il motivo del cambiamento.

Esempi di formattazione

Ecco in questa ultima parte alcune formattazioni su come rappresentare questi tag.

ins{
  display:block;
  margin-left:1em;
  border-left:0.5em solid #47ad09;
  text-decoration:none; 
  padding-left:0.5em;
}

ins

del{
  display:block;
  margin-left:1em;
  border-left:0.5em solid #91081f;
  text-decoration:none;
  padding-left:0.5em;
  color:#777;
}

del

ins{
  display:block;
  margin-left:-1.25em;
  border-left:0.75em solid #47ad09;
  padding-left:0.5em;
}

ins:before {
  position:relative;
  display:block;
  content:"Addition";
  left:-1.55em;
  top:5em;
  width:0;
  height:0;
  font:0.6em/0 "Helvetica Neue", Arial, Helvetica, sans-serif;
  letter-spacing:1px;
  color:#fff;
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -ms-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  transform:rotate(270deg);
}

ins_add

  • Ottimo articolo!

    • Antonio Polese

      Grazie Simone 😉

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github