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

@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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

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