Овладяване на CSS правилото @when: Условно прилагане на стилове за динамичен уеб дизайн

CSS правилото @when, част от спецификацията CSS Conditional Rules Module Level 5, предлага мощен начин за условно прилагане на стилове въз основа на определени условия. То надхвърля традиционните медийни заявки (media queries), позволявайки по-детайлен контрол върху стилизирането въз основа на размерите на контейнери, персонализирани свойства и дори състоянието на елементите. Това може значително да подобри адаптивността (responsiveness) и приспособимостта на вашите уеб дизайни, което води до по-добро потребителско изживяване на различни устройства и в различни контексти.

Разбиране на основите на правилото @when

В основата си правилото @when предоставя механизъм за изпълнение на блок от CSS стилове само когато е изпълнено определено условие. Това е подобно на if операторите в езиците за програмиране. Нека разгледаме синтаксиса:

@when условие {
  /* CSS правила, които да се приложат, когато условието е вярно */
}

условието може да се основава на различни фактори, включително:

• Container Queries: Стилизиране на елементи въз основа на размера на техния съдържащ елемент, а не на viewport-а.
• Персонализирани състояния: Реагиране на потребителски взаимодействия или състояния на приложението.
• CSS променливи: Прилагане на стилове въз основа на стойността на CSS персонализирани свойства.
• Заявки за обхват: Проверка дали дадена стойност попада в определен диапазон.

Силата на @when се крие в способността му да създава наистина компонентно-базирано стилизиране. Можете да капсулирате логиката за стилизиране в рамките на компонент и да гарантирате, че тя се прилага само когато компонентът отговаря на определени критерии, независимо от заобикалящото го оформление на страницата.

Container Queries с @when

Container queries променят правилата на играта в адаптивния дизайн. Те позволяват на елементите да адаптират стила си въз основа на размерите на родителския си контейнер, а не само на ширината на viewport-а. Това дава възможност за по-гъвкави и многократно използваеми компоненти. Представете си компонент тип „карта“, който се показва по различен начин в зависимост от това дали е поставен в тясна странична лента или в широка основна зона за съдържание. Правилото @when прави това изключително лесно.

Пример за основна Container Query

Първо, трябва да декларирате контейнер. Можете да направите това с помощта на свойството container-type:

.container {
  container-type: inline-size;
}

inline-size позволява контейнерът да бъде заявен въз основа на неговия inline размер (ширина в хоризонтални режими на писане, височина във вертикални режими на писане). Можете също да използвате size, за да заявите и двете измерения, или normal, за да не създавате контейнер за заявки.

Сега можете да използвате @container (често използвано в комбинация с @when), за да приложите стилове въз основа на размера на контейнера:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

В този пример оформлението на .card се променя в зависимост от ширината на контейнера. Когато контейнерът е широк поне 300px, картата показва изображението и текста един до друг. Когато е по-тесен, те се подреждат вертикално.

Ето как можем да използваме @when, за да постигнем същия резултат, потенциално комбиниран с @container в зависимост от поддръжката на браузъра и предпочитанията за кодиране (тъй като @when предлага повече гъвкавост в някои сценарии извън размера на контейнера):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

В този случай `card-container` е име на контейнер, зададено с `@container`, а `container(card-container)` в `@when` проверява дали посоченият контекст на контейнера е активен. Забележка: Поддръжката за функцията `container()` и точният синтаксис може да варират в различните браузъри и версии. Консултирайте се с таблиците за съвместимост на браузърите преди имплементация.

Практически международни примери

• Продуктови списъци в електронната търговия: Показвайте продуктовите списъци по различен начин в зависимост от наличното пространство в мрежата на страницата с категории. По-малък контейнер може да показва само изображението на продукта и цената, докато по-голям контейнер може да включва кратко описание и рейтинг. Това е полезно в различни региони с различни скорости на интернет и типове устройства, което позволява оптимизирано изживяване както на настолни компютри от висок клас, така и на мобилни връзки с ниска честотна лента в развиващите се страни.
• Резюмета на новинарски статии: Регулирайте дължината на резюметата на статиите, показвани на началната страница на новинарски уебсайт, въз основа на ширината на контейнера. В тясна странична лента показвайте само заглавие и няколко думи; в основната зона за съдържание предоставете по-подробно резюме. Вземете предвид езиковите различия, при които някои езици (напр. немски) обикновено имат по-дълги думи и фрази, което се отразява на необходимото пространство за резюметата.
• Уиджети за табла за управление (Dashboard): Променяйте оформлението на уиджетите за табла за управление въз основа на размера на техния контейнер. Малък уиджет може да показва проста диаграма, докато по-голям може да включва подробни статистики и контроли. Приспособете изживяването на таблото за управление към конкретното устройство и размер на екрана на потребителя, като вземете предвид културните предпочитания за визуализация на данни. Например, някои култури може да предпочитат стълбовидни диаграми пред кръгови диаграми.

Използване на @when с персонализирани състояния

Персонализираните състояния ви позволяват да дефинирате свои собствени състояния за елементите и да задействате промени в стила въз основа на тези състояния. Това е особено полезно в сложни уеб приложения, където традиционните CSS псевдокласове като :hover и :active са недостатъчни. Въпреки че персонализираните състояния все още се развиват в браузърните имплементации, правилото @when предоставя обещаващ начин за контролиране на стилове въз основа на тези състояния, когато поддръжката узрее.

Концептуален пример (използване на CSS променливи за симулиране на състояния)

Тъй като нативната поддръжка за персонализирани състояния все още не е универсално достъпна, можем да я симулираме с помощта на CSS променливи и JavaScript.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

В този пример използваме CSS променлива --is-active, за да проследяваме състоянието на елемента. JavaScript кодът превключва стойността на тази променлива, когато елементът бъде кликнат. След това правилото @when прилага различен цвят на фона, когато --is-active е равно на 1. Въпреки че това е заобиколно решение, то демонстрира концепцията за условно стилизиране въз основа на състояние.

Потенциални бъдещи случаи на употреба с истински персонализирани състояния

Когато бъдат имплементирани истински персонализирани състояния, синтаксисът може да изглежда по следния начин (забележка: това е спекулативно и се основава на предложения):

.my-element {
  /* Първоначални стилове */
}

@when :state(my-custom-state) {
  .my-element {
    /* Стилове, когато персонализираното състояние е активно */
  }
}

След това ще използвате JavaScript, за да зададете и премахнете персонализираното състояние:

element.states.add('my-custom-state'); // Активиране на състоянието
element.states.remove('my-custom-state'); // Деактивиране на състоянието

Това би позволило изключително фин контрол върху стилизирането въз основа на логиката на приложението.

Съображения за интернационализация и локализация

• Езици с писане отдясно наляво (RTL): Персонализираните състояния могат да се използват за адаптиране на оформлението и стилизирането на компоненти за RTL езици като арабски и иврит. Например, огледално обръщане на оформлението на навигационно меню, когато е активно специфично RTL състояние.
• Достъпност: Използвайте персонализирани състояния, за да предоставите подобрени функции за достъпност, като например подчертаване на фокусирани елементи или предоставяне на алтернативни текстови описания, когато се задейства състояние на потребителско взаимодействие. Уверете се, че тези промени в състоянието се съобщават ефективно на помощните технологии.
• Културни предпочитания в дизайна: Адаптирайте визуалния облик на компонентите въз основа на културните предпочитания в дизайна. Например, използване на различни цветови схеми или набори от икони въз основа на локала или езика на потребителя.

Работа с CSS променливи и заявки за обхват

Правилото @when може да се използва и с CSS променливи за създаване на динамични и персонализируеми стилове. Можете да прилагате стилове въз основа на стойността на CSS променлива, което позволява на потребителите да персонализират външния вид на вашия уебсайт, без да пишат код.

Пример: Превключване на тема

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

В този пример променливата --theme-color контролира цвета на фона на тялото. Когато е зададена на #000, правилото @when променя --text-color на #fff, създавайки тъмна тема. Потребителите могат след това да променят стойността на --theme-color с помощта на JavaScript или като зададат различна CSS променлива в потребителски стилов лист.

Заявки за обхват

Заявките за обхват ви позволяват да проверите дали дадена стойност попада в определен диапазон. Това може да бъде полезно за създаване на по-сложни условни стилове.

@when (400px <= width <= 800px) {
  .element {
    /* Стилове, прилагани, когато ширината е между 400px и 800px */
  }
}

Въпреки това, точният синтаксис и поддръжката за заявки за обхват в рамките на @when могат да варират. Препоръчително е да се консултирате с най-новите спецификации и таблици за съвместимост на браузърите. Container queries често предоставят по-надеждна и добре поддържана алтернатива за условия, базирани на размер.

Глобална достъпност и потребителски предпочитания

• Теми с висок контраст: Използвайте CSS променливи и правилото @when, за да имплементирате теми с висок контраст, които отговарят на нуждите на потребители със зрителни увреждания. Позволете на потребителите да персонализират цветовата палитра и размерите на шрифта, за да отговорят на техните специфични нужди.
• Намалено движение: Уважавайте предпочитанията на потребителя за намалено движение, като използвате CSS променливи за деактивиране на анимации и преходи, когато потребителят е активирал настройката за „намалено движение“ в своята операционна система. Медийната заявка prefers-reduced-motion може да се комбинира с @when за по-прецизен контрол.
• Корекции на размера на шрифта: Позволете на потребителите да регулират размера на шрифта на уебсайта с помощта на CSS променливи. Използвайте правилото @when, за да адаптирате оформлението и разстоянието между елементите, за да се приспособят към различни размери на шрифта, осигурявайки четливост и използваемост за всички потребители.

Най-добри практики и съображения

• Съвместимост с браузъри: Правилото @when е все още сравнително ново и поддръжката от браузърите все още не е универсална. Винаги проверявайте таблиците за съвместимост на браузърите, преди да го използвате в продукция. Обмислете използването на полифили (polyfills) или резервни решения за по-стари браузъри. Към края на 2024 г. поддръжката от браузърите остава ограничена и разчитането в голяма степен на @container и разумното използване на CSS променливи с JavaScript резервни варианти (fallbacks) често е по-практичен подход.
• Специфичност: Бъдете внимателни със CSS специфичността, когато използвате правилото @when. Уверете се, че вашите условни стилове са достатъчно специфични, за да заменят всички противоречиви стилове.
• Поддръжка: Използвайте CSS променливи и коментари, за да направите кода си по-четлив и лесен за поддръжка. Избягвайте създаването на прекалено сложни условни правила, които са трудни за разбиране и отстраняване на грешки.
• Производителност: Въпреки че правилото @when може да подобри производителността, като намали количеството CSS, което трябва да бъде анализирано, е важно да се използва разумно. Прекомерната употреба на условни правила може да се отрази негативно на производителността, особено на по-стари устройства.
• Прогресивно подобряване: Използвайте прогресивно подобряване (progressive enhancement), за да гарантирате, че вашият уебсайт работи добре, дори ако браузърът не поддържа правилото @when. Осигурете основно, функционално изживяване за всички потребители и след това го подобрявайте прогресивно за браузъри, които поддържат функцията.

Бъдещето на условното стилизиране

Правилото @when представлява значителна стъпка напред в CSS. То позволява по-изразително и динамично стилизиране, проправяйки пътя за по-сложни и адаптивни уеб приложения. С подобряването на поддръжката от браузърите и развитието на спецификацията, правилото @when вероятно ще се превърне в основен инструмент за уеб разработчиците.

По-нататъшният напредък в CSS Houdini и стандартизацията на персонализираните състояния ще подобрят още повече възможностите на @when, позволявайки още по-детайлен контрол върху стилизирането и по-безпроблемна интеграция с JavaScript.

Заключение

CSS правилото @when предлага мощен и гъвкав начин за условно прилагане на стилове въз основа на container queries, персонализирани състояния, CSS променливи и други критерии. Въпреки че поддръжката от браузърите все още се развива, то е ценен инструмент, който да имате в арсенала си за създаване на динамични и адаптивни уеб дизайни, които се приспособяват към различни контексти и потребителски предпочитания. Като разбирате основите на правилото @when и следвате най-добрите практики, можете да отключите пълния му потенциал и да създадете наистина изключителни потребителски изживявания. Не забравяйте винаги да тествате щателно в различни браузъри и устройства, за да осигурите съвместимост и оптимална производителност.

С непрекъснатото развитие на уеб, възприемането на нови CSS функции като @when е от решаващо значение, за да останете пред кривата и да предоставяте авангардни уеб изживявания на глобалната аудитория.