Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 se...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
stati nelle regole di stile
:link link non visitato...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Stato :link
a:link{ color: red; }
Lo stato :link è ...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Stato :visited
a:visited{ color: red; }
Lo stato :v...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Stato :hover
a:hover{ color: red; }
Lo stato :hover...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Stato :active
a:active{ color: red; }
Lo stato :act...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Stato :target
a:target{ color: red; }
Lo stato :tar...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
L’ordine di definizione degli stati è fondamentale
...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Stato :focus
input:focus{ color: red; }
Lo stato :f...
pseudo-classi
“vorrei essere una classe ma non posso esserlo”
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi di posizione
:before e :after
consent...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per i controlli del modulo
:checked :...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per la tipografia
:first-line
:first-...
:not
È possibile usare la pseudo-classe :not per
escludere dall’insieme dei nodi interessati
dal selettore, una serie di n...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento ( :nth-child )
...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento ( :nth-child )
...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento ( :nth-child )
...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento ( :nth-child )
...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento ( :nth-child )
...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
pseudo-classi per il posizionamento
:first-child :l...
priorità
Solo una cosa è veramente importante: capire che nulla è veramente importante.
Manlio Cecovini, Dizionarietto di ...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
La regola dell’addizione
Le regole dei selettori si...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
La regola dell’addizione
Regole definite:
1. p { ba...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
L’ultima parola è quella che conta
Se più regole si...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
La regola dell’addizione
Regole definite:
1. p { ba...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Lo specifico vince sempre sul generico
Se un selett...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Lo specifico vince sempre sul generico
Regole defin...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Alterare specificità e ordine
Se per una regola vie...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
La regola del più importante
Regole definite:
1. p....
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
La regola dei più importanti
Regole definite:
1. p....
media query
Siam tre piccoli porcellin,
siamo tre fratellin ,
mai nessun ci dividerà ,
trallallero trallallà
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media
È l’identificazione della classe di dispositi...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Tipi di media (più usati)
all Tutti i dispositivi
s...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Tipi di media ( per l’accessibilità)
speech Sinteti...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Tipi di media (deprecati)
handheld Dispositivi di d...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Attributo media
Per differenziare il caricamento di...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Attributo media
1. <link rel="stylesheet" media="sc...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Direttiva @media
Per differenziare parti dello stes...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Direttiva @media
1. @media screen{
2. .evidence{
3....
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Usi speciali di @media e (attributo) media
not|only...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (proporzioni della ViewPort)
aspect-...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (proporzioni del Dispositivo)
device...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (altezza della ViewPort)
height
L’al...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (larghezza della ViewPort)
width
La ...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (altezza del dispositivo)
device-hei...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (larghezza del dispositivo)
device-w...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (numero colori)
color-index
Il numer...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (profondità colore)
color
Il numero ...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
monochrome
Il numero di bit per colore in un dispos...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (grid)
grid
Determina se il disposit...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (risoluzione video)
resolution
La ri...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (orientamento del display)
orientati...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Media features (scansione verticale)
scan
La modali...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
Usi speciali di @media e (attributo) media
screen a...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
screen and (min-width: 321px) and (max-width: 640px...
Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info
@media screen
and (device-width: 320px)
and (device...
Creative Commons BY-NC-SA 4.0
https://creativecommons.org/licenses/by-nc-sa/4.0/
Prima di riutilizzare queste slide ricord...
Upcoming SlideShare
Loading in …5
×

Css stuffs #3

230 views

Published on

Terza parte del corso su CSS in cui sono state analizzate le pseudo-classi, le priorità e la direttiva @media, alla base del Responsive Web Design

Published in: Design
  • Be the first to comment

  • Be the first to like this

Css stuffs #3

  1. 1. CSS - Stuffs #3 Pseudo-classi, priorità e media
  2. 2. stati degli elementi “Io sono quello che tu non sei, ovvero quello che dovresti essere e che se non sei non puoi essere”
  3. 3. 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
  4. 4. Diego La Monica - diego.lamonica@gmail.com - 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
  5. 5. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  6. 6. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  7. 7. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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. !
  8. 8. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  9. 9. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  10. 10. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  11. 11. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  12. 12. pseudo-classi “vorrei essere una classe ma non posso esserlo”
  13. 13. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  14. 14. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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. http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-3.html
  15. 15. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-4.html
  16. 16. :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
  17. 17. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  18. 18. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona ogni primo elemento relativo ad un elemento parent. http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-5.html
  19. 19. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona ogni ultimo elemento relativo ad un elemento parent. http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-6.html
  20. 20. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona l’ennesimo elemento relativo ad un elemento parent http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-7.html
  21. 21. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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) http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-8.html
  22. 22. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info pseudo-classi per il posizionamento ( :nth-child ) td:nth-child(0n + 2) { … } td:nth-child(2) { … } Hanno lo stesso significato http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-9.html
  23. 23. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info pseudo-classi per il posizionamento ( :nth-child ) td:nth-child(2n + 0) { … } td:nth-child(2n) { … } Hanno lo stesso significato http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-10.html
  24. 24. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info pseudo-classi per il posizionamento ( :nth-child ) td:nth-child(2n + 2) { … } td:nth-child(even) { … } Hanno lo stesso significato http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-11.html
  25. 25. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info pseudo-classi per il posizionamento ( :nth-child ) td:nth-child(2n + 1) { … } td:nth-child(odd) { … } Hanno lo stesso significato http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-12.html
  26. 26. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona ogni ennesimo elemento relativo ad un elemento parent contando gli elementi a ritroso http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-13.html
  27. 27. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona il primo elemento di uno specifico tipo nel contesto del parent http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-14.html
  28. 28. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona l’ultimo elemento di uno specifico tipo nel contesto del parent http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-15.html
  29. 29. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona ogni ennesimo elemento di uno specifico tipo nel contesto di un elemento parent
  30. 30. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Valgono le stesse regole della pseudo-classe :nth-child http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-16.html
  31. 31. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Seleziona ogni ennesimo elemento di uno specifico tipo nel contesto di un elemento parent contando gli elementi dall’ultimo verso il primo.
  32. 32. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 Valgono le stesse regole della pseudo-classe :nth-child http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-17.html
  33. 33. priorità Solo una cosa è veramente importante: capire che nulla è veramente importante. Manlio Cecovini, Dizionarietto di filosofia quotidiana, 2002
  34. 34. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  35. 35. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info La regola dell’addizione Regole definite: 1. p { background-color: red; } 2. 3. p { color: yellow;} Regola applicata: p { background-color: red; color: yellow;} http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-18.html
  36. 36. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  37. 37. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info La regola dell’addizione 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; } http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-19.html
  38. 38. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  39. 39. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-20.html
  40. 40. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  41. 41. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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. } <p class="red">Ciao</p> → Ciao http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-21.html
  42. 42. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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. } <p class="red">Ciao</p> → Ciao http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-22.html
  43. 43. media query Siam tre piccoli porcellin, siamo tre fratellin , mai nessun ci dividerà , trallallero trallallà
  44. 44. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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, …).
  45. 45. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Tipi di media (più usati) all Tutti i dispositivi screen Schermo print Stampante/Anteprima di stampa
  46. 46. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Tipi di media ( per l’accessibilità) speech Sintetizzatore vocale
  47. 47. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  48. 48. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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 />
  49. 49. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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" /> http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-23.html
  50. 50. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Direttiva @media Per differenziare parti dello stesso foglio di stile in dipendenza del dispositivo che visualizza il contenuto, usare la direttiva @media.
  51. 51. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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. } http://diegolamonica.info/demo/corso-wp-css/stuffs3/stuff-24.html
  52. 52. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  53. 53. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  54. 54. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  55. 55. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  56. 56. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  57. 57. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  58. 58. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  59. 59. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  60. 60. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  61. 61. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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)
  62. 62. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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
  63. 63. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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).
  64. 64. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  65. 65. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info 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.
  66. 66. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info Usi speciali di @media e (attributo) media screen and (max-width: 320px) Dispositivi la cui risoluzione video orizzontale non supera i 320px
  67. 67. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info screen and (min-width: 321px) and (max-width: 640px) Dispositivi la cui risoluzione video orizzontale è compresa tra 321px e 640px Usi speciali di @media e (attributo) media
  68. 68. Diego La Monica - diego.lamonica@gmail.com - http://diegolamonica.info @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 Usi speciali di @media e (attributo) media https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  69. 69. 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.

×