Комментарии 51
в вашем случае чтобы сделать границу вокруг контента, все равно нужно будет вкладывать какой-то контейнер внутрь, или фон для области контента, т.е. по вложенности будет тоже самое…
Что мы делаем? На любом размере экрана мы вычитаем из 100% ширины блочного элемента (section в данном случае) сумму половины текущей ширины и корректирующего значения в 590px, что позволяет держать контент фиксированно в 1180px, когда экран больше или равен этому значению. В общем мне трудно это объяснить.
Наверно проще объяснить как: (100% - 1180px)/2
= 50% - 590px
, где (100% - 1180px)
— это сумма боковых полей.
calc(100% - (50% + 590px))
воспринимать труднее чем дополнительный div в вёрстке?Заметил calc(100% — (50% + 590px)). Проще написать calc(50% — 590px), тем более, что у меня как-то были проблемы с вложенными действиями, приходилось писать calc(100% — calc(...)). А в остальном, всё довольно очевидно для тех, кто занимается вёрсткой. Я сперва думал, что сейчас тут гриды будут, но нет.
Можно, конечно, придумать дополнительный класс и ему прописать нужные свойста, а потом добавлять к секции (или миксинами), но как кому удобнее.
Нужно придумывать какой-то класс для блока-обёртки.
Так себе минус, добавляем к имени класса "__inner" и вопрос решен ).
Про все остальные минуса контейнера тоже можно поспорить.
<section class="Mega-Section">
<div class="Container">
...
</div>
</section>
писать:
<section class="Mega-Section Container">
...
</section>
гораздо круче.
Мне подход понравился и я не могу сходу придумать почему этот метод может не работать. Есть идеи?
Я не имел ввиду тупой перенос класса контейнера на секцию. Я имел ввиду этому классу установить предложенные вами паддинги и использовать его как эдакий миксин в секциях где раньше нужна была еще одна обертка. Я просто не люблю стили вешать на теги.
И мой вопрос именно про то, когда ваша идея не будет работать? Выглядит очень хорошо на первый взгляд.
Не надо вешать правило на теги. Это очень, очень, очень плохая практика за редкими единичными исключениями
Количество элементов можно уменьшить, если смешать класcы brif-wrapper
и container
на одном DOM-узле. А так представленная техника рассматривалась достаточно давно в книге CSS Secrets за авторством Lea Verou.
P.S.: почему используете дробные пиксели в медиа запросах, например (min-width: 1199.98px)
?
Они уже есть в спецификации и даже кое-где поддерживаются. https://www.w3.org/TR/mediaqueries-4/#range-context
Дробные пиксели взял у системы сеток bootstrap. Не вдавался в подробности почему именно дробные.
Вероятно, чтобы дробные размеры вьюпорта, иногда возникающие при неродном масштабе а-ля 90%, не попадали в "зазоры" между соседними диапазонами.
calc(50vw + 590px)
Тут нужен знак "минус"
Рекомендую использовать не %, а vw. Чтобы ширина считалась не от родителя, а от ширины области промотора браузера. Так просто надёжнее.
100% это ширина контента, где то 1903px
100vw это 1903 + scrollbar
Но «техническая» сторона — не всегда определяющая. Важнее может оказаться борьба со сложностью, читаемость кода, поддержка неких браузеров и т.д. И тогда повышенная вложенность блоков (или более простой способ верстки) уже не важна, потому как приоритеты расставлены иначе.
Словом, все зависит от задач. А задачи у всех разные. Так что будьте добры, избегайте обощений: «все верстальщики используют», «его используют абсолютно везде», «вы почувствуете некоторое облегчение» и т.д.
Насчет ".container «родился» в bootstrap" — вообще из ряда вон. Колонка (или две) контента по центру родилась тогда, когда дизайнеры начали отходить от сайтов на 100% ширины страницы и стали пробовать фикс. Бутстрапа тогда и в помине не было.
Насчет подводных камней calc-метода — при желании можно придумать какие-то варианты. В основном, связанные с границами. Например, бывает что в одном блоке натасованы элементы как шириной колонки, так и шириной экрана. Или нужны absolute блоки по краю колонки. «Технически» оно явно решаемо. Но есть ли практический смысл решать — зависит от задач.
С background'ами не оберешься проблем — позиционирование и т.д.
Или прибежит заказчик и попросит сделать подложку красного цвета у контентной части, или насядут рекламщики и заставят навтыкать баннеров абсолютом.
Ну и опять же пресловутый перформанс, который на тяжелых страницах может здорово аукнуться.
А так, конечно, пользоваться можно, но исключительно с умом и в простых случаях.
Но я зарекся делать такие не гибкие штуки, ибо процент возможных последующих страданий резко возрастает.
На самом деле описаный вами способ ведет себя иначе, чем ".container". При использовании вашего способа мы получаем фиксированный по ширине контейнер в каждом диапазоне от медиа-минимума до медиа-максимума. А ".container" с авто-марджинами плавно меняет размер от минимума до указанного «max-width». Что позволяет более эффективно использовать пространство на планшетах-мобилах нестандартных разрешений.
Это не совсем так. Если размер экрана будет меньше, чем заданная ширина контейнера, то padding'ы станут равными нулю, так как выражение внутри calc(50% - width / 2)
будет отрицательным.
Но тут всплывает еще одна проблема — нам нужны какие-то минимальные зазоры, чтобы контент не прилипал к краям экрана. Тут могла бы помочь функция max
, но она пока поддерживается только в новых Safari. Минимальный padding
можно эмулировать с помощью прозрачного border
, но в таком случае изначально элегантное решение обрастает костылями.
Набросал пример — https://jsfiddle.net/6kqa4t7n/.
Я говорил про то, что в диапазоне от одного медиа-брейкпоинта до следующего контент-блок будет фиксированной ширины, увеличиваться будут только паддинги.
Если взять пример автора, то на устройстве с экраном 580px и устройстве с экраном 760px ширина контейнера всегда будет 540px.
А в случае с .container (padding: 0 15px; max-width: 1100px; margin: 0 auto;) на всех экранах до 1101px шириной контейнер будет занимать все доступное пространство. Что порой бывает критично.
В примерах автора это не так очевидно, но данная техника позволяет добиться желаемого. Выставите значение переменной --container-width
, например в 1200px, и посмотрите, как это работает — https://jsfiddle.net/z86wt2uh/
А то на Тостере сегодня один персонаж так и не понял, почему его страничка тормозит, где анимации вагон, в том числе и вот этот вот вычислитель calc.
Критикуя-предлагаю:
аналогично вашему методу я использую один блок, а если необходимо закрасить пустые места слева и справа, то на помощь нам спешат волшебники :before и :after, задавая им заведомо большую ширину.
При использовании плагинов для группировки медиа запросов, которые включены по телу css, они перебрасываются в конец css файла и, получая больший приоритет, перекрывают свойства паддинга.
.container больше не нужен