Lås CSS-magi op: En dybdegående analyse af @property og brugerdefinerede egenskabstypedefinitioner

CSS-brugerdefinerede egenskaber (også kendt som CSS-variabler) har revolutioneret den måde, vi skriver og vedligeholder CSS på. De tilbyder genanvendelighed, fleksibilitet og vedligeholdelighed, hvilket gør vores typografier mere dynamiske og overskuelige. Indtil for nylig manglede brugerdefinerede egenskaber imidlertid evnen til at definere deres forventede datatyper, hvilket begrænsede deres potentiale for avanceret styling og animationer. Indtast @property-reglen - en spilændring, der giver os mulighed for eksplicit at definere typen, syntaksen og startværdien for vores brugerdefinerede egenskaber.

Hvad er @property-reglen?

@property-reglen er en del af CSS Houdini-familien af API'er, som har til formål at eksponere CSS-motorens indre funktioner for udviklere. Specifikt er @property en del af Custom Properties and Values API. Det giver dig mulighed for at registrere en brugerdefineret egenskab med browseren og specificere dens:

• navn: Navnet på den brugerdefinerede egenskab (f.eks. --min-farve).
• syntaks: Egenskabens forventede datatype (f.eks. <color>, <number>, <length>).
• arver: Om egenskaben skal arve sin værdi fra sit overordnede element (true eller false).
• initial-value: Egenskabens standardværdi, hvis der ikke er angivet nogen anden værdi.

Ved at definere disse karakteristika får du større kontrol over, hvordan brugerdefinerede egenskaber bruges, og hvordan de opfører sig, især i animationer og overgange.

Hvorfor bruge @property? Fordelene

Brug af @property giver flere betydelige fordele:

1. Typesikkerhed og validering

Uden @property behandler CSS alle brugerdefinerede egenskaber som strenge. Dette kan føre til uventet adfærd, når du forsøger at bruge dem i beregninger eller animationer, der kræver specifikke datatyper. Hvis du f.eks. har til hensigt, at en brugerdefineret egenskab skal repræsentere et tal, men ved et uheld tildeler den en strengværdi, kan dine animationer bryde sammen eller give forkerte resultater.

@property løser dette ved at give dig mulighed for at specificere den forventede syntaks (datatypen) for den brugerdefinerede egenskab. Browseren validerer derefter den tildelte værdi i forhold til denne syntaks og sikrer, at den er i overensstemmelse med den forventede type. Hvis værdien ikke stemmer overens med syntaksen, bruger browseren startværdien (hvis den er angivet) eller behandler egenskaben som ugyldig.

2. Problemfri animationer og overgange

Den reelle kraft i @property skinner igennem, når det gælder animationer og overgange. Uden den ved det browseren ikke, hvordan den skal interpolere mellem forskellige værdier af en generisk streng. Du skal muligvis ty til JavaScript-hacks eller bruge begrænsede CSS-funktioner for at opnå den ønskede effekt.

Ved at definere syntaksen for en brugerdefineret egenskab fortæller du browseren, hvordan den skal interpolere mellem dens værdier under animationer og overgange. Hvis du f.eks. definerer en brugerdefineret egenskab med <color>-syntaksen, ved browseren, at den skal interpolere mellem farverne ved hjælp af en glat farvegradient. På samme måde, hvis du definerer en egenskab med <number>-syntaksen, ved browseren, at den skal interpolere mellem tallene ved hjælp af en lineær progression.

3. Forbedret kode læsbarhed og vedligeholdelse

@property forbedrer læsbarheden og vedligeholdelsen af din CSS-kode ved at gøre det klart, hvilken datatype en brugerdefineret egenskab er beregnet til at repræsentere. Dette hjælper andre udviklere (og dit fremtidige selv) med at forstå formålet med egenskaben, og hvordan den skal bruges.

Ved eksplicit at definere startværdien for en brugerdefineret egenskab, giver du desuden en klar fallback-værdi, der bruges, hvis der ikke er angivet nogen anden værdi. Dette kan forhindre uventede visuelle fejl og gøre din kode mere robust.

4. Forbedret ydeevne

I nogle tilfælde kan brugen af @property forbedre ydeevnen af din CSS-kode. Ved at give browseren flere oplysninger om de forventede datatyper for dine brugerdefinerede egenskaber, giver du den mulighed for at optimere gengivelsesprocessen. Dette kan føre til hurtigere animationer og overgange, især på komplekse layouts.

Syntaksen for @property

@property-reglen defineres ved hjælp af følgende syntaks:

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

              
                Copy
              
            
          

Lad os nedbryde hver af disse komponenter:

• --property-name: Dette er navnet på den brugerdefinerede egenskab, du definerer. Det skal begynde med to bindestreger (--) og kan indeholde alle gyldige CSS-identifikatortegn. For eksempel: --primary-color, --font-size, --spacing-unit.
• syntax: Dette specificerer den forventede datatype for den brugerdefinerede egenskab. Det er defineret ved hjælp af en CSS-værditypedeskriptor. Nogle almindelige syntaksværdier inkluderer:
• <color>: Repræsenterer en farveværdi (f.eks. #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Repræsenterer en numerisk værdi (f.eks. 1, 3.14, -42).
• <length>: Repræsenterer en længdeværdi (f.eks. 10px, 2em, 50vh, 1rem).
• <percentage>: Repræsenterer en procentværdi (f.eks. 50%, 100%, 25.5%).
• <string>: Repræsenterer en strengværdi (f.eks. "Hello", "World").
• <image>: Repræsenterer en billedværdi (f.eks. url("image.jpg"), linear-gradient(...)).
• <angle>: Repræsenterer en vinkelværdi (f.eks. 45deg, 0.5rad, 1turn).
• *: Repræsenterer en hvilken som helst gyldig CSS-værdi. Brug med forsigtighed, da det modvirker formålet med typekontrol.
• Brugerdefineret syntaks: Giver dig mulighed for at definere komplekse syntakser ved hjælp af regulære udtryk-lignende mønstre.
• inherits: Denne boolske værdi afgør, om den brugerdefinerede egenskab skal arve sin værdi fra sit overordnede element. Hvis den er indstillet til true, arver egenskaben. Hvis den er indstillet til false, arver egenskaben ikke og bruger sin startværdi, hvis den ikke er eksplicit defineret på elementet. Standardværdien er false.
• initial-value: Dette specificerer standardværdien for den brugerdefinerede egenskab. Hvis egenskaben ikke er eksplicit indstillet på et element, bruger den denne værdi. Startværdien skal være en gyldig værdi i henhold til den specificerede syntaks. Hvis der ikke er angivet nogen startværdi, og der ikke er angivet nogen anden værdi, behandles egenskaben, som om den har sin ikke-indstillede værdi.

Praktiske eksempler på @property i aktion

Lad os se på nogle praktiske eksempler på, hvordan du bruger @property i din CSS-kode.

Eksempel 1: Animering af en farve

I dette eksempel opretter vi en brugerdefineret egenskab kaldet --background-color og animerer den ved hjælp af CSS-overgange. Vi definerer syntaksen som <color> for at sikre, at browseren interpolerer mellem farverne korrekt.

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

.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 denne kode:

• Vi definerer en brugerdefineret egenskab --background-color med syntaksen <color>, indstiller inherits til false og indstiller initial-value til hvid (#ffffff).
• Vi anvender denne egenskab på background-color for et .box-element ved hjælp af var(--background-color).
• Vi tilføjer en overgang til --background-color-egenskaben, så den animerer glat, når værdien ændres.
• Vi ændrer værdien af --background-color til blå (#007bff) ved hover, hvilket skaber en glat farveovergangseffekt.

Eksempel 2: Animering af et tal

I dette eksempel opretter vi en brugerdefineret egenskab kaldet --blur-radius og animerer den ved hjælp af CSS-overgange. Vi definerer syntaksen som <length> for at sikre, at browseren interpolerer mellem længdeværdierne korrekt. Dette eksempel viser også en populær brugssag for brug af længder: pixelværdier. Dette kan nemt oversættes til andre enhedstyper også. Det er også vigtigt at bemærke, at indstilling af startværdien til `0px` er afgørende, da browseren har brug for en basisenhed for at udføre overgange 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 denne kode:

• Vi definerer en brugerdefineret egenskab --blur-radius med syntaksen <length>, indstiller inherits til false og indstiller initial-value til 0px.
• Vi anvender denne egenskab på filter: blur()-funktionen for et .image-element ved hjælp af var(--blur-radius).
• Vi tilføjer en overgang til --blur-radius-egenskaben, så den animerer glat, når værdien ændres.
• Vi ændrer værdien af --blur-radius til 5px ved hover, hvilket skaber en glat sløringseffekt.

Eksempel 3: Oprettelse af en tematiseret brugergrænseflade med arvede egenskaber

I dette eksempel opretter vi en simpel tematiseret brugergrænseflade ved hjælp af arvede brugerdefinerede egenskaber. Vi definerer en brugerdefineret egenskab kaldet --theme-color og indstiller den på :root-elementet. Dette giver alle underelementer mulighed for at arve temafarven.

            @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ørkere grøn */
}
            

              
                Copy
              
            
          

I denne kode:

• Vi definerer en brugerdefineret egenskab --theme-color med syntaksen <color>, indstiller inherits til true og indstiller initial-value til grøn (#4caf50).
• Vi indstiller værdien af --theme-color på :root-elementet, hvilket gør det tilgængeligt for alle elementer i dokumentet.
• Vi bruger denne egenskab til at indstille background-color for et .button-element.
• Vi ændrer værdien af --theme-color til en mørkere grøn (#388e3c) ved hover, hvilket viser, hvordan arvede egenskaber let kan opdateres for at ændre temaet for brugergrænsefladen.

Eksempel 4: Definition af en brugerdefineret syntaks

syntax-egenskaben kan også acceptere en streng for at definere et mere specifikt mønster, hvilket er særligt nyttigt til validering af mere komplekse værdier. Syntaksen bruger et regulært udtryk-lignende system, der er dokumenteret på MDN (Mozilla Developer Network). Dette eksempel illustrerer, hvordan du definerer og bruger en brugerdefineret syntaks til en baggrundsposition, der accepterer både `top`, `bottom`, `left` og `right` nøgleordsmuligheder som gyldige værdier.

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

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

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

/* Ugyldig position (vil falde tilbage til initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Her er `syntax` angivet ved hjælp af en strengrepræsentation af de gyldige nøgleord. `[ ]`-notationen definerer et sæt muligheder, `|`-symbolet adskiller dem, og `{1,2}` begrænser antallet af tilladte værdier til et eller to nøgleord. Hvis der bruges en ugyldig værdi som `center`, vil browseren vende tilbage til `initial-value` af `top left`.

Browserunderstøttelse

Browserunderstøttelse for @property er generelt god i moderne browsere, herunder:

• Chrome (version 64 og nyere)
• Edge (version 79 og nyere - baseret på Chromium)
• Firefox (version 72 og nyere)
• Safari (version 14.1 og nyere)

Det er dog altid en god idé at kontrollere de seneste browserkompatibilitetstabeller på websteder som Can I use... for at sikre, at de funktioner, du bruger, understøttes i de browsere, dine brugere sandsynligvis vil bruge.

For ældre browsere, der ikke understøtter @property, vil browseren ignorere @property-reglen og blot behandle den brugerdefinerede egenskab som en almindelig CSS-variabel. Det betyder, at animationer og overgange muligvis ikke fungerer som forventet, men koden vil stadig være funktionel.

Bedste praksis for brug af @property

Her er nogle bedste praksis, du skal huske på, når du bruger @property:

• Definer altid syntaksen: Sørg for altid at definere syntax for dine brugerdefinerede egenskaber for at sikre typesikkerhed og muliggøre problemfri animationer og overgange.
• Angiv en startværdi: Angiv en initial-value for at give en standardværdi og forhindre uventede visuelle fejl.
• Brug beskrivende navne: Vælg beskrivende navne til dine brugerdefinerede egenskaber, der tydeligt angiver deres formål og datatype. Brug f.eks. --button-background-color i stedet for --color.
• Overvej arv: Beslut dig for, om dine brugerdefinerede egenskaber skal arves fra deres overordnede elementer eller ej. Brug inherits: true for egenskaber, der skal deles på tværs af brugergrænsefladen, f.eks. temafarver eller skriftstørrelser.
• Test grundigt: Test din kode i forskellige browsere for at sikre, at den fungerer som forventet. Brug fallback-mekanismer til ældre browsere, der ikke understøtter @property.
• Dokumenter dine brugerdefinerede egenskaber: Tilføj kommentarer til din CSS-kode for at forklare formålet med og brugen af dine brugerdefinerede egenskaber. Dette vil gøre det lettere for andre udviklere (og dit fremtidige selv) at forstå din kode. Værktøjer som Stylelint kan også konfigureres til at håndhæve disse bedste praksis.

@property og CSS Houdini

Som nævnt tidligere er @property en del af CSS Houdini-familien af API'er. CSS Houdini er en samling af lavniveau-API'er, der eksponerer CSS-motorens indre funktioner for udviklere, så de kan udvide CSS med brugerdefinerede funktioner og adfærd.

Andre Houdini-API'er inkluderer:

• Paint API: Giver dig mulighed for at definere brugerdefinerede baggrundsbilleder, kanter og masker ved hjælp af JavaScript.
• Animation Worklet API: Giver dig mulighed for at oprette højtydende animationer ved hjælp af JavaScript.
• Layout API: Giver dig mulighed for at definere brugerdefinerede layoutalgoritmer for elementer, f.eks. gitter- eller murværkslayouts.
• Parser API: Giver dig mulighed for at analysere og manipulere CSS-kode ved hjælp af JavaScript.

Ved at kombinere @property med andre Houdini-API'er kan du skabe virkelig kraftfulde og tilpasselige CSS-løsninger.

Konklusion

@property-reglen er en kraftfuld tilføjelse til CSS, der giver dig mulighed for at definere brugerdefinerede egenskabstyper, hvilket muliggør avanceret styling, animationer og overgange. Ved at bruge @property kan du forbedre typesikkerheden, læsbarheden, vedligeholdelsen og ydeevnen af din CSS-kode.

Selvom browserunderstøttelsen generelt er god, er det vigtigt at teste din kode i forskellige browsere og give fallback-mekanismer til ældre browsere, der ikke understøtter @property.

Ved at følge den bedste praksis, der er beskrevet i denne artikel, kan du udnytte kraften i @property til at skabe virkelig fantastiske weboplevelser.

Yderligere udforskning

• MDN Web Docs: @property
• Houdini.how: A Guide to CSS Houdini
• Can I use @property