CSS, могу ли я написать синтаксис if/else?

CSS

Эта статья приняла участие"Проект "Звезда раскопок"", чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Автор: Кентон де Йонг. Переводчик: Front-end Xiaozhi Источник: codingnconcept

Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.

Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.

Когда я начал писать CSS в 2011 году, я никогда не сомневался, насколько язык изменится. Я также помню, как использовалPIE.htcПозволятьborder-radiusМой коллега сделал PHP-скрипт, совместимый со всеми браузерами, для создания PNG для закругления углов.

2081496672-617369ad623aa.gif

Однако за последние несколько лет появилось большое количество новых возможностей CSS. Некоторые из этих утверждений также можно рассматривать какifпредложения, такие как@supportsстиль:

@supports (border-radius: 50%) {
  // don't use PIE.htc! {}
}

Существует также классический медиа-запрос, который существует уже более десяти лет:

@media (max-width: 1000px) {
  //maybe a mobile sized device? {}
}

И новыйcamp(), немного другое:

width: clamp(1000px, 50%, 10vw);

но вести себя так:

width: clamp(1000px >= (50% >= 10vw));

Похоже на головную боль.

头疼.gif

Но можно сказать, что это толькоif 语句. если мы хотимif/elseутверждение, нам нужно сделать что-то вроде этого.

@media (max-width: 1000px) and (prefers-color-scheme: dark) {
   //maybe a mobile device in dark mode {}
}
@media (max-width: 1000px) and (prefers-color-scheme: light) {
   //maybe a mobile device in light mode {}
}

Это очень раздражает.

烦人.gif

Но хорошая новость в том, что новое предложение@WhenОсобенности могут решить наши проблемы. Он используется следующим образом:

@when media(max-width: 1000px) {
   // 做点什么
}

Это круто, но это еще кручеelse:

@when media(max-width: 1000px) {
   // 移动
} @else {
   // 平板
}

Вы могли подумать об этом, и должно бытьelse ifДа, да есть:

@when media(max-width: 1000px) {
   // 平板
} @else media(max-width: 700px) { {
   // 移动 
} @else {
   // PC
}

2330822143-61736e7235b83.gif

Также возможно, что мы могли бы сделать это:

@when media(max-width: 700px) {
   @when (prefers-color-scheme: dark) {
      //dark mode on mobile device
   } @else {
      //light mode on mobile device 
   }
}

Я говорю"возможно"Поскольку эта функция все еще находится в стадии предложения, но я верю, что в конечном итоге она появится (Я не вышел, я покрасил волосы в зеленый цвет).

В настоящее время (20211023), какая поддержка браузера? нуль. мало, чтобы дажеCan I Useничего. Но поскольку новые стили CSS продолжают появляться, я уверен, что мы скоро это увидим.

Ошибки, которые могут быть в редактировании, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки потом, много времени тратится на отладку журнала.Кстати, всем рекомендую полезный инструмент мониторинга BUG.Fundebug.

оригинал:Кентон — это сайт one.medium.com/CSS-is-Fina…

общаться с

Есть мечта, есть галантерейные товары, поиск в WeChat【Переезд в мир】Обратите внимание на эту мудрость чаши-щетки, которая все еще моет посуду ранним утром.

Эта статьяGitHubGitHub.com/QQ449245884…Включено, и есть полные тестовые площадки, материалы и мой цикл статей для интервью с производителями первой линии.

Например, в конце представленной статьи напишите «Добро пожаловать к обсуждению в области комментариев, официальный представитель Nuggets свяжется с вами».Проект «Звезда раскопок»После мероприятия в комментариях будет разыграно 100 штук Наггетсов.Подробнее о лотерее читайте в статье о мероприятии».

Категории