L’introduzione di CSS3 ha portato con sé una serie di nuove funzionalità, tra cui due nuove unità di misura: VW (Viewport Width) e VH (Viewport Height). Queste unità consentono ai designer di creare layout reattivi che si adattano dinamicamente alle dimensioni della viewport del dispositivo.
VW rappresenta la larghezza della viewport, mentre VH rappresenta l’altezza della viewport. Entrambe le unità sono espresse in percentuali, con il 100% che rappresenta l’intera larghezza o altezza della viewport. Ciò significa che un elemento con una larghezza di 50vw occuperà la metà della larghezza della viewport, indipendentemente dalle dimensioni del dispositivo.
L’utilizzo di VW e VH offre numerosi vantaggi. Innanzitutto, semplifica la creazione di layout reattivi. Invece di specificare dimensioni fisse in pixel, i designer possono utilizzare VW e VH per creare elementi che si ridimensionano automaticamente in base alle dimensioni della viewport. Ciò garantisce che gli elementi rimangano proporzionati e leggibili su tutti i dispositivi.
Inoltre, VW e VH consentono un maggiore controllo sulla spaziatura e sul posizionamento degli elementi. Ad esempio, un margine di 10vw creerà uno spazio di 10% della larghezza della viewport, indipendentemente dalle dimensioni del dispositivo. Ciò consente ai designer di creare layout coerenti e bilanciati su tutti i dispositivi.
Tuttavia, è importante notare che VW e VH non sono supportate da tutti i browser. Pertanto, è consigliabile utilizzare queste unità insieme a unità di misura più tradizionali, come pixel o em, per garantire la compatibilità con tutti i dispositivi.
In conclusione, le unità di misura VW e VH di CSS3 forniscono ai designer strumenti potenti per creare layout reattivi e adattabili. Semplificando la creazione di elementi che si ridimensionano automaticamente in base alle dimensioni della viewport, queste unità consentono ai designer di creare esperienze utente ottimali su tutti i dispositivi.
VW (VIEWPORT WIDTH) E VH (VIEWPORT HEIGHT)
VW (Viewport Width) e VH (Viewport Height) sono due nuove unità di misura introdotte dalle specifiche CSS 3 che possono rivelarsi particolarmente utili e preziose nei design responsive perché forniscono un rapporto diretto con le dimensioni della Viewport (dove con viewport si intende identificare la dimensione della finestra del browser), evitando quindi, in molti casi, di dover scrivere apposite media query.
Quando viene modificata l’altezza o la larghezza della finestra del browser (ossia della viewport) la dimensione degli elementi gestita mediante queste unità di misura varierà di conseguenza in maniera completamente automatica.
Nello specifico l’unità di misura
- VW (Viewport Width): gestisce il dimensionamento di un elemento in relazione alla larghezza della finestra del browser. L’unità vw è pari all’1% della larghezza della viewport.
In queste condizioni, dunque, per rendere un elemento ampio sempre quanto l’intera larghezza della finestra del browser sarà necessario impostare la sua width sul valore 100vw.
Allo stesso modo, la larghezza della viewport fosse ad esempio di 1920px, impostando la dimensione del font di un elemento sul valore 1vw il suo font-size sarebbe esattamente di 19.2 px. Restringendo le dimensioni della finestra a 1024px il font size di quello stesso elemento passerà in maniera automatica al valore 10.24px.
- VH (Viewport Height): gestisce il dimensionamento di un elemento in relazione all’altezza della finestra del browser. L’unità vh è pari all’1% dell’altezza della viewport.
In queste condizioni, dunque, per rendere un elemento alto sempre come l’intera finestra del browser sarà necessario impostare la sua height sul valore 100vh.
In sostanza dunque il grande vantaggio che si può avere nell’utilizzare queste unità di misura è rappresentato dal fatto che esse creano un rapporto diretto con le dimensioni della finestra del browser e, di fatto, con le diverse risoluzioni dei dispositivi di visualizzazione, permettendoci, ad esempio di scalare le dimensione del testo per ogni formato di schermo senza il bisogno di utilizzare apposite media query.
Inoltre essendo delle unità di misura possono essere utilizzate, secondo lo stesso principio, non solo per il font del testo ma anche su di una qualsiasi altra proprietà CSS che accetti come valore una lunghezza.
Il lato negativo della medaglia è rappresentato dalla compatibilità con i diversi browser, che comunque ha raggiunto al giorno d’oggi, valori più che accettabili come è possibile verificare al seguente indirizzo:
In ogni caso è sempre possibile fornire un ripiego ai browser che non supportano queste unità di misura scrivendo regole CSS che i browser più vecchi possano comprendere, e che vengano invece sovrascritte per i browser più moderni dall’analoga regola che utilizza però i valori di vw e vh come nell’esempio di seguito riportato
h1 {
font-size: 36px; font-size: 5.4vw;
margin-top: 21px; margin-top: 7vw;
}
FLEX
Property Values
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
| Value | Description | Play it |
|---|---|---|
| flex-start | Default value. Items are positioned at the beginning of the container |
| flex-end | Items are positioned at the end of the container | |
| center | Items are positioned in the center of the container | |
| space-between | Items will have space between them | |
| space-around | Items will have space before, between, and after them | |
| space-evenly | Items will have equal space around them |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
https://www.w3schools.com/cssref/css3_pr_justify-content.php
CSS Syntax
justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| legacy | Default value. Grid items with justify-self value ‘auto’ only inherits grid container justify-items property value if it starts with ‘legacy’. It exists to implement the legacy alignment behavior of HTML’s 〈center〉 element and align attribute. |
| normal | Dependant on layout context, but similar to ‘stretch’ for grid layout | |
| stretch | Stretches to fill the grid cell if inline-size (width) is not set. | |
| start | Align items at the start in the inline direction | |
| left | Align items to the left | |
| center | Align items to the center | |
| end | Align items at the end in the inline direction | |
| right | Align items to the right |
| overflow-alignment | ‘safe’ sets alignment of the item to ‘start’ if the content overflows ‘unsafe’ keeps the alignment value regardless of wether or not the item content overflows | |
| baseline alignment | The element is aligned with the baseline of the parent. |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
https://www.w3schools.com/cssref/css_pr_justify-items.php
CSS Syntax
direction: ltr|rtl|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| ltr | Text direction goes from left-to-right. This is default |
| rtl | Text direction goes from right-to-left |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS Syntax
display: value;
Property Values
| Value | Description | Play it |
|---|---|---|
| inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect. This is default. |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
| flex | Displays an element as a block-level flex container | |
| grid | Displays an element as a block-level grid container | |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
| inline-flex | Displays an element as an inline-level flex container | |
| inline-grid | Displays an element as an inline-level grid container | |
| inline-table | The element is displayed as an inline-level table | |
| list-item | Let the element behave like a <li> element | |
| run-in | Displays an element as either block or inline, depending on context | |
| table | Let the element behave like a <table> element |
| table-caption | Let the element behave like a <caption> element | |
| table-column-group | Let the element behave like a <colgroup> element | |
| table-header-group | Let the element behave like a <thead> element | |
| table-footer-group | Let the element behave like a <tfoot> element | |
| table-row-group | Let the element behave like a <tbody> element | |
| table-cell | Let the element behave like a <td> element | |
| table-column | Let the element behave like a <col> element | |
| table-row | Let the element behave like a <tr> element | |
| none | The element is completely removed |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS Syntax
flex: flex-growflex-shrinkflex-basis|auto|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| flex-grow | A number specifying how much the item will grow relative to the rest of the flexible items |
| flex-shrink | A number specifying how much the item will shrink relative to the rest of the flexible items | |
| flex-basis | The length of the item. Legal values: “auto”, “inherit”, or a number followed by “%”, “px”, “em” or any other length unit |
| auto | Same as 1 1 auto. | |
| initial | Same as 0 1 auto. Read about initial | |
| none | Same as 0 0 auto. | |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS Syntax
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| row | Default value. The flexible items are displayed horizontally, as a row |
| row-reverse | Same as row, but in reverse order | |
| column | The flexible items are displayed vertically, as a column | |
| column-reverse | Same as column, but in reverse order |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
%20e%20VH%20(Viewport%20Height)){kind=link}