CSS @property: Padroneggiare la Definizione e la Validazione dei Tipi di Proprietà Personalizzate

Nel panorama in continua evoluzione dello sviluppo web, per rimanere all'avanguardia è necessario adottare nuove tecnologie e tecniche che migliorino l'efficienza, la manutenibilità e l'esperienza utente complessiva. Le proprietà personalizzate CSS, note anche come variabili CSS, hanno rivoluzionato il modo in cui gestiamo e controlliamo gli stili. Con l'introduzione della at-rule @property, il CSS acquisisce uno strumento ancora più potente: la capacità di definire e validare queste proprietà personalizzate, portando a uno stile più robusto e prevedibile.

Cos'è CSS @property?

La at-rule @property consente agli sviluppatori di definire il tipo, la sintassi e altre caratteristiche delle proprietà personalizzate. Pensala come un modo per fornire struttura e validazione per le tue variabili CSS. Prima di @property, le variabili CSS erano essenzialmente solo stringhe di testo che potevano contenere qualsiasi cosa. Questa mancanza di struttura poteva portare a errori, rendendo il debug più difficile e ostacolando la coerenza generale del design. @property risolve questi problemi fornendo un meccanismo per controllare i tipi di valori che possono essere assegnati alle tue proprietà personalizzate.

Perché Usare CSS @property? Benefici e Vantaggi

I vantaggi dell'utilizzo di @property sono numerosi e contribuiscono direttamente a migliorare le pratiche di sviluppo web:

• Migliore Manutenibilità del Codice: Definendo esplicitamente i tipi e i comportamenti delle proprietà personalizzate, rendi il tuo codice più auto-documentante e facile da capire. Altri sviluppatori (o il tuo io futuro) capiranno rapidamente come una proprietà personalizzata deve essere utilizzata.
• Migliore Coerenza del Design: La validazione assicura che solo valori validi vengano assegnati alle proprietà personalizzate. Questo aiuta a mantenere un aspetto visivo coerente in tutto il tuo sito web o applicazione.
• Robustezza e Prevenzione degli Errori: I valori non validi verranno rifiutati, prevenendo problemi di stile inaspettati e riducendo il tempo speso per il debug.
• Stile Dinamico: @property consente una migliore integrazione con JavaScript, permettendoti di controllare e aggiornare programmaticamente le tue variabili CSS con sicurezza, sapendo che i valori sono validi.
• Migliore Autocompletamento ed Esperienza per lo Sviluppatore: Gli editor di codice possono fornire un autocompletamento e suggerimenti di codice più intelligenti, aiutando gli sviluppatori a scrivere CSS in modo più rapido e accurato.
• Prestazioni Ottimizzate: Sebbene l'impatto sulle prestazioni sia generalmente piccolo, la validazione può talvolta portare a piccole ottimizzazioni da parte del browser.

Componenti Fondamentali della Regola @property

La at-rule @property è composta da diversi componenti chiave che definiscono come si comporta una proprietà personalizzata.

--property-name

Questo è il nome della proprietà personalizzata che stai definendo. Deve iniziare con due trattini (--), come è standard per le proprietà personalizzate CSS.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

Il descrittore syntax definisce il tipo o il pattern consentito per i valori della proprietà personalizzata. Utilizza un sottoinsieme della sintassi CSS e può assumere vari valori, tra cui:

• <color>: Rappresenta un valore di colore (es. red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Rappresenta un valore di lunghezza (es. 10px, 5em, 20%).
• <number>: Rappresenta un valore numerico (es. 10, 3.14).
• <percentage>: Rappresenta un valore percentuale (es. 50%).
• <url>: Rappresenta un URL (es. url('image.jpg')).
• <integer>: Rappresenta un valore intero (es. 10, -5).
• <angle>: Rappresenta un valore angolare (es. 45deg, 0.5turn).
• <time>: Rappresenta un valore di tempo (es. 2s, 200ms).
• <string>: Rappresenta un valore di tipo stringa.
• <image>: Rappresenta un valore di immagine (come url).
• *: Accetta qualsiasi valore CSS valido. Questo è un approccio molto permissivo e dovrebbe essere usato con cautela.
• Tipi combinati: Puoi combinare più tipi usando liste separate da spazi (es. <length> <length> <length> per definire tre valori di lunghezza) o usare il simbolo '|' per consentire uno qualsiasi dei tipi elencati (es. <length> | <percentage> per supportare sia una lunghezza che una percentuale).
• Sintassi Personalizzate: Le sintassi personalizzate, per scenari più complessi, sono spesso supportate da implementazioni personalizzate, sebbene queste siano tipicamente descritte usando una sintassi di tipo regex come [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

Il descrittore inherits determina se la proprietà personalizzata eredita il suo valore dall'elemento genitore. Per impostazione predefinita, le proprietà personalizzate non ereditano. Questo comportamento può essere controllato con un valore booleano: true o false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

Il descrittore initial-value imposta il valore predefinito della proprietà personalizzata se non è esplicitamente definito nel CSS. Questo fornisce un valore di fallback quando la proprietà non è specificata, simile al comportamento delle proprietà CSS standard.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Esempi Pratici

Analizziamo alcuni esempi pratici per illustrare come usare @property in modo efficace.

Esempio 1: Definizione di una Proprietà di Colore

In questo esempio, definiamo una proprietà personalizzata --primary-color per rappresentare un colore primario nel nostro design system. Specifichiamo che accetta solo valori di colore.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Valido */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Valido */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Esempio 2: Definizione di una Proprietà di Lunghezza

Qui definiamo una proprietà personalizzata --spacing per gestire la spaziatura tra gli elementi, che accetta valori di lunghezza. Questo esempio dimostra chiaramente il valore di impostare un `initial-value` come predefinito per l'intero sito. Ciò è particolarmente utile quando si utilizza un design system in cui sono definite le spaziature predefinite.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Esempio 3: Definizione di una Proprietà Intera

Questo esempio definisce una proprietà personalizzata per il numero di colonne in un layout a griglia, validando che il valore sia un intero.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Esempio 4: Ereditarietà della Proprietà

Qui definiamo una proprietà personalizzata che *verrà* ereditata. La proprietà `font-size` impostata a `1rem` sul body influenzerà tutti i suoi figli a meno che non venga sovrascritta.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Sovrascrive il valore ereditato */
}

            

              
                Copy
              
            
          

Esempio 5: Combinazione di Tipi

Usando l'operatore '|', possiamo combinare i tipi. Qui accettiamo sia una `length` che una `percentage` per l'offset dell'ombra.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Best Practice per l'Uso di @property

Per massimizzare i benefici di @property, segui queste best practice:

• Definisci le Proprietà in una Posizione Centrale: Raggruppa le definizioni di @property in un file CSS dedicato o in una sezione, spesso all'inizio del tuo foglio di stile principale o all'interno di un file del design system. Ciò promuove l'organizzazione e facilita la gestione delle tue proprietà personalizzate.
• Usa Nomi di Proprietà Descrittivi: Scegli nomi che indichino chiaramente lo scopo di ciascuna proprietà personalizzata (es. --primary-button-color, --header-font-size). Questo migliora la leggibilità e la comprensione.
• Fornisci una Documentazione Completa: Documenta le tue proprietà personalizzate, includendo la loro sintassi, l'uso e qualsiasi vincolo. Questa documentazione può essere inclusa sotto forma di commenti accanto al tuo CSS o in una guida di stile separata.
• Scegli la Sintassi Giusta: Seleziona attentamente la syntax appropriata per ogni proprietà. Usare la sintassi corretta previene errori e garantisce che i valori assegnati siano validi.
• Considera attentamente l'Ereditarietà: Decidi se una proprietà debba ereditare il suo valore dall'elemento genitore. Ciò dipende dalla natura della proprietà e da come dovrebbe essere applicata nel tuo design.
• Usa initial-value in Modo Strategico: Imposta un initial-value per tutte le proprietà personalizzate che richiedono un valore predefinito. Ciò fornisce un fallback e garantisce che lo stile venga applicato anche se la proprietà non è impostata esplicitamente.
• Sfrutta i Design System: Integra @property all'interno del tuo design system per mantenere la coerenza e migliorare il flusso di lavoro di sviluppo del tuo team. Usandolo in combinazione con altri componenti, costruisci design più robusti e modulari, che è spesso l'obiettivo quando si creano componenti per un uso globale.
• Testa a Fondo: Testa le tue proprietà personalizzate e il loro comportamento su diversi browser e dispositivi per garantire la compatibilità e un'esperienza utente coerente. Il test cross-browser è un passaggio critico, poiché il supporto di `property` non è ancora universalmente implementato.

Compatibilità tra Browser

Al 26 ottobre 2023, il supporto per la at-rule @property varia tra i browser. Chrome, Edge e Safari hanno un buon supporto, mentre il supporto di Firefox è in uno stato limitato. Consulta sempre risorse come Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) per rimanere aggiornato sulla compatibilità dei browser.

Considerazioni Importanti per la Compatibilità tra Browser:

• Rilevamento delle Funzionalità (Feature Detection): Usa tecniche di rilevamento delle funzionalità per gestire con grazia i browser che non supportano @property. Puoi usare un controllo di proprietà CSS o il rilevamento di funzionalità JavaScript per applicare stili alternativi o polyfill.
• Miglioramento Progressivo (Progressive Enhancement): Progetta il tuo sito web con uno stile di base che funzioni senza @property. Quindi, migliora progressivamente il design aggiungendo il supporto per @property nei browser compatibili.
• Polyfill e Fallback: Considera l'uso di polyfill o la fornitura di fallback per i browser che non supportano completamente @property. Ciò potrebbe comportare l'uso di semplici variabili CSS o la pre-elaborazione tramite SASS, LESS o altre metodologie.

Usare CSS @property con JavaScript

Uno dei maggiori vantaggi delle proprietà personalizzate CSS è la loro capacità di essere manipolate con JavaScript, consentendo uno stile dinamico e esperienze utente migliorate. @property potenzia questa capacità, rendendo l'integrazione tra CSS e JavaScript ancora più potente e prevedibile.

Ecco come puoi interagire con le proprietà personalizzate definite usando @property in JavaScript:

1. Ottenere il Valore di una Proprietà Personalizzata: Usa getPropertyValue() per recuperare il valore di una proprietà personalizzata.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // es. "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Impostare il Valore di una Proprietà Personalizzata: Usa setProperty() per impostare il valore di una proprietà personalizzata. Grazie al parametro syntax della definizione di `@property`, l'impostazione basata su Javascript può attivare la validazione del valore all'interno del browser.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Esempio: Cambio di Colore Dinamico con JavaScript

Illustriamo come creare un cambio di colore dinamico usando JavaScript e @property.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

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

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Potrebbe basarsi su una logica/input
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

In questo esempio, facendo clic sul pulsante si cambia il colore di sfondo del pulsante modificando la proprietà personalizzata --button-color tramite JavaScript.

Internazionalizzazione (i18n) e CSS @property

CSS @property può essere uno strumento prezioso nella creazione di applicazioni web che supportano diverse lingue e locali. Ecco come può essere applicato all'i18n:

• Tipografia: Definisci proprietà personalizzate per dimensioni dei caratteri, altezze di riga e famiglie di caratteri, consentendoti di adattare l'aspetto del testo in base alla lingua selezionata.
• Layout: Utilizza proprietà per la spaziatura, i margini e il padding per adattarsi alle variazioni nella direzione del testo (es. da sinistra a destra vs. da destra a sinistra) e alle diverse larghezze dei caratteri.
• Colori: Impiega proprietà per i colori degli elementi dell'interfaccia utente, come i colori dei pulsanti, dei testi e degli sfondi. Questi possono essere regolati per allinearsi alle preferenze culturali o alle linee guida di design per regioni specifiche.
• Direzione del Testo: Usa una proprietà personalizzata per controllare la direzione del testo (es. ltr, rtl) e modificare il layout di conseguenza.

Esempio: Adattare le Dimensioni dei Caratteri in Base alla Lingua

In questo esempio, dimostriamo come adattare la dimensione del carattere dei titoli in base alla lingua selezionata. L'approccio utilizzerebbe una libreria JavaScript per determinare la lingua appropriata e impostare le proprietà personalizzate.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Quindi, imposta dinamicamente il valore in JavaScript in base alla lingua rilevata:

            
// Supponendo una variabile globale o una funzione per ottenere la lingua dell'utente
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Adatta per il giapponese
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Predefinito
}

            

              
                Copy
              
            
          

Considerazioni sull'Accessibilità

Quando si lavora con @property, è essenziale tenere a mente l'accessibilità:

• Contrasto dei Colori: Assicurati un contrasto di colore sufficiente tra testo e sfondi. Usa proprietà personalizzate per i colori per aggiornare facilmente il design e soddisfare i requisiti di contrasto.
• Dimensione del Testo: Consenti agli utenti di controllare la dimensione del testo. Usa unità relative (rem, em) e proprietà personalizzate per rendere facile il ridimensionamento dei caratteri.
• Indicatori di Focus: Personalizza gli indicatori di focus per renderli chiaramente visibili. Usa proprietà personalizzate per controllare il colore e lo stile dei contorni di focus.
• Attributi ARIA: Assicurati che gli elementi abbiano gli attributi ARIA appropriati quando usi proprietà personalizzate per controllare stati o comportamenti.
• Navigazione da Tastiera: Verifica che il tuo sito web sia facilmente navigabile usando una tastiera, specialmente se le proprietà personalizzate sono utilizzate per gestire elementi interattivi.

Considerazioni e Soluzioni per la Compatibilità Cross-Browser

Sebbene @property sia uno strumento potente, ricorda che il supporto dei browser non è ancora universalmente implementato. Dovresti impiegare tecniche cross-browser per mitigare l'impatto della mancanza di supporto.

• Miglioramento Progressivo: Progetta il tuo stile con variabili CSS di base, e poi usa `@property` per funzionalità aggiuntive nei browser supportati.
• Rilevamento delle Funzionalità: Usa metodi di rilevamento delle funzionalità per determinare se un browser supporta @property prima di applicare stili che lo utilizzano. Un semplice controllo può essere fatto con JavaScript.
• Fallback CSS: Fornisci valori di fallback per le proprietà non supportate. Questo può essere fatto impostando direttamente le proprietà o usando variabili diverse per browser supportati e non.
• Preprocessori: Utilizza preprocessori CSS come Sass o Less per tradurre strutture di livello superiore in CSS standard che possono essere utilizzate nei browser che non hanno il pieno supporto per `@property`. Sebbene questo introduca un passaggio aggiuntivo, i benefici spesso superano gli svantaggi.

Esempio di un Fallback CSS:

            
.element {
  --base-color: #333; /* Valore predefinito per i browser senza @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Rilevamento funzionalità per @property */
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Aggiungi qui uno stile più complesso che utilizza @property */
}

            

              
                Copy
              
            
          

Strumenti e Librerie

Vari strumenti e librerie possono aiutare a lavorare con @property:

• Plugin PostCSS: Plugin come `postcss-custom-properties` e `postcss-custom-properties-experimental` possono aiutare a trasformare le proprietà personalizzate e fornire supporto per i browser più vecchi convertendo le definizioni `@property` in regole CSS equivalenti.
• Stylelint: Integra stylelint e regole o plugin personalizzati per convalidare l'uso e la struttura delle tue proprietà personalizzate.
• Framework di Design System: Integra @property in popolari framework di design system come Ant Design, Material UI e Bootstrap per garantire la coerenza del design e fornire agli sviluppatori un'esperienza più fluida.

Conclusione

CSS @property è un'aggiunta potente al toolkit di sviluppo web, portando struttura, validazione e capacità dinamiche alle proprietà personalizzate. Definendo il tipo e il comportamento delle tue variabili CSS, puoi migliorare la manutenibilità del codice, la coerenza del design e creare soluzioni di stile più robuste e prevedibili.

Man mano che il supporto dei browser migliora, incorporare @property nei tuoi progetti diventa sempre più importante. Abbracciando le best practice delineate in questa guida, puoi sfruttare i benefici di questa nuova funzionalità e scrivere CSS più efficiente, manutenibile e scalabile. Adotta @property e trasforma il tuo flusso di lavoro di sviluppo web!

Approfondimenti

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property