Nuovo progetto: Please Update It

Spesso quando ci vengono richiesti siti e applicazioni "all'ultimo grido" che utilizzano le ultime uscite di HTML5 e CSS3, ci troviamo a combattere con le varie compatibilità dei browser.
Soprattutto (ahimè) con le versioni più vecchie di Internet Explorer.
Ci sono comunque tante altre features interessanti che ancora alcuni browser più in voga non hanno al momento implementato, come ad esempio WebRTC.

Per vedere il vostro browser cosa supporta, potete visitare questo sito: https://html5test.com/index.html

Se invece volete verificare "da codice" se una certa features è supportata, potete usare le API di Modernizr.
E se una tale features che state usando nella vostra applicazione non fosse supportata?
Potete mostrare un messaggio di errore oppure da adesso potete usare www.pleaseupdate.it. :)

Per usarlo è abbastanza semplice e vi lascio qua un esempio che ho messo su CodePen: https://codepen.io/kasuken/pen/mqVPbg

L'importanza di scrivere bene il codice HTML e CSS

Spesso quando scriviamo codice C# stiamo molto attenti alla sintassi, a commentare bene il codice o comunque sia cerchiamo di seguire degli standard per far sì che chi legga il codice dopo di noi o noi stessi dopo qualche mese, risulti facilmente interpretabile, soprattutto nei passaggi più complessi.
Purtroppo questa cosa non accade spesso quando invece scriviamo codice HTML o CSS.
I motivi sono semplici:

  • non abbiamo un compilatore che ci impedisce di scrivere "come vuole lui"
  • la parte di UI è quella più soggetta a modifiche (anche all'ultimo momento)

Ovviamente scrivere bene il codice HTML e CSS ci fa risparmiare molto tempo se dobbiamo apportare delle modifiche e sopratutto il browser riesce a interpretarlo meglio e quindi renderizzarlo più velocemente.
Qua sotto provo a fare un elenco di alcuni degli accorgimenti che andrebbero adottati.
Ce ne sono tanti, ma inserirò quelli più importanti.

HTML

  • Usare sempre il doppio apice e mai il singolo sugli attributi
  • Non chiudere mai i tag che non hanno bisogno di chiusura (es. img)
  • Chiudere sempre i tag che hanno la chiusura opzionale
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/logo.png" alt="Logo">
    <h1 class="title">My first page</h1>
  </body>
</html>
  • Impostare sempre l'attributo della lingua sul tag html. Questo aiuta anche gli strumenti di sintesi vocale a utilizzare il dizionario giusto
<html lang="it-it">
  • Per una facile lettura, gli attributi dei tag html dovrebbero rispettare il seguente ordine:
    • class
    • id
    • data-
    • src, href, value
    • title, alt
<a class="..." id="..." data-toggle="modal" href="#">
  Link
</a>
  • Gli attributi booleani non hanno bisogno del valore, quindi meglio non specificarlo (es. disabled, checked)
<input id="todo" type="checkbox" value="1" checked>

CSS

  • Quando si usano più selettori per un classe, andare a capo per ognuno di essi
  • Inserire uno spazio dopo i :
  • Non inserire lo 0 quando un numero inizia per 0 (es. .8)
  • Usare i caratteri minuscoli per i valori esadecimali (es. #ccc)
  • Non specificare l'unità di misura per i valori impostati a 0 (es. margin: 0)
.title,
.title-secondary {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
  • Seguire sempre lo stesso ordine quando si dichiara un classe
    • Posizione
    • Box-model
    • Font e colori
    • Sfondo e bordi
    • Altro
.title-primary {
  /* Posizione */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Font */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Sfondo e bordi */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Altro */
  opacity: 1;
}
  • Le definizioni di classi di visualizzazione alternativa con media queries è buona norma inserirle subito sotto la classe originale. In questo modo si trova facilmente.
  • Non utilizzare file separati per le definizioni delle media queries
.title { ... }

@media (min-width: 960px) {
  .title { ...}
}
  • Evitare di utilizzare le dichiarazioni abbreviate per gli elementi che lo supportano. In questo modo vengono settati anche i valori che non vengono utilizzati.
    Gli elementi più comuni sono:
    • margin
    • padding
    • background
    • border
.title {
  margin-bottom: 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
  • Cercare di inserire commenti che spiegano il significato di quello che c'è scritto sotto
  • Non scrivere nel commento la stessa cosa che c'è scritta nel nome della classe
/* the title of homepage and contact page */
.title {
  ...
}
  • I nomi delle classi devono essere minuscoli
  • Si può usare il simbolo - per separare eventuali parole, non _
  • Cercare di fare le classi più piccole possibili, in modo da poter riutilizzarle più facilmente
.title { ... }
.important { ... }
.title-header { ... }

 

E voi, quanti di questi accorgimenti stavate usando? :)