O introducere în proprietățile personalizate CSS

Feb 2, 2026

să

Una dintre cele mai bune caracteristici ale procesoarelor CSS este variabile. Având capacitatea de a declara o dată și reutilizează variabila în cadrul proiectului dvs. nu ar trebui să fie opțională în niciun sistem.

5 caracteristici CSS noi și cum să le folosim

Folosind un preprocesor cum ar fi Sass. (Aflați mai multe în articolul nostru pe ceea ce este sass? ) vă oferă cel puțin un pas suplimentar de construire, care poate fi o durere dacă doriți doar să construiți un lucru rapid (pentru a construi foarte repede, încercați a Builder de site-uri web ). CSS a venit o cale lungă de la zilele întunecate de hack-uri de masă, așa că să analizăm unul dintre cele mai utile aspecte: Proprietăți personalizate.

Pentru mai multe instrumente care vă vor face viața mai ușoară, vedeți-le web hosting serviciu și Stocare in cloud Opțiuni. Sau citiți mai departe și vom începe cu un exemplu simplu.

: root {
      - roșu-roșu: # FC4752;
    }
    
    .Site-navigare {
      Culoare de fundal: VAR (- roșu de culoare);
    }
    
    .Site-subsol {
      Culoare: Var (- culoare roșie);
    }

:rădăcină Selectorul Pseudo vizează elementul parent de cel mai înalt nivel din DOM, dând toate elementele accesului la --culoarea rosie . Da, definiția variabilelor CSS ar trebui să înceapă cu - și le puteți accesa oriunde var () . Ei bine, oriunde este cascadată sub noi :rădăcină selector.

color-red image — Cu var () puteți defini, de asemenea, o valoare de rezervă, care va fi utilizată dacă variabila dată este inaccesibilă sau inexistentă

Cu var () De asemenea, puteți defini o valoare de rezervă, care va fi utilizată dacă variabila dată este inaccesibilă sau inexistentă pentru clasă.

 .Site-navigare {
      Culoare de fundal: var (- culoare-roșu, roșu);
    }

Valorile sunt moștenite din DOM, ceea ce înseamnă că le puteți face mai specifice.

: root {
      --culoarea rosie;
    }
       
    .Site-navigare {
      - color: verde;
      
      Culoare de fundal: VAR (- Culoare);
    }
        
    .Site-subsol {
      Culoare: var (- culoare);
    }

Fiecare var (- culoare) este roșu, cu excepția fiecăruia var (- culoare) sub Site-navigație . În general, nu este o practică ideală de a suprascrie o valoare care este deja definită, dar există cazuri în care o valoare determinată este încă cea mai adecvată soluție.

Acestea sunt elementele de bază, dar puteți face mult mai mult. Un exemplu util pentru Designul web receptiv se schimbă layout pe baza dimensiunii de vizualizare.

: root {
      - roșu-roșu: # FC4752;
      - Flex-Layout: Rând;
    }
    
    @Media (max-lățime: 640px) {
      : root {
        - Flex-Layout: Coloana;
      }
    }
    
    .Site-navigare {
      Afișaj: Flex;
      Direcția Flex: Var (- Flex-Layout, Row);
      
      Culoare de fundal: var (- culoare-roșu, roșu);
    }
    
    .Site-subsol {
      Culoare: Var (- culoare roșie);
    }

Sub 640px Trigătorii de interogare media, schimbând direcția flexibilă la coloana de pe clasa de navigație, făcând conținut vertical (coloană) în loc de orizontală implicită (rând). În acest exemplu, din cauza variabilei implicite date la navigația site-ului, nici măcar nu aveți nevoie de inițial :rădăcină definitia - Layout-ulflex; În schimb, va merge direct la rând.

amedia written in a green bubble — Sub 640px, interogarea interogării media, schimbând direcția flexibilă în coloană și făcând conținutul vertical în loc de orizontală

Acest lucru este rece, dar nu este încă distractiv și jocuri. De exemplu, deoarece interogarea media nu este un element, valoarea punctului de întrerupere nu poate veni dintr-o proprietate personalizată. Deși grupul de lucru CSS are un proiect de utilizare env () Pentru interogări, implementarea vânzătorului și sprijinul adecvat este probabil la câțiva ani de unde sunt astăzi lucrurile.

Este în regulă. Vom rămâne la ceea ce avem acum. Un caz mai avansat de utilizare pentru o proprietate personalizată este comutarea temelor. Puteți defini o temă de bază, construiți site-ul dvs. în jurul acestuia și porniți-l, cu browserul care face ridicarea grea. Și nici măcar nu este atât de greu.

În esență, gândiți-vă că este de-a lungul liniilor de modul de noapte a lui Twitter, dar fără să schimbați de fapt CSS (vă văd).

 & lt; principal & gt;
      & lt; nav clasa = "site-navigare" & gt;
        & Lt; Div & Gt; Îmi place Interwebs & Lt; / Div & Gt;
      & lt; / nav & gt;
      & lt; div clasa = "sit-subsol" & gt;
        & lt; etichetă pentru = "color-picker" & gt; schimba culoarea & lt; / etichete & gt;
        & lt; Intrare Tip = "Culoare" ID = "Color-Picker" & GT;
      & lt; / div & gt;
      & lt; stil & gt;
        : root {
          --Color: # FC4752;
        }
        
        corp {margine: 0; Padding: 0; }
        
        Main {
          Afișaj: Flex;
          Flex-direcție: coloană;
          justificați-conținutul: spațiu-între;
          Înălțime: 100VH;
        }
        
        .Site-navigare,
        .Site-subsol {
          Padding: 12px;
        }
        
        .Site-navigare {
          fundal-culoare: var (culoare, roșu);
        }
        
        .Site-subsol {
          Culoare: var (- culoare);
        }
      & lt; / stil & gt;
      & lt; script & gt;
        var colorpicker = document.querySelector ("# # culoare-picker");
        colorpicker.addeventlistener ("schimbare", funcția () {
          document.documentelement.style.setproperty ("- culoare", this.value);
      })
      & lt; / script & gt;
& lt; / principal & gt;

Valoarea selectată a culorii de intrare înlocuiește documentul --culoare valoare, făcând schimbarea fără un cârlig. Puteți juca cu moduri de amestec, culori alfa canale sau PNG-uri - posibilități nesfârșite și distracție.

white text saying - - dark on a dark background — Puteți construi site-ul dvs. în jurul unei teme de bază și purtați-o, cu browserul efectuând ridicarea grea

Acum, cu CSS-ul dvs. în viitor, care nu depinde de nici un dezvoltator terț și folosește numai proprietăți personalizate, există o șansă bună că sunteți acoperit și gata să începeți producția.

Dar dacă vreți altceva decât variabilele din codul dvs., să spunem modulele CSS? Începând de astăzi, pentru caracteristicile CSS existente, cum ar fi modulele sau cuibările, nu ați putea să vă mai pierdeți pasul suplimentar de construire, dar îl puteți implementa cu promisiunea dulce de a nu fi nevoie să rescrieți codul atunci când vânzătorii ajung în sus cu spec.

În loc să refactorizați CSS de fiecare dată când doriți să vă îmbunătățiți ieșirea, trebuie să vă scrieți codul într-o specificație aliniată în acest fel în acest sens. Aceasta este principala diferență între pre- și postprocesoare. Un preprocesor scrie de fapt CSS pentru dvs. (în principiu, dintr-un fișier text), în timp ce un post-procesor aliniază CSS-ul dvs. deja valabil pentru mai mult suport pentru browser, acesta din urmă vă oferă mai multă flexibilitate în acest proces.

Folosind metoda nativă întotdeauna bate de la început, iar cunoașterea de lucru a tehnologiilor viitoare este cea mai bună poziție pe care o puteți afla atunci când învățați CSS.

Acest articol a fost publicat inițial în numărul 306 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Abonați-vă la net aici .

Articole similare:

5 sfaturi pentru Super-Fast RSS
Înțelegerea proprietății afișajului CSS
CSS Tricks pentru a revoluționa layout-urile Web

O introducere în proprietățile personalizate CSS

să - Cele mai populare articole

Construiți un blog reactiv rapid cu Svelte și Sapper

Creați un peisaj 3D în 6 pași simpli

Sculpt Anatomia realistă în Zbrush

5 lucruri pe care nu le-ați știut că puteți face cu HTML

Porniți meniurile dvs. folosind animație cu CSS

Creați gresie ornamentată în designer de substanțe

Cum se codifică un marker de realitate augmentat

Cum să capturați mișcarea în 3D-ul dvs. Renders

Categorii