Sbloccare la magia CSS: Un'immersione profonda in @property e le definizioni dei tipi di proprietà personalizzate

Le proprietà personalizzate CSS (note anche come variabili CSS) hanno rivoluzionato il modo in cui scriviamo e manteniamo il CSS. Offrono riutilizzabilità, flessibilità e manutenibilità, rendendo i nostri fogli di stile più dinamici e gestibili. Tuttavia, fino a poco tempo fa, le proprietà personalizzate non avevano la capacità di definire i tipi di dati previsti, limitando il loro potenziale per stili e animazioni avanzati. Entra in gioco la regola @property: un punto di svolta che ci consente di definire esplicitamente il tipo, la sintassi e il valore iniziale delle nostre proprietà personalizzate.

Cos'è la regola @property?

La regola @property fa parte della famiglia di API CSS Houdini, che mira a esporre il funzionamento interno del motore CSS agli sviluppatori. Nello specifico, @property fa parte dell'API Proprietà personalizzate e valori. Ti consente di registrare una proprietà personalizzata con il browser, specificandone:

• name: Il nome della proprietà personalizzata (ad esempio, --my-color).
• syntax: Il tipo di dati previsto della proprietà (ad esempio, <color>, <number>, <length>).
• inherits: Se la proprietà deve ereditare il suo valore dall'elemento padre (true o false).
• initial-value: Il valore predefinito della proprietà se non viene specificato alcun altro valore.

Definendo queste caratteristiche, ottieni un maggiore controllo su come vengono utilizzate le proprietà personalizzate e su come si comportano, in particolare nelle animazioni e nelle transizioni.

Perché utilizzare @property? I vantaggi

L'utilizzo di @property offre diversi vantaggi significativi:

1. Sicurezza e validazione del tipo

Senza @property, CSS tratta tutte le proprietà personalizzate come stringhe. Ciò può portare a un comportamento imprevisto quando si tenta di utilizzarle in calcoli o animazioni che richiedono tipi di dati specifici. Ad esempio, se si intende che una proprietà personalizzata rappresenti un numero ma accidentalmente le si assegna un valore stringa, le animazioni potrebbero interrompersi o produrre risultati errati.

@property risolve questo problema consentendo di specificare la sintassi prevista (tipo di dati) della proprietà personalizzata. Il browser convaliderà quindi il valore assegnato rispetto a questa sintassi, assicurandosi che sia conforme al tipo previsto. Se il valore non corrisponde alla sintassi, il browser utilizzerà il valore iniziale (se fornito) o tratterà la proprietà come non valida.

2. Animazioni e transizioni fluide

La vera potenza di @property si rivela quando si tratta di animazioni e transizioni. Senza di essa, animare le proprietà personalizzate può essere complicato perché il browser non sa come interpolare tra diversi valori di una stringa generica. Potrebbe essere necessario ricorrere a hack JavaScript o utilizzare funzionalità CSS limitate per ottenere l'effetto desiderato.

Definendo la sintassi di una proprietà personalizzata, si dice al browser come interpolare tra i suoi valori durante le animazioni e le transizioni. Ad esempio, se si definisce una proprietà personalizzata con la sintassi <color>, il browser sa che deve interpolare tra i colori utilizzando una sfumatura di colore uniforme. Allo stesso modo, se si definisce una proprietà con la sintassi <number>, il browser sa che deve interpolare tra i numeri utilizzando una progressione lineare.

3. Migliore leggibilità e manutenibilità del codice

@property migliora la leggibilità e la manutenibilità del codice CSS rendendo chiaro quale tipo di dati una proprietà personalizzata è destinata a rappresentare. Ciò aiuta gli altri sviluppatori (e il tuo futuro io) a comprendere lo scopo della proprietà e come dovrebbe essere utilizzata.

Inoltre, definendo esplicitamente il valore iniziale di una proprietà personalizzata, si fornisce un chiaro valore di fallback che verrà utilizzato se non viene specificato alcun altro valore. Ciò può prevenire imprevisti difetti visivi e rendere il tuo codice più robusto.

4. Prestazioni migliorate

In alcuni casi, l'utilizzo di @property può migliorare le prestazioni del codice CSS. Fornendo al browser maggiori informazioni sui tipi di dati previsti delle proprietà personalizzate, gli si consente di ottimizzare il processo di rendering. Ciò può portare ad animazioni e transizioni più veloci, soprattutto su layout complessi.

La sintassi di @property

La regola @property è definita utilizzando la seguente sintassi:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

Analizziamo ciascuno di questi componenti:

• --property-name: Questo è il nome della proprietà personalizzata che stai definendo. Deve iniziare con due trattini (--) e può contenere qualsiasi carattere identificatore CSS valido. Ad esempio: --primary-color, --font-size, --spacing-unit.
• syntax: Specifica il tipo di dati previsto della proprietà personalizzata. È definito utilizzando un descrittore del tipo di valore CSS. Alcuni valori di sintassi comuni includono:
• <color>: Rappresenta un valore di colore (ad esempio, #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Rappresenta un valore numerico (ad esempio, 1, 3.14, -42).
• <length>: Rappresenta un valore di lunghezza (ad esempio, 10px, 2em, 50vh, 1rem).
• <percentage>: Rappresenta un valore di percentuale (ad esempio, 50%, 100%, 25.5%).
• <string>: Rappresenta un valore stringa (ad esempio, "Hello", "World").
• <image>: Rappresenta un valore immagine (ad esempio, url("image.jpg"), linear-gradient(...)).
• <angle>: Rappresenta un valore angolare (ad esempio, 45deg, 0.5rad, 1turn).
• *: Rappresenta qualsiasi valore CSS valido. Usare con cautela, poiché vanifica lo scopo del controllo del tipo.
• Sintassi personalizzata: consente di definire sintassi complesse utilizzando modelli simili a espressioni regolari.
• inherits: Questo valore booleano determina se la proprietà personalizzata deve ereditare il suo valore dall'elemento padre. Se impostato su true, la proprietà erediterà. Se impostato su false, la proprietà non erediterà e utilizzerà il suo valore iniziale se non esplicitamente definito sull'elemento. Il valore predefinito è false.
• initial-value: Specifica il valore predefinito della proprietà personalizzata. Se la proprietà non è impostata esplicitamente su un elemento, utilizzerà questo valore. Il valore iniziale deve essere un valore valido in base alla sintassi specificata. Se non viene fornito alcun valore iniziale e non è impostato alcun altro valore, la proprietà verrà trattata come se avesse il suo valore non impostato.

Esempi pratici di @property in azione

Diamo un'occhiata ad alcuni esempi pratici di come utilizzare @property nel codice CSS.

Esempio 1: Animare un colore

In questo esempio, creeremo una proprietà personalizzata chiamata --background-color e la animeremo utilizzando le transizioni CSS. Definiremo la sintassi come <color> per garantire che il browser interpoli correttamente tra i colori.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* Bianco */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blu */
}
            

              
                Copy
              
            
          

In questo codice:

• Definiamo una proprietà personalizzata --background-color con la sintassi <color>, impostiamo inherits su false e impostiamo initial-value su bianco (#ffffff).
• Applichiamo questa proprietà al background-color di un elemento .box utilizzando var(--background-color).
• Aggiungiamo una transizione alla proprietà --background-color in modo che si animi uniformemente quando il valore cambia.
• Cambiamo il valore di --background-color in blu (#007bff) al passaggio del mouse, creando un effetto di transizione del colore uniforme.

Esempio 2: Animare un numero

In questo esempio, creeremo una proprietà personalizzata chiamata --blur-radius e la animeremo utilizzando le transizioni CSS. Definiremo la sintassi come <length> per garantire che il browser interpoli correttamente tra i valori di lunghezza. Questo esempio mostra anche un caso d'uso popolare dell'utilizzo delle lunghezze: valori in pixel. Questo potrebbe facilmente tradursi anche in altri tipi di unità. È anche importante notare che l'impostazione del valore iniziale su `0px` è fondamentale, poiché il browser necessita di un'unità di base per eseguire correttamente le transizioni.

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

In questo codice:

• Definiamo una proprietà personalizzata --blur-radius con la sintassi <length>, impostiamo inherits su false e impostiamo initial-value su 0px.
• Applichiamo questa proprietà alla funzione filter: blur() di un elemento .image utilizzando var(--blur-radius).
• Aggiungiamo una transizione alla proprietà --blur-radius in modo che si animi uniformemente quando il valore cambia.
• Cambiamo il valore di --blur-radius in 5px al passaggio del mouse, creando un effetto sfocato uniforme.

Esempio 3: Creazione di un'interfaccia utente a tema con proprietà ereditate

In questo esempio, creeremo una semplice interfaccia utente a tema utilizzando proprietà personalizzate ereditate. Definiremo una proprietà personalizzata chiamata --theme-color e la imposteremo sull'elemento :root. Ciò consentirà a tutti gli elementi figlio di ereditare il colore del tema.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Verde */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Verde più scuro */
}
            

              
                Copy
              
            
          

In questo codice:

• Definiamo una proprietà personalizzata --theme-color con la sintassi <color>, impostiamo inherits su true e impostiamo initial-value su verde (#4caf50).
• Impostiamo il valore di --theme-color sull'elemento :root, rendendolo disponibile a tutti gli elementi nel documento.
• Usiamo questa proprietà per impostare il background-color di un elemento .button.
• Cambiamo il valore di --theme-color in un verde più scuro (#388e3c) al passaggio del mouse, dimostrando come le proprietà ereditate possono essere facilmente aggiornate per modificare il tema dell'interfaccia utente.

Esempio 4: Definizione di una sintassi personalizzata

La proprietà syntax può anche accettare una stringa per definire un modello più specifico, che è particolarmente utile per convalidare valori più complessi. La sintassi utilizza un sistema simile alle espressioni regolari, documentato su MDN (Mozilla Developer Network). Questo esempio illustra come definire e utilizzare una sintassi personalizzata per una posizione dello sfondo che accetti le opzioni delle parole chiave `top`, `bottom`, `left` e `right` come valori validi.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Posizioni valide */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Posizione non valida (tornerà al valore iniziale) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Qui, la `syntax` è specificata utilizzando una rappresentazione stringa delle parole chiave valide. La notazione `[ ]` definisce un insieme di opzioni, il simbolo `|` le separa e `{1,2}` limita il numero di valori consentiti a una o due parole chiave. Se viene utilizzato un valore non valido come `center`, il browser tornerà al `initial-value` di `top left`.

Supporto del browser

Il supporto del browser per @property è generalmente buono nei browser moderni, tra cui:

• Chrome (versione 64 e successive)
• Edge (versione 79 e successive - basato su Chromium)
• Firefox (versione 72 e successive)
• Safari (versione 14.1 e successive)

Tuttavia, è sempre una buona idea controllare le ultime tabelle di compatibilità del browser su siti Web come Can I use... per assicurarti che le funzionalità che stai utilizzando siano supportate nei browser che i tuoi utenti hanno maggiori probabilità di utilizzare.

Per i browser meno recenti che non supportano @property, il browser ignorerà la regola @property e tratterà semplicemente la proprietà personalizzata come una normale variabile CSS. Ciò significa che le animazioni e le transizioni potrebbero non funzionare come previsto, ma il codice sarà comunque funzionale.

Best practice per l'utilizzo di @property

Ecco alcune best practice da tenere a mente quando si utilizza @property:

• Definisci sempre la sintassi: Assicurati di definire sempre la syntax delle tue proprietà personalizzate per garantire la sicurezza del tipo e abilitare animazioni e transizioni fluide.
• Imposta un valore iniziale: Fornisci un initial-value per fornire un valore predefinito e prevenire imprevisti difetti visivi.
• Utilizza nomi descrittivi: Scegli nomi descrittivi per le tue proprietà personalizzate che indichino chiaramente il loro scopo e il tipo di dati. Ad esempio, usa --button-background-color invece di --color.
• Considera l'ereditarietà: Decidi se le tue proprietà personalizzate devono ereditare dai loro elementi padre o meno. Usa inherits: true per le proprietà che devono essere condivise nell'interfaccia utente, come i colori del tema o le dimensioni dei caratteri.
• Testa a fondo: Testa il tuo codice in diversi browser per assicurarti che funzioni come previsto. Utilizza meccanismi di fallback per i browser meno recenti che non supportano @property.
• Documenta le tue proprietà personalizzate: Aggiungi commenti al tuo codice CSS per spiegare lo scopo e l'utilizzo delle tue proprietà personalizzate. Ciò renderà più facile per gli altri sviluppatori (e il tuo futuro io) comprendere il tuo codice. Strumenti come Stylelint possono anche essere configurati per applicare queste best practice.

@property e CSS Houdini

Come accennato in precedenza, @property fa parte della famiglia di API CSS Houdini. CSS Houdini è una raccolta di API di basso livello che espongono il funzionamento interno del motore CSS agli sviluppatori, consentendo loro di estendere il CSS con funzionalità e comportamenti personalizzati.

Altre API Houdini includono:

• Paint API: Consente di definire immagini di sfondo, bordi e maschere personalizzate utilizzando JavaScript.
• Animation Worklet API: Consente di creare animazioni ad alte prestazioni utilizzando JavaScript.
• Layout API: Consente di definire algoritmi di layout personalizzati per gli elementi, come sistemi a griglia o layout a muratura.
• Parser API: Consente di analizzare e manipolare il codice CSS utilizzando JavaScript.

Combinando @property con altre API Houdini, puoi creare soluzioni CSS veramente potenti e personalizzabili.

Conclusione

La regola @property è una potente aggiunta a CSS che ti consente di definire tipi di proprietà personalizzati, abilitando stili, animazioni e transizioni avanzati. Utilizzando @property, puoi migliorare la sicurezza del tipo, la leggibilità, la manutenibilità e le prestazioni del tuo codice CSS.

Sebbene il supporto del browser sia generalmente buono, è importante testare il tuo codice in diversi browser e fornire meccanismi di fallback per i browser meno recenti che non supportano @property.

Seguendo le best practice descritte in questo articolo, puoi sfruttare la potenza di @property per creare esperienze web davvero straordinarie.

Ulteriori approfondimenti

• MDN Web Docs: @property
• Houdini.how: Una guida a CSS Houdini
• Can I use @property