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?

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
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

La triste storia di
GIANPARIDE

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 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 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

(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)

(mq5)
@media (light-level)
@media (light-level: washed) {
p {
background: white;
color: black;
font-size: 2em;
}
}

(mq5)
@media (light-level: dim) {
p {
background: #222;
color: #ccc;
}
}

(mq5)
@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; … }
}

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)

@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)

@media
(overflow/block-inline)

@media (overflow-block: none) { }
@media (overflow-block/inline)
@media (overflow-inline: none) { }
(mq4)

@media (overflow-block: scroll) { }
@media (overflow-inline: scroll) { }
(mq4)

@media (overflow-block: optional-paged) { }
(mq4)

@media (overflow-block: paged) { }
(mq4)

@media (color-gamut)
@media (color-gamut: srgb)
@media (color-gamut: p3)
@media (color-gamut: rec2020)
(mq4)

@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

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

Media Queries Next Level

More Related Content

Similar to Media Queries Next Level

Media Queries Next Level