Css stuffs #3

CSS - Stuffs #3
Pseudo-classi, priorità e media

stati degli elementi
“Io sono quello che tu non sei, ovvero quello che
dovresti essere e che se non sei non puoi essere”

Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Pseudo-classe
È un’informazione che, se segue un selettore
in una regola di stile, descrive l’elemento
selezionato in un particolare stato

stati nelle regole di stile
:link link non visitato con attributo href
:visited il link è stato già visitato dall’utente
:hover il mouse è posizionato sopra all’elemento
:active l’elemento è attivo (click con il mouse sul link)
:focus l’elemento di input (e non solo) è selezionato
:target l’elemento è la destinazione dell’ancora

Stato :link
a:link{ color: red; }
Lo stato :link è usato per dare uno stile di formattazione ai link non
visitati sulla pagina.
Mentre a{ … } verrebbe applicato a tutti gli elementi a sulla pagina,
con a:link ci si riferisce solo ai link che hanno l’attributo href.

Stato :visited
a:visited{ color: red; }
Lo stato :visited è utilizzato per dare uno stile di formattazione ai
link presenti sulla pagina già visitati dall’utente.

Stato :hover
a:hover{ color: red; }
Lo stato :hover è la condizione in cui si trova un link quando il mouse
viene fatto muovere sopra l’elemento.
Attenzione: ha effetto sui dispositivi mobili perché l’utente non dispone di un mouse.
Ai fini dell'accessibilità, si suggerisce di usare la medesima regola anche per la la pseudo-classe
:focus.
!

Stato :active
a:active{ color: red; }
Lo stato :active è tipicamente usato per dare uno
stile di formattazione al link appena cliccato.
È comunque applicabile a qualsiasi elemento della
pagina.

Stato :target
a:target{ color: red; }
Lo stato :target è usato per formattare una sezione
di destinazione relativo ad un’ancora.
È applicabile a qualsiasi elemento della pagina.

L’ordine di definizione degli stati è fondamentale
La definizione degli ordini è fondamentale. Per
semplificare la memorizzazione dell’ordine basta
ricordare i termini contrari “LOVE HATE” (Amore Odio).
Link
OVisited
E Hover
Active
TE
http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-1.html

Stato :focus
input:focus{ color: red; }
Lo stato :focus è assunto da un elemento di input
(input, textarea, button) usato per dare una
formattazione all’elemento attivo.
È comunque applicabile a qualsiasi elemento della pagina purchè sia “focusable”. Per consentire ad
un elemento non di input di assumere tale stato è necessario definire l’attributo tab-index.

pseudo-classi
“vorrei essere una classe ma non posso esserlo”

pseudo-classi di posizione
:before e :after
consentono di definire un contenuto precedente e
successivo all’elemento descritto dal selettore.
Font Awesome e molte altre librerie CSS utilizzano proprio queste due pseudo-classi per arricchire il
contenuto con altri elementi.

pseudo-classi per i controlli del modulo
:checked :focus
:disabled :enabled
:invalid :valid
:required :optional
:read-write :read-only
:out-of-range :in-range
consentono di definire
regole di stile speciali per
elementi di un form.
La pseudo-classe :checked è utile per rappresentare una casella di input di tipo checkbox o radio con una grafica
personalizzata.

pseudo-classi per la tipografia
:first-line
:first-letter
consentono di formattare il
testo contenuto in un
elemento, intervenendo
rispettivamente sulla prima
lettera e sulla prima riga.
La pseudo-classe :first-letter è tipicamente utilizzata per rappresentare la prima lettera di un capitolo di un libro…
Specie se utilizzato in un CSS per la stampa

:not
È possibile usare la pseudo-classe :not per
escludere dall’insieme dei nodi interessati
dal selettore, una serie di nodi che sono
interessati dalla regola racchiusa nelle sue
parentesi.
.included:not(.excluded)
http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-not.html

pseudo-classi per il posizionamento
:first-child :last-child
:nth-child :nth-last-child
:first-of-type :last-of-type
:nth-of-type :nth-last-of-type
consentono di formattare gli
elementi rispetto alla loro
posizione in un insieme.

Seleziona ogni primo
elemento relativo ad un
elemento parent.

Seleziona ogni ultimo
elemento parent.

Seleziona l’ennesimo
elemento parent

pseudo-classi per il posizionamento ( :nth-child )
td:nth-child(2) {
background: yellow;
}
td:nth-child(2n + 4) {
background: green;
}
Seleziona tutte le seconde celle.
Seleziona tutte le celle pari a partire
dalla quarta della sequenza.
(nota: nessuno spazio tra 2 e n)

…
}
td:nth-child(2) {
…
}
Hanno lo
stesso
significato

…
}
td:nth-child(2n) {
…
}
Hanno lo
stesso
significato

…
}
td:nth-child(even) {
…
}
Hanno lo
stesso
significato

…
}
td:nth-child(odd) {
…
}
Hanno lo
stesso
significato

Seleziona ogni ennesimo
elemento parent contando gli
elementi a ritroso

Seleziona il primo
elemento di uno
specifico tipo nel
contesto del parent

Seleziona l’ultimo
elemento di uno
specifico tipo nel
contesto del parent

elemento di uno specifico
tipo nel contesto di un
elemento parent

Valgono le stesse regole
della pseudo-classe
:nth-child

elemento di uno specifico
tipo nel contesto di un
elemento parent contando gli
elementi dall’ultimo verso il
primo.

Valgono le stesse regole
della pseudo-classe
:nth-child

priorità
Solo una cosa è veramente importante: capire che nulla è veramente importante.
Manlio Cecovini, Dizionarietto di filosofia quotidiana, 2002

La regola dell’addizione
Le regole dei selettori si sommano tra loro
quando si applicano allo stesso elemento,
purché non vadano in conflitto tra loro.

Regole definite:
1. p { background-color: red; }
2.
3. p { color: yellow;}
Regola applicata:
p { background-color: red; color: yellow;}

L’ultima parola è quella che conta
Se più regole si applicano allo stesso
elemento le regole vengono applicate
secondo l’ordine in cui sono descritte nel
foglio di stile.

Regole definite:
1. p { background-color: red; }
2.
3. p {
4. background-color: blue;
5. color: yellow;
6. }
Regola applicata:
p { background-color: blue; color: yellow; }

Lo specifico vince sempre sul generico
Se un selettore è più specifico di un altro avrà
maggiore importanza nella determinazione
delle regole per l’elemento da esso
influenzato.

Lo specifico vince sempre sul generico
Regole definite:
1. p.red { background-color: red; }
2.
3. p {
4. background-color: blue;
5. color: yellow;
6. }
<p class="red">Ciao</p> → Ciao

Alterare specificità e ordine
Se per una regola viene specificata la direttiva
!important, essa non sarà sovrascritta da
nessun’altra regola, ad eccezione di quelle che si
applicano allo stesso elemento e che hanno la
medesima direttiva !important.

La regola del più importante
Regole definite:
1. p.red { background-color: red; }
2.
3. p {
4. background-color: blue !important;
5. color: yellow;
6. }

La regola dei più importanti
Regole definite:
1. p.red { background-color: red !important; }
2.
3. p {
4. background-color: blue !important;
5. color: yellow;
6. }

media query
Siam tre piccoli porcellin,
siamo tre fratellin ,
mai nessun ci dividerà ,
trallallero trallallà

Media
È l’identificazione della classe di dispositivo
con cui si fruisce il contenuto di una pagina
Web (Es. una stampante, un computer, uno
screen reader, …).

Tipi di media (più usati)
all Tutti i dispositivi
screen Schermo
print Stampante/Anteprima di stampa

Tipi di media ( per l’accessibilità)
speech Sintetizzatore vocale

Tipi di media (deprecati)
handheld Dispositivi di dimensioni contenute (device)
projection Presentazioni proiettate
tv Televisioni
braille Dispositivi braille
embossed Stampanti braille
tty Terminale/browser testuali

Attributo media
Per differenziare il caricamento di un foglio
di stile in dipendenza del dispositivo tramite
il quale è elaborato il contenuto, usare
l’attributo media dell’elemento <link />

Attributo media
1. <link rel="stylesheet" media="screen"
2. type="text/css" href="style-for-screen.css" />
3.
4.
5. <link rel="stylesheet" media="print"
6. type="text/css" href="style-for-print.css" />

Direttiva @media
Per differenziare parti dello stesso foglio di
stile in dipendenza del dispositivo che
visualizza il contenuto, usare la direttiva
@media.

Direttiva @media
1. @media screen{
2. .evidence{
3. background-color: yellow;
4. }
5. }
6. @media print{
7. .evidence{
8. background-color: transparent;
9. font-weight: bold;
10. }
11. }

Usi speciali di @media e (attributo) media
not|only mediatype and (media feature)
Il valore di media può essere anche più
complessa del semplice print o screen.

Media features (proporzioni della ViewPort)
aspect-ratio
La proporzione tra larghezza e altezza dell’area interna della finestra
del browser (detta anche ViewPort)
min-aspect-ratio
La proporzione minima tra larghezza ed altezza della ViewPort
max-aspect-ratio
La massima proporzione tra larghezza ed altezza della ViewPort

Media features (proporzioni del Dispositivo)
device-aspect-ratio
La proporzione tra la larghezza e l’altezza del dispositivo
max-device-aspect-ratio
La proporzione massima tra larghezza ed altezza del dispositivo
min-device-aspect-ratio
La proporzione minima tra larghezza ed altezza del dispositivo

Media features (altezza della ViewPort)
height
L’altezza esatta della ViewPort
max-height
L’altezza massima della ViewPort
min-height
L’altezza minima della ViewPort

Media features (larghezza della ViewPort)
width
La larghezza esatta della ViewPort
max-width
La massima dimensione della ViewPort
min-width
La dimensione minima della ViewPort

Media features (altezza del dispositivo)
device-height
L’altezza esatta del dispositivo
max-device-height
L’altezza massima del dispositivo
min-device-height
L’altezza minima del dispositivo

Media features (larghezza del dispositivo)
device-width
La larghezza esatta del dispositivo
max-device-width
La larghezza massima del dispositivo
min-device-width
La larghezza minima del dispositivo

Media features (numero colori)
color-index
Il numero di colori che il dispositivo è in grado di visualizzare
max-color-index
Il numero massimo di colori che il dispositivo può visualizzare
min-color-index
Il numero minimo di colori che il dispositivo deve supportare

Media features (profondità colore)
color
Il numero di bit utilizzato per descrivere il colore
max-color
Il numero massimo di bit per colore utilizzabili dal dispositivo
min-color
Il numero minimo di bit per colore supportati dal dispositivo

monochrome
Il numero di bit per colore in un dispositivo monocromatico (scala di
grigi)
max-monochrome
Il numero massimo di bit per colore su dispositivo monocromatico
min-monochrome
Il numero massimo di bit per colore su dispositivo monocromatico
Media features (scala di grigi)

Media features (grid)
grid
Determina se il dispositivo ha una visualizzazione a
griglia (terminale, o anche conosciuto come tty) o di
tipo bitmap (finestra del browser, stampante, ecc.).
Tramite questa media feature è facilmente identificabile il media tty ormai deprecato

Media features (risoluzione video)
resolution
La risoluzione del dispositivo utilizzando unità di misura in dpi oppure in dpcm
max-resolution
Risoluzione massima del dispositivo
min-resolution
Risoluzione minima del dispositivo
dpi è dpcm sono due unità di misura, la prima indica dots per inch (punti per pollice), la seconda
indica invece dots per centimeter (punti per centimetro).

Media features (orientamento del display)
orientation
L’orientamento della viewport
Può assumere i valori landscape oppure portrait.
Utile a determinare se la visualizzazione su un dispositivo mobile è in modalità panoramica
(landscape) oppure verticale (portrait). L’orientamento non è riconosciuto se l’orientamento sul
dispositivo risulta bloccato.

Media features (scansione verticale)
scan
La modalità di scansione delle righe orizzontali.
Può essere interlace oppure progressive.
Alcuni monitor usano la modalità “interlacciata”, dove per ogni frame video si alternano le righe
pari e dispari, sfruttando la capacità cognitiva di correzione dell’immagine . Ciò consente di
simulare un maggior valore FPS (Frame per Second) con la metà delle risorse.
Su uno schermo interlacciato, gli autori non dovrebbero utilizzare animazioni particolarmente
rapide a schermo per evitare l’effetto “pettine” e devono assicurarsi che i dettagli sullo schermo
siano di dimensioni maggiori di un 1px per evitare lo sfarfallio.

screen and (max-width: 320px)
Dispositivi la cui risoluzione video
orizzontale non supera i 320px

screen and (min-width: 321px) and (max-width: 640px)
Dispositivi la cui risoluzione video
orizzontale è compresa tra 321px e 640px

@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
Media query per il riconoscimento di un
Samsung Galaxy S3
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Creative Commons BY-NC-SA 4.0
https://creativecommons.org/licenses/by-nc-sa/4.0/
Prima di riutilizzare queste slide ricorda che:
Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made.
You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
NonCommercial — You may not use the material for commercial purposes.
ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the
same license as the original.

Css stuffs #3

More Related Content

Similar to Css stuffs #3

More from Diego La Monica

Css stuffs #3