Wprowadzenie do właściwości niestandardowych CSS

Sep 14, 2025

Jak

Jedną z najlepszych cech procesorów CSS jest zmienne. Posiadanie możliwości deklarowania raz i ponowne wykorzystanie zmiennej w całym projekcie nie powinno być opcjonalne w żadnym systemie.

5 gorących nowych funkcji CSS i jak ich używać

Korzystanie z preprocesora Sass. (Dowiedz się więcej w naszym artykule na czym jest Sass? ) daje co najmniej jeden krok zbudowy, który może być bólem, jeśli chcesz, abyś mógł zbudować rzecz szybko (zbudować naprawdę szybko, spróbuj Kreator strony internetowej ). CSS ma długą drogę, ponieważ ciemne dni hacków stołowych, więc spójrzmy na jeden z najbardziej przydatnych aspektów: właściwości niestandardowe.

Aby uzyskać więcej narzędzi, które ułatwi ci życie, zobacz te hosting obsługa i. magazyn w chmurze Opcje. Lub czytaj dalej, a my zaczniemy od prostego przykładu.

: Root {
      - Kolor-czerwony: # fc4752;
    }
    
    .site-nawigacja {
      kolor-kolor: var (- kolor-czerwony);
    }
    
    .site-stopka {
      kolor: var (- kolor-czerwony);
    }

The. :korzeń Pseudo Selector kieruje element macierzysty najwyższego poziomu w Domu, dając wszystkie elementy Dostęp do --kolor czerwony . Tak, Definicja zmiennych CSS powinna zacząć od - i możesz uzyskać do nich dostęp w dowolnym miejscu var () . Cóż, gdziekolwiek jest kaskadowany pod naszym :korzeń selektor.

color-red image — W VAR () można również zdefiniować wartość awaryjną, która zostanie użyta, jeśli podana zmienna jest nieosiągalna lub nieistniejąca

Z var () Można również zdefiniować wartość awaryjną, która zostanie użyta, jeśli podana zmienna jest nieosiągalna lub nieistniejąca dla klasy.

 .site-nawigacja {
      kolor-kolor: var (- kolor-czerwony, czerwony);
    }

Wartości są dziedziczone z Domu, co oznacza, że możesz je bardziej szczegółowo.

: Root {
      --kolor czerwony;
    }
       
    .site-nawigacja {
      --Zielony kolor;
      
      kolor-kolor: var (- kolor);
    }
        
    .site-stopka {
      kolor: var (- kolor);
    }

Każdy var (- kolor) jest czerwony, z wyjątkiem każdego var (- kolor) pod Nawigacja w miejscu . Ogólnie rzecz biorąc, nie jest to idealna praktyka do nadpisania wartości, która jest już zdefiniowana, ale istnieją przypadki, w których wartość zasilająca jest nadal najbardziej odpowiednim rozwiązaniem.

Są to podstawy, ale możesz zrobić więcej. Przydatny przykład Responsive Web Design. zmienia układ na podstawie rozmiaru rzutni.

: Root {
      - Kolor-czerwony: # fc4752;
      --flex-układ: wiersz;
    }
    
    @media (max-szerokość: 640px) {
      : root {
        --flex-układ: kolumna;
      }
    }
    
    .site-nawigacja {
      Wyświetlacz: Flex;
      Flex-Direction: Var (- Flex-Układ, wiersz);
      
      kolor-kolor: var (- kolor-czerwony, czerwony);
    }
    
    .site-stopka {
      kolor: var (- kolor-czerwony);
    }

W obszarze 640px wyzwalacze query multimediów, zmieniając kierunek Flex do kolumny na klasie nawigacji na miejscu, dzięki czemu jego zawartość pionowa (kolumna) zamiast domyślnego poziomego (wiersz). W tym przykładzie, ze względu na domyślną zmienną podaną do nawigacji w miejscu, nawet nie potrzebujesz początkowego :korzeń Definicja - uflex-układ; Zamiast tego rzeczywiście przejdzie prosto do wiersza.

amedia written in a green bubble — W obyźnikach 640px wyzwalacze zapytania multimedialne, zmieniając kierunek flex do kolumny i dzięki czemu zawartość pionowo zamiast poziomych

Jest to fajne, ale nie jest jeszcze wszystkie zabawne i gry. Na przykład, ponieważ zapytanie mediów nie jest elementem, wartość przerwania nie może pochodzić z nieruchomości niestandardowej. Chociaż Grupa robocza CSS ma projekt użycia env () W przypadku zapytań, wdrożenie dostawcy i odpowiednie wsparcie są prawdopodobnie lata z dala od tego, gdzie dzisiaj są rzeczy.

W porządku. Trzymamy się tego, co teraz mamy. Jeszcze jeden zaawansowany przypadek użytkowania dla właściwości niestandardowej jest przełączanie tematów. Możesz zdefiniować motyw podstawowy, zbudować swoją stronę wokół niego i po prostu wyłącz go, z przeglądarką wykonującą ciężką podnoszenie. I to nie jest nawet ciężkie.

Zasadniczo, pomyśl o tym wzdłuż linii trybu nocnego Twittera, ale bez w rzeczywistości przełączając CSS (widzę cię).

 Main & GT;
      & LT; NAV CLASS = "Witryna-nawigacja" & GT;
        & LT; Div & GT; Kocham interwebs, LT; / Div & GT;
      & LT; / NAV & GT;
      & lt; div Class = "Site-Footer" & GT;
        & LT; Etykieta dla = "Kolor-Picker" & GT; Zmień kolor, LT; / Label & GT;
        & LT; Typ wejścia = "Kolor" id = "Kolor-selektor" & GT;
      & lt; / div & gt;
      & lt; style & gt;
        : root {
          - Kolor: # fc4752;
        }
        
        ciało {margines: 0; Wyściółka: 0; }
        
        Główny {
          Wyświetlacz: Flex;
          Kierunek Flex: Kolumna;
          usprawiedliwiony treści: przestrzeń między;
          Wysokość: 100VH;
        }
        
        .site-nawigacja,
        .site-stopka {
          Wyściółka: 12px;
        }
        
        .site-nawigacja {
          kolor-kolor: var (- kolor, czerwony);
        }
        
        .site-stopka {
          kolor: var (- kolor);
        }
      & LT; / Style & GT;
      & lt; script & gt;
        var colorpicker = dokument.Queryselector ("# kolorowy selektor");
        ColorPicker.addeventlistener ("Zmień", funkcja () {
          dokument.documentElement.style.setProperty ("- Kolor", to.Value);
      })
      & lt; / script & gt;
& lt; / main & gt;

Wybrana wartość koloru wejściowego zastępuje dokument --kolor Wartość, dokonując zmiany bez zaczepu. Możesz grać z trybami mieszankowymi, kolory kanału alfa lub pngs - niekończące się możliwości i zabawy.

white text saying - - dark on a dark background — Możesz zbudować swoją stronę wokół motywu podstawowego i po prostu wyłączysz, z przeglądarką wykonującą ciężką podnoszenie

Teraz z przyszłym dowodem CSS w miejscu, który nie zależy od żadnego dewelopera osób trzecich i używa wyłącznie właściwości niestandardowych, istnieje dobra szansa, że jesteś zakryty i gotowy do wytwarzania wytwarzania.

Ale co jeśli chcesz czegoś innego niż zmienne w swoim kodzie, powiedzmy moduły CSS? Na dzień dzisiejszy, dla istniejących funkcji CSS, takich jak moduły lub zagnieżdżanie, nie można już dłużej oszczędzić dodatkowej kompilacji, ale możesz zaimplementować z słodką obietnicą, że nie trzeba przepisać kodu, gdy dostawcy nadrabniają się ze specyfikacją.

Zamiast refraktorować CSS za każdym razem, gdy chcesz poprawić wyjście, należy napisać kod w specyfikacji, w ten sposób w pierwszej kolejności. Jest to główna różnica między procesorami wstępnymi i po procesorami. Preprocesor faktycznie pisze CSS dla Ciebie (w zasadzie, z pliku tekstowego), podczas gdy procesor wyrównuje już poprawne CSS dla większej liczby obsługi przeglądarki, tym ostatni daje większą elastyczność w procesie.

Korzystanie z metody rodzimych zawsze bije obejście, a posiadanie wiedzy o przyszłych technologii jest najlepszą pozycją, w której można umieszczać podczas nauki CSS.

Ten artykuł został pierwotnie opublikowany w wydaniu 306 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Subskrybuj netto tutaj .

Powiązane artykuły:

5 wskazówek dotyczących super szybkich CSS
Zrozumienie właściwości wyświetlania CSS
CSS Tricks, aby zrewolucjonizować układy internetowe

Wprowadzenie do właściwości niestandardowych CSS

Jak - Najpopularniejsze artykuły

Jak utworzyć sztukę pin-up

Arkusze znaków do modeli 3D: 15 najlepszych wskazówek

Zbuduj układy adaptacyjne bez zapytań multimedialnych

Scatter Drzew z V-Ray

Jak tworzyć niestandardowe elementy sterujące w Majowie

Utwórz efekt powitalny w realflow

Opracuj swoje umiejętności karykatury

Anatomia karykatury: 15 najlepszych wskazówek

Kategorie