SlideShare a Scribd company logo
Media Queries Next Level
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?
Media Queries
Level 4
Level 5
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
§ 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 (mq4) <-
§ 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 features
Cos’è una Media Query
@media screen and (min-width: 768px) and (max-width: 992px) {
/* Styles */
}
Media	Type Media	Features
Media Types
tty
tv
projection
handheld
braille
embossed
aural
Media Types / Media Features
La triste storia di
GIANPARIDE
Media Queries Next Level
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
Media Queries Next Level
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???
MEDIA QUERIES NEXT LEVEL!
Media Queries Next Level
Media Queries Next Level
Media Queries Level 4 - 5
§ Interazione con il device
§ Scripting
§ Qualità del Display
§ Colore
§ Caratteristiche ambientali
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
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 , NOT ONLY
@custom-media --smartphone (max-width: 30em);
@media (--smartphone) {
…
}
@media (--smartphone) and (script) {
…
}
(mq5)
@custom-media
@media (scripting)
(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)
(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 */
@media (scripting: enabled) { .banner { display: none; } }
/* JavaScript è presente ma solo inizialmente*/
@media (scripting: initial-only) { .banner { display: block; } }
@media (scripting)
@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: none; }
}
@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)
@media (pointer: fine) {
.button { min-width: 100px; min-height: 50px; }
}
Tavoletta grafica
Pc/Notebook Mouse
Notebook touch pad
(mq4)
@media (pointer)
@media (pointer: fine) {
input[type="checkbox"] { border: 1px solid #3b5998; … }
}
@media (pointer: coarse) {
input[type="checkbox"] { width: 180px; height: 70px; … }
}
Media Queries Next Level
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 { display: block; }
}
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)
• 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?
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
Media Queries Next Level
Un ringraziamento speciale a @MakhBeth e @decarola per il servizio fotografico.
Nessun frontender è stato maltrattato durante la creazione di queste slide.
Grazie!
https://joind.in/event/cssday-2018

More Related Content

Similar to Media Queries Next Level

Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next levelNicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
Meet Magento Italy
 
Android - Programmazione Avanzata
Android -  Programmazione AvanzataAndroid -  Programmazione Avanzata
Android - Programmazione Avanzata
Stefano Sanna
 
UI Composition
UI CompositionUI Composition
UI Composition
DotNetMarche
 
Sviluppo e deployment cross-platform: Dal mobile alla Tv
Sviluppo e deployment cross-platform: Dal mobile alla Tv Sviluppo e deployment cross-platform: Dal mobile alla Tv
Sviluppo e deployment cross-platform: Dal mobile alla Tv
Codemotion
 
Push Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background AgentPush Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background Agent
DomusDotNet
 
Framework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostackFramework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostack
Stefano Spagnolo
 
Catalogo ENYCS 2015
Catalogo ENYCS 2015Catalogo ENYCS 2015
Catalogo ENYCS 2015
Enycs
 
follow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQueryfollow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQuery
QIRIS
 
Mobile senza frontiere
Mobile senza frontiereMobile senza frontiere
Mobile senza frontiere
Carlo Frinolli Puzzilli
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Andrea Picchi
 
SkyMedia: La tecnologia al servizio dell'intrattenimento
SkyMedia: La tecnologia al servizio dell'intrattenimentoSkyMedia: La tecnologia al servizio dell'intrattenimento
SkyMedia: La tecnologia al servizio dell'intrattenimento
Mavigex srl
 
Introduzione allo sviluppo UWP per xBox
Introduzione allo sviluppo UWP per xBoxIntroduzione allo sviluppo UWP per xBox
Introduzione allo sviluppo UWP per xBox
Massimo Bonanni
 
AUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERTAUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERT
Mirko Compagno
 
Introduzione a jQuery
Introduzione a jQueryIntroduzione a jQuery
Introduzione a jQuery
Sandro Marcon
 
GWT vs CSS3
GWT vs CSS3GWT vs CSS3
GWT vs CSS3
GWTcon
 
NEXiDA Smart User Interface flyer (italian)
NEXiDA Smart User Interface flyer (italian)NEXiDA Smart User Interface flyer (italian)
NEXiDA Smart User Interface flyer (italian)
Claudio Rubbiani
 
Augmented Reality: guardare il mondo da un altro punto di vista
Augmented Reality: guardare il mondo da un altro punto di vistaAugmented Reality: guardare il mondo da un altro punto di vista
Augmented Reality: guardare il mondo da un altro punto di vista
Codemotion
 
Meetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure FunctionsMeetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure Functions
dotnetcode
 
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
jekil
 
PanoView: una piattaforma per la realtà virtuale basata su WordPress
PanoView: una piattaforma per la realtà virtuale basata su WordPressPanoView: una piattaforma per la realtà virtuale basata su WordPress
PanoView: una piattaforma per la realtà virtuale basata su WordPress
INGEGNI MULTIMEDIALI
 

Similar to Media Queries Next Level (20)

Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next levelNicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
 
Android - Programmazione Avanzata
Android -  Programmazione AvanzataAndroid -  Programmazione Avanzata
Android - Programmazione Avanzata
 
UI Composition
UI CompositionUI Composition
UI Composition
 
Sviluppo e deployment cross-platform: Dal mobile alla Tv
Sviluppo e deployment cross-platform: Dal mobile alla Tv Sviluppo e deployment cross-platform: Dal mobile alla Tv
Sviluppo e deployment cross-platform: Dal mobile alla Tv
 
Push Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background AgentPush Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background Agent
 
Framework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostackFramework di sviluppo web: introduzione a bootstrap e boostack
Framework di sviluppo web: introduzione a bootstrap e boostack
 
Catalogo ENYCS 2015
Catalogo ENYCS 2015Catalogo ENYCS 2015
Catalogo ENYCS 2015
 
follow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQueryfollow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQuery
 
Mobile senza frontiere
Mobile senza frontiereMobile senza frontiere
Mobile senza frontiere
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
SkyMedia: La tecnologia al servizio dell'intrattenimento
SkyMedia: La tecnologia al servizio dell'intrattenimentoSkyMedia: La tecnologia al servizio dell'intrattenimento
SkyMedia: La tecnologia al servizio dell'intrattenimento
 
Introduzione allo sviluppo UWP per xBox
Introduzione allo sviluppo UWP per xBoxIntroduzione allo sviluppo UWP per xBox
Introduzione allo sviluppo UWP per xBox
 
AUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERTAUGMENTED REALITY EXPERT
AUGMENTED REALITY EXPERT
 
Introduzione a jQuery
Introduzione a jQueryIntroduzione a jQuery
Introduzione a jQuery
 
GWT vs CSS3
GWT vs CSS3GWT vs CSS3
GWT vs CSS3
 
NEXiDA Smart User Interface flyer (italian)
NEXiDA Smart User Interface flyer (italian)NEXiDA Smart User Interface flyer (italian)
NEXiDA Smart User Interface flyer (italian)
 
Augmented Reality: guardare il mondo da un altro punto di vista
Augmented Reality: guardare il mondo da un altro punto di vistaAugmented Reality: guardare il mondo da un altro punto di vista
Augmented Reality: guardare il mondo da un altro punto di vista
 
Meetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure FunctionsMeetup DotNetCode A.I. Bot Framework and Azure Functions
Meetup DotNetCode A.I. Bot Framework and Azure Functions
 
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
Android Introduzione All Architettura Programmazione Sicurezza Serate A Tema ...
 
PanoView: una piattaforma per la realtà virtuale basata su WordPress
PanoView: una piattaforma per la realtà virtuale basata su WordPressPanoView: una piattaforma per la realtà virtuale basata su WordPress
PanoView: una piattaforma per la realtà virtuale basata su WordPress
 

Media Queries Next Level