M

MLOG

Български

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

CSS @when правило: Овладяване на условното прилагане на стилове

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

Какво е CSS @when правилото?

@when правилото е условно at-правило в CSS, което ви позволява да дефинирате стилове, които се прилагат само ако определени условия са верни. Мислете за него като за if израз за вашия CSS. За разлика от медийните заявки, които се фокусират предимно върху характеристиките на прозореца (размер на екрана, ориентация и т.н.), @when предоставя по-общ и разширяем начин за справяне с условното стилизиране. То разширява съществуващи условни at-правила като @supports и @media.

Ключови предимства на използването на @when

Синтаксис на @when правилото

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

<условие> може да бъде всеки валиден булев израз, който се оценява на вярно или невярно. Този израз често включва:

Практически примери за @when в действие

Нека разгледаме някои практически примери, за да илюстрираме силата и гъвкавостта на @when правилото.

1. Адаптивен дизайн с @when и медийни заявки

Най-често срещаният случай на употреба на @when е адаптивният дизайн, където коригирате стиловете според размера на екрана. Докато медийните заявки могат да постигнат това сами, @when предоставя по-структуриран и четим подход, особено когато се работи със сложни условия.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

В този пример стиловете в @when блока се прилагат само когато ширината на екрана е между 768px и 1023px (типичен размер на таблет). Това предоставя ясен и кратък начин за дефиниране на стилове за специфични диапазони на прозорци.

Забележка за интернационализация: Адаптивният дизайн е критичен за глобална аудитория. Обмислете променящи се размери на екрана в различни региони. Например, мобилната употреба е по-висока в някои страни, което прави мобилно-първия дизайн още по-важен.

2. Откриване на функции с @when и @supports

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

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Резервни стилове за браузъри, които не поддържат grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Коригирайте ширината за по-стари браузъри */
  }
}

Тук използваме @supports, за да проверим дали браузърът поддържа CSS Grid Layout. Ако е така, прилагаме стилове, базирани на grid, към .container. Ако не, предоставяме резервни стилове, използващи flexbox, за да гарантираме, че подобно оформление се постига в по-стари браузъри.

Забележка за глобална достъпност: Откриването на функции е важно за достъпността. По-старите браузъри може да нямат поддръжка за по-нови ARIA атрибути или семантични HTML5 елементи. Осигурете подходящи резервни решения, за да гарантирате, че съдържанието остава достъпно.

3. Комбиниране на медийни заявки и заявки за функции

Истинската сила на @when идва от способността му да комбинира медийни заявки и заявки за функции, за да създава по-сложни и нюансирани правила за условно стилизиране.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

В този пример елементът .modal ще има размазана задна част само когато ширината на екрана е поне 768px и браузърът поддържа свойството backdrop-filter. Това ви позволява да създавате визуално привлекателни ефекти в модерни браузъри, като същевременно избягвате потенциални проблеми с производителността или грешки при рендиране в по-стари.

4. Стилизиране въз основа на персонализирани свойства (CSS променливи)

@when може да се използва и заедно с CSS Custom Properties (известни още като CSS променливи), за да се създаде динамично стилизиране, управлявано от състояние. Можете да използвате JavaScript, за да актуализирате стойността на персонализирано свойство, и след това да използвате @when, за да приложите различни стилове въз основа на тази стойност.

Първо, дефинирайте персонализирано свойство:

:root {
  --theme-color: #007bff; /* Цвят на темата по подразбиране */
  --is-dark-mode: false;
}

След това използвайте @when, за да приложите стилове въз основа на стойността на персонализираното свойство:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

И накрая, използвайте JavaScript, за да превключите стойността на --is-dark-mode персонализираното свойство:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Това позволява на потребителите да превключват между светли и тъмни теми, като CSS се актуализира динамично въз основа на стойността на персонализираното свойство. Имайте предвид, че директното сравнение на CSS променливи в `@when` може да не се поддържа универсално във всички браузъри. Вместо това може да се наложи да използвате заобиколно решение с медийна заявка, която проверява за ненулева стойност: 

@when ( --is-dark-mode > 0 ) { ... }

Въпреки това, уверете се, че персонализираното свойство има числова стойност, за да функционира правилно.

Забележка за достъпност: Предоставянето на алтернативни теми (напр. тъмен режим) е от решаващо значение за достъпността. Потребители с увреждания на зрението може да се възползват от теми с висок контраст. Уверете се, че превключвателят на вашата тема е достъпен чрез клавиатура и екранни четци.

5. Стилизиране въз основа на атрибути за данни

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

Например, да кажем, че имате списък със задачи и всяка задача има атрибут data-status, който показва нейното състояние (напр. "todo", "in-progress", "completed"). Можете да използвате @when, за да стилизирате всяка задача по различен начин въз основа на нейното състояние.

[data-status="todo"] {
  /* Стили по подразбиране за todo задачи */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Забележка: поддръжката за условието за тест attribute() може да бъде ограничена или да не бъде напълно имплементирана във всички браузъри понастоящем. Винаги тествайте щателно.

Съвместимост с браузъри и Polyfills

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

Винаги се консултирайте с ресурси като Can I use..., за да проверите текущия статус на браузърната поддръжка на @when и свързаните с него функции.

Добри практики за използване на @when

Заключение

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

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