Ecco alcune delle nuove e interessanti funzionalità introdotte in CSS:
- Container Queries: Questa funzionalità è ora stabile su tutti i moderni browser. Le container queries consentono di interrogare le dimensioni e lo stile di un elemento genitore per determinare gli stili da applicare ai suoi figli. A differenza delle media queries, che possono accedere solo alle informazioni del viewport, le container queries sono uno strumento più preciso che supporta qualsiasi numero di layout o layout all’interno di layout.
- Style Queries: La specifica delle style queries consente di interrogare i valori di stile di un contenitore genitore. Attualmente, questa funzionalità è parzialmente implementata in Chrome 111, dove è possibile utilizzare le CSS custom properties per applicare gli stili al contenitore. Ad esempio, è possibile utilizzare le caratteristiche meteorologiche memorizzate nei valori delle custom properties per stilizzare lo sfondo di una carta o un’icona indicatore.
- Dynamic Viewport Units: Sono stati introdotti venti nuovi viewport units in CSS, che consentono un controllo più preciso sul design in relazione alla visualizzazione dell’utente2.
- Wide-gamut Color Spaces: Questa funzionalità supporta spazi colore ad ampio gamut, consentendo una maggiore gamma di colori per le tue applicazioni web.
- Nesting: Ora puoi annidare regole CSS all’interno di altre regole, semplificando la struttura del tuo foglio di stile.
- Cascade Layers: Le cascade layers consentono di controllare l’ordine di applicazione degli stili, utile per gestire situazioni complesse di sovrapposizione.
- Trigonometric Functions: Sono state introdotte funzioni trigonometriche come sin(), cos(), e tan() per trasformazioni più avanzate.
- Individual Transform Properties: Ora puoi specificare le proprietà di trasformazione (come rotate, scale, translate, ecc.) separatamente per un maggiore controllo.
- Popover Anchor Positioning: Questa funzionalità semplifica il posizionamento di popovers e tooltip.
- Discrete Property Transitions: Consentono transizioni fluide tra stati di stile specifici, senza dover specificare valori intermedi.
Queste nuove funzionalità rendono la progettazione web più potente e flessibile. Esplora queste opzioni per migliorare la tua esperienza di sviluppo!
Esempio di Container Queries
Le container queries sono una funzionalità eccitante in CSS che ti permette di adattare gli stili di un elemento in base alle sue dimensioni genitore. Ecco un esempio di come potresti utilizzarle:
Supponiamo di avere un contenitore (ad esempio, una |div|) che contiene una lista di elementi. Vogliamo che il testo all’interno di ciascun elemento si ingrandisca quando la larghezza del contenitore supera i 500 pixel e si rimpicciolisca quando la larghezza è inferiore a quella soglia.
Esempio: rivedi e usa con attenzione per i tuoi scopi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 80%; /* Larghezza del contenitore */
margin: 0 auto; /* Centra il contenitore */
border: 2px solid #333;
padding: 20px;
}
.item {
font-size: 16px; /* Dimensione del testo predefinita */
}
@media (min-width: 500px) {
.container {
font-size: 20px; /* Aumenta la dimensione del testo quando la larghezza supera 500px */
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
<!-- ... Altri elementi ... -->
</div>
</body>
</html>
In questo esempio, quando la larghezza del contenitore supera i 500 pixel, la dimensione del testo all’interno degli elementi si ingrandisce grazie alla container query. Puoi personalizzare ulteriormente gli stili in base alle dimensioni del contenitore per creare esperienze responsive e flessibili.
Esempio di Style Queries
Le style queries sono una funzionalità interessante in CSS che ti permette di interrogare i valori di stile di un elemento genitore. Ti mostrerò un esempio di come utilizzarle.
Supponiamo di avere una lista di carte, ognuna con un’immagine, un titolo e del testo. Vogliamo creare varianti di stile per queste carte, ad esempio sovrapposizioni con colori diversi. Le style queries ci permettono di farlo in modo elegante.
Esempio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.card-container {
/* Stili comuni per il contenitore delle carte */
padding: 20px;
border: 1px solid #ddd;
}
.card {
/* Stili predefiniti per le carte */
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
}
/* Style query per variante "warm" */
@container style(--theme: warm) {
.card {
background-color: wheat;
border-color: brown;
/* Altri stili specifici per questa variante */
}
}
/* Style query per variante "cool" */
@container style(--theme: cool) {
.card {
background-color: lightblue;
border-color: darkblue;
/* Altri stili specifici per questa variante */
}
}
</style>
</head>
<body>
<ul class="card-list">
<li class="card-container">
<div class="card">
<img src="image1.jpg" alt="Card Image">
<h3>Titolo della Carta 1</h3>
<p>Testo della Carta 1</p>
</div>
</li>
<!-- Altre carte... -->
</ul>
</body>
</html>
In questo esempio, abbiamo creato due varianti di stile per le carte: “warm” e “cool”. Le style queries ci permettono di applicare stili specifici in base al valore della variabile --theme impostata sul contenitore genitore. Questo rende il nostro codice più modulare e flessibile.
Ricorda che le style queries attualmente funzionano solo con i valori delle CSS custom properties, ma sono comunque molto utili per separare la logica dell’applicazione dai suoi stili.
Scopri come le dimensioni delle immagini e video influenzano seo e social
