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.

Media Queries Next Level

507 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

×