CSS meistriškumas: pasirinktinių ypatybių registravimas su @property

Pasirinktinės ypatybės (taip pat žinomos kaip CSS kintamieji) pakeitė tai, kaip rašome ir prižiūrime CSS. Jos leidžia mums apibrėžti daugkartinio naudojimo reikšmes, todėl mūsų stiliaus lapai tampa lankstesni ir lengviau prižiūrimi. Tačiau ką daryti, jei galėtumėte ne tik apibrėžti reikšmes? Ką daryti, jei galėtumėte apibrėžti pasirinktinės ypatybės tipą, kartu su jos pradine reikšme ir paveldėjimo elgsena? Štai čia ir atsiranda @property.

Kas yra @property?

@property yra CSS at-taisyklė, leidžianti aiškiai registruoti pasirinktinę ypatybę naršyklėje. Šis registravimo procesas suteikia naršyklę informaciją apie numatomą ypatybės tipą, jos pradinę reikšmę ir ar ji turėtų būti paveldimas iš tėvinio elemento. Tai atveria kelias pažangias galimybes, įskaitant:

• Tipų tikrinimas: Užtikrina, kad pasirinktinei ypatybei būtų priskirta tinkamo tipo reikšmė.
• Animacija: Leidžia sklandžiai pereiti ir animuoti pasirinktines ypatybes, turinčias specifinius tipus, tokius kaip skaičiai ar spalvos.
• Numatomosios reikšmės: Pateikia atsarginę reikšmę, jei pasirinktinė ypatybė nėra aiškiai apibrėžta.
• Paveldėjimo valdymas: Nustato, ar pasirinktinė ypatybė paveldi savo reikšmę iš tėvinio elemento.

Pagalvokite apie tai kaip apie tipų saugos pridėjimą prie jūsų CSS kintamųjų. Tai leidžia kurti stabilesnius ir labiau nuspėjamus stiliaus lapus.

@property sintaksė

@property taisyklė atitinka šią pagrindinę sintaksę:

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

Suskaidykime kiekvieną dalį:

• --property-name: Pasirinktinės ypatybės, kurią norite užregistruoti, pavadinimas. Ji turi prasidėti dviem brūkšneliais (--).
• syntax: Apibrėžia numatomą ypatybės reikšmės tipą. Tai labai svarbu tipų tikrinimui ir animacijai. Prieinamas sintaksės reikšmes išsamiai aptarsime žemiau.
• inherits: Būlio reikšmė, nurodanti, ar ypatybė turėtų būti paveldimas iš tėvinio elemento. Jei nenurodyta, pagal nutylėjimą yra false.
• initial-value: Numatytoji reikšmė ypatybei, jei ji nėra aiškiai nustatyta elementui. Tai užtikrina, kad visada būtų prieinama atsarginė reikšmė.

syntax deskriptoriaus supratimas

syntax deskriptorius yra svarbiausia @property taisyklės dalis. Jis pasako naršyklę, kokio tipo reikšmės tikėtis pasirinktinei ypatybei. Štai keletas bendrų sintaksės reikšmių:

• *: Leidžia bet kokią reikšmę. Tai yra pati leidžiamiausia sintaksė ir iš esmės atkartuoja standartinio CSS kintamojo be registravimo elgseną. Naudokite tai saikingai.
• <length>: Tikimasi ilgio reikšmės (pvz., 10px, 2em, 50%). Tai leidžia sklandžiai animuoti tarp skirtingų ilgio reikšmių.
• <number>: Tikimasi skaitinės reikšmės (pvz., 1, 3.14, -5). Naudinga animuojant skaitines ypatybes, tokias kaip skaidrumas ar mastelis.
• <percentage>: Tikimasi procentinės reikšmės (pvz., 25%, 100%).
• <color>: Tikimasi spalvos reikšmės (pvz., #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Leidžia sklandžiai pereiti spalvas ir animuoti.
• <image>: Tikimasi vaizdo reikšmės (pvz., url(image.jpg), linear-gradient(...)).
• <integer>: Tikimasi sveikojo skaičiaus reikšmės (pvz., 1, -10, 0).
• <angle>: Tikimasi kampo reikšmės (pvz., 45deg, 0.5rad, 200grad). Naudinga animuojant pasukimus.
• <time>: Tikimasi laiko reikšmės (pvz., 1s, 500ms). Naudinga animacijos trukmėms ar vėlavimams valdyti per pasirinktines ypatybes.
• <resolution>: Tikimasi skiriamosios gebos reikšmės (pvz., 300dpi, 96dpi).
• <transform-list>: Tikimasi transformacijos funkcijų sąrašo (pvz., translateX(10px) rotate(45deg)). Leidžia animuoti sudėtingas transformacijas.
• <custom-ident>: Tikimasi pasirinktinio identifikatoriaus (eilutės). Panašus į enum.
• <string>: Tikimasi eilutės reikšmės (pvz., "Hello World"). Būkite atsargūs, nes eilutės animacija paprastai nepalaikoma.
• Pasirinktinės sintaksės: Galite kurti sudėtingesnes sintaksės, naudodami ankstesnių ir | (arba), `[]` (grupuojimas), `+` (viena ar daugiau), `*` (nulis ar daugiau) ir `?` (nulis ar vienas) operatorius. Pavyzdžiui: <length> | <percentage> leidžia naudoti arba ilgio, arba procento reikšmę.

Teisingos syntax pasirinkimas yra būtinas, norint išnaudoti visą @property galią.

Praktiniai @property pavyzdžiai

Pažvelkime į kelis praktinius @property naudojimo pavyzdžius jūsų CSS.

1 pavyzdys: fono spalvos animavimas

Tarkime, norite animuoti mygtuko fono spalvą. Galite naudoti @property, kad užregistruotumėte pasirinktinę ypatybę fono spalvai, o tada ją animuoti naudojant CSS perėjimus.

@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; /* Raudona */
}

Šiame pavyzdyje mes registruojame --bg-color pasirinktinę ypatybę su <color> sintakse, o tai reiškia, kad tikimasi spalvos reikšmės. initial-value nustatyta balta (#fff). Kai mygtukas perkeliamas pele, --bg-color pakeičiama į raudoną (#f00), o perėjimas sklandžiai animuoja fono spalvos pasikeitimą.

2 pavyzdys: ribos spindulio valdymas su skaičiumi

Galite naudoti @property, kad valdytumėte elemento ribos spindulį ir jį animuotumėte.

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

Čia mes registruojame --border-radius kaip <length>, užtikrinant, kad ji priimtų ilgio reikšmes, tokias kaip px, em arba %. Pradinė reikšmė yra 0px. Perėjimo metu per .rounded-box, ribos spindulys animuojamas iki 20px.

3 pavyzdys: šešėlio poslinkio animavimas

Tarkime, norite animuoti dėžutės šešėlio horizontalų poslinkį.

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

Šiuo atveju --shadow-offset-x yra registruojama kaip <length>, o jos pradinė reikšmė yra 0px. box-shadow ypatybė naudoja šią pasirinktinę ypatybę savo horizontaliam poslinkiui. Perėjimo metu poslinkis animuojamas iki 10px.

4 pavyzdys: naudojant <custom-ident> temoms

<custom-ident> sintaksė leidžia apibrėžti iš anksto nustatytų eilutės reikšmių rinkinį, efektyviai sukuriant enum jūsų CSS kintamiesiems. Tai naudinga temoms kurti arba atskirtiems būsenoms valdyti.

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

:root {
  --theme: light; /* Numatoma tema */
}

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

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

Čia --theme registruojama su <custom-ident> sintakse. Nors mes tiesiogiai nenurodome leidžiamų identifikatorių @property taisyklėje, kodas rodo, kad tai yra `light` ir `dark`. Tada CSS naudoja sąlyginę logiką (var(--theme) == light ? ... : ...), kad pritaikytų skirtingus stilius pagal dabartinę temą. dark-theme klasės pridėjimas prie elemento pakeis temą į tamsią. Atkreipkite dėmesį, kad sąlyginė logika naudojant `var()` nėra standartinis CSS ir dažnai reikalauja priešprocesorių arba JavaScript. Standartinis būdas būtų naudoti CSS klases ir kaskadą:

@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 temos perjungimui */
/* document.body.setAttribute('data-theme', 'dark'); */

Šiame peržiūrėtame pavyzdyje naudojame data-theme atributą body elemente temai valdyti. JavaScript (užkomentuotas) būtų naudojamas atributui perjungti tarp `light` ir `dark`. Tai yra stabilesnis ir standartinis būdas temų kūrimui su CSS kintamaisiais.

@property naudojimo nauda

@property naudojimas suteikia keletą privalumų:

• Pagerintas kodo skaitomumas ir priežiūra: Aiškiai apibrėždami numatomą pasirinktinės ypatybės reikšmės tipą, padarote savo kodą labiau suprantamą ir mažiau linkusį į klaidas.
• Patobulintos animacijos galimybės: @property leidžia sklandžiai pereiti ir animuoti pasirinktines ypatybes, atverdamas naujas galimybes dinamiškoms ir patrauklioms vartotojo sąsajoms kurti.
• Geresnis našumas: Naršyklės gali optimizuoti elementų, naudojančių registruotas pasirinktines ypatybes, atvaizdavimą, o tai lemia našumo pagerėjimą.
• Tipų saugumas: Naršyklė tikrina, ar priskirta reikšmė atitinka deklaruotą sintaksę, taip išvengiant netikėtos elgsenos ir palengvinant derinimo procesą. Tai ypač naudinga dideliuose projektuose, kur daugelis kūrėjų prisideda prie kodų bazės.
• Numatomosios reikšmės: Užtikrinant, kad pasirinktinė ypatybė visada turėtų galiojančią reikšmę, net jei ji nėra aiškiai nustatyta, išvengiama klaidų ir gerinamas CSS stabilumas.

Naršyklių suderinamumas

2023 m. pabaigoje @property turi gerą, bet ne universalią naršyklių paramą. Ji palaikoma daugumoje modernių naršyklių, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau senesnės naršyklės gali jos nepalaikyti. Visada patikrinkite naujausią informaciją apie naršyklių suderinamumą tokiose svetainėse kaip Ar galiu naudoti... prieš naudodami @property produkcijoje.

Norėdami palaikyti senesnes naršykles, galite naudoti funkcijų užklausas (@supports), kad pateiktumėte atsargines stilių parinktis:

@supports (--property: value) {
  /* Stiliai, naudojantys @property */
}

@supports not (--property: value) {
  /* Atsarginiai stiliai naršyklėms, nepalaikančioms @property */
}

Pakeiskite --property ir value į faktinę pasirinktinę ypatybę ir jos reikšmę.

Kada naudoti @property

Apsvarstykite @property naudojimą šiais atvejais:

• Kai jums reikia animuoti pasirinktines ypatybes: Tai yra pagrindinis @property naudojimo atvejis. Registruojant ypatybę su tinkama sintakse, galima sklandžiai animuoti.
• Kai norite užtikrinti pasirinktinių ypatybių tipų saugumą: Jei norite užtikrinti, kad pasirinktinė ypatybė visada turėtų tam tikro tipo reikšmę, naudokite @property ją registruodami.
• Kai norite pateikti pasirinktinės ypatybės numatytąją reikšmę: initial-value deskriptorius leidžia nurodyti atsarginę reikšmę.
• Dideliuose projektuose: @property gerina kodo priežiūrą ir apsaugo nuo klaidų, todėl ji ypač naudinga dideliuose projektuose su daugeliu kūrėjų.
• Kurti daugkartinio naudojimo komponentus ar dizaino sistemas: @property gali padėti užtikrinti nuoseklumą ir nuspėjamumą jūsų komponentuose.

Dažnos klaidos, kurių reikia vengti

• Pamirštant syntax deskriptorių: Be syntax deskriptoriaus naršyklė nežinos numatomos reikšmės tipo, o animacija neveiks tinkamai.
• Naudojant neteisingą syntax reikšmę: Neteisingos sintaksės pasirinkimas gali sukelti netikėtą elgseną. Įsitikinkite, kad pasirinkote sintaksę, tiksliai atspindinčią numatomą reikšmės tipą.
• Nepateikiant initial-value: Be pradinės reikšmės, pasirinktinė ypatybė gali būti neapibrėžta, o tai lemia klaidas. Visada pateikite protingą numatytąją reikšmę.
• Per dažnai naudojant * kaip sintaksę: Nors ir patogu, * naudojimas panaikina tipų tikrinimo ir animacijos privalumus. Naudokite jį tik tada, kai tikrai reikia leisti bet kokio tipo reikšmę.
• Ignoruojant naršyklių suderinamumą: Visada tikrinkite naršyklių suderinamumą ir pateikite atsarginius stilius senesnėms naršyklėms.

@property ir CSS Houdini

@property yra dalis didesnio API rinkinio, vadinamo CSS Houdini. Houdini leidžia kūrėjams pasiekti naršyklės atvaizdavimo variklį, suteikiant jiems precedento neturintį valdymą per stiliaus ir išdėstymo procesą. Kiti Houdini API apima:

• Paint API: Leidžia apibrėžti pasirinktinius fono paveikslėlius ir kraštines.
• Animation Worklet API: Suteikia galimybę kurti didelio našumo animacijas, kurios veikia tiesiai naršyklės kompozitoriaus gijoje.
• Layout API: Leidžia apibrėžti pasirinktinius išdėstymo algoritmus.
• Parser API: Suteikia prieigą prie naršyklės CSS analizatoriaus.

@property yra palyginti paprastas Houdini API, kurį galima išmokti, tačiau jis atveria duris tyrinėti sudėtingesnes Houdini funkcijas.

Išvada

@property yra galinga CSS at-taisyklė, kuri atrakina pasirinktinių ypatybių pažangias galimybes. Registruodami pasirinktines ypatybes naršyklėje, galite užtikrinti tipų saugumą, įgalinti sklandžias animacijas ir pagerinti bendrą jūsų CSS kodo stabilumą. Nors naršyklių palaikymas nėra universali, @property naudojimo privalumai, ypač dideliuose projektuose ir dizaino sistemose, daro jį vertingu įrankiu moderniam žiniatinklio kūrimui. Priimkite @property ir pakelkite savo CSS įgūdžius į kitą lygį!