Введення до спеціальних властивостей CSS

Jan 22, 2026

Як

Одна з найвищих функцій процесорів CSS є змінні. Маючи можливість оголосити один раз і повторно використовувати змінну у вашому проекті, не повинно бути необов'язковим у будь-якій системі.

5 гарячих нових функцій CSS і як їх використовувати

За допомогою препроцесора Сасс (Дізнайтеся більше у нашій статті на що sass? ) дає вам принаймні один додатковий крок збірки, який може бути біль, якщо ви просто хочете побудувати річ швидко (побудувати дуже швидко, спробуйте Веб-будівельник ). CSS пройшов довгий шлях, оскільки темні дні настільних хакі, тому давайте подивимося на один з найбільш корисних аспектів: спеціальних властивостей.

Для отримання додаткових інструментів, які полегшить ваше життя, побачимося веб хостинг сервіс і хмара зберігання Варіанти. Або читати далі, і ми почнемо з простим прикладом.

: Корінь {
      - колір-червоний: # fc4752;
    }
    
    .Site-навігація {
      Колір фону: Var (- кольоровий-червоний);
    }
    
    .Site-footer {
      Колір: Var (- кольоровий-червоний);
    }

Точний : root Псевдо селектор націлює батьківський елемент найвищого рівня в Домі, надаючи всі елементи доступу до - кольоровий . Так, визначення змінних CSS слід починати з - , і ви можете отримати доступ до них будь-де var () . Ну, будь-де, що каскадуватися під нашим : root селектор.

color-red image — З var () ви також можете визначити значення зворотного зв'язку, яке буде використовуватися, якщо дана змінна не є недосяжною або не існувало

З var () Ви також можете визначити загублене значення, яке буде використовуватися, якщо дана змінна є недосяжною або неіснуючою для класу.

 .site-навігація {
      Колір фону: Var (- кольоровий червоний, червоний);
    }

Значення успадковуються від DOM, що означає, що ви можете зробити їх більш конкретними.

: Корінь {
      - кольоровий: червоний;
    }
       
    .Site-навігація {
      - кольоровий: зелений;
      
      фоновий колір: var (- колір);
    }
        
    .Site-footer {
      Колір: Var (- колір);
    }

Кожний var (- колір) червоний, крім кожного var (- колір) під Сайт-навігація . Взагалі кажучи, це не ідеальна практика, щоб перезаписати значення, яке вже визначено, але є випадки, коли обширне значення залишається найбільш адекватним рішенням.

Це основи, але ви можете зробити набагато більше. Корисний приклад для Реактивний веб-дизайн змінюється макет на основі розміру перегляду.

: Корінь {
      - колір-червоний: # fc4752;
      - Флекс-макет: рядок;
    }
    
    @Media (Max-ширина: 640px) {
      : root {
        - Флекс-макет: стовпчик;
      }
    }
    
    .Site-навігація {
      Дисплей: Flex;
      Flex-Direction: Var (- Flex-Layout, Row);
      
      Колір фону: Var (- кольоровий червоний, червоний);
    }
    
    .Site-footer {
      Колір: Var (- кольоровий-червоний);
    }

Під 640px тригери медіа-запиту, зміна напрямку Flex до стовпця на класі сайту-навігації, що робить його вміст вертикальний (стовпець) замість горизонтального (ряду). У цьому прикладі, через змінну за замовчуванням, надана сайту-навігації, вам навіть не потрібна початкова : root визначення - Флекс-макет; замість цього він буде насправді прямо до рядка.

amedia written in a green bubble — Під 640px тригерів медіа-запиту, змінюючи напрямок Flex до стовпця та створення вмісту, а не горизонтальний

Це круто, але все ще не всі веселі та ігри. Наприклад, оскільки медіа-запит не є елементом, вартість точки зупинки не може виникнути з влади. Хоча робоча група CSS має проект використання env () Для запитів, реалізація постачальника та належної підтримки, ймовірно, років, де сьогодні є.

Нічого страшного. Ми будемо дотримуватися того, що ми маємо зараз. Ще одне видовільне використання CASE для користувальницької властивості є комутаційні теми. Ви можете визначити базову тему, створити свій веб-сайт навколо нього і просто вимкнути його, за допомогою браузера робить важкий підйом. І це навіть не важка.

По суті, подумайте про це уздовж ліній нічного режиму Twitter, але без вас фактично перемикаючи CSS (я бачу вас).

 & lt; main & gt;
      & lt; nav class = "сайт-навігація" & gt;
        & lt; div & gt; я люблю interwebs & lt; / div & gt;
      & lt; / nav & gt;
      & lt; div class = "site-footer" & gt;
        & lt; label for = "color-picker" & gt; змінити колір & lt; / label & gt;
        & lt; тип введення = "колір" id = "color-picker" & gt;
      & lt; / div & gt;
      & lt; стиль & gt;
        : root {
          - кольоровий: # fc4752;
        }
        
        тіло {маржа: 0; підкладка: 0; }
        
        основний {
          Дисплей: Flex;
          Напрямок Flex: колонка;
          Обґрунтування-вміст: пробіл-між;
          Висота: 100вх;
        }
        
        .Site-навігація,
        .Site-footer {
          підкладка: 12px;
        }
        
        .Site-навігація {
          фоновий колір: var (- колір, червоний);
        }
        
        .Site-footer {
          Колір: Var (- колір);
        }
      & lt; / стиль & gt;
      & lt; сценарій & gt;
        var colorpicker = document.QuerySelector ("# color-picker");
        colorpicker.addeventlistener ("зміна", функція () {
          document.documentlement.style.setproperty ("- колір", thate.value);
      })
      & lt; / script & gt;
& lt; / main & gt;

Вибране значення вхідного кольору замінює документ - колір цінність, що робить зміну без причепу. Ви можете грати з режимами Blend, кольори альфа-каналів або PNGS - нескінченні можливості та веселощів.

white text saying - - dark on a dark background — Ви можете побудувати свій веб-сайт навколо базової теми і просто вимкнути його, за допомогою браузера робить важкий підйом

Тепер з вашими майбутніми доказами CSS, яке не залежить від будь-якого сторонопартійного розробника та використовує лише спеціальні властивості, є хороші шанси, які ви покриваєте та готові до початку виробництва.

Але що, якщо ви хочете щось інше, ніж змінні у вашому коді, давайте скажемо модулі CSS? На сьогоднішній день, для існуючих функцій CSS, такі як модулі або гніздування, ви більше не зможете покращити додаткову погляд, але ви можете реалізувати його з солодкою обіцянкою, щоб не потрібно переписати код, коли продавці наздоганяють специфікацію.

Замість того, щоб референтувати ваш CSS кожного разу, коли ви хочете покращити свій вивід, ви повинні написати ваш код у специфікації, вирівняний таким чином, в першу чергу. Це головна відмінність між попередньо та постпроцесорами. Препроцесор фактично записує CSS для вас (в основному, з текстового файлу), тоді як пост-процесор вирівняє ваш вже дійсний CSS для отримання додаткової підтримки браузера, останній, що дає вам більшу гнучкість у процесі.

Використання рідного методу завжди б'є обхідний шлях, а робоче знання майбутніх технологій - це найкраща позиція, яку ви можете бути при вивченні CSS.

Ця стаття була опублікована у випуску 306 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Підписатися на мережу тут .

Пов'язані статті:

5 порад для Super-Fast CSS
Розуміння властивості відображення CSS
CSS трюки для революції веб-макетів

Введення до спеціальних властивостей CSS

Як - Найпопулярніші статті

Як намалювати лев

Все, що потрібно знати про розщеплення JavaScript

Створіть кращі анімації персонажа в майя

Як використовувати маркування в Web Development

Намалюйте оригінальну карту Таро

Створіть ефект порталу в майя

Як додати Fun CSS до ваших сайтів

Прискорити робочий процес текстури

Категорії