La direttiva CSS @property è una funzionalità che consente di definire proprietà CSS che, a differenza delle variabili CSS (`--nome-var`), offre la possibilità di avere comportamenti più avanzati come transizioni e animazioni.
Questa metodologia fa parte delle Houdini API, un insieme di tecnologie che permette di estendere le capacità del CSS in modo nativo e performante.
Normalmente, quando si usano variabili CSS come --my-color: red;, il browser non conosce il tipo di dato. Ciò significa che non può, ad esempio, animarla o applicare transizioni tra valori in autonomia.
Con @property, invece, tramite la registrazione, il browser comprende il significato del valore inserito così da applicare validazioni, animazioni e interpolazioni.
@property --nome-proprietà {
syntax: '<color>';
inherits: false;
initial-value: black;
}syntax definisce il tipo di valore accettato:
@property --rotation {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.box {
/*altre proprietà*/
transform: rotate(var(--rotation));
transition: --rotation 1s;
}
.box:hover {
--rotation: 180deg;
}Se non avessimo registrato la proprietà con @property, l'animazione non sarebbe fluida: il browser vedrebbe solo un cambio di valore testuale.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Recuperare le subissue e il loro stato di completamento in GitHub
Evidenziare una porzione di testo in un pagina dopo una navigazione
.NET Aspire per applicazioni distribuite
Configurare automaticamente un webhook in Azure DevOps
Semplificare i deployment con le label in Azure Container App
Importare un servizio esterno in .NET Aspire
Combinare Container Queries e Media Queries
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
Supportare la crittografia di ASP.NET Core con Azure Container App
Scrivere selettori CSS più semplici ed efficienti con :is()
Ottimizzare le performance usando Span<T> e il metodo Split
Anonimizzare i dati sensibili nei log di Azure Front Door


