Media Queries Next Level
•
5 recomendaciones•971 vistas
È 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.
Recomendados
Más contenido relacionado
Similar a Media Queries Next Level
Similar a Media Queries Next Level (20)
Último
Último (9)
Media Queries Next Level
- 2. 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?
- 4. 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
- 5. § Media Queries Level 3 § Media Queries Level 4 § Media Queries Level 5 oggi supporto parziale domani
- 6. La prima specifica MQ4 è nata nel 2014 • Working Draft • Last Call • Proposed Recommendation • Candidate Recommendation (mq4) <-
- 7. § Media queries § Viewport § Flexbox § Grid layout Strumenti per il responsive:
- 8. 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
- 10. Media Types / Media Features
- 11. La triste storia di GIANPARIDE
- 13. 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
- 15. 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???
- 16. MEDIA QUERIES NEXT LEVEL!
- 19. Media Queries Level 4 - 5 § Interazione con il device § Scripting § Qualità del Display § Colore § Caratteristiche ambientali
- 20. 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
- 22. @media (min-width: 768px) and (max-width: 992px) { } Nuova sintassi (mq4)
- 23. @media (min-width: 768px) and (max-width: 992px) { } @media (768px <= width <= 992px) { } Nuova sintassi (mq4)
- 24. @media (max-width: 992px) { } @media (width <= 992px) { } Nuova sintassi (mq4)
- 25. @media (min-width: 768px), (max-width: 992px) { } @media (width >= 768px) or (width <= 992px) { } Nuova sintassi (mq4) AND , NOT ONLY
- 26. @custom-media --smartphone (max-width: 30em); @media (--smartphone) { … } @media (--smartphone) and (script) { … } (mq5) @custom-media
- 28. (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)
- 30. (mq5) .no-js .banner { display: block; } @media (scripting) <html class="no-js">
- 31. (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)
- 33. (mq5) @media (light-level) @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } }
- 34. (mq5) @media (light-level) @media (light-level: dim) { p { background: #222; color: #ccc; } }
- 35. (mq5) @media (light-level) @media (light-level: normal) { p { background: url(“texture.jpg”); color: #333; } }
- 36. Interaction media features@media(pointer) / @media(any-pointer) @media(hover) / @media(any-hover)
- 37. Il dispositivo NON supporta puntatori (tv, stampanti) (mq4) @media (pointer) @media (pointer: none) { .button { display: none; } }
- 38. @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)
- 39. @media (pointer: fine) { .button { min-width: 100px; min-height: 50px; } } Tavoletta grafica Pc/Notebook Mouse Notebook touch pad (mq4) @media (pointer)
- 40. @media (pointer: fine) { input[type="checkbox"] { border: 1px solid #3b5998; … } } @media (pointer: coarse) { input[type="checkbox"] { width: 180px; height: 70px; … } }
- 43. @media (hover) { .submenu { display: block; } } (mq4) @media (hover) @media (hover: none) { .submenu { display: none; } }
- 44. .subnav { display: none; } @media (hover) { .link-nav:hover .subnav { display: block; } } @media (hover: none) { .subnav { display: block; } }
- 46. Problematiche
- 47. @media (any-pointer: none) { } @media (any-pointer: coarse) { } @media (any-pointer: fine) { } (mq4) @media (any-pointer)
- 48. @media (any-hover: none) { } @media (any-hover: hover) { } (mq4) @media (any-hover)
- 49. Supporto
- 51. @media (overflow-block: none) { } @media (overflow-block/inline) @media (overflow-inline: none) { } (mq4)
- 52. @media (overflow-block/inline) @media (overflow-block: scroll) { } @media (overflow-inline: scroll) { } (mq4)
- 53. @media (overflow-block/inline) @media (overflow-block: optional-paged) { } (mq4)
- 54. @media (overflow-block/inline) @media (overflow-block: paged) { } (mq4)
- 56. @media (color-gamut) @media (color-gamut: srgb) @media (color-gamut: p3) @media (color-gamut: rec2020) (mq4)
- 57. @media (update)
- 58. @media (update) @media (update: none) @media (update: slow) @media (update: fast) (mq4)
- 59. § 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?
- 62. Un ringraziamento speciale a @MakhBeth e @decarola per il servizio fotografico. Nessun frontender è stato maltrattato durante la creazione di queste slide. Grazie!