CSS @property: Bemästra typdefinition och validering av anpassade egenskaper

I den ständigt föränderliga världen av webbutveckling krävs det att man ligger i framkant genom att anamma ny teknik och nya metoder som förbättrar effektivitet, underhållbarhet och den övergripande användarupplevelsen. Anpassade CSS-egenskaper, även kända som CSS-variabler, har revolutionerat sättet vi hanterar och kontrollerar stilar. Med introduktionen av @property at-regeln får CSS ett ännu kraftfullare verktyg: förmågan att definiera och validera dessa anpassade egenskaper, vilket leder till mer robust och förutsägbar styling.

Vad är CSS @property?

@property at-regeln låter utvecklare definiera typ, syntax och andra egenskaper för anpassade egenskaper. Se det som ett sätt att ge struktur och validering för dina CSS-variabler. Före @property var CSS-variabler i grunden bara textsträngar som kunde innehålla vad som helst. Denna brist på struktur kunde leda till fel, vilket gjorde felsökning mer utmanande och hindrade den övergripande designkonsistensen. @property åtgärdar dessa problem genom att tillhandahålla en mekanism för att kontrollera vilka typer av värden som kan tilldelas dina anpassade egenskaper.

Varför använda CSS @property? Fördelar och förmåner

Fördelarna med att använda @property är många och bidrar direkt till förbättrade metoder för webbutveckling:

• Förbättrad kodunderhållbarhet: Genom att explicit definiera typerna och beteendena för anpassade egenskaper gör du din kod mer självförklarande och lättare att förstå. Andra utvecklare (eller ditt framtida jag) kommer snabbt att förstå hur en anpassad egenskap är avsedd att användas.
• Förbättrad designkonsistens: Validering säkerställer att endast giltiga värden tilldelas anpassade egenskaper. Detta hjälper till att bibehålla ett konsekvent visuellt utseende över din webbplats eller applikation.
• Robusthet och felförebyggande: Ogiltiga värden kommer att avvisas, vilket förhindrar oväntade stylingproblem och minskar tiden som läggs på felsökning.
• Dynamisk styling: @property möjliggör bättre integration med JavaScript, vilket gör att du programmatiskt kan styra och uppdatera dina CSS-variabler med förtroende, i vetskap om att värdena är giltiga.
• Bättre automatisk komplettering och utvecklarupplevelse: Kodredigerare kan ge mer intelligent automatisk komplettering och kodtips, vilket hjälper utvecklare att skriva CSS snabbare och mer korrekt.
• Optimerad prestanda: Även om prestandapåverkan generellt är liten kan validering ibland leda till mindre optimeringar av webbläsaren.

Kärnkomponenter i @property-regeln

@property at-regeln består av flera nyckelkomponenter som definierar hur en anpassad egenskap beter sig.

--property-name

Detta är namnet på den anpassade egenskap du definierar. Det måste börja med två bindestreck (--), vilket är standard för anpassade CSS-egenskaper.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

syntax-beskrivaren definierar den tillåtna typen eller mönstret för värdena på den anpassade egenskapen. Den använder en delmängd av CSS-syntaxen och kan anta olika värden, inklusive:

• <color>: Representerar ett färgvärde (t.ex. red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Representerar ett längdvärde (t.ex. 10px, 5em, 20%).
• <number>: Representerar ett numeriskt värde (t.ex. 10, 3.14).
• <percentage>: Representerar ett procentvärde (t.ex. 50%).
• <url>: Representerar en URL (t.ex. url('image.jpg')).
• <integer>: Representerar ett heltalsvärde (t.ex. 10, -5).
• <angle>: Representerar ett vinkelvärde (t.ex. 45deg, 0.5turn).
• <time>: Representerar ett tidsvärde (t.ex. 2s, 200ms).
• <string>: Representerar ett strängvärde.
• <image>: Representerar ett bildvärde (samma som url).
• *: Accepterar alla giltiga CSS-värden. Detta är en mycket tillåtande metod och bör användas med försiktighet.
• Kombinerade typer: Du kan kombinera flera typer med hjälp av blankstegsavgränsade listor (t.ex. <length> <length> <length> för att definiera tre längdvärden) eller använda '|'-symbolen för att tillåta någon av de listade typerna (t.ex. <length> | <percentage> för att stödja antingen en längd eller en procentandel).
• Anpassade syntaxer: Anpassade syntaxer, för mer komplexa scenarier, stöds ofta av anpassade implementationer, även om dessa vanligtvis beskrivs med regex-liknande syntax som [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

inherits-beskrivaren bestämmer om den anpassade egenskapen ärver sitt värde från sitt föräldraelement. Som standard ärver anpassade egenskaper inte. Detta beteende kan kontrolleras med ett booleskt värde: true eller false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

initial-value-beskrivaren sätter standardvärdet för den anpassade egenskapen om det inte är explicit definierat i CSS. Detta ger ett reservvärde när egenskapen inte är specificerad, liknande beteendet hos vanliga CSS-egenskaper.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Praktiska exempel

Låt oss dyka in i några praktiska exempel för att illustrera hur man använder @property effektivt.

Exempel 1: Definiera en färgegenskap

I detta exempel definierar vi en anpassad egenskap --primary-color för att representera en primärfärg i vårt designsystem. Vi specificerar att den endast accepterar färgvärden.

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

body {
  --primary-color: #007bff; /* Giltigt */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Giltigt */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Exempel 2: Definiera en längdegenskap

Här definierar vi en anpassad egenskap --spacing för att hantera avstånd mellan element, som accepterar längdvärden. Detta exempel visar tydligt värdet av att sätta ett `initial-value` som standard för hela webbplatsen. Detta är särskilt användbart när man använder ett designsystem där standardavstånd är definierade.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Exempel 3: Definiera en heltalsegenskap

Detta exempel definierar en anpassad egenskap för antalet kolumner i en rutnätslayout och validerar att värdet är ett heltal.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Exempel 4: Egenskapsärvning

Här definierar vi en anpassad egenskap som *kommer* att ärvas. Egenskapen `font-size` satt till `1rem` på body kommer att påverka alla dess barn om den inte åsidosätts.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Åsidosätter ärvt värde */
}

            

              
                Copy
              
            
          

Exempel 5: Kombinera typer

Genom att använda '|'-operatorn kan vi kombinera typer. Här accepterar vi antingen en `length` eller en `percentage` för skuggförskjutningen.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Bästa praxis för att använda @property

För att maximera fördelarna med @property, följ dessa bästa praxis:

• Definiera egenskaper på en central plats: Gruppera dina @property-definitioner i en dedikerad CSS-fil eller sektion, ofta högst upp i din huvudstilfil eller i en designsystemfil. Detta främjar organisation och gör det enkelt att hantera dina anpassade egenskaper.
• Använd beskrivande egenskapsnamn: Välj namn som tydligt indikerar syftet med varje anpassad egenskap (t.ex. --primary-button-color, --header-font-size). Detta förbättrar läsbarheten och förståelsen.
• Tillhandahåll omfattande dokumentation: Dokumentera dina anpassade egenskaper, inklusive deras syntax, användning och eventuella begränsningar. Denna dokumentation kan inkluderas i form av kommentarer bredvid din CSS eller i en separat stilguide.
• Välj rätt syntax: Välj noggrant lämplig syntax för varje egenskap. Att använda korrekt syntax förhindrar fel och säkerställer att de tilldelade värdena är giltiga.
• Överväg ärvning noggrant: Bestäm om en egenskap ska ärva sitt värde från sitt föräldraelement. Detta beror på egenskapens natur och hur den ska tillämpas över din design.
• Använd initial-value strategiskt: Sätt ett initial-value för alla anpassade egenskaper som kräver ett standardvärde. Detta ger en reserv och säkerställer att stilen tillämpas även om egenskapen inte är explicit satt.
• Utnyttja designsystem: Integrera @property i ditt designsystem för att bibehålla konsistens och förbättra ditt teams utvecklingsflöde. Genom att använda det tillsammans med andra komponenter bygger du mer robusta och modulära designer, vilket ofta är målet när man skapar komponenter för global användning.
• Testa noggrant: Testa dina anpassade egenskaper och deras beteende i olika webbläsare och enheter för att säkerställa kompatibilitet och en konsekvent användarupplevelse. Testning över olika webbläsare är ett kritiskt steg, eftersom stödet för `property` ännu inte är universellt implementerat.

Webbläsarkompatibilitet

Per den 26 oktober 2023 varierar stödet för @property at-regeln mellan webbläsare. Chrome, Edge och Safari har bra stöd, medan stödet i Firefox är begränsat. Konsultera alltid resurser som Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) för att hålla dig uppdaterad om webbläsarkompatibilitet.

Viktiga överväganden för webbläsarkompatibilitet:

• Funktionsdetektering: Använd tekniker för funktionsdetektering för att hantera webbläsare som inte stöder @property på ett elegant sätt. Du kan använda en CSS-egenskapskontroll eller JavaScript-funktionsdetektering för att tillämpa alternativa stilar eller polyfills.
• Progressiv förbättring: Designa din webbplats med en grundläggande styling som fungerar utan @property. Förbättra sedan designen progressivt genom att lägga till @property-stöd för kompatibla webbläsare.
• Polyfills och reservlösningar: Överväg att använda polyfills eller tillhandahålla reservlösningar för webbläsare som inte har fullt stöd för @property. Detta kan innebära att använda vanliga CSS-variabler, eller förbearbetning med SASS, LESS eller andra metoder.

Använda CSS @property med JavaScript

En av de största fördelarna med anpassade CSS-egenskaper är deras förmåga att manipuleras med JavaScript, vilket möjliggör dynamisk styling och förbättrade användarupplevelser. @property förstärker denna förmåga och gör integrationen mellan CSS och JavaScript ännu kraftfullare och mer förutsägbar.

Så här kan du interagera med anpassade egenskaper definierade med @property i JavaScript:

1. Hämta värdet för en anpassad egenskap: Använd getPropertyValue() för att hämta värdet av en anpassad egenskap.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // t.ex. "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Sätta värdet för en anpassad egenskap: Använd setProperty() för att sätta värdet på en anpassad egenskap. På grund av syntax-parametern i `@property`-definitionen kan inställning via JavaScript utlösa värdevalidering i webbläsaren.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Exempel: Dynamisk färgändring med JavaScript

Låt oss illustrera hur man skapar en dynamisk färgändring med JavaScript och @property.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

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

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Kan baseras på någon logik/inmatning
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

I detta exempel ändras knappens bakgrundsfärg när man klickar på den genom att modifiera den anpassade egenskapen --button-color med JavaScript.

Internationalisering (i18n) och CSS @property

CSS @property kan vara ett värdefullt verktyg för att skapa webbapplikationer som stöder olika språk och lokaler. Så här kan det tillämpas på i18n:

• Typografi: Definiera anpassade egenskaper för teckenstorlekar, radhöjder och typsnittsfamiljer, så att du kan anpassa textens utseende baserat på det valda språket.
• Layout: Använd egenskaper för avstånd, marginaler och utfyllnad för att anpassa till variationer i textriktning (t.ex. vänster-till-höger vs. höger-till-vänster) och olika teckenbredder.
• Färger: Använd egenskaper för UI-elementfärger, som knappfärger, textfärger och bakgrundsfärger. Dessa kan justeras för att överensstämma med kulturella preferenser eller designriktlinjer för specifika regioner.
• Textriktning: Använd en anpassad egenskap för att styra textriktningen (t.ex. ltr, rtl) och ändra layouten därefter.

Exempel: Anpassa teckenstorlekar baserat på språk

I detta exempel visar vi hur man anpassar teckenstorleken på rubriker enligt det valda språket. Metoden skulle använda ett JavaScript-bibliotek för att bestämma lämpligt språk och sätta anpassade egenskaper.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Sätt sedan värdet dynamiskt i JavaScript baserat på det detekterade språket:

            
// Antag en global variabel eller funktion för att hämta användarens språk
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Justera för japanska
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Standard
}

            

              
                Copy
              
            
          

Tillgänglighetsaspekter

När du arbetar med @property är det viktigt att ha tillgänglighet i åtanke:

• Färgkontrast: Säkerställ tillräcklig färgkontrast mellan text och bakgrunder. Använd anpassade egenskaper för färger för att enkelt kunna uppdatera designen så att den uppfyller kontrastkraven.
• Textstorlek: Låt användare kontrollera textstorleken. Använd relativa enheter (rem, em) och anpassade egenskaper för att göra teckenskalning enkel.
• Fokusindikatorer: Anpassa fokusindikatorer så att de är tydligt synliga. Använd anpassade egenskaper för att kontrollera färg och stil på fokusramarna.
• ARIA-attribut: Se till att element har lämpliga ARIA-attribut när du använder anpassade egenskaper för att styra tillstånd eller beteende.
• Tangentbordsnavigering: Verifiera att din webbplats är lätt att navigera på med ett tangentbord, särskilt om anpassade egenskaper används för att hantera interaktiva element.

Hänsyn och lösningar för olika webbläsare

Även om @property är ett kraftfullt verktyg, kom ihåg att webbläsarstödet ännu inte är universellt implementerat. Du bör använda tekniker för olika webbläsare för att mildra effekten av bristande stöd.

• Progressiv förbättring: Designa din styling med grundläggande CSS-variabler och använd sedan `@property` för extra funktioner i webbläsare som stöder det.
• Funktionsdetektering: Använd metoder för funktionsdetektering för att avgöra om en webbläsare stöder @property innan du tillämpar stilar som använder det. En enkel kontroll kan göras med JavaScript.
• CSS-reservlösningar: Tillhandahåll reservvärden för egenskaper som inte stöds. Detta kan göras genom att sätta egenskaper direkt, eller genom att använda olika variabler för webbläsare som stöds respektive inte stöds.
• Preprocessorer: Använd CSS-preprocessorer som Sass eller Less för att översätta strukturer på högre nivå till standard-CSS som kan användas i webbläsare som inte har fullt stöd för `@property`. Även om detta introducerar ett extra steg, överväger fördelarna ofta nackdelarna.

Exempel på en CSS-reservlösning:

            
.element {
  --base-color: #333; /* Standardvärde för webbläsare utan @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Funktionsdetektering för @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Lägg till mer komplex styling här som utnyttjar @property */
}

            

              
                Copy
              
            
          

Verktyg och bibliotek

Olika verktyg och bibliotek kan hjälpa till när man arbetar med @property:

• PostCSS-plugins: Plugins som `postcss-custom-properties` och `postcss-custom-properties-experimental` kan hjälpa till att omvandla anpassade egenskaper och ge stöd för äldre webbläsare genom att konvertera `@property`-definitioner till motsvarande CSS-regler.
• Stylelint: Integrera stylelint och anpassade regler eller plugins för att validera användningen och strukturen av dina anpassade egenskaper.
• Designsystemramverk: Integrera @property i populära designsystemramverk som Ant Design, Material UI och Bootstrap för att säkerställa designkonsistens och ge utvecklare en smidigare upplevelse.

Slutsats

CSS @property är ett kraftfullt tillskott till webbutvecklarens verktygslåda, som ger struktur, validering och dynamiska funktioner till anpassade egenskaper. Genom att definiera typen och beteendet för dina CSS-variabler kan du förbättra kodens underhållbarhet, öka designkonsistensen och skapa mer robusta och förutsägbara stylinglösningar.

I takt med att webbläsarstödet förbättras blir det allt viktigare att införliva @property i dina projekt. Genom att följa de bästa metoderna som beskrivs i denna guide kan du dra nytta av fördelarna med denna nya funktion och skriva mer effektiv, underhållbar och skalbar CSS. Omfamna @property och förvandla ditt arbetsflöde för webbutveckling!

Vidare lärande

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property