Станислав Григорьев, ну, если это табы, тогда никакой CSS вам не поможет нормально. Вам через JS нужно ставить класс к активному табу и связанной с ним кнопке.
Проблема в подходе к вёрстке. Неудивительно, что у вас там проблемы, раз в таком вопросе и для таких целей вы опираетесь на viewport-единицы. Посмотрите, что у вас будет на экране смартфона (iPhone X):
APELSINKA_GIRL, единственный хоть сколько-нибудь продвинутый программный комплекс а-ля русский + маркетинг (все у нас знают, что есть 1С, хотя СMS Bitrix вообще не их разработка изначально) + поддержка на русском (хреновая) + куча клиентов 1С в корпоративном секторе к моменту начала внедрения продукта на рынок + якобы супер-интеграция с 1С.
APELSINKA_GIRL, спасибо! К сожалению, я не такой большой специалист по Bitrix24. Так бы я, конечно, какие-то мысли бы озвучил. Но то, что я видел (структура, особенности, стандартные шаблоны, методы и т. п.) — конечно, не дали мне радости и желания работать с данной CMS впредь. Верстал ровно один сайт на. Bitrix — среднего размера интернет-магазин. Помимо времени на решение проблем с дизайном, версткой и руководством, пришлось слушать многие матюки в мою сторону от программиста. Нелестные слова звучали, потому что хоть решения у меня «красивые и современные» (ага-ага), но «давай упрощай», потому что Bitrix не умеет это, Bitrix не умеет то, Bitrix не умеет сё. Пришлось местами очень смешные вещь городить.
Работать в одиночку с Bitrix — наверное, утопия, ибо он слишком затратный данный программный комплекс. Однако, при должном уровне навыков, можно стать востребованным специалистом на рынке, потому что Bitrix в России весьма популярен, а с учетом его сложности (на ровном месте), грамотный специалист будет стоить дорого.
P. S. Разговаривал с одним из разработчиков Bitrix. Единственное, что он сказал, что Bitrix — это говно.
Согласен с автором выше. На моих ресурсах пока, к сожалению, нельзя, потому что есть 10–15% пользователей, у которых браузеры нормально (или совсем) не поддерживают Grid.
Изучать данную технологию нужно сейчас, это абсолютный стандарт самого ближайшего будущего.
Adamos, про PNG. На телефоне не напечатал, когда дополнял вопрос несколько раз, что «при соотносимом с JPG размере файла». И так там еле уместил складно мысли, пока ехал в такси :)) Сейчас, поправлю, спасибо!
А про SVG — как я написал в post scriptum, надо смотреть на конкретном примере. Описать все случаи использования форматов невозможно. К примеру, я не затронул тему анимирования SVG, а там ещё несколько подтем про производительность, поддержку браузеров, ну и т. п. Сейчас, кстати, добавлю это.
SmthTo, если, говоря о media-query, вы имеете в виду CSS media-query, то тут вам лучше прочитать, как браузеры обрабатывают их. Встраивая media-запросы прямо в разметку в случае с img и picture мы упрощаем себя и браузеру жизнь, а также кучу проблем.
Более того, контролируя через CSS показ конкретных img, мы идём против общепринятых web-технологий, а также можем встретиться с проблемой загрузки браузером ненужных в конкретном случае картинок (плюс, не все браузеры игнорируют картинки, которые в display: none). Такие вещи не должны зависеть от CSS
