Come testare i tag del proprio sito mediante il CSS

Come testare i tag del proprio sito mediante il CSS

Come testare i tag del proprio sito mediante il CSS? Ebbene si, è possibile sfruttare il CSS per valutare se per esempio un link abbia l’attributo title o meno grazie alle tecniche del grandissimo Eric A. Meyer guru del CSS è stato un pioniere della conoscenza e della effettiva utilizzazione del CSS.

Prima che il normalize.css ci fosse, c’era il CSS reset.
Uno strumento che ai più dice poco, ma a persone di una certa esperienza dice, e dici molto. Fu un punto di svolta e indispensabile nella costruzione mediante CSS dei siti internet: come dice il suo nome azzerava i CSS iniettato da browser, in modo tale che, tutti i progetti partissero dalla stessa base del css, resettato appunto.

Eric sfruttando le proprietà delle regole del CSS ha creato delle regole, tali per cui a seconda che la tua immagine abbia o meno l’attributo title o alt viene riquadrata, da un bordo di colore molto acceso (il rosso, il fucsia, in modalità solid o background). Idea molto semplice ma decisamente corretta e geniale. Da notare che se l’immagine non vine riquadrata di niente allora ha superato il testo, congratulazioni 😉

Come testare i tag del proprio sito mediante il CSS: indice del contenuti

  1. Testare le immagini
  2. Testare i link
  3. Testare i div, span, li, p vuoti

1. Testare le immagini

Vuoi sapere quali immagini non siano SEO frinedly, e dunque non abbiano l’attributo alt o title? Scrivi il codice qui sotto nel tuo style.css:

img[alt=""] {
	border: 3px dotted red !important;
}
img:not([alt]) {
	border: 5px solid red !important;
}
img[title=""] {
	outline: 3px dotted fuchsia !important;
}
img:not([title]) {
	outline: 5px solid fuchsia !important;
}

Il risultato che avrete sarà simile allo schemetto posto qui sotto:

Title senza alt con alt, ma vuoto con alt e pieno
senza title blah
con title, ma vuoto blah
con title e pieno blah

Testare anche i link vul dire essenzialmente che: l’attrbuto href sia è presente, e non pieno sol di #, che l’attributo tile sia presente e non vuoto.
Per sapere quali link soddisfano queste caratteristiche SEO scrivi il codice qui sotto nel tuo style.css e lo scoprirari:

a[href]:not([title]) {
	border: 5px solid red;
}
a[title=""] {
	outline: 3px dotted red;
}
a[href="#"] {
	background: lime;
}
a[href=""] {
	background: fuchsia;
}

Avrai un risultato dei link simile al seguente:

Sommario

Com vedi solo il nono link

<a href="https://www.sergiopinna.it" title="blah">fillblah</a>

soddisfa le caratteristiche, difatti non ha una colorazione stana e non è riquadrato da nessun bordo

3. Testare i div, span, li, p vuoti

Con l’aiuto di questo codice potremmo individuare div, span, li, p vuoti, cosa che talvolta Wordporess, addirittura per default fa:

div:empty,
span:empty,
li:empty,
p:empty {
	padding: 0.5em;
	background: yellow;
}
div:empty,
span:empty,
li:empty,
p:empty {
	padding: 0.5em;
	background: yellow;
}

ecco il risultato degli errori:

  1. linea piena:

  2. lista vuota ccon it tag uniti;

  3. lista vuota ma con

    <!-- comment -->

    )

  4. lista vuota con uno spazio fra i tag li;

  5. span vuoto [ ], and a break [
    ]
  6. div vuto: [

    ]

Altro articolo, oltre che al qui presente “Come testare i tag del proprio sito mediante il CSS”, che mostra tutta la portatata della “magia” del CSS che potrebbe interessarti è: Guida completa per cambiare la posizione a qualsiasi elemento

Font:
CSS Tools: Diagnostic CSS

Condividi questo articolo

Condividi su facebook
Condividi su twitter
Condividi su linkedin