Attributi globali

Gli attributi globali sono attributi che possono essere specificati per qualsiasi tag.

Ecco l’elenco (con link alle api w3c)

  • accesskey serve per creare uno shortcut da tastiera su un link, in combinazione con il tasto ALT (dipende dal sistema operativo)
  • contenteditable: indica se il contenuto è modificabile o meno (vedi esempio in codepen). Ha due stati true o false, se lasciato vuoto il default è true.
  • dir indica la direzione del testo: può essere ltr rtl o auto
  • hidden è un attributo booleano (se specificato è true, altrimenti false) che dà la direttiva al browser di non renderizzare l'elemento. Serve per controllare programmaticamente la visualizzazione ad una porzione di pagina (attenzione che nel codice il contenuto rimane...!)
  • lang  specifica la lingua del contenuto, anche in questo caso può essere utilizzata in maniera programmatica per la gestione semplificata del multilingua (vedi esempio)
  • spellcheck ordina al browser di utilizzare il proprio correttore ortografico sull'elemento. Può essere impostato a true o a false.
  • style permette di specificare delle regole css inline sull'elemento (pratica possibilmente da evitare)
  • tabindex accetta un valore numerico e controlla all'interno di una form o di una serie di link o altri elementi interattivi, l'ordine dei campi da raggiungere attraverso la tabulazione
  • title crea un tooltips informativo sull'elemento. Attualmente i browser lo supportano solo sull'hover del mouse, il che lo rende inutile sia per la navigazione su tastiera sia su dispositivi touch.
  • translate è un attributo booleano che accetta i valori yes o no e indica se una porzione di testo può essere tradotta o meno. Si specifica translate="no" per i termini in lingua che non devono volutamente essere tradotti (esempio Apple come nome di azienda, da non tradurre in mela).

See the Pen KdarLJ by Mariachiara Pezzotti (@merissimissima) on CodePen.

Class e Id

        • id: serve per specificare all’interno della pagina l’elemento con un identificativo unico e univoco

 

 

    • class: sono uno o una serie di “space-separated tokens“, identificativi testuali separati da uno spazio che servono per identificare l’elemento. A differenza degli id lo stesso elemento può avere più classi e la stessa classe può essere attribuita a più elementi nella stessa pagina.

 

    Id e class sono attributi identificativi, servono a livello di foglio di stile o di codice per richiamare determinate azioni o stili sugli elementi. See the Pen KdmEEo by Mariachiara Pezzotti (@merissimissima) on CodePen.

Nell’esempio utilizziamo l’id fruits_list per dire che la lista dei frutti dovrà avere l’arial come font, mentre utilizziamo le classi esotic e green-veg per specificare i colori di sfondo.

Per capire quando usare le classi e quando utilizzare gli id, potete ricordarvi la differenza tra il codice fiscale e il nome proprio di persona: se in una sala affollata chiamo tutte le persone che si chiamano “Giulia” può essere che si voltino più di una donna, diversamente se chiamo uno specifico codice fiscale se ne volterà una soltanto. Le classi sono il nome proprio degli elementi di una pagina, mentre gli id sono loro codice fiscale.