Una serie di casi pratici dove puoi usare un tag HTML al posto di selettore CSS.
Introduzione
Perché è importante l’uso dei fogli di stile CSS?
I selettori CSS (acronimo di Cascade Style Sheet) sono indispensabili per la personalizzazione del layout di un sito. Inoltre vanno a modificare l’aspetto dei tag HTML.
Puoi impostare il font delle tue pagine, differenziare intestazioni, iterazioni, collegamenti e molto altro.
I CSS rappresentano un modo pratico per centralizzare la gestione e visualizzazione dei vari elementi di stile all’interno di una pagina HTML o come file testuale esterno.
Ogni volta che includi elementi HTML, senza i selettori CSS, dovresti personalizzare il singolo tag ogni volta con il codice style in ogni pagina dove appare.
Esempio di un titolo H1 colorato di blu:
<h1 style="color:blue;">Un titolo blu</h1>
Puoi fare la stessa operazione utilizzando l’inclusione di un file testo con i selettori CSS.
Il vantaggio è che devi scrivere solo poche linee di codice per modificare tutto le pagine che includono il foglio di stile.
H1 {
color: blue;
}
I CSS sono pratici e fanno risparmiare peso alle pagine web migliorando così la velocità di caricamento del sito risparmiando banda.
Dopo questa spiegazione sull’importanza dei selettori CSS, curiosamente proviamo a vedere se ci sono tag HTML da usare al posto di selettori CSS.
Esempi pratici
Esempi di alcuni tag HTML da utilizzare nelle pagine web.
# Ritorno a capo con <BR> e <WBR>
In una frase puoi inserire nel codice un ritorno a capo con il tag <BR> o <WBR>
Il tag <br> inserisce una singola interruzione di riga e viene utilizzato per inserire interruzioni di riga, non per separare i paragrafi.
<p> Dopo il tag <br> il testo va a capo </br> </p>
I tag <br> e <br /> sono uguali. L’uso della barra è inserita solo per compatibilità con i browser più datati che non sono compatibili con HTML rev. 5.
Il tag <wbr> (Word Break Opportunity) da istruzioni al browser di fare un interruzione in quel specifico punto qualora ce ne fosse il bisogno .
Può essere usato nei casi vi siano parole troppo lunghe o se abbiamo paura che il browser interromperà le nostre righe nel posto sbagliato.
L’elemento <wbr> aggiunge una ulteriore opportunità di interruzione di parole.
<wbr> supporta anche gli attribute event di HTML5
#Nascondere un elemento
È possibile nascondere un elemento usando l’HTML. Usando l’attributo <hidden> puoi nascondere un elemento. Qualcuno ricorderà che, in passato, era pratica comune nascondere parole chiave nel testo per favorire l’indicizzazione dei contenuti con Google. Ovviamente ora questa pratica è fortemente sconsigliata.
<p hidden> Ciao! Io sono un elemento nascosto</p>
#Visualizzare o nascondere un contenuto
Con questi due comandi <details><summary>, puoi far apparire o nascondere un contenuto cliccando semplicemente sulla freccia accanto al titolo.
<details>
<summary>Titolo a fisarmonica</summary>
Contenuto che vuoi far vedere/nascondere.
</details>Esempio:
Titolo a fisarmonica
Contenuto che vuoi far vedere/nascondere.
# Barra di stato
Usando il tag HTML possiamo mostrare un progresso senza css o javascript <progress>
<progress id="file" value="32" max="100"> 32% </progress>Esempio:
# Testo di eliminazione/sottolineatura
Usando il tag HTML <del> puoi sovrascrivere una parola con una riga di cancellazione.
Esempio:
<p>La prossima parola è <del>cancellata</del>Esempio:
La prossima parola è cancellata
# Selezione colori
Usando il tag HTML <input type="color"> puoi mostrare una selezione colori e ottenere il suo valore.
Esempio:
<input type="color" value="#ff0000">Esempio:
Conclusione
I fogli di stile sono indispensabili per il layout di una pagina ma in alcuni casi è utile utilizzare codici HTML per semplificarci la vita di programmatore.