Mestre CSS: Egendefinert Egenskapsregistrering med @property

Egendefinerte egenskaper (også kjent som CSS-variabler) har revolusjonert måten vi skriver og vedlikeholder CSS på. De lar oss definere gjenbrukbare verdier, noe som gjør stilarkene våre mer fleksible og vedlikeholdbare. Men hva om du kunne gå utover bare å definere verdier? Hva om du kunne definere typen verdi en egendefinert egenskap inneholder, sammen med dens startverdi og arveatferd? Det er der @property kommer inn i bildet.

Hva er @property?

@property er en CSS at-regel som lar deg eksplisitt registrere en egendefinert egenskap med nettleseren. Denne registreringsprosessen gir nettleseren informasjon om egenskapens forventede type, dens startverdi, og om den skal arve fra forelderelementet. Dette låser opp flere avanserte muligheter, inkludert:

• Typekontroll: Sikrer at den egendefinerte egenskapen er tildelt en verdi av riktig type.
• Animasjon: Muliggjør jevne overganger og animasjoner for egendefinerte egenskaper av spesifikke typer, som tall eller farger.
• Standardverdier: Gir en fallback-verdi hvis den egendefinerte egenskapen ikke er eksplisitt definert.
• Arvkontroll: Avgjør om den egendefinerte egenskapen arver sin verdi fra forelderelementet.

Tenk på det som å legge til typesikkerhet til CSS-variablene dine. Det lar deg lage mer robuste og forutsigbare stilark.

Syntaksen for @property

@property-regelen følger denne grunnleggende syntaksen:

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

La oss bryte ned hver del:

• --property-name: Navnet på den egendefinerte egenskapen du vil registrere. Den må starte med to bindestreker (--).
• syntax: Definerer den forventede verditypen for egenskapen. Dette er avgjørende for typekontroll og animasjon. Vi vil utforske de tilgjengelige syntaksverdiene i detalj nedenfor.
• inherits: En boolsk verdi som indikerer om egenskapen skal arve fra forelderelementet. Standard er false hvis ikke spesifisert.
• initial-value: Standardverdien for egenskapen hvis den ikke er eksplisitt satt på et element. Dette sikrer at en fallback-verdi alltid er tilgjengelig.

Forstå syntax-descriptoren

syntax-descriptoren er den viktigste delen av @property-regelen. Den forteller nettleseren hva slags verdi den kan forvente for den egendefinerte egenskapen. Her er noen vanlige syntaksverdier:

• *: Tillater enhver verdi. Dette er den mest tillatende syntaksen og replikerer i hovedsak oppførselen til en standard CSS-variabel uten registrering. Bruk dette sparsomt.
• <length>: Forventer en lengdeverdi (f.eks. 10px, 2em, 50%). Dette muliggjør jevne animasjoner mellom forskjellige lengdeverdier.
• <number>: Forventer en numerisk verdi (f.eks. 1, 3.14, -5). Nyttig for å animere numeriske egenskaper som opasitet eller skala.
• <percentage>: Forventer en prosentverdi (f.eks. 25%, 100%).
• <color>: Forventer en fargeverdi (f.eks. #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Muliggjør jevne fargeoverganger og animasjoner.
• <image>: Forventer en bildeverdi (f.eks. url(image.jpg), linear-gradient(...)).
• <integer>: Forventer en heltallsverdi (f.eks. 1, -10, 0).
• <angle>: Forventer en vinkelverdi (f.eks. 45deg, 0.5rad, 200grad). Nyttig for å animere rotasjoner.
• <time>: Forventer en tidsverdi (f.eks. 1s, 500ms). Nyttig for å kontrollere animasjonsvarighet eller forsinkelser via egendefinerte egenskaper.
• <resolution>: Forventer en oppløsningsverdi (f.eks. 300dpi, 96dpi).
• <transform-list>: Forventer en liste over transformasjonsfunksjoner (f.eks. translateX(10px) rotate(45deg)). Lar deg animere komplekse transformasjoner.
• <custom-ident>: Forventer en egendefinert identifikator (en streng). Ligner på en enum.
• <string>: Forventer en strengverdi (f.eks. "Hello World"). Vær forsiktig med dette, da animering av strenger generelt ikke støttes.
• Egendefinerte syntakser: Du kan lage mer komplekse syntakser ved hjelp av kombinasjoner av ovenstående og | (eller), `[]` (gruppering), `+` (en eller flere), `*` (null eller flere), og `?` (null eller en) operatorer. For eksempel: <length> | <percentage> tillater enten en lengde eller en prosentverdi.

Å velge riktig syntax er avgjørende for å utnytte den fulle kraften i @property.

Praktiske eksempler på @property

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

Eksempel 1: Animere en bakgrunnsfarge

Anta at du vil animere bakgrunnsfargen til en knapp. Du kan bruke @property til å registrere en egendefinert egenskap for bakgrunnsfargen og deretter animere den ved hjelp av CSS-overganger.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Rød */
}

I dette eksemplet registrerer vi den --bg-color egendefinerte egenskapen med <color> syntaksen, som betyr at den forventer en fargeverdi. initial-value er satt til hvit (#fff). Når knappen holdes over, endres --bg-color til rød (#f00), og overgangen animerer jevnt bakgrunnsfargeendringen.

Eksempel 2: Kontrollere Border Radius med et tall

Du kan bruke @property til å kontrollere border radius til et element og animere det.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

Her registrerer vi --border-radius som en <length>, og sikrer at den aksepterer lengdeverdier som px, em eller %. Startverdien er 0px. Når du holder musepekeren over .rounded-box, animeres border radius til 20px.

Eksempel 3: Animere en Skyggeforskyvning

La oss si at du vil animere den horisontale forskyvningen av en boksskygge.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

I dette tilfellet er --shadow-offset-x registrert som en <length>, og dens startverdi er 0px. box-shadow-egenskapen bruker denne egendefinerte egenskapen for sin horisontale forskyvning. Ved hover animeres forskyvningen til 10px.

Eksempel 4: Bruke <custom-ident> for Tematisering

<custom-ident>-syntaksen lar deg definere et sett med forhåndsdefinerte strengverdier, og effektivt opprette en enum for CSS-variablene dine. Dette er nyttig for tematisering eller kontroll av distinkte tilstander.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Standardtema */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

Her er --theme registrert med <custom-ident>-syntaksen. Selv om vi ikke eksplisitt lister de tillatte identifikatorene i selve @property-regelen, antyder koden at de er `light` og `dark`. CSS-en bruker deretter betinget logikk (var(--theme) == light ? ... : ...) for å bruke forskjellige stiler basert på det gjeldende temaet. Å legge til klassen `dark-theme` til et element vil bytte temaet til mørkt. Vær oppmerksom på at betinget logikk ved hjelp av `var()` ikke er standard CSS og krever ofte preprosessorer eller JavaScript. En mer standard tilnærming vil bruke CSS-klasser og kaskader:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript for å bytte tema */
/* document.body.setAttribute('data-theme', 'dark'); */

I dette reviderte eksemplet bruker vi et data-theme-attributt på body-elementet for å kontrollere temaet. JavaScript (kommentert ut) vil bli brukt til å bytte attributtet mellom `light` og `dark`. Dette er en mer robust og standard tilnærming til tematisering med CSS-variabler.

Fordeler med å bruke @property

Å bruke @property gir flere fordeler:

• Forbedret kode lesbarhet og vedlikeholdbarhet: Ved eksplisitt å definere den forventede verditypen for en egendefinert egenskap, gjør du koden din mer forståelig og mindre utsatt for feil.
• Forbedrede animasjonsmuligheter: @property muliggjør jevne overganger og animasjoner for egendefinerte egenskaper, og åpner for nye muligheter for å lage dynamiske og engasjerende brukergrensesnitt.
• Bedre ytelse: Nettlesere kan optimalisere gjengivelsen av elementer ved hjelp av registrerte egendefinerte egenskaper, noe som fører til forbedret ytelse.
• Typesikkerhet: Nettleseren validerer at den tildelte verdien samsvarer med den deklarerte syntaksen, og forhindrer uventet oppførsel og gjør feilsøking enklere. Dette er spesielt nyttig i store prosjekter der mange utviklere bidrar til kodebasen.
• Standardverdier: Sikre at en egendefinert egenskap alltid har en gyldig verdi, selv om den ikke er eksplisitt satt, forhindrer feil og forbedrer robustheten til CSS-en din.

Nettleserkompatibilitet

Per sent 2023 har @property god, men ikke universell, nettleserstøtte. Den støttes i de fleste moderne nettlesere, inkludert Chrome, Firefox, Safari og Edge. Eldre nettlesere støtter imidlertid kanskje ikke den. Sjekk alltid den nyeste nettleserkompatibilitetsinformasjonen på nettsteder som Can I use... før du bruker @property i produksjon.

For å håndtere eldre nettlesere kan du bruke funksjonsspørringer (@supports) for å gi fallback-stiler:

@supports (--property: value) {
  /* Stiler som bruker @property */
}

@supports not (--property: value) {
  /* Fallback-stiler for nettlesere som ikke støtter @property */
}

Erstatt --property og value med en faktisk egendefinert egenskap og dens verdi.

Når du skal bruke @property

Vurder å bruke @property i følgende scenarier:

• Når du trenger å animere egendefinerte egenskaper: Dette er det primære bruksområdet for @property. Å registrere egenskapen med riktig syntaks muliggjør jevne animasjoner.
• Når du vil håndheve typesikkerhet for egendefinerte egenskaper: Hvis du vil sikre at en egendefinert egenskap alltid inneholder en verdi av en bestemt type, bruker du @property til å registrere den.
• Når du vil gi en standardverdi for en egendefinert egenskap: initial-value-descriptoren lar deg spesifisere en fallback-verdi.
• I store prosjekter: @property forbedrer kodevedlikeholdbarheten og forhindrer feil, noe som gjør den spesielt nyttig for store prosjekter med mange utviklere.
• Når du oppretter gjenbrukbare komponenter eller designsystemer: @property kan bidra til å sikre konsistens og forutsigbarhet på tvers av komponentene dine.

Vanlige feil å unngå

• Glemme syntax-descriptoren: Uten syntax-descriptoren vil ikke nettleseren vite den forventede verditypen, og animasjoner vil ikke fungere som de skal.
• Bruke feil syntax-verdi: Å velge feil syntaks kan føre til uventet oppførsel. Sørg for å velge syntaksen som nøyaktig gjenspeiler den forventede verditypen.
• Ikke gi en initial-value: Uten en startverdi kan den egendefinerte egenskapen være udefinert, noe som fører til feil. Gi alltid en fornuftig standardverdi.
• Overbruke * som syntaks: Selv om det er praktisk, negerer bruk av * fordelene med typekontroll og animasjon. Bruk den bare når du virkelig trenger å tillate alle typer verdier.
• Ignorere nettleserkompatibilitet: Sjekk alltid nettleserkompatibilitet og gi fallback-stiler for eldre nettlesere.

@property og CSS Houdini

@property er en del av et større sett med APIer som kalles CSS Houdini. Houdini lar utviklere tappe inn i nettleserens gjengivelsesmotor, og gir dem enestående kontroll over styling- og layoutprosessen. Andre Houdini APIer inkluderer:

• Paint API: Lar deg definere egendefinerte bakgrunnsbilder og kanter.
• Animation Worklet API: Gir en måte å lage høyytelsesanimasjoner som kjøres direkte i nettleserens komposisjonstråd.
• Layout API: Lar deg definere egendefinerte layoutalgoritmer.
• Parser API: Gir tilgang til nettleserens CSS-parser.

@property er et relativt enkelt Houdini API å lære, men det åpner døren for å utforske mer avanserte Houdini-funksjoner.

Konklusjon

@property er en kraftig CSS at-regel som låser opp avanserte muligheter for egendefinerte egenskaper. Ved å registrere egendefinerte egenskaper med nettleseren, kan du håndheve typesikkerhet, aktivere jevne animasjoner og forbedre den generelle robustheten til CSS-koden din. Selv om nettleserstøtten ikke er universell, gjør fordelene ved å bruke @property, spesielt i store prosjekter og designsystemer, det til et verdifullt verktøy for moderne webutvikling. Omfavn @property og ta CSS-ferdighetene dine til neste nivå!