Een inleiding tot CSS Aangepaste eigenschappen

Feb 9, 2026

Procedures

Een van de single beste functies van CSS-processors is variabelen. Met het vermogen om eenmaal te verklaren en de variabele in uw hele project opnieuw te gebruiken, mag niet optioneel zijn in elk systeem.

5 hete nieuwe CSS-functies en hoe ze ze te gebruiken

Met behulp van een preprocessor zoals Sassass (Meer informatie in ons artikel op wat is sass? ) Geeft u ten minste één extra build-stap, die een pijn kan zijn als u gewoon een ding wilt bouwen (om echt snel te bouwen, een website bouwer CSS is een lange weg afgelegd sinds de donkere dagen van tafel hacks, dus laten we kijken naar een van de meest bruikbare aspecten: aangepaste eigenschappen.

Voor meer hulpmiddelen die je leven gemakkelijker maken, zie je deze web hosting service en cloud opslag opties. Of lees verder en we beginnen met een eenvoudig voorbeeld.

: root {
      - Kleurrood: # FC4752;
    
    
    . Site-navigatie {
      Achtergrondkleur: Var (- Kleurrood);
    
    
    .site-footer {
      Kleur: var (- kleurrood);
    }

De :wortel Pseudo-selector richt zich op het ouder-element van de hoogste niveau in de DOM, waardoor alle elementen toegang tot --kleur rood Ja, CSS-variabelen Definitie moet beginnen met , en je hebt ergens toegang tot ze met Var () Nou, overal dat wordt gecascadeerd onder onze :wortel selector.

color-red image — Met VAR () kunt u ook een fullback-waarde definiëren, die zal worden gebruikt als de gegeven variabele onbereikbaar of niet-bestaand is

Met Var () U kunt ook een fallback-waarde definiëren, die zal worden gebruikt als de gegeven variabele onbereikbaar of niet-bestaand is voor de klas.

 .Site-navigatie {
      Achtergrondkleur: Var (- kleurrood, rood);
    }

Waarden worden geërfd van de DOM, wat betekent dat u ze specifieker kunt maken.

: root {
      --kleur rood;
    
       
    . Site-navigatie {
      --kleur groen;
      
      Achtergrondkleur: Var (- Kleur);
    
        
    .site-footer {
      Kleur: Var (- Kleur);
    }

Elk var (- kleur) is rood, behalve elk var (- kleur) onder site-navigatie Over het algemeen is het geen ideale praktijk om een waarde te overschrijven die al is gedefinieerd, maar er zijn gevallen waarin een scoped-waarde nog steeds de meest adequate oplossing is.

Dit zijn de basis, maar je kunt zoveel meer doen. Een handig voorbeeld voor Responsive Web Design is aan veranderende lay-out op basis van viewport-grootte.

: root {
      - Kleurrood: # FC4752;
      - Flex-indeling: rij;
    
    
    @media (max-breedte: 640px) {
      : Root {
        - Flex-lay-out: kolom;
      
    
    
    . Site-navigatie {
      Display: Flex;
      FLEX-RICHTING: VAR (- FLEX-lay-out, rij);
      
      Achtergrondkleur: Var (- kleurrood, rood);
    
    
    .site-footer {
      Kleur: var (- kleurrood);
    }

Onder 640px triggeert de mediacy-query-query-query de flexrichting op kolom op de site-navigatieklasse, waardoor de inhoud verticaal (kolom) in plaats van de standaard horizontale (rij) is. In dit voorbeeld, vanwege de standaardvariabele die wordt gegeven aan site-navigatie, heeft u niet eens de initiaal nodig :wortel definitie van - Flex-lay-out; In plaats daarvan gaat het echt rechtstreeks naar de rij.

amedia written in a green bubble — Onder 640px triggeert de mediaquery, de flexrichting naar kolom en het maken van de inhoud verticaal in plaats van horizontaal

Dit is cool, maar het is nog niet allemaal leuk en games. Omdat de mediaquery bijvoorbeeld geen element is, kan de breakpoint-waarde niet uit een aangepast eigendom komen. Hoewel CSS-werkgroep een concept heeft van het gebruik env () Voor query's is de implementatie van verkoper en de juiste ondersteuning waarschijnlijk jaren weg van waar de dingen zijn vandaag.

Dat is goed. We zullen vasthouden aan wat we nu hebben. Nog een geavanceerde gebruiksbehuizing voor een aangepast eigendom is schakelthema's. U kunt een basisthema definiëren, uw website eromheen bouwen en gewoon uitzetten, met de browser die het zware tillen doet. En het is zelfs niet zo zwaar.

Denk er in wezen eracht dat het langs de lijnen van de nachtmodus van Twitter is, maar zonder dat je de CSS eigenlijk schakelt (ik zie je).

 & lt; main & gt;
      & LT; NAV-klasse = "Site-navigatie" & GT;
        & lt; div & gt; ik hou van interwebs & lt; / div & gt;
      & LT; / NAV & GT;
      & lt; div class = "site-footer" & GT;
        & LT; Label voor = "Color-Picker" & GT; Color & LT; / Label & GT;
        & LT; INPUT Type = "Kleur" ID = "Color-Picker" & GT;
      & LT; / DIV & GT;
      & LT; STYLE & GT;
        : Root {
          - Kleur: # FC4752;
        
        
        lichaam {marge: 0; Vulling: 0;
        
        hoofd {
          Display: Flex;
          Flex-richting: kolom;
          rechtvaardigen-inhoud: ruimte-tussen;
          Hoogte: 100VH;
        
        
        . Site-navigatie,
        .site-footer {
          Vulling: 12px;
        
        
        . Site-navigatie {
          Achtergrondkleur: Var (- kleur, rood);
        
        
        .site-footer {
          Kleur: Var (- Kleur);
        
      & LT; / STYLE & GT;
      & lt; script & gt;
        var colorpicker = document.QuerySelector ("# kleur-picker");
        colorpicker.addevenlistener ("wijzigen", functie () {
          document.documentelement.style.SetProperty ("- kleur", dit.Value);
      
      & LT; / Script & GT;
& LT; / MAIN & GT;

De gepicked waarde van de ingangskleur vervangt het document --kleur waarde, het maken van de wijziging zonder een hapering. U kunt met Mix-modi, Alfa-kanaalkleuren of PNGS - eindeloze mogelijkheden en plezier spelen.

white text saying - - dark on a dark background — U kunt uw website bouwen rond een basisthema en het gewoon uitschakelen, met de browser die het zware tillen doet

Nu met uw toekomstbestendige CSS, die niet afhankelijk is van externe ontwikkelaar en gebruikt alleen aangepaste eigenschappen, is er een goede kans dat u bedekt bent en klaar bent om de productie te starten.

Maar wat als je iets anders dan variabelen in je code wilt, laten we zeggen CSS-modules? Vanaf vandaag, voor bestaande CSS-functies zoals modules of nestelen, kunt u de extra build stap niet langer sparen, maar u kunt het implementeren met de zoete belofte om code niet te herschrijven wanneer leveranciers de specificatie inhalen.

In plaats van uw CSS te refereren telkens wanneer u uw uitvoer wilt verbeteren, moet u uw code in een specificatie op de eerste plaats regelen. Dit is het belangrijkste verschil tussen pre- en post-processors. Een preprocessor schrijft eigenlijk de CSS voor u (in principe, vanuit een tekstbestand), terwijl een postprocessor uw al geldige CSS voor meer browserondersteuning afstamt, laat het laatste u meer flexibiliteit in het proces.

Het gebruik van de inheemse methode verslaat altijd de tijdelijke oplossing en het hebben van de werkkennis van toekomstige technologieën is de beste positie waaraan u kunt zijn bij het leren van CSS.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 306 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Abonneren op net hier

Gerelateerde artikelen:

5 tips voor supersnelle CSS
Informatie over het CSS-scherm onroerend goed
CSS-trucs om uw weblay-outs te revolutioneert

Een inleiding tot CSS Aangepaste eigenschappen

Procedures - Meest populaire artikelen

Hoe een Meme in Photoshop te maken

Affinity Designer: Hoe beperkingen te gebruiken

Begrijp de eenheidsmiddelenimport pijpleiding

Een bord voorbereiden op het schilderen in 3 eenvoudige stappen

Hoe maak je je eigen karakter bijbel

Een verbluffende effecten maken met CSS-vormen

Maak eenvoudige illustraties voor het web

Hoe de huid in de schaduw in 3D

Categorieën