Element Queries: il futuro della progettazione web responsive

() translation by (you can also view the original English article)

Le media queries sono una parte fondamentale della moderna progettazione web, ma non sempre sono perfette. In questo articolo daremo uno sguardo al concetto di "element queries"; ciò che in molti ritengono possa essere il futuro della progettazione web responsiva.

All'inizio

L'articolo di Ethan sulla progettazione del web responsivo ha ridefinito per sempre i modi con cui costruiamo i siti internet. Il suo articolo ha ispirato, ed è stato rapidamente adottato dai designers e dagli sviluppatori web. Sono emersi approcci quali "mobile first", "desktop first" e "device agnostic", sono stati sviluppati modelli di progettazione, sono stati introdotti nuovi standard come l'elemento <picture> e ora negli ambienti di sviluppo abbiamo a disposizione innumerevoli opzioni che rendono semplice lo sviluppo di siti web responsivi.

Non sviluppiamo più siti web per una particolare dimensione dello schermo, browser o dispositivo. Invece, li progettiamo affinché siano equalmente apprezzabili su ciascun dispositivo, a qualsiasi dimensione dello schermo. Ciò avvalendoci delle "media queries" –senza dimenticare il meta tag viewport.

Media queries

Le media queries sono progettate per permetterci di plasmare specifiche regole di stile per un ambiente specifico. Uno degli usi più comuni delle media queries è quello di applicare gli stili all'interno di determinate gamme di larghezza del viewport. Il seguente codice, ad esempio, nasconde la barra laterale quando il sito internet è visualizzato attraverso un viewport con un ampiezza maggiore di 720px.

.site-sidebar {
  display: flex;
	flex: 1 1 320px;
}
@media ( max-width: 720px ) {
	.site-sidebar {
    	display: none;
    }
}

Le media queries si sono evolute con l'evolversi dei dispositivi, arricchendosi di nuove caratteristiche come orientation e resolution. L'esempio che segue mostra come potremmo usare queste caratteristiche per fornire un immagine più grande su uno schermo ad alta risoluzione.

.site-logo a {
	display: inline-block;
	background: url( images/logo.png ) no-repeat;
}
@media screen and ( min-resolution: 2dppx ) {
	background: url( images/logo@2x.png );
}

Le media queries sono diventate un componente indispensabile dell'esperienza responsiva. Affrettatevi a leggere questi articoli, dispense e consigli su come sfruttare le media queries nelle pubblicazioni precedenti di Tuts+ e nel resto di Internet.

Ad ogni modo

Le media queries non sono la soluzione ad ogni problema del web design responsivo e non hanno mai aspirato ad esserlo.

Oggi, c'è un'ampia gamma di dispositivi sul mercato con varie grandezze e caratteristiche, che confondono i confini tra i dispositivi "mobile" e "desktop" (mi riferisco ai laptops ibridi). Per questa ragione, mantenere l'estetica di un sito web, una buona esperienza per l'utente, e le performance non è mai stato così arduo.

Durante il Google IO 2015, Google ha permesso agli sviluppatori di verificare i propri siti web attraverso più di 100 dispositivi differenti.

E una volta che aggiungete nel mucchio fattori quali pubblicità, tabelle, e contenuti ereditati, la situazione non può che peggiorare. Presto vi imbatterete negli aspetti "non così belli" delle media queries.

Media Queries: l'aspetto "non così bello"

Considerate l'esempio seguente. Abbiamo un componente UI per mostrare il profilo del nostro collega. Vogliamo usare lo stesso componente in varie parti del sito. Questo esempio mostra come si comporta la UI in un viewport largo 780px.

Nella pagina del "profilo utente", inseriamo sulla sinistra l'avatar dell'utente e sulla destra il suo nome utente così come la sua biografia.

La disposizione del profilo utente, nella pagina "User".

Nella pagina "team" del sito, comunque, la disposizione scorre; l'avatar dell'utente è ora posizionato in cima, e il nome così come la biografia sottostanno. La dimensione del carattere potrebbe anche essere leggermente minore.

Il profilo utente nella pagina "team".

La situazione può essere corretta con le media queries. Possiamo, ed esempio, scrivere il CSS come segue:

/**
 * Profile
 */
.team-profile {
	text-align: center;
}
.team-profile .bio {
	margin-top: 20px;
	font-size: 14px;
}
@media ( min-width: 480px ) {
	.team-profile {
		text-align: left;
		display: flex;
	}
	.team-profile .avatar {
		flex: 0 0 120px;
	}
	.team-profile .bio {
		font-size: 16px;
		flex: 0 1 580x;
	}
}

/**
 * Profile card.
 */
.team-profile-card {
	text-align: center;
}
.team-profile-card .bio {
	margin-top: 20px;
	font-size: 14px;
}

/**
 * Probably, some overrides
 */
.page .team-profile-card { ... }

Esso è fissabile, fintanto che usiamo alcune classi di indentificazione addizionale: .user-profile e .user-profile-card.

In ogni caso, ciò impedisce alla nostra UI di essere un componente riutilizzabile; una UI che può essere posizionata in ogni punto del sito internet, in grado di adattarsi a ciò che ha attorno.

In questo esempio vogliamo che la disposizione del nostro componente si adatti in caso venga inclusa in un piccolo contenitore, invece di essere schiacciata dal viewport del browser. Al posto di basarsi sulla grandezza del viewport per cambiare la disposizione, perché non farlo al livello dell'elemento?

Queries dell'emento (contenitore)

Il concetto di element queries emerse intorno all'inizio del 2012; un paio di anni dopo che la progettazione di siti responsivi diventò la metodologia più utlizzata. Purtroppo, a quel tempo probabilmente non si sentiva ancora la necessità pressante di promuoverle a standard web, ed il mondo continuò ad adottare i sistemi precedenti.

@ianstormtaylor si le "element queries" sono arrivate, nuovamente
— Paul Irish (@paul_irish) January 24, 2012

Le comunità del web avviarono iniziative indipendenti. L'RICG (Responsive Issue Community Group), lo stesso gruppo che fece nascere l'elemento <picture>, aggiunse le element queries nella lista delle questioni mentre altri sviluppatori crearono una libreria JavaScript EQCSS, per emulare questa funzionalità.

Le element queries si comportano in maniera simile alle media queries; la differenza è che le prime utilizzano come riferimento le dimensioni dell'elemento anziché quelle del viewport. Questo ci da' l'opportunità di strutturare sistemi ad UI modulari, mantenendo un codice conciso alla base. Dato lo stesso esempio, possiamo riscrivere gli stili della nostra UI con EQCSS, come segue:

.team-profile {
    text-align: center;
}
.team-profile .bio {
	margin-top: 20px;
	font-size: 14px;
}
@element ".team-profile" and ( min-width: 480px ) {
	.team-profile {
		display: flex;
	}
	.team-profile .avatar {
		flex: 1 1 120px;
	}
	.team-profile .bio {
		text-align: left;
		font-size: 16px;
		flex: 1 1 580x;
	}
}

In questo caso, non badiamo alla larghezza del viewport. Come potete vedere qua sopra, fin quando l'UI è larga 480px o più, mostriamo .avatar e .bio fianco a fianco. Quando l'UI si riduce al di sotto dei 480px, facciamo in modo che .avatar e .bio si impilino e si allineino al centro.

Concludendo

Giusto per chiarire, non sto dicendo che l'utilizzo delle media queries sia il male assoluto. Le media queries sono fantastiche e ciò è testimoniato da tutti i siti internet che le utilizzano oggigiorno. Le media queries e le element queries possono certamente coesistere. Comunque ci sono una serie di ipotetici layout dove l'utilizzo delle element queries avrebbe più senso rispetto alle media queries.

Sfortunatamente, le element queries sono ancora lontane dall'essere uno standard web; la nostra speranza a questo proposito giace assieme a quella di tutta la brava gente dell'RICG.

Nell'attesa, possiamo prendere confidenza con le potenzialità delle element queries attraverso la libreria javascript EQCSS. E ciò è proprio quel che faremo nel prossimo tutorial. Continuate a seguirci!

Altre letture

Container Queries: ancora una volta nella breccia di Mat Marquis
Sopperire alla mancanza delle element queries di Scott Jehl
Le media Queries non sono la risposta: Element Query Polyfill di Tyson Matanich