Nuova proprietà CSS delle proporzioni supportata in Chromium, Safari Technology Preview e Firefox Nightly

La nuova proprietà CSS che aiuta a mantenere la spaziatura nei layout adattabili.

Una Kravets

Formato

Le proporzioni vengono solitamente espresse come due numeri interi e due punti nelle dimensioni: width:height o x:y. Le proporzioni più comuni per la fotografia sono 4:3 e 3:2, mentre per i video e le fotocamere di consumo più recenti tendono ad avere proporzioni 16:9.

Con l'avvento del design reattivo, il mantenimento delle proporzioni è diventato sempre più importante per gli sviluppatori web, soprattutto quando le dimensioni delle immagini variano e quelle degli elementi variano in base allo spazio disponibile.

Ecco alcuni esempi di situazioni in cui è importante mantenere le proporzioni:

• Creare iframe adattabili, che corrispondono al 100% della larghezza di un elemento principale e che l'altezza rimanga un rapporto specifico dell'area visibile
• Creazione di contenitori segnaposto intrinseci per immagini, video e incorporamenti per impedire il re-layout quando gli elementi si caricano e occupano spazio
• Creare uno spazio uniforme e adattabile per visualizzazioni interattive di dati o animazioni SVG
• Creazione di uno spazio uniforme e adattabile per componenti composti da più elementi, come schede o date del calendario
• Creazione di uno spazio uniforme e reattivo per più immagini di varie dimensioni (può essere utilizzata insieme a object-fit)

Adattamento dell'oggetto

La definizione di proporzioni ci aiuta a ridimensionare i contenuti multimediali in un contesto reattivo. Un altro strumento in questo bucket è la proprietà object-fit, che consente agli utenti di descrivere in che modo un oggetto (ad esempio un'immagine) all'interno di un blocco deve riempire il blocco:

I valori initial e fill modificano l'immagine in modo da riempire lo spazio. Nel nostro esempio, l'immagine appare schiacciata e sfocata mentre regola nuovamente i pixel. Non è l'ideale. object-fit: cover utilizza la dimensione più piccola dell'immagine per riempire lo spazio e la ritaglia per adattarla al suo interno in base a questa dimensione. "Aumenta lo zoom" sul limite più basso. object-fit: contain assicura che l'intera immagine sia sempre visibile e, di conseguenza, l'opposto di cover, che prende le dimensioni del limite più grande (nel nostro esempio precedente, questa è la larghezza) e ridimensiona l'immagine per mantenere le sue proporzioni intrinseche mentre si adatta allo spazio. Il caso object-fit: none mostra l'immagine ritagliata al centro (posizione predefinita dell'oggetto) nelle sue dimensioni naturali.

object-fit: cover tende a funzionare nella maggior parte delle situazioni per garantire un'interfaccia piacevole e uniforme quando si gestiscono immagini di varie dimensioni, ma in questo modo si perderanno le informazioni (l'immagine viene ritagliata in corrispondenza dei bordi più lunghi).

Se questi dettagli sono importanti (ad esempio, quando si lavora con una stesura orizzontale di prodotti di bellezza), non è consentito ritagliare contenuti importanti. Lo scenario ideale è costituito da immagini adattabili di varie dimensioni che si adattano allo spazio dell'interfaccia utente senza ritagliare.

Il vecchio trucco: mantenere le proporzioni con padding-top

Per renderli più reattivi, possiamo utilizzare le proporzioni. Questo ci consente di impostare una dimensione di rapporto specifica e basare il resto dei contenuti multimediali su un singolo asse (altezza o larghezza).

Una soluzione cross-browser attualmente accettata per mantenere le proporzioni in base alla larghezza di un'immagine è nota come "Padding-Top Hack". Questa soluzione richiede un contenitore principale e un contenitore secondario posizionato in modo assoluto. Vengono quindi calcolate le proporzioni in percentuale da impostare come padding-top. Ad esempio:

• Proporzioni 1:1 = 1 / 1 = 1 = padding-top: 100%
• Proporzioni 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Proporzioni 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Proporzioni 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Ora che abbiamo identificato il valore delle proporzioni, possiamo applicarlo al nostro contenitore principale. Considera l'esempio seguente:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

A questo punto potremmo scrivere il seguente CSS:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Mantenimento delle proporzioni con aspect-ratio

Sfortunatamente, il calcolo di questi valori di padding-top non è molto intuitivo e richiede un overhead e un posizionamento aggiuntivi. Con la nuova proprietà CSS intrinseca aspect-ratio, il linguaggio per il mantenimento delle proporzioni è molto più chiaro.

Con lo stesso markup, possiamo sostituire padding-top: 56.25% con aspect-ratio: 16 / 9, impostando aspect-ratio su un rapporto specificato di width / height.

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

L'uso di aspect-ratio invece di padding-top è molto più chiaro e non modifica la proprietà di spaziatura interna per eseguire operazioni al di fuori del suo ambito abituale.

Questa nuova proprietà aggiunge anche la possibilità di impostare le proporzioni su auto, dove "gli elementi sostituiti con proporzioni intrinseche usano quelle proporzioni; altrimenti la casella non ha proporzioni preferite". Se auto e un elemento <ratio> vengono specificati insieme, le proporzioni preferite corrispondono a quelle specificate di width diviso per height, a meno che non si tratti di un elemento sostituito con proporzioni intrinseche, nel qual caso vengono utilizzate le proporzioni.

Esempio: coerenza in una griglia

Questo approccio funziona molto bene anche con i meccanismi di layout CSS come CSS Grid e Flexbox. Prendi in considerazione un elenco di bambini con proporzioni 1:1, ad esempio una griglia di icone per gli sponsor:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Esempio: impedire la variazione del layout

Un'altra fantastica funzionalità di aspect-ratio è la possibilità di creare uno spazio segnaposto per evitare il Cumulative Layout Shift e per migliorare i Segnali web. In questo primo esempio, il caricamento di un asset da un'API come Unsplash crea una variazione del layout al termine del caricamento dei contenuti multimediali.

L'utilizzo di aspect-ratio, invece, crea un segnaposto per impedire questa variazione del layout:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Suggerimento extra: attributi delle immagini per le proporzioni

Un altro modo per impostare le proporzioni di un'immagine è tramite gli attributi immagine. Se conosci in anticipo le dimensioni dell'immagine, una best practice imposta queste dimensioni come width e height.

Per il nostro esempio riportato sopra, sapendo che le dimensioni sono 800 x 600 px, il markup dell'immagine sarà simile al seguente: <img src="image.jpg" alt="..." width="800" height="600">. Se l'immagine inviata ha le stesse proporzioni, ma non necessariamente gli esatti valori dei pixel, potremmo comunque utilizzare i valori dell'attributo immagine per impostare le proporzioni, in combinazione con lo stile width: 100%, in modo che l'immagine occupi lo spazio appropriato. Il risultato è:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

Alla fine, l'effetto è lo stesso dell'impostazione di aspect-ratio sull'immagine tramite CSS e si evita la variazione cumulativa del layout (vedi la demo su Codepen).

Conclusione

Con la nuova proprietà CSS aspect-ratio, lanciata su più browser moderni, mantenere le proporzioni corrette nei contenitori dei contenuti multimediali e del layout diventa un po' più semplice.

Foto di Amy Shamblen e Lionel Gustave tramite Unsplash.