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.
Carmine Alfano
• UX / Frontender per Fullstack Agency
• Docente UX/Html/Css/jQuery
• Cofondatore Community
DotNetCampania ...
Media Queries
Level 4
Level 5
Specifiche mirate
che possono essere implementate
nel browser in modo indipendente
I moduli sono numerati per livello
e mo...
§ Media Queries Level 3
§ Media Queries Level 4
§ Media Queries Level 5
oggi
supporto parziale
domani
La prima specifica MQ4
è nata nel 2014
• Working Draft
• Last Call
• Proposed Recommendation
• Candidate Recommendation (m...
§ Media queries
§ Viewport
§ Flexbox
§ Grid layout
Strumenti per il responsive:
Una media query consiste in un media type
e zero o più espressioni che controllano le condizioni
di una particolare media ...
Media Types
tty
tv
projection
handheld
braille
embossed
aural
Media Types / Media Features
La triste storia di
GIANPARIDE
Samsung S18 Apocalypse
- 8 display riposizionabili (in stile tetris)
- Sensore luce ambientale ultrasensibile
- Tre Fotoca...
Media Features
Level 3
- Width
- Height
- Aspect-ratio
- Orientation
- Resolution
- Device	width
- Device	height
- Device	...
MEDIA QUERIES NEXT LEVEL!
Media Queries Level 4 - 5
§ Interazione con il device
§ Scripting
§ Qualità del Display
§ Colore
§ Caratteristiche ambient...
Media Queries Level 4 - 5
§ Interazione con il device
• Pointer
• Hover
§ Scripting
• Script
§ Qualità del Display
• Overf...
Nuova sintassi
& @custom-media
@media (min-width: 768px) and (max-width: 992px) { }
Nuova sintassi
(mq4)
@media (min-width: 768px) and (max-width: 992px) { }
@media (768px <= width <= 992px) { }
Nuova sintassi
(mq4)
@media (max-width: 992px) { }
@media (width <= 992px) { }
Nuova sintassi
(mq4)
@media (min-width: 768px), (max-width: 992px) { }
@media (width >= 768px) or (width <= 992px) { }
Nuova sintassi
(mq4)
AND...
@custom-media --smartphone (max-width: 30em);
@media (--smartphone) {
…
}
@media (--smartphone) and (script) {
…
}
(mq5)
@...
@media (scripting)
(mq5)
• Script che non vengono caricati, eseguiti molto più tardi o più
lentamente a causa della scarsa connettività.
• Sc...
(mq5)
<html class="no-js">
<noscript></noscript>
@media (scripting)
(mq5)
.no-js .banner { display: block; }
@media (scripting)
<html class="no-js">
(mq5)
/* JavaScript non funziona */
@media (scripting: none) { .banner { display: block; } }
/* JavaScript funziona */
@me...
@media (light-level)
(mq5)
@media (light-level)
@media (light-level: washed) {
p {
background: white;
color: black;
font-size: 2em;
}
}
(mq5)
@media (light-level)
@media (light-level: dim) {
p {
background: #222;
color: #ccc;
}
}
(mq5)
@media (light-level)
@media (light-level: normal) {
p {
background: url(“texture.jpg”);
color: #333;
}
}
Interaction
media features@media(pointer) / @media(any-pointer)
@media(hover) / @media(any-hover)
Il dispositivo NON supporta puntatori
(tv, stampanti)
(mq4)
@media (pointer)
@media (pointer: none) {
.button { display: n...
@media (pointer: coarse) {
.button { min-width: 100px; min-height: 50px; }
}
(mq4)
@media (pointer)
Il device supporta un ...
@media (pointer: fine) {
.button { min-width: 100px; min-height: 50px; }
}
Tavoletta grafica
Pc/Notebook Mouse
Notebook to...
@media (pointer: fine) {
input[type="checkbox"] { border: 1px solid #3b5998; … }
}
@media (pointer: coarse) {
input[type="...
https://codepen.io/carmine/pen/zRJNKL
@media (pointer)
@media (hover) {
.submenu { display: block; }
}
(mq4)
@media (hover)
@media (hover: none) {
.submenu { display: none; }
}
.subnav { display: none; }
@media (hover) {
.link-nav:hover .subnav { display: block; }
}
@media (hover: none) {
.subnav {...
https://codepen.io/carmine/pen/BYOpVW
@media (hover)
Problematiche
@media (any-pointer: none) { }
@media (any-pointer: coarse) { }
@media (any-pointer: fine) { }
(mq4)
@media (any-pointer)
@media (any-hover: none) { }
@media (any-hover: hover) { }
(mq4)
@media (any-hover)
Supporto
@media
(overflow/block-inline)
@media (overflow-block: none) { }
@media (overflow-block/inline)
@media (overflow-inline: none) { }
(mq4)
@media (overflow-block/inline)
@media (overflow-block: scroll) { }
@media (overflow-inline: scroll) { }
(mq4)
@media (overflow-block/inline)
@media (overflow-block: optional-paged) { }
(mq4)
@media (overflow-block/inline)
@media (overflow-block: paged) { }
(mq4)
@media (color-gamut)
@media (color-gamut)
@media (color-gamut: srgb)
@media (color-gamut: p3)
@media (color-gamut: rec2020)
(mq4)
@media (update)
@media (update)
@media (update: none)
@media (update: slow)
@media (update: fast)
(mq4)
§ Nuova sintassi e @custom-media
• Non supportate – Utilizzabili attraverso CSSNEXT
§ @media (pointer) / @media (hover)
• ...
Un esempio pratico:
Pointer:
Hover:
Update:
Overflow-block:
Scripting:
E-ink
none
none
slow
paged
enabled
Smartphone
coars...
Un ringraziamento speciale a @MakhBeth e @decarola per il servizio fotografico.
Nessun frontender è stato maltrattato dura...
https://joind.in/event/cssday-2018
Media Queries Next Level
Media Queries Next Level
Media Queries Next Level
Media Queries Next Level
Media Queries Next Level
Media Queries Next Level
Media Queries Next Level
Upcoming SlideShare
Loading in …5
×

Media Queries Next Level

604 views

Published on

È tempo di pensare alle nuove funzionalità introdotte nelle specifiche 'media queries level 4' che da poco hanno ottenuto lo stato di 'candidate recommendation' dal W3C. In questa sessione analizzeremo le principali novità e come sarà possibile utilizzare questo strumento per migliorare il nostro flusso di lavoro.

Published in: Technology

Media Queries Next Level

  1. 1. Carmine Alfano • UX / Frontender per Fullstack Agency • Docente UX/Html/Css/jQuery • Cofondatore Community DotNetCampania e Web Design Republic E-mail: info@carminealfano.it Twitter: @razzullo Facebook: Web Design Republic Chi Sono?
  2. 2. Media Queries Level 4 Level 5
  3. 3. Specifiche mirate che possono essere implementate nel browser in modo indipendente I moduli sono numerati per livello e mostrano le iterazioni attraverso cui sono passati CSS3 è modulare
  4. 4. § Media Queries Level 3 § Media Queries Level 4 § Media Queries Level 5 oggi supporto parziale domani
  5. 5. La prima specifica MQ4 è nata nel 2014 • Working Draft • Last Call • Proposed Recommendation • Candidate Recommendation (mq4) <-
  6. 6. § Media queries § Viewport § Flexbox § Grid layout Strumenti per il responsive:
  7. 7. Una media query consiste in un media type e zero o più espressioni che controllano le condizioni di una particolare media features Cos’è una Media Query @media screen and (min-width: 768px) and (max-width: 992px) { /* Styles */ } Media Type Media Features
  8. 8. Media Types tty tv projection handheld braille embossed aural
  9. 9. Media Types / Media Features
  10. 10. La triste storia di GIANPARIDE
  11. 11. Samsung S18 Apocalypse - 8 display riposizionabili (in stile tetris) - Sensore luce ambientale ultrasensibile - Tre Fotocamere da 576mp - Fari diurni - Specchietto retrovisore con illuminazione al led
  12. 12. Media Features Level 3 - Width - Height - Aspect-ratio - Orientation - Resolution - Device width - Device height - Device aspect ratio - Scan - Grid - Color - Monochrome - Color index Media Types Level 3 - All - Print - Screen - Aural - Braille - Embossed - Handheld - Projection - Speech - Tty - Tv - S18 Apocalypse???
  13. 13. MEDIA QUERIES NEXT LEVEL!
  14. 14. Media Queries Level 4 - 5 § Interazione con il device § Scripting § Qualità del Display § Colore § Caratteristiche ambientali
  15. 15. Media Queries Level 4 - 5 § Interazione con il device • Pointer • Hover § Scripting • Script § Qualità del Display • Overflow-block/inline • Update § Colore § Color-gamut § Caratteristiche ambientali • Luminosity
  16. 16. Nuova sintassi & @custom-media
  17. 17. @media (min-width: 768px) and (max-width: 992px) { } Nuova sintassi (mq4)
  18. 18. @media (min-width: 768px) and (max-width: 992px) { } @media (768px <= width <= 992px) { } Nuova sintassi (mq4)
  19. 19. @media (max-width: 992px) { } @media (width <= 992px) { } Nuova sintassi (mq4)
  20. 20. @media (min-width: 768px), (max-width: 992px) { } @media (width >= 768px) or (width <= 992px) { } Nuova sintassi (mq4) AND , NOT ONLY
  21. 21. @custom-media --smartphone (max-width: 30em); @media (--smartphone) { … } @media (--smartphone) and (script) { … } (mq5) @custom-media
  22. 22. @media (scripting)
  23. 23. (mq5) • Script che non vengono caricati, eseguiti molto più tardi o più lentamente a causa della scarsa connettività. • Script che non funzionano a causa delle differenze nel livello di supporto. @media (scripting)
  24. 24. (mq5) <html class="no-js"> <noscript></noscript> @media (scripting)
  25. 25. (mq5) .no-js .banner { display: block; } @media (scripting) <html class="no-js">
  26. 26. (mq5) /* JavaScript non funziona */ @media (scripting: none) { .banner { display: block; } } /* JavaScript funziona */ @media (scripting: enabled) { .banner { display: none; } } /* JavaScript è presente ma solo inizialmente*/ @media (scripting: initial-only) { .banner { display: block; } } @media (scripting)
  27. 27. @media (light-level)
  28. 28. (mq5) @media (light-level) @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } }
  29. 29. (mq5) @media (light-level) @media (light-level: dim) { p { background: #222; color: #ccc; } }
  30. 30. (mq5) @media (light-level) @media (light-level: normal) { p { background: url(“texture.jpg”); color: #333; } }
  31. 31. Interaction media features@media(pointer) / @media(any-pointer) @media(hover) / @media(any-hover)
  32. 32. Il dispositivo NON supporta puntatori (tv, stampanti) (mq4) @media (pointer) @media (pointer: none) { .button { display: none; } }
  33. 33. @media (pointer: coarse) { .button { min-width: 100px; min-height: 50px; } } (mq4) @media (pointer) Il device supporta un puntatore a precisione limitata - Touchscreen (smartphone, tablet ecc..) - Nintendo wii (telecomando) - Kinect (gesture)
  34. 34. @media (pointer: fine) { .button { min-width: 100px; min-height: 50px; } } Tavoletta grafica Pc/Notebook Mouse Notebook touch pad (mq4) @media (pointer)
  35. 35. @media (pointer: fine) { input[type="checkbox"] { border: 1px solid #3b5998; … } } @media (pointer: coarse) { input[type="checkbox"] { width: 180px; height: 70px; … } }
  36. 36. https://codepen.io/carmine/pen/zRJNKL @media (pointer)
  37. 37. @media (hover) { .submenu { display: block; } } (mq4) @media (hover) @media (hover: none) { .submenu { display: none; } }
  38. 38. .subnav { display: none; } @media (hover) { .link-nav:hover .subnav { display: block; } } @media (hover: none) { .subnav { display: block; } }
  39. 39. https://codepen.io/carmine/pen/BYOpVW @media (hover)
  40. 40. Problematiche
  41. 41. @media (any-pointer: none) { } @media (any-pointer: coarse) { } @media (any-pointer: fine) { } (mq4) @media (any-pointer)
  42. 42. @media (any-hover: none) { } @media (any-hover: hover) { } (mq4) @media (any-hover)
  43. 43. Supporto
  44. 44. @media (overflow/block-inline)
  45. 45. @media (overflow-block: none) { } @media (overflow-block/inline) @media (overflow-inline: none) { } (mq4)
  46. 46. @media (overflow-block/inline) @media (overflow-block: scroll) { } @media (overflow-inline: scroll) { } (mq4)
  47. 47. @media (overflow-block/inline) @media (overflow-block: optional-paged) { } (mq4)
  48. 48. @media (overflow-block/inline) @media (overflow-block: paged) { } (mq4)
  49. 49. @media (color-gamut)
  50. 50. @media (color-gamut) @media (color-gamut: srgb) @media (color-gamut: p3) @media (color-gamut: rec2020) (mq4)
  51. 51. @media (update)
  52. 52. @media (update) @media (update: none) @media (update: slow) @media (update: fast) (mq4)
  53. 53. § Nuova sintassi e @custom-media • Non supportate – Utilizzabili attraverso CSSNEXT § @media (pointer) / @media (hover) • Supporto parziale § @media (color-gamut) • Supporto parziale § @media (scripting) • Non supportato § @media (overflow-block/inline) • Non supportato § @media (light-level) • Non supportato Quando potremo utilizzare le nuove media queries?
  54. 54. Un esempio pratico: Pointer: Hover: Update: Overflow-block: Scripting: E-ink none none slow paged enabled Smartphone coarse none fast scroll enabled Print none none none paged initial-only
  55. 55. Un ringraziamento speciale a @MakhBeth e @decarola per il servizio fotografico. Nessun frontender è stato maltrattato durante la creazione di queste slide. Grazie!
  56. 56. https://joind.in/event/cssday-2018

×