Операторы сравнения в css
Я сейчас изучаю media, вот у меня в курсе написано:
@media screen and (max-width: 320px) {
img {
width: 100%;
}
}
Означает:
на экранах, ширина которых меньше или равна 320px, картинки будут иметь ширину 100%.
Но я не пойму одного, знак меньше или равно это знак - :?
Тогда как написать больше или равно? Кто знает где найти полный список операторов сравнения в css?
Ответы (1 шт):
Настоятельно рекомендую вам сменить курс по 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 с моментальным предпросмотром. Но сам сайт интересен не столько как редактор, сколько своей социальной составляющей. Лучшая подборка нестандартных супер-идей. Регулярно проводятся различные челенжы, за счет чего постоянно обновляются тренды. Здесь можно потратить много часов. Также сюда можно заходить за вдохновением в периоды депрессивной фазы СДВГ. Если всё достало, то эти мини-демошки помогут завести мозг на работу.