En introduktion til CSS-brugerdefinerede egenskaber

Sep 12, 2025

hvordan

En af de enkelte bedste funktioner i CSS-processorer er variabler. At have evnen til at erklære en gang og genbruge variablen på tværs af dit projekt bør ikke være valgfrit i ethvert system.

5 Hot New CSS-funktioner og hvordan man bruger dem

Ved hjælp af en præprocessor som Sass. (Find ud af mere i vores artikel På hvad er Sass? ) Giver dig mindst ét ekstra opbygningstrin, som kan være en smerte, hvis du bare vil bygge en ting hurtig (at bygge rigtig hurtigt, prøv en Website Builder. ). CSS er kommet langt siden de mørke dage af bord hacks, så lad os se på et af de mest nyttige aspekter: brugerdefinerede egenskaber.

For flere værktøjer, der gør dit liv lettere, se disse Web Hosting. service og. Sky lagring muligheder. Eller læs videre, og vi starter med et simpelt eksempel.

: Root {
      - Color-Red: # FC4752;
    }
    
    .site-navigation {
      Baggrundsfarve: VAR (- Color-Red);
    }
    
    .site-footer {
      Farve: Var (- Farve-rød);
    }

Det :rod Pseudo vælgeren målretter det højeste niveau forældreelement i DOM, hvilket giver alle elementer adgang til - Color-Red. . Ja, CSS Variables Definition skal starte med - , og du kan få adgang til dem overalt med var () . Nå, hvor som helst der er cascaded under vores :rod vælger.

color-red image — Med Var () kan du også definere en tilbagekøbsværdi, som vil blive brugt, hvis den givne variabel ikke er tilgængelig eller ikke-eksisterende

Med var () Du kan også definere en tilbagekaldelsesværdi, som vil blive brugt, hvis den givne variabel er ikke tilgængelig eller ikke-eksisterende for klassen.

 .Site-navigation {
      Baggrundsfarve: Var (- Farve-rød, rød);
    }

Værdier arves fra DOM, hvilket betyder, at du kan gøre dem mere specifikke.

: Root {
      - Color: Rød;
    }
       
    .site-navigation {
      - far: grøn;
      
      Baggrundsfarve: Var (- farve);
    }
        
    .site-footer {
      Farve: Var (- farve);
    }

Hver var (- farve) er rød, undtagen hver var (- farve) under Site-navigation . Generelt er det ikke en ideel praksis at overskrive en værdi, der allerede er defineret, men der er tilfælde, hvor en scoped værdi stadig er den mest passende løsning.

Disse er det grundlæggende, men du kan gøre så meget mere. Et nyttigt eksempel for Responsive Web Design ændrer layout baseret på visningsstørrelse.

: Root {
      - Color-Red: # FC4752;
      --flex-layout: række;
    }
    
    @media (max bredde: 640px) {
      : rod {
        --FLEX-Layout: Kolonne;
      }
    }
    
    .site-navigation {
      Display: Flex;
      FLEX-DIRECTION: VAR (- FLEX-Layout, ROW);
      
      Baggrundsfarve: Var (- Farve-rød, rød);
    }
    
    .site-footer {
      Farve: Var (- Farve-rød);
    }

Under 640px udløser Media Query, ændrer flexretningen til kolonne på stedet-navigationsklasse, hvilket gør dets indhold lodret (kolonne) i stedet for standard vandret (række). I dette eksempel, på grund af standardvariablen, der gives til site-navigation, behøver du ikke engang den oprindelige :rod Definition af. --flex-layout; I stedet vil det faktisk gå lige til række.

amedia written in a green bubble — Under 640px udløser medieforespørgslen og ændrer flexretningen til kolonne og gør indholdet lodret i stedet for vandret

Dette er køligt, men det er ikke alt sjovt og spil lige endnu. For eksempel, da medieforespørgslen ikke er et element, kan breakpoint-værdien ikke komme fra en brugerdefineret ejendom. Selvom CSS-arbejdsgruppen har et udkast til at bruge ENV () For forespørgsler er leverandørens implementering og korrekt support sandsynligvis år væk fra, hvor tingene er i dag.

Det er okay. Vi vil holde fast i det, vi har nu. En mere avanceret brug sag for en brugerdefineret ejendom skifter temaer. Du kan definere et base tema, opbygge dit websted omkring det og bare skifte det ud, med browseren gør den tunge løft. Og det er ikke engang så tungt.

I det væsentlige tænk på, at det ligger langs Twitters nattilstand, men uden at du rent faktisk skifter CSS (jeg ser dig).

 & lt; Main & GT;
      & lt; nav klasse = "site-navigation" & gt;
        & lt; div & gt; jeg elsker interwebs & lt; / div & gt;
      & lt; / NAV & GT;
      & lt; div class = "site-footer" & gt;
        & lt; etiket for = "Color-picker" & GT; Skift farve og lt; / Etiket & GT;
        & lt; input type = "farve" id = "farve-picker" & gt;
      & lt; / div & gt;
      & lt; stil & gt;
        : rod {
          - Color: # FC4752;
        }
        
        krop {margin: 0; Padding: 0; }
        
        Main {
          Display: Flex;
          FLEX-DIRECTION: Kolonne;
          retfærdiggør-indhold: mellemrum mellem;
          Højde: 100Vh;
        }
        
        .site-navigation,
        .site-footer {
          Padding: 12px;
        }
        
        .site-navigation {
          Baggrundsfarve: Var (- farve, rød);
        }
        
        .site-footer {
          Farve: Var (- farve);
        }
      & lt; / stil & gt;
      & lt; script & gt;
        VAR COLORPICKER = DOCUMENT.QuySleor ("# Color-Picker");
        Colorpicker.AddeventListener ("Skift", funktion () {
          Document.documentelement.style.SetProperty ("- farve", denne.Value);
      })
      & lt; / script & gt;
& lt; / Main & GT;

Input farve's plukket værdi erstatter dokumentets --farve værdi, hvilket gør ændringen uden hitch. Du kan spille med blandingstilstande, alfa-kanalfarver eller PNGS - endeløse muligheder og sjov.

white text saying - - dark on a dark background — Du kan bygge dit websted omkring et base tema og bare skifte det ud, med browseren gør den tunge løft

Nu med dit fremtidige CSS på plads, som ikke afhænger af nogen tredjepartsudvikler og bruger kun brugerdefinerede ejendomme, er der en god chance, at du er dækket og klar til at starte produktionen.

Men hvad hvis du vil have noget andet end variabler i din kode, lad os sige CSS-moduler? Fra i dag for eksisterende CSS-funktioner som moduler eller nesting, kunne du ikke spare det ekstra opbygningstrin længere, men du kan implementere det med det søde løfte om ikke at skulle omskrive kode, når leverandører indhenter specionen.

I stedet for at refaktorere din CSS hver gang du vil forbedre din output, skal du skrive din kode i en specifikation justeret på den måde i første omgang. Dette er den største forskel mellem præ- og efterprocessorer. En præprocessor skriver faktisk CSS for dig (dybest set fra en tekstfil), mens en postprocessor justerer din allerede gyldige CSS til mere browserstøtte, idet sidstnævnte giver dig mere fleksibilitet i processen.

Ved hjælp af den native metode slår altid løsningen, og at have arbejdet med fremtidige teknologier er den bedste position, du kan være i, når du lærer CSS.

Denne artikel blev oprindeligt offentliggjort i udstedelse 306 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Abonner på nettet her .

Relaterede artikler:

5 tips til super-hurtig CSS
Forståelse af CSS Display Ejendom
CSS-tricks til at revolutionere dine web layouts

En introduktion til CSS-brugerdefinerede egenskaber

hvordan - Mest populære artikler

Instagram Reels Tutorial: En nybegyndervejledning

Sådan tilføjes animation til SVG med CSS

10 ting du ikke vidste, at du kunne gøre med Photoshop

Opret et simpelt farveskema

Sådan laver du din egen karakter Bibel

Lær at vokse løv med X-partikler

Gør realistiske planter i Cinema 4D

Opret perfekte beskeder i alle e-mail-klienter

Kategorier