Школа
Веб-разработка

Что нового в ЦСС: Range Syntax в медиавыражениях

Игорь Петров
14 дек 2023
👁 1940   🗩1
Веб-разработка

Что нового в ЦСС: Range Syntax в медиавыражениях

Игорь Петров
14 дек 2023
👁 1940   🗩1
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Медиавыражения в ЦСС — это наборы стилей, которые применяются при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя. Обычно в условии проверяют размер экрана:

@media (max-width: 960px) { 
  /* Стили ниже применятся на экране шириной до 960 пк */
  .header {
    /* … */
  }
      
  .catalog {
    /* … */
  }
}

Недавно появился более наглядный и выразительный формат условий для проверки размеров экрана, с помощью операторов > и < вместо ключевых слов:

Было
@media (max-width: 960px) { 
  /* Стили до ширины 960 пк */
}
    
@media (min-width: 960px) { 
  /* Стили от 961 */
}
    
@media (min-width: 480px) and (max-width: 960px) { 
  /* Стили в диапазоне 480—960 */
}
    
@media (max—height: 768px) { 
  /* Стили при высоте до 768 */
}

Стало
@media (width <= 960px) { 
  /* Стили до ширины 960 пк */
}
    
@media (width > 960px) { 
  /* Стили до 960 */
}
    
@media (480px <= width <= 960px) { 
  /* Стили в диапазоне 480—960 */
}
    
@media (height <= 768px) { 
  /* Стили при высоте до 768 */
}

Новый формат уже работает в большинстве браузеров, кроме устаревших версий.

А чтобы современный ЦСС работал и в старых браузерах, используйте транспайлер — программу для адаптации современного синтаксиса для старых браузеров. Например, CSSNext.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Мария Грибова

У меня вопрос насчëт размера экрана. Когда делаешь сайт в Вебфлоу, для смартфонов там ширина — около 320 пикселей. Я проверила свой Редми 8 Про, разрешение оказалось 2340 × 1080. Это какие‑то другие пиксели, получается? Как они соотносятся?

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

Рекомендуем другие советы