Pubblicato il 06/01/2024 da alnao nella categoria Css3 & Bootstrap

In HTML esistono due tipi di liste: quelle puntate, dette unordered list definite con il tag UL, e quelle numerate, dette ordered list definite con il tag OL. All’interno dei tag lista è possibile inserire gli elementi come list-item definite con il tag LI che può essere usato solo all’interno dei tag di tipo lista. Questi sono diventati uno standard per la visualizzazione di lista di elementi e stanno sostituendo le strutture tabellari definite con il tag TABLE e tutti gli altri tag per la visualizzazione di elementi in formato tabellare.

Nella documentazione ufficiale, esiste una sezione specifica per la personalizzazione delle liste e gli item presenti. La più semplice personalizzazione è il tipo di marker con la possibilità anche di impostare una immagine:

ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ol.roman { list-style-type: upper-roman; }
ol.alpha { list-style-type: lower-alpha; }
ul.image { list-style-image: url('sqpurple.gif'); }

Per la posizione di marker è sono possibili due valori: interno ed esterno

ul.a { list-style-position: outside; }
ul.b { list-style-position: inside; }

Nella programmazione recente è molto usata la tecnica di usare i tag lista senza elementi grafici rimuovendo il marker e azzerando tutti i margini:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Questa tecnica è molto usata per la gestione di menu e qualsiasi lista comprese anche le visualizzazioni nelle app:

Concetto diverso è l’uso del DataList, nonostante il nome assonante riguarda un argomento diverso: il tag data list offrono la possibilità di definire un elenco di valori presentati come possibili valori di un input-text ma, a differenza del tag select, permette all’utente di inserire un valore non compreso nella lista:

La sintassi HTML è particolare in quanto il tag input permette una proprietà list:

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

La documentazione ufficiale descrive una sola personalizzazione grafica: sola visibilità può essere gestita tramite CSS, tutti gli altri aspetti grafici sono gestiti dai browser, speriamo in futuro venga evoluta e vengano introdotte tecniche per una maggior personalizzazione.

MENU