Lås upp CSS-magin: En djupdykning i @property och anpassade egenskapstypsdefinitioner

Anpassade CSS-egenskaper (även kända som CSS-variabler) har revolutionerat sättet vi skriver och underhåller CSS. De erbjuder återanvändbarhet, flexibilitet och underhållbarhet, vilket gör våra stilmallar mer dynamiska och hanterbara. Men fram till nyligen saknade anpassade egenskaper möjligheten att definiera sina förväntade datatyper, vilket begränsade deras potential för avancerad styling och animeringar. Nu kommer @property-regeln – en banbrytande funktion som låter oss explicit definiera typ, syntax och initialvärde för våra anpassade egenskaper.

Vad är @property-regeln?

@property-regeln är en del av CSS Houdini-familjen av API:er, som syftar till att exponera de inre funktionerna i CSS-motorn för utvecklare. Specifikt är @property en del av Custom Properties and Values API. Det låter dig registrera en anpassad egenskap hos webbläsaren och specificera dess:

• name: Namnet på den anpassade egenskapen (t.ex. --my-color).
• syntax: Den förväntade datatypen för egenskapen (t.ex. <color>, <number>, <length>).
• inherits: Om egenskapen ska ärva sitt värde från sitt föräldraelement (true eller false).
• initial-value: Standardvärdet för egenskapen om inget annat värde anges.

Genom att definiera dessa egenskaper får du större kontroll över hur anpassade egenskaper används och hur de beter sig, särskilt i animeringar och övergångar.

Varför använda @property? Fördelarna

Att använda @property erbjuder flera betydande fördelar:

1. Typsäkerhet och validering

Utan @property behandlar CSS alla anpassade egenskaper som strängar. Detta kan leda till oväntat beteende när du försöker använda dem i beräkningar eller animeringar som kräver specifika datatyper. Om du till exempel avser att en anpassad egenskap ska representera ett tal men av misstag tilldelar den ett strängvärde, kan dina animeringar gå sönder eller ge felaktiga resultat.

@property löser detta genom att låta dig specificera den förväntade syntaxen (datatypen) för den anpassade egenskapen. Webbläsaren validerar sedan det tilldelade värdet mot denna syntax och säkerställer att det överensstämmer med den förväntade typen. Om värdet inte matchar syntaxen kommer webbläsaren att använda initialvärdet (om det finns) eller behandla egenskapen som ogiltig.

2. Sömlösa animeringar och övergångar

Den verkliga kraften hos @property lyser igenom när det gäller animeringar och övergångar. Utan det kan animering av anpassade egenskaper vara knepigt eftersom webbläsaren inte vet hur den ska interpolera mellan olika värden av en generisk sträng. Du kan behöva ta till JavaScript-hack eller använda begränsade CSS-funktioner för att uppnå önskad effekt.

Genom att definiera syntaxen för en anpassad egenskap talar du om för webbläsaren hur den ska interpolera mellan dess värden under animeringar och övergångar. Om du till exempel definierar en anpassad egenskap med syntaxen <color> vet webbläsaren att den ska interpolera mellan färgerna med en jämn färggradient. På samma sätt, om du definierar en egenskap med syntaxen <number> vet webbläsaren att den ska interpolera mellan talen med en linjär progression.

3. Förbättrad kodläsbarhet och underhållbarhet

@property förbättrar läsbarheten och underhållbarheten i din CSS-kod genom att klargöra vilken datatyp en anpassad egenskap är avsedd att representera. Detta hjälper andra utvecklare (och ditt framtida jag) att förstå syftet med egenskapen och hur den ska användas.

Genom att explicit definiera initialvärdet för en anpassad egenskap tillhandahåller du dessutom ett tydligt reservvärde som kommer att användas om inget annat värde anges. Detta kan förhindra oväntade visuella fel och göra din kod mer robust.

4. Förbättrad prestanda

I vissa fall kan användning av @property förbättra prestandan för din CSS-kod. Genom att ge webbläsaren mer information om de förväntade datatyperna för dina anpassade egenskaper, tillåter du den att optimera renderingsprocessen. Detta kan leda till snabbare animeringar och övergångar, särskilt på komplexa layouter.

Syntaxen för @property

@property-regeln definieras med följande syntax:

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

              
                Copy
              
            
          

Låt oss bryta ner var och en av dessa komponenter:

• --property-name: Detta är namnet på den anpassade egenskapen du definierar. Det måste börja med två bindestreck (--) och kan innehålla alla giltiga CSS-identifierartecken. Till exempel: --primary-color, --font-size, --spacing-unit.
• syntax: Detta specificerar den förväntade datatypen för den anpassade egenskapen. Den definieras med en CSS-värdetypsbeskrivare. Några vanliga syntaxvärden inkluderar:
• <color>: Representerar ett färgvärde (t.ex. #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Representerar ett numeriskt värde (t.ex. 1, 3.14, -42).
• <length>: Representerar ett längdvärde (t.ex. 10px, 2em, 50vh, 1rem).
• <percentage>: Representerar ett procentvärde (t.ex. 50%, 100%, 25.5%).
• <string>: Representerar ett strängvärde (t.ex. "Hello", "World").
• <image>: Representerar ett bildvärde (t.ex. url("image.jpg"), linear-gradient(...)).
• <angle>: Representerar ett vinkelvärde (t.ex. 45deg, 0.5rad, 1turn).
• *: Representerar vilket giltigt CSS-värde som helst. Använd med försiktighet, eftersom det motverkar syftet med typkontroll.
• Anpassad syntax: Låter dig definiera komplexa syntaxer med hjälp av mönster som liknar reguljära uttryck.
• inherits: Detta booleska värde bestämmer om den anpassade egenskapen ska ärva sitt värde från sitt föräldraelement. Om det är satt till true kommer egenskapen att ärvas. Om det är satt till false kommer egenskapen inte att ärvas och kommer att använda sitt initialvärde om det inte är explicit definierat på elementet. Standardvärdet är false.
• initial-value: Detta specificerar standardvärdet för den anpassade egenskapen. Om egenskapen inte är explicit inställd på ett element kommer den att använda detta värde. Initialvärdet måste vara ett giltigt värde enligt den specificerade syntaxen. Om inget initialvärde anges och inget annat värde är satt, kommer egenskapen att behandlas som om den har sitt odefinierade värde.

Praktiska exempel på @property i praktiken

Låt oss titta på några praktiska exempel på hur man använder @property i din CSS-kod.

Exempel 1: Animera en färg

I det här exemplet skapar vi en anpassad egenskap som heter --background-color och animerar den med CSS-övergångar. Vi definierar syntaxen som <color> för att säkerställa att webbläsaren interpolerar mellan färgerna korrekt.

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

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

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

              
                Copy
              
            
          

I den här koden:

• Vi definierar en anpassad egenskap --background-color med syntaxen <color>, sätter inherits till false och sätter initial-value till vit (#ffffff).
• Vi tillämpar denna egenskap på background-color för ett .box-element med hjälp av var(--background-color).
• Vi lägger till en övergång till egenskapen --background-color så att den animeras smidigt när värdet ändras.
• Vi ändrar värdet på --background-color till blå (#007bff) vid hover, vilket skapar en mjuk färgövergångseffekt.

Exempel 2: Animera ett tal

I det här exemplet skapar vi en anpassad egenskap som heter --blur-radius och animerar den med CSS-övergångar. Vi definierar syntaxen som <length> för att säkerställa att webbläsaren interpolerar mellan längdvärdena korrekt. Detta exempel visar också ett populärt användningsfall för att använda längder: pixelvärden. Detta kan enkelt översättas till andra enhetstyper också. Det är också viktigt att notera att det är avgörande att ställa in initialvärdet till `0px`, eftersom webbläsaren behöver en basenhet för att utföra övergångar korrekt.

            @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
              
            
          

I den här koden:

• Vi definierar en anpassad egenskap --blur-radius med syntaxen <length>, sätter inherits till false och sätter initial-value till 0px.
• Vi tillämpar denna egenskap på filter: blur()-funktionen för ett .image-element med hjälp av var(--blur-radius).
• Vi lägger till en övergång till egenskapen --blur-radius så att den animeras smidigt när värdet ändras.
• Vi ändrar värdet på --blur-radius till 5px vid hover, vilket skapar en mjuk oskärpeeffekt.

Exempel 3: Skapa ett temabaserat gränssnitt med ärvda egenskaper

I det här exemplet skapar vi ett enkelt temabaserat gränssnitt med ärvda anpassade egenskaper. Vi definierar en anpassad egenskap som heter --theme-color och sätter den på :root-elementet. Detta gör att alla barnelement kan ärva temafärgen.

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

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

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

.button:hover {
 --theme-color: #388e3c; /* Mörkare grön */
}
            

              
                Copy
              
            
          

I den här koden:

• Vi definierar en anpassad egenskap --theme-color med syntaxen <color>, sätter inherits till true och sätter initial-value till grön (#4caf50).
• Vi sätter värdet på --theme-color på :root-elementet, vilket gör det tillgängligt för alla element i dokumentet.
• Vi använder denna egenskap för att sätta background-color för ett .button-element.
• Vi ändrar värdet på --theme-color till en mörkare grön (#388e3c) vid hover, vilket visar hur ärvda egenskaper enkelt kan uppdateras för att ändra temat på gränssnittet.

Exempel 4: Definiera en anpassad syntax

Egenskapen syntax kan också acceptera en sträng för att definiera ett mer specifikt mönster, vilket är särskilt användbart för att validera mer komplexa värden. Syntaxen använder ett system som liknar reguljära uttryck, dokumenterat på MDN (Mozilla Developer Network). Detta exempel illustrerar hur man definierar och använder en anpassad syntax för en bakgrundsposition som accepterar både nyckelordsalternativen `top`, `bottom`, `left` och `right` som giltiga värden.

            @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);
}

/* Giltiga positioner */
.container.top-right {
 --background-position: top right;
}

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

/* Ogiltig position (kommer att falla tillbaka till initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Här specificeras `syntax` med en strängrepresentation av de giltiga nyckelorden. `[ ]`-notationen definierar en uppsättning alternativ, `|`-symbolen separerar dem och `{1,2}` begränsar antalet tillåtna värden till ett eller två nyckelord. Om ett ogiltigt värde som `center` används, kommer webbläsaren att återgå till `initial-value` som är `top left`.

Webbläsarstöd

Webbläsarstödet för @property är generellt bra i moderna webbläsare, inklusive:

• Chrome (version 64 och senare)
• Edge (version 79 och senare - baserad på Chromium)
• Firefox (version 72 och senare)
• Safari (version 14.1 och senare)

Det är dock alltid en bra idé att kontrollera de senaste webbläsarkompatibilitetstabellerna på webbplatser som Can I use... för att säkerställa att de funktioner du använder stöds i de webbläsare som dina användare sannolikt använder.

För äldre webbläsare som inte stöder @property kommer webbläsaren att ignorera @property-regeln och helt enkelt behandla den anpassade egenskapen som en vanlig CSS-variabel. Detta innebär att animeringar och övergångar kanske inte fungerar som förväntat, men koden kommer fortfarande att vara funktionell.

Bästa praxis för att använda @property

Här är några bästa praxis att tänka på när du använder @property:

• Definiera alltid syntaxen: Se till att alltid definiera syntax för dina anpassade egenskaper för att säkerställa typsäkerhet och möjliggöra sömlösa animeringar och övergångar.
• Ange ett initialvärde: Tillhandahåll ett initial-value för att ge ett standardvärde och förhindra oväntade visuella fel.
• Använd beskrivande namn: Välj beskrivande namn för dina anpassade egenskaper som tydligt indikerar deras syfte och datatyp. Använd till exempel --button-background-color istället för --color.
• Överväg arv: Bestäm om dina anpassade egenskaper ska ärvas från sina föräldraelement eller inte. Använd inherits: true för egenskaper som ska delas över hela gränssnittet, såsom temafärger eller teckenstorlekar.
• Testa noggrant: Testa din kod i olika webbläsare för att säkerställa att den fungerar som förväntat. Använd reservmekanismer för äldre webbläsare som inte stöder @property.
• Dokumentera dina anpassade egenskaper: Lägg till kommentarer i din CSS-kod för att förklara syftet och användningen av dina anpassade egenskaper. Detta kommer att göra det lättare för andra utvecklare (och ditt framtida jag) att förstå din kod. Verktyg som Stylelint kan också konfigureras för att upprätthålla dessa bästa praxis.

@property och CSS Houdini

Som nämnts tidigare är @property en del av CSS Houdini-familjen av API:er. CSS Houdini är en samling lågnivå-API:er som exponerar de inre funktionerna i CSS-motorn för utvecklare, vilket gör att de kan utöka CSS med anpassade funktioner och beteenden.

Andra Houdini-API:er inkluderar:

• Paint API: Låter dig definiera anpassade bakgrundsbilder, kanter och masker med hjälp av JavaScript.
• Animation Worklet API: Låter dig skapa högpresterande animeringar med hjälp av JavaScript.
• Layout API: Låter dig definiera anpassade layoutalgoritmer för element, såsom rutnätssystem eller murverkslayouter.
• Parser API: Låter dig tolka och manipulera CSS-kod med hjälp av JavaScript.

Genom att kombinera @property med andra Houdini-API:er kan du skapa verkligt kraftfulla och anpassningsbara CSS-lösningar.

Slutsats

@property-regeln är ett kraftfullt tillägg till CSS som låter dig definiera anpassade egenskapstyper, vilket möjliggör avancerad styling, animeringar och övergångar. Genom att använda @property kan du förbättra typsäkerheten, läsbarheten, underhållbarheten och prestandan i din CSS-kod.

Även om webbläsarstödet generellt är bra är det viktigt att testa din kod i olika webbläsare och tillhandahålla reservmekanismer för äldre webbläsare som inte stöder @property.

Genom att följa de bästa praxis som beskrivs i den här artikeln kan du utnyttja kraften i @property för att skapa verkligt fantastiska webbupplevelser.

Vidare utforskning

• MDN Web Docs: @property
• Houdini.how: En guide till CSS Houdini
• Kan jag använda @property