Lås opp CSS-magi: En dypdykk i @property og definisjoner av egendefinerte property-typer

CSS egendefinerte properties (også kjent som CSS-variabler) har revolusjonert måten vi skriver og vedlikeholder CSS på. De tilbyr gjenbrukbarhet, fleksibilitet og vedlikeholdbarhet, noe som gjør våre stilark mer dynamiske og håndterbare. Men inntil nylig manglet egendefinerte properties evnen til å definere sine forventede datatyper, noe som begrenset deres potensial for avansert styling og animasjoner. Gå inn i @property-regelen – en game-changer som lar oss eksplisitt definere type, syntaks og startverdi for våre egendefinerte properties.

Hva er @property-regelen?

@property-regelen er en del av CSS Houdini-familien av APIer, som har som mål å eksponere det indre arbeidet i CSS-motoren for utviklere. Spesifikt er @property en del av Custom Properties and Values API. Den lar deg registrere en egendefinert property med nettleseren, og spesifisere dens:

• name: Navnet på den egendefinerte propertyen (f.eks. --min-farge).
• syntax: Den forventede datatypen for propertyen (f.eks. <color>, <number>, <length>).
• inherits: Om propertyen skal arve verdien fra sitt overordnede element (true eller false).
• initial-value: Standardverdien for propertyen hvis ingen annen verdi er spesifisert.

Ved å definere disse egenskapene får du større kontroll over hvordan egendefinerte properties brukes og hvordan de oppfører seg, spesielt i animasjoner og overganger.

Hvorfor bruke @property? Fordelene

Å bruke @property gir flere betydelige fordeler:

1. Typesikkerhet og validering

Uten @property behandler CSS alle egendefinerte properties som strenger. Dette kan føre til uventet oppførsel når du prøver å bruke dem i beregninger eller animasjoner som krever spesifikke datatyper. For eksempel, hvis du har tenkt at en egendefinert property skal representere et tall, men ved et uhell tilordner den en strengverdi, kan animasjonene dine bryte eller gi feil resultater.

@property løser dette ved å la deg spesifisere den forventede syntaksen (datatypen) for den egendefinerte propertyen. Nettleseren vil deretter validere den tildelte verdien mot denne syntaksen, og sikre at den samsvarer med den forventede typen. Hvis verdien ikke samsvarer med syntaksen, vil nettleseren bruke startverdien (hvis oppgitt) eller behandle propertyen som ugyldig.

2. Sømløse animasjoner og overganger

Den virkelige kraften til @property skinner når det gjelder animasjoner og overganger. Uten den kan det være vanskelig å animere egendefinerte properties fordi nettleseren ikke vet hvordan den skal interpolere mellom forskjellige verdier av en generisk streng. Du må kanskje ty til JavaScript-hack eller bruke begrensede CSS-funksjoner for å oppnå ønsket effekt.

Ved å definere syntaksen til en egendefinert property, forteller du nettleseren hvordan den skal interpolere mellom verdiene under animasjoner og overganger. For eksempel, hvis du definerer en egendefinert property med <color>-syntaksen, vet nettleseren at den skal interpolere mellom fargene ved hjelp av en jevn fargegradient. På samme måte, hvis du definerer en property med <number>-syntaksen, vet nettleseren at den skal interpolere mellom tallene ved hjelp av en lineær progresjon.

3. Forbedret kodelesbarhet og vedlikeholdbarhet

@property forbedrer lesbarheten og vedlikeholdbarheten til CSS-koden din ved å gjøre det klart hvilken datatype en egendefinert property er ment å representere. Dette hjelper andre utviklere (og ditt fremtidige jeg) å forstå formålet med propertyen og hvordan den skal brukes.

Videre, ved eksplisitt å definere startverdien til en egendefinert property, gir du en klar fallback-verdi som vil bli brukt hvis ingen annen verdi er spesifisert. Dette kan forhindre uventede visuelle feil og gjøre koden din mer robust.

4. Forbedret ytelse

I noen tilfeller kan bruk av @property forbedre ytelsen til CSS-koden din. Ved å gi nettleseren mer informasjon om de forventede datatypene til dine egendefinerte properties, lar du den optimalisere gjengivelsesprosessen. Dette kan føre til raskere animasjoner og overganger, spesielt på komplekse layouter.

Syntaksen til @property

@property-regelen er definert ved hjelp av følgende syntaks:

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

              
                Copy
              
            
          

La oss bryte ned hver av disse komponentene:

• --property-name: Dette er navnet på den egendefinerte propertyen du definerer. Den må starte med to bindestreker (--) og kan inneholde alle gyldige CSS-identifikator-tegn. For eksempel: --primary-color, --font-size, --spacing-unit.
• syntax: Dette spesifiserer den forventede datatypen til den egendefinerte propertyen. Den er definert ved hjelp av en CSS-verdi-type deskriptor. Noen vanlige syntaksverdier inkluderer:
• <color>: Representerer en fargeverdi (f.eks. #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Representerer en numerisk verdi (f.eks. 1, 3.14, -42).
• <length>: Representerer en lengdeverdi (f.eks. 10px, 2em, 50vh, 1rem).
• <percentage>: Representerer en prosentverdi (f.eks. 50%, 100%, 25.5%).
• <string>: Representerer en strengverdi (f.eks. "Hello", "World").
• <image>: Representerer en bildeverdi (f.eks. url("image.jpg"), linear-gradient(...)).
• <angle>: Representerer en vinkelverdi (f.eks. 45deg, 0.5rad, 1turn).
• *: Representerer en hvilken som helst gyldig CSS-verdi. Bruk med forsiktighet, da det opphever formålet med typekontroll.
• Egendefinert syntaks: Lar deg definere komplekse syntakser ved hjelp av regulære uttrykk-lignende mønstre.
• inherits: Denne boolske verdien bestemmer om den egendefinerte propertyen skal arve verdien fra sitt overordnede element. Hvis satt til true, vil propertyen arve. Hvis satt til false, vil propertyen ikke arve og vil bruke startverdien hvis ikke eksplisitt definert på elementet. Standardverdien er false.
• initial-value: Dette spesifiserer standardverdien for den egendefinerte propertyen. Hvis propertyen ikke er eksplisitt satt på et element, vil den bruke denne verdien. Startverdien må være en gyldig verdi i henhold til den spesifiserte syntaksen. Hvis ingen startverdi er oppgitt og ingen annen verdi er satt, vil propertyen bli behandlet som om den har sin unset-verdi.

Praktiske eksempler på @property i aksjon

La oss se på noen praktiske eksempler på hvordan du kan bruke @property i CSS-koden din.

Eksempel 1: Animere en farge

I dette eksemplet skal vi lage en egendefinert property kalt --background-color og animere den ved hjelp av CSS-overganger. Vi definerer syntaksen som <color> for å sikre at nettleseren interpolerer mellom fargene riktig.

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

.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 koden:

• Vi definerer en egendefinert property --background-color med syntaksen <color>, setter inherits til false, og setter initial-value til hvit (#ffffff).
• Vi bruker denne propertyen på background-color til et .box-element ved hjelp av var(--background-color).
• Vi legger til en overgang til --background-color-propertyen slik at den animeres jevnt når verdien endres.
• Vi endrer verdien av --background-color til blå (#007bff) ved hover, og skaper en jevn fargeovergangseffekt.

Eksempel 2: Animere et tall

I dette eksemplet skal vi lage en egendefinert property kalt --blur-radius og animere den ved hjelp av CSS-overganger. Vi definerer syntaksen som <length> for å sikre at nettleseren interpolerer mellom lengdeverdiene riktig. Dette eksemplet viser også et populært brukstilfelle av å bruke lengder: pikselverdier. Dette kan enkelt oversettes til andre enhetstyper også. Det er også viktig å merke seg at å sette startverdien til `0px` er avgjørende, da nettleseren trenger en baseenhet for å utføre overganger riktig.

            @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 koden:

• Vi definerer en egendefinert property --blur-radius med syntaksen <length>, setter inherits til false, og setter initial-value til 0px.
• Vi bruker denne propertyen på filter: blur()-funksjonen til et .image-element ved hjelp av var(--blur-radius).
• Vi legger til en overgang til --blur-radius-propertyen slik at den animeres jevnt når verdien endres.
• Vi endrer verdien av --blur-radius til 5px ved hover, og skaper en jevn blur-effekt.

Eksempel 3: Opprette et tema-UI med arvede properties

I dette eksemplet skal vi lage et enkelt tema-UI ved hjelp av arvede egendefinerte properties. Vi definerer en egendefinert property kalt --theme-color og setter den på :root-elementet. Dette vil tillate alle barnelementer å arve temafargen.

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

: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ønn */
}
            

              
                Copy
              
            
          

I denne koden:

• Vi definerer en egendefinert property --theme-color med syntaksen <color>, setter inherits til true, og setter initial-value til grønn (#4caf50).
• Vi setter verdien av --theme-color på :root-elementet, og gjør den tilgjengelig for alle elementer i dokumentet.
• Vi bruker denne propertyen til å sette background-color til et .button-element.
• Vi endrer verdien av --theme-color til en mørkere grønn (#388e3c) ved hover, og demonstrerer hvordan arvede properties enkelt kan oppdateres for å endre temaet for UI-et.

Eksempel 4: Definere en egendefinert syntaks

syntax-propertyen kan også akseptere en streng for å definere et mer spesifikt mønster, som er spesielt nyttig for å validere mer komplekse verdier. Syntaksen bruker et regulært uttrykk-lignende system, dokumentert på MDN (Mozilla Developer Network). Dette eksemplet illustrerer hvordan du definerer og bruker en egendefinert syntaks for en bakgrunnsposisjon som aksepterer både `top`, `bottom`, `left` og `right` nøkkelordalternativer som gyldige verdier.

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

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

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

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Her er `syntax` spesifisert ved hjelp av en strengrepresentasjon av de gyldige nøkkelordene. `[ ]`-notasjonen definerer et sett med alternativer, `|`-symbolet skiller dem, og `{1,2}` begrenser antall tillatte verdier til ett eller to nøkkelord. Hvis en ugyldig verdi som `center` brukes, vil nettleseren gå tilbake til `initial-value` av `top left`.

Nettleserstøtte

Nettleserstøtte for @property er generelt god i moderne nettlesere, inkludert:

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

Det er imidlertid alltid en god idé å sjekke de nyeste nettleserkompatibilitetstabellene på nettsteder som Can I use... for å sikre at funksjonene du bruker støttes i nettleserne brukerne dine sannsynligvis vil bruke.

For eldre nettlesere som ikke støtter @property, vil nettleseren ignorere @property-regelen og bare behandle den egendefinerte propertyen som en vanlig CSS-variabel. Dette betyr at animasjoner og overganger kanskje ikke fungerer som forventet, men koden vil fortsatt være funksjonell.

Beste praksis for bruk av @property

Her er noen beste fremgangsmåter å huske på når du bruker @property:

• Definer alltid syntaksen: Sørg for å alltid definere syntax for dine egendefinerte properties for å sikre typesikkerhet og muliggjøre sømløse animasjoner og overganger.
• Sett en startverdi: Gi en initial-value for å gi en standardverdi og forhindre uventede visuelle feil.
• Bruk beskrivende navn: Velg beskrivende navn for dine egendefinerte properties som tydelig indikerer deres formål og datatype. Bruk for eksempel --button-background-color i stedet for --color.
• Vurder arv: Bestem om dine egendefinerte properties skal arve fra sine overordnede elementer eller ikke. Bruk inherits: true for properties som skal deles på tvers av UI-et, for eksempel temafarger eller skriftstørrelser.
• Test grundig: Test koden din i forskjellige nettlesere for å sikre at den fungerer som forventet. Bruk fallback-mekanismer for eldre nettlesere som ikke støtter @property.
• Dokumenter dine egendefinerte properties: Legg til kommentarer i CSS-koden din for å forklare formålet og bruken av dine egendefinerte properties. Dette vil gjøre det lettere for andre utviklere (og ditt fremtidige jeg) å forstå koden din. Verktøy som Stylelint kan også konfigureres til å håndheve disse beste fremgangsmåtene.

@property og CSS Houdini

Som nevnt tidligere, er @property en del av CSS Houdini-familien av APIer. CSS Houdini er en samling lavnivå-APIer som eksponerer det indre arbeidet i CSS-motoren for utviklere, slik at de kan utvide CSS med egendefinerte funksjoner og atferd.

Andre Houdini-APIer inkluderer:

• Paint API: Lar deg definere egendefinerte bakgrunnsbilder, kanter og masker ved hjelp av JavaScript.
• Animation Worklet API: Lar deg lage høyytelsesanimasjoner ved hjelp av JavaScript.
• Layout API: Lar deg definere egendefinerte layoutalgoritmer for elementer, for eksempel rutenettsystemer eller murverkslayouter.
• Parser API: Lar deg parse og manipulere CSS-kode ved hjelp av JavaScript.

Ved å kombinere @property med andre Houdini-APIer, kan du lage virkelig kraftige og tilpassbare CSS-løsninger.

Konklusjon

@property-regelen er et kraftig tillegg til CSS som lar deg definere egendefinerte property-typer, og muliggjør avansert styling, animasjoner og overganger. Ved å bruke @property kan du forbedre typesikkerheten, lesbarheten, vedlikeholdbarheten og ytelsen til CSS-koden din.

Selv om nettleserstøtten generelt er god, er det viktig å teste koden din i forskjellige nettlesere og gi fallback-mekanismer for eldre nettlesere som ikke støtter @property.

Ved å følge de beste fremgangsmåtene som er skissert i denne artikkelen, kan du utnytte kraften i @property til å skape virkelig fantastiske nettopplevelser.

Videre utforsking

• MDN Web Docs: @property
• Houdini.how: En guide til CSS Houdini
• Can I use @property