Операторы сравнения в css

Я сейчас изучаю media, вот у меня в курсе написано:

   @media screen and (max-width: 320px) {
    img {
        width: 100%;
    }
}

Означает:

на экранах, ширина которых меньше или равна 320px, картинки будут иметь ширину 100%.

Но я не пойму одного, знак меньше или равно это знак - :?

Тогда как написать больше или равно? Кто знает где найти полный список операторов сравнения в css?


Ответы (1 шт):

Автор решения: DiD

Настоятельно рекомендую вам сменить курс по CSS, так как он научит вас только устаревшим практикам.

@media screen and (max-width: 320px) {
    img {
        width: 100%;
    }
}

Так уже никто не пишет

@media (width <= 320px) {
    img {
        width: 100%;
    }
}

Тогда как написать больше или равно?

@media (width >= 320px) {
    img {
        width: 100%;
    }
}

Можно даже объединить:

@media (320px <= width <= 780px) { 
   /*   */
}

Почему ваш курс учит вас устаревшему CSS?

Предположим, вы верстаете страницу в три блока колонками и ваш резиновый дизайн предусматривает отображение в две колонки или одну колонку в зависимости от размера дисплея.

В вашем курсе будет написано примерно так:

.container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
@media (max-width: 800px) {
  .container {
    grid-template-columns: repeat(2,1fr);  
  }
}
@media (max-width: 400px) {
  .container {
    grid-template-columns: 1fr;  
  }
}

Один и тот же селектор .container используется 3 раза, еще этот мазолящий глаз max-width. На современном CSS лучше написать так:

.container {
  display: grid;
  grid-template-columns: repeat(var(--cols-number,3),1fr);
  gap: 10px;
  @media (width < 800px) {
    --cols-number: 2;
  }
  @media (width < 400px) {
    --cols-number: 1;
  }
}

Один селектор, одно свойство, чистые media-запросы.

Если вы путаетесь в переменных CSS, то будет хорошей привычкой их объявлять заранее:

/* В самом верху CSS */
& {
  --cols-number: 3;
}

В верхнем уровне & { } означает почти тоже самое, что и :root { }.

Есть маленькая тонкость - у & { } меньше специфичность, но вам пока этим можно не забивать голову.

Кстати, для переменных можно объявить строгий тип:

@property --cols-number {
  syntax: '<integer>';
  inherits: true;
  initial-value: 3; 
}

UPD Собрал список годных материалов по CSS. Не знаю, понадобится ли кому-нибудь, собирал получается для себя. Пожалуй, оставлю тут, чтобы не потерялось.

  • MDN - Бывали времена, когда я сказал, что одного сайта MDN достаточно, чтобы освоить все стороны web-разработки. Но время идёт, web развивается, а авторы MDN чуток подустали. В один прекрасный момент сделали циркумцизио. Новый годный контент дают читать за подписку. А так материала накопилось много. Всё, что было накоплено за годы работы, на сайте осталось. Можно пользоваться как справочником.
  • Web.dev - Портал для web-разработчиков. В основном информация ориентирована на начинающих. Но и опытные web-мастера могут найти что-нибудь новое в Блоге. Есть пошаговый учебник. Последние новшества в бОльшей части там отсутствуют, но и устаревшим практикам не научит. Так что учебник там вполне годный, современный и бесплатный.
  • WHATWG - рабочая группа по разработке HTML. У них есть свой сайт, на котором почитать особо нечего. А вот их github очень даже живой.
  • WPT - Unit-тесты для web-технологий. По CSS там конечно тестов маловато, в основном тестируются API, которые используют из JavaScript. Проект живой, ежедневные обновления. Сюда можно ходить подсматривать, как использовать те или иные фичи, на которых не смогли найти толковую документацию.
  • WICG - сообщество любителей обсудить web-технологии. Многие из авторов участвуют в W3C. Рассуждают о старых и новых фичах, о том, что есть хорошо, что - плохо. Участвуют в формировании черновиков стандартов. Народу туда заходит не много, но те, кто заходят - все ребята знаковые, как минимум с 20+ летним опытом.
  • CSSWG - рабочая группа по CSS. В отличии от HTML, у CSS сообщество весьма активное. Это, кстати, видно по результатам их деятельности - CSS разрастается как грибница после дождя. Контингент авторов - с опытом 10+ лет минимум. Здесь можно почитать обсуждения. Предлагают и новые идеи. Именно тут рождаются новые фичи в Web-технологиях.
  • Черновики стандартов CSS - это подраздел сайта CSSWG (см. выше). Но ссылку выделил отдельно. Тут можно почитать результаты творчества CSSWG.
  • Can I Use - Сайт ведёт активный мониторинг поддержки фичей в различных версиях браузеров. Тут следует смотреть стоит ли использовать ту или иную фичу сегодня, или до её использования следует немного подождать? Уровень поддержки каждой фичи замеряется в процентном соотношении пользователей браузеров, которые поддерживают фичу к общему количеству пользователей всех браузеров. Весьма залипательные метрики. Новичкам будет также полезно смотреть в список всех фич - справочной информации там нет, но список фич полный. Если видите тут что-либо в первый раз в жизни, то сразу следует погуглить фичу.
  • СSS-tricks - блог со статьями про CSS от разных разработчиков. Проект DigitalOcean. Многие новости про CSS видят свет впервые именно тут.
  • Developer.Chrome.com - сайт разработчиков браузера Chrome. Новости из этого блога обязательны к прочтению.
  • Webkit - сайт разработчиков самого популярного браузерного движка. В блоге в последнее время инфа появляется редко, но если что-то тут пишут, это будет по-любому что-то важное.
  • Codepen - сервис для обкатывания web-идей. Простой редактор HTML+CSS+JS с моментальным предпросмотром. Но сам сайт интересен не столько как редактор, сколько своей социальной составляющей. Лучшая подборка нестандартных супер-идей. Регулярно проводятся различные челенжы, за счет чего постоянно обновляются тренды. Здесь можно потратить много часов. Также сюда можно заходить за вдохновением в периоды депрессивной фазы СДВГ. Если всё достало, то эти мини-демошки помогут завести мозг на работу.
→ Ссылка