Johdatus CSS mukautetuille ominaisuuksille

Feb 2, 2026

Miten tehdään

Yksi CSS-prosessoreiden yksittäisistä parhaimmista ominaisuuksista on muuttujia. Jotta kyky julistaa kerran ja uudelleenkäyttö muuttuu projektisi yli, ei saa olla valinnainen missään järjestelmässä.

5 Kuumat uudet CSS-ominaisuudet ja miten niitä käytetään

Käyttämällä esikäsittelyä Sass (Lue lisää artikkelissamme Mikä on Sass? ) antaa sinulle vähintään yhden ylimääräisen rakentaa askel, joka voi olla kipu, jos haluat vain rakentaa asia nopeasti (rakentaa todella nopeasti, kokeile a Verkkosivuston rakentaja ). CSS on tullut pitkälle taulukon hakkeroiden pimeistä päivistä, joten katsotaan yksi hyödyllisimmistä näkökohdista: mukautetut ominaisuudet.

Lisää työkaluja, jotka tekevät elämäsi helpommaksi, katso nämä sivujen ylläpito Palvelu ja pilvivarasto vaihtoehtoja. Tai lukea ja aloitamme yksinkertaisella esimerkillä.

: Root {
      - Color-Red: # FC4752;
    }
    
    .Site-navigointi {
      Tausta-väri: var (- väri-punainen);
    }
    
    .Site-Footer {
      Väri: var (- värillinen);
    }

The : juuret Pseudovalitsin kohdistaa korkeimman tason vanhemman elementin dom, antaa kaikki elementit pääsy --väri punainen . Kyllä, CSS-muuttujat Määritelmä pitäisi aloittaa - , ja voit käyttää niitä missä tahansa var () . No, missä tahansa, joka on kastettu : juuret valitsin.

color-red image — VAR () Voit myös määrittää pudotusarvon, jota käytetään, jos annettu muuttuja ei ole saavuttamaton tai olematon

Kanssa var () Voit myös määrittää pudotusarvon, jota käytetään, jos annettu muuttuja ei ole luokan saavuttamaton tai olematon.

 .Site-navigointi {
      Tausta-väri: var (- väri-punainen, punainen);
    }

Arvot perittyvät dom, mikä tarkoittaa, että voit tehdä niistä tarkemmin.

: Root {
      --väri punainen;
    }
       
    .Site-navigointi {
      --Color: vihreä;
      
      Tausta-väri: var (- väri);
    }
        
    .Site-Footer {
      Väri: var (- väri);
    }

Joka Var (- väri) on punainen, paitsi kaikki Var (- väri) alla sivuston navigointi . Yleisesti ottaen se ei ole ihanteellinen käytäntö korvata jo määritelty arvo, mutta siinä on tapauksia, joissa scoped-arvo on edelleen kaikkein riittävä ratkaisu.

Nämä ovat perusasiat, mutta voit tehdä niin paljon enemmän. Hyödyllinen esimerkki Vastaava web-suunnittelu Vaihtaa asettelua pohjalta Viewport-kokoisen perusteella.

: Root {
      - Color-Red: # FC4752;
      --Flex-layout: rivi;
    }
    
    @Media (max-leveys: 640px) {
      : root {
        --Flex-layout: sarake;
      }
    }
    
    .Site-navigointi {
      Näyttö: Flex;
      Flex-Suunta: var (- Flex-layout, rivi);
      
      Tausta-väri: var (- väri-punainen, punainen);
    }
    
    .Site-Footer {
      Väri: var (- värillinen);
    }

Under 640px Media Query laukaisee, vaihdat Flex Direction sarakkeeseen paikan päällä olevaan luokkaan, jolloin sen sisältö pystysuora (sarake) oletusarvoisen vaakasuoran (rivi) sijasta. Tässä esimerkissä, koska sivuston navigointiin annetun oletusmuuttujan vuoksi et edes tarvitse alkuperäistä : juuret määritelmä --flex-asettelu; Sen sijaan se todella menee suoraan riviin.

amedia written in a green bubble — Alle 640px mediakyselyn laukaisi, muuttaa Flex-suuntaa sarakkeeseen ja tehdä sisällön pystysuoraan vaakasuoran sijasta

Tämä on viileä, mutta se ei ole vielä hauskaa ja pelejä. Esimerkiksi, koska mediakysely ei ole elementti, katkopistearvo ei voi tulla mukautetusta omaisuudesta. Vaikka CSS-työryhmässä on luonnos käyttää env () Kyselyjä varten toimittajan toteutus ja asianmukainen tuki on luultavasti vuosien päässä, mistä asiat ovat tänään.

Ei se mitään. Pidämme kiinni siitä, mitä meillä on nyt. Yksi edistyksellinen käyttökotelo mukautetulle omaisuudelle vaihtaa teemoja. Voit määrittää perusteellisen teeman, rakentaa verkkosivustosi sen ympärille ja vain vaihtaa sen, selain tekee raskaan noston. Ja se ei ole edes raskasta.

Pohjimmiltaan ajatella sitä pitkin Twitterin yötilaa pitkin, mutta ilman sinua todella vaihtamalla CSS: ää (näen sinut).

 & lt; pää & gt;
      & lt; navl class = "sivuston navigointi" & gt;
        & lt; div & gt; rakastan Interwebs & lt; / div & gt;
      & lt; / nav & gt;
      & lt; div luokka = "Sivuston alatunniste" & gt;
        & lt; etiketti = "Color-Picker" & GT; Vaihda väri & lt; / Label & GT;
        & lt; syöttötyyppi = "väri" ID = "Color-Picker" & GT;
      & lt; / div & gt;
      & lt; tyyli & gt;
        : root {
          --Color: # FC4752;
        }
        
        Runko {marginaali: 0; Pehmuste: 0; }
        
        pää {
          Näyttö: Flex;
          Flex-Suunta: sarake;
          Perustele-sisältö: välilyönti;
          Korkeus: 100vh;
        }
        
        .Site-navigointi,
        .Site-Footer {
          Pehmuste: 12px;
        }
        
        .Site-navigointi {
          Tausta-väri: var (- väri, punainen);
        }
        
        .Site-Footer {
          Väri: var (- väri);
        }
      & lt; / tyyli & gt;
      & lt; skripti & gt;
        var colorpicker = document.querySelector ("# väriauto");
        colorpicker.addeventListener ("Muuta", toiminto () {
          documents.docenentelement.style.setProperty ("- väri", tämä.Valastus);
      }))
      & lt; / script & gt;
& lt; / main & gt;

Tulo Värin poimittu arvo korvaa asiakirja --väri arvo, mikä tekee muutoksesta ilman vetoketjua. Voit pelata sekoitustiloilla, alfa-kanavan väreillä tai pngs - loputtomat mahdollisuudet ja hauska.

white text saying - - dark on a dark background — Voit rakentaa verkkosivustosi pohja-teeman ympärille ja vain vaihtaa sen, selaimella, joka tekee raskaan noston

Nyt tulevaisuuden todistellasi CSS: ssä, mikä ei ole riippuvainen kolmannen osapuolen kehittäjältä ja käyttää vain mukautettuja ominaisuuksia, on hyvä mahdollisuus peittää ja valmis käynnistymään tuotantoon.

Mutta mitä jos haluat jotain muuta kuin muuttujia koodissasi, sanotaan CSS-moduulit? Tänä päivänä nykyisten CSS: n ominaisuuksia, kuten moduulit tai pesimä, et voi säästää ylimääräistä rakentaa askelia enää, mutta voit toteuttaa sen makealla lupauksella, jonka avulla ei tarvitse kirjoittaa koodia, kun myyjät kiinni spec.

CSS: n sijaan, että CSS: täsi aina, kun haluat parantaa lähtöäsi, sinun pitäisi kirjoittaa koodi spesifikaatiossa, joka on linjassa tällä tavalla. Tämä on tärkein ero valmiista ja jalostajien välillä. Preprocessor todella kirjoittaa CSS sinulle (pohjimmiltaan tekstitiedostosta), kun taas post-prosessori kohdistaa jo voimassa olevat CSS lisää selaimen tukea, mikä antaa sinulle enemmän joustavuutta prosessissa.

Alkuperäisen menetelmän avulla voit aina voittaa kiertoratkaisun ja tulevien teknologioiden työskentelytieto on paras asema, kun voit oppia CSS: ää.

Tämä artikkeli julkaistiin alun perin kohdassa 306 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Tilaa verkko tähän .

Aiheeseen liittyvät artikkelit:

5 Vihjeitä Super-Fast CSS: lle
CSS: n näytön ominaisuus
CSS temppuja mullistamaan web-asetteluja

Johdatus CSS mukautetuille ominaisuuksille

Miten tehdään - Suosituimmat artikkelit

Luo hiiren ohjattu parallax taustavaikutus

Kuinka saavuttaa maalauksiasi

Käytä WordPressia nimettömänä CMS

Kuinka tehdä oman luonteen Raamatun

Tee realistiset 3D-hiukset ja turkikset 3DS max ja V-Ray

Virta blogi WordPress API: n avulla

Käännä 2D-mallit 3D: ksi Project Felixilla

Sekoitusmuotojen käyttäminen merkitsemiseksi

Luokat