To-do list con i CSS

Non so quanti lettori parlino francese, ma ho trovato la segnalazione molto sfiziosa e ho pensato di riprenderla qui sul blog: Checklist en CSS, ovvero come creare to-do list con HTML e CSS.

Ho ripreso la tecnica e ho preparato un piccolo esempio. Ma prima di procedere con il CSS essenziale, diamo uno sguardo al markup.

La to-do list è racchiusa in un ul class="todo", e ogni task viene inserito in un list-item li. I compiti ultimati vengono segnalati grazie ad elementi del, che aggiungono senza dubbio significato semantico e visivo: ecco infatti come si presenta
la todo-list con un minimo di CSS per font e colori, in cui gli elementi del sono sbarrati: è questa infatti la loro presentazione di default.

Ora procediamo con il CSS dell'esempio: dopo aver rimosso margini, padding e il marcatore
da lista e list-item, viene assegnato un padding sinistro di 20px ai list-item e l'icona di sfondo.

Il punto chiave dell'esempio è la personalizzazione dei del: per recuperare il padding dei list-item e ridefinire il marcatore basterà  dichiarare un margine sinistro negativo pari a -20px, avendo cura di renderli block-level attraverso display:block.

Verrà  poi dichiarato un padding sinistro e un icona anche per gli elementi del, così da coprire l'icona dei list-item e infine il testo viene riportato normale grazie alla proprietà  text-decoration. Il CSS dell'esempio è incorporato, ma riporto qui per comodità  le dichiarazioni essenziali:


ul.todo, ul.todo li{
  list-style: none;
  margin: 0;
  padding: 0
  }

ul.todo li{
  width: 15em;
  padding-left: 20px;
  color: #FF5E52;
  background: #FFF url(16-clock.png) no-repeat left center
  }

ul.todo del{
  display: block;
  margin-left: -20px;
  padding-left: 20px;
  background: #FFF url(16-em-check.png) no-repeat left center;
  color: #C0DE69;
  text-decoration: none
  }


In conclusione, merita la segnalazione il sito da cui ho preso le icone, ovvero Sweetie icons.