Css stuffs #3

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

https://creativecommons.org/licenses/by-nc-sa/4.0/




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 - [email protected] - 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

mailto:[email protected]

http://diegolamonica.info


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).

LinkOVisitedE HoverActiveTE

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.http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-2.html



http://fontawesome.io/




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

significatohttp://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-9.html








…

}

td:nth-child(2n) {

…

}

Hanno lo

stesso









…

}

td:nth-child(even) {

…

}

Hanno lo

stesso









…

}

td:nth-child(odd) {

…

}

Hanno lo

stesso











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 ordineSe 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 @media1. @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.0https://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.







https://creativecommons.org/licenses/by-nc-sa/4.0/#





Design

Css stuffs #3