CSS @property: Išlaisvinkite kintamųjų savybių galią

CSS kintamosios savybės (taip pat žinomos kaip CSS kintamieji) pakeitė tai, kaip rašome ir tvarkome CSS. Jos leidžia mums apibrėžti daugkartinio naudojimo vertes, kurias galima taikyti visuose mūsų stilių aprašuose, todėl mūsų kodas tampa lengviau prižiūrimas ir atnaujinamas. Bet kas, jeigu galėtumėte ne tik paprastai pakeisti vertes, bet ir apibrėžti savo kintamųjų savybių tipą, sintaksę, pradinę vertę ir paveldėjimo elgseną? Būtent čia ir pasitarnauja @property. Šis vadovas išnagrinės @property taisyklės galią ir potencialą, suteikdamas jums žinių ir pavyzdžių, kaip tai panaudoti savo projektuose.

Kas yra CSS @property?

@property taisyklė yra galingas CSS papildymas, leidžiantis aiškiai apibrėžti kintamąsias savybes. Skirtingai nuo standartinių CSS kintamųjų, kurie iš esmės traktuojami kaip eilutės (angl. strings), @property leidžia nurodyti duomenų tipą, sintaksę, pradinę vertę ir ar savybė paveldi vertę iš savo pirminio elemento. Tai atveria įdomias animacijos, patvirtinimo ir bendros kintamųjų savybių valdymo galimybes.

Iš esmės, @property suteikia CSS kintamiesiems supergalių.

Kodėl naudoti @property?

Nors standartiniai CSS kintamieji yra nepaprastai naudingi, jie turi apribojimų. Apsvarstykite šiuos scenarijus, kuriuose @property atsiskleidžia:

• Animacija ir perėjimai: Standartiniai CSS kintamieji, traktuojami kaip eilutės, negali būti sklandžiai animuojami tarp skirtingų tipų verčių (pvz., iš skaičiaus į spalvą). @property leidžia apibrėžti kintamojo tipą, įgalinant sklandžius perėjimus ir animacijas. Įsivaizduokite, kad animuojate kintamąją savybę, kuri atspindi spalvos atspalvį; su standartiniu CSS kintamuoju tai reikalautų JavaScript sprendimų, tačiau su @property ir apibrėžus sintaksę kaip <color>, naršyklė gali natūraliai valdyti animaciją.
• Tipo patvirtinimas: Galite užtikrinti, kad kintamoji savybė priimtų tik konkretaus tipo vertes (pvz., <number>, <color>, <length>). Tai padeda išvengti klaidų ir užtikrina, kad jūsų CSS yra patikimesnis. Jei bandysite priskirti netinkamą vertę, naršyklė naudos apibrėžtą pradinę vertę. Tai yra daug patikimiau, nei tikėtis, kad galimos klaidos išryškės vėliau kūrimo etape.
• Numatytosios vertės ir paveldėjimas: @property leidžia nurodyti pradinę savybės vertę ir kontroliuoti jos paveldėjimo elgseną. Tai supaprastina jūsų CSS ir daro jį labiau nuspėjamu. Aiškių pradinių verčių apibrėžimas tampa esminiu sudėtinguose projektuose, užkertant kelią nenumatytiems vizualiniams trikdžiams, kai kintamoji savybė nėra aiškiai nustatyta.
• Pagerintas CSS skaitomumas ir palaikymas: Aiškus kintamųjų savybių apibrėžimas su @property daro jūsų CSS lengviau suprantamą ir prižiūrimą, ypač dideliuose projektuose. Tai veikia kaip savidokumentacija, aiškiai nurodant, kam skirta kintamoji savybė ir kaip ją reikėtų naudoti.

@property sintaksė

@property taisyklė laikosi šios pagrindinės sintaksės:

            @property --property-name {
 syntax: <value>;
 inherits: <boolean>;
 initial-value: <value>;
}

            

              
                Copy
              
            
          

Išnagrinėkime kiekvieną sintaksės dalį:

• --property-name: Tai yra jūsų kintamosios savybės pavadinimas. Jis turi prasidėti dviem brūkšneliais (--). Pavyzdžiui, --primary-color.
• syntax: Tai apibrėžia vertės tipą, kurį savybė gali priimti. Ji naudoja tą pačią sintaksę kaip ir CSS <value> tipai, pavyzdžiui, <color>, <number>, <length>, <percentage>, <url>, <integer> ir kt. Taip pat galite naudoti pakaitos simbolį *, kad leistumėte bet kokią vertę.
• inherits: Tai yra loginė vertė (boolean), kuri nustato, ar savybė paveldi savo vertę iš pirminio elemento. Ji gali būti true arba false.
• initial-value: Tai yra numatytoji savybės vertė. Ji turi būti tinkama vertė pagal nurodytą sintaksę.

Praktiniai @property pavyzdžiai

Pažvelkime į keletą praktinių pavyzdžių, kaip naudoti @property, kad patobulintumėte savo CSS.

1 pavyzdys: Spalvos animavimas

Įsivaizduokite, kad norite animuoti mygtuko fono spalvą. Su standartiniais CSS kintamaisiais tai gali būti sudėtinga. Tačiau su @property tai yra paprasta:

            @property --button-bg-color {
 syntax: <color>;
 inherits: false;
 initial-value: #007bff;
}

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

.button:hover {
 --button-bg-color: #28a745;
}

            

              
                Copy
              
            
          

Šiame pavyzdyje apibrėžiame kintamąją savybę pavadinimu --button-bg-color su <color> sintakse. Tai nurodo naršyklei, kad savybė visada turi būti spalvos vertė. Užvedus pelę ant mygtuko, spalva sklandžiai pereina iš pradinės mėlynos (#007bff) į žalią (#28a745).

2 pavyzdys: Skaičiaus animavimas

Tarkime, norite animuoti progreso juostos plotį. Štai kaip tai galite padaryti su @property:

            @property --progress-width {
 syntax: <percentage>;
 inherits: false;
 initial-value: 0%;
}

.progress-bar {
 width: var(--progress-width);
 height: 10px;
 background-color: #4CAF50;
 transition: --progress-width 0.5s ease-in-out;
}

.progress-bar.complete {
 --progress-width: 100%;
}

            

              
                Copy
              
            
          

Čia apibrėžiame kintamąją savybę pavadinimu --progress-width su <percentage> sintakse. Pradinė vertė nustatyta 0%. Kai progreso juostai pridedama .complete klasė, plotis sklandžiai animuojasi iki 100%.

3 pavyzdys: Ilgio vertės patvirtinimas

Galite naudoti @property, kad užtikrintumėte, jog kintamoji savybė priima tik ilgio vertes:

            @property --spacing {
 syntax: <length>;
 inherits: true;
 initial-value: 10px;
}

.element {
 margin: var(--spacing);
}

.element.large {
 --spacing: 20px; /* Valid */
}

.element.invalid {
 --spacing: red; /* Invalid - will revert to initial-value */
}

            

              
                Copy
              
            
          

Šiuo atveju --spacing yra apibrėžta su <length> sintakse. Jei bandysite priskirti ne ilgio vertę (pvz., red), naršyklė ją ignoruos ir naudos pradinę vertę (10px).

4 pavyzdys: Kintamojo šešėlio apibrėžimas

Galite apibrėžti sudėtingą savybę, tokią kaip „box-shadow“, naudodami sintaksės pakaitos simbolį. Kompromisas yra tas, kad tipo patvirtinimas yra silpnesnis, todėl turite įsitikinti, kad ji atitinka teisingą sintaksę ir struktūrą.

            @property --my-shadow {
 syntax: *;
 inherits: false;
 initial-value: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-box {
 box-shadow: var(--my-shadow);
}

.shadow-box:hover {
 --my-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
 transition: --my-shadow 0.3s ease;
}

            

              
                Copy
              
            
          

Globalūs aspektai ir geriausios praktikos

Naudodami @property projektuose, skirtuose pasaulinei auditorijai, atsižvelkite į šiuos aspektus:

• Prieinamumas: Užtikrinkite, kad su @property sukurtos animacijos ar perėjimai nesukeltų prieinamumo problemų vartotojams su negalia. Suteikite galimybę išjungti animacijas, jei reikia. Atminkite, kad vartotojai skirtingose pasaulio dalyse gali turėti skirtingą interneto ryšio greitį ir techninės įrangos galimybes. Venkite pernelyg sudėtingų animacijų, kurios galėtų neigiamai paveikti našumą prastesniuose įrenginiuose.
• Internacionalizavimas (i18n) ir lokalizavimas (l10n): Apsvarstykite, kaip kintamosios savybės gali sąveikauti su skirtingomis kalbomis ir kultūriniais kontekstais. Jei naudojate kintamąsias savybes maketui ar tipografijai valdyti, įsitikinkite, kad jūsų dizainas tinkamai prisitaiko prie skirtingų teksto krypčių ir simbolių rinkinių. Pavyzdžiui, progreso juostos teksto kryptis gali keistis kalbose, rašomose iš dešinės į kairę (RTL).
• Našumas: Nors @property gali pagerinti našumą, įgalindama natūralias CSS animacijas, vis tiek svarbu optimizuoti kodą. Venkite nereikalingų skaičiavimų ar sudėtingų animacijų, kurios galėtų sulėtinti puslapio veikimą. Išbandykite savo kodą skirtinguose įrenginiuose ir naršyklėse, kad įsitikintumėte, jog jis gerai veikia įvairiose platformose.
• Naršyklių suderinamumas: Prieš naudodami @property gamybinėje aplinkoje, patikrinkite naršyklių suderinamumą. Nors palaikymas žymiai pagerėjo, svarbu užtikrinti, kad jūsų kodas tinkamai veiktų senesnėse naršyklėse, kurios nepalaiko šios funkcijos. Naudokite funkcijų užklausas (@supports), kad prireikus pateiktumėte atsarginius stilius. 2024 m. pabaigoje naršyklių palaikymas yra labai geras, ir visos pagrindinės naršyklės palaiko šią funkciją.
• Pavadinimų suteikimo taisyklės: Laikykitės aiškių ir nuoseklių kintamųjų savybių pavadinimų suteikimo taisyklių. Tai padės jūsų kodą lengviau suprasti ir prižiūrėti, ypač dirbant komandoje. Naudokite aprašomuosius pavadinimus, kurie aiškiai nurodo savybės paskirtį. Pavyzdžiui, vietoj --color, naudokite --primary-button-color.
• Dokumentacija: Išsamiai dokumentuokite savo kintamąsias savybes, ypač dirbdami su dideliais projektais ar komandoje. Paaiškinkite kiekvienos savybės paskirtį, jos sintaksę, pradinę vertę ir bet kokias priklausomybes ar sąveikas su kitomis savybėmis. Tai padės kitiems kūrėjams suprasti ir efektyviai naudoti jūsų kodą.
• Temos ir prekės ženklo kūrimas: Naudokite @property, kad sukurtumėte lanksčias ir pritaikomas temas savo svetainei ar programai. Apibrėžkite kintamąsias savybes spalvoms, šriftams, atstumams ir kitiems dizaino elementams ir leiskite vartotojams lengvai keisti temas, modifikuojant šias savybes. Tai gali būti ypač naudinga organizacijoms, turinčioms pasaulinius prekių ženklus, kurioms reikia išlaikyti nuoseklumą skirtinguose regionuose ir kalbose.

Geriausios @property naudojimo praktikos

Štai keletas geriausių praktikų, kurių reikėtų laikytis naudojant @property:

• Būkite aiškūs: Visada apibrėžkite savo kintamąsias savybes su @property, užuot pasikliavę numanomais eilutės tipo kintamaisiais. Tai suteikia aiškumo, patvirtinimo ir animacijos galimybių.
• Pasirinkite tinkamą sintaksę: Pasirinkite tinkamiausią sintaksę kiekvienai savybei, kad užtikrintumėte tipo saugumą ir tinkamą animacijos elgseną.
• Nurodykite pradines vertes: Visada nustatykite pradinę vertę savo kintamosioms savybėms. Tai apsaugo nuo netikėto elgesio, jei savybė nėra aiškiai nustatyta.
• Apsvarstykite paveldėjimą: Atidžiai apsvarstykite, ar savybė turėtų paveldėti savo vertę iš pirminio elemento. Naudokite inherits: true, kai tai tinkama, tačiau nepamirškite galimų šalutinių poveikių.
• Naudokite prasmingus pavadinimus: Pasirinkite aprašomuosius pavadinimus savo kintamosioms savybėms, kad jūsų kodas būtų lengviau suprantamas ir prižiūrimas.
• Dokumentuokite savo kodą: Pridėkite komentarus prie savo CSS, kad paaiškintumėte kiekvienos kintamosios savybės paskirtį ir kaip ji naudojama.
• Testuokite kruopščiai: Išbandykite savo kodą skirtingose naršyklėse ir įrenginiuose, kad užtikrintumėte suderinamumą ir našumą.

Naršyklių suderinamumas

2024 m. pabaigoje @property yra palaikoma visose pagrindinėse naršyklėse, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau visada gera mintis patikrinti naujausią naršyklių suderinamumo informaciją tokiuose šaltiniuose kaip Can I use, prieš naudojant @property gamybinėje aplinkoje.

Senesnėms naršyklėms, kurios nepalaiko @property, galite naudoti funkcijų užklausas (@supports), kad pateiktumėte atsarginius stilius. Pavyzdžiui:

            @supports (--custom-property: initial) {
 /* Styles for browsers that support custom properties */
}

@supports not (--custom-property: initial) {
 /* Fallback styles for older browsers */
}

            

              
                Copy
              
            
          

Išvada

CSS @property yra galingas įrankis, galintis žymiai pagerinti jūsų CSS darbo eigą. Leisdama jums apibrėžti kintamųjų savybių tipą, sintaksę, pradinę vertę ir paveldėjimo elgseną, ji atveria naujas galimybes animacijai, patvirtinimui ir bendrai stilių kontrolei. Suprasdami jos sintaksę, galimybes ir geriausias praktikas, galite pasinaudoti @property, kad sukurtumėte patikimesnius, lengviau prižiūrimus ir vizualiai patrauklesnius interneto dizainus. Nepamirškite atsižvelgti į globalias pasekmes naudojant @property, užtikrinant prieinamumą, internacionalizavimą ir našumą įvairiai auditorijai.

Taigi, priimkite @property galią ir atskleiskite visą CSS kintamųjų savybių potencialą savo kitame projekte!