Height, width и overflow — CSS правила для описания области контента при блочной верстке

Содержание материала:

Свойство CSS overflow

Если вы помещаете текст в блок div , то ширина этого элемента увеличивается в зависимости от области, охватываемой текстом. Но если задать ограничение по ширине или высоте элемента, появляется полоса прокрутки, когда содержимое элемента не может вписаться в него полностью.

Это касается полос прокрутки по умолчанию. Можно контролировать поведение содержимого элемента, когда он выходит за пределы блока, с помощью CSS-свойства overflow hidden .

Значения свойства overflow

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не « заталкивать » содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

scroll: добавляет полосы прокрутки и скрывает содержимое, выходящее за пределы блока элемента. Его можно увидеть с помощью полос прокрутки.

auto: добавляет полосы прокрутки, если необходимо.

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

Теперь осмотрим, как каждое из этих значений влияет на контент.

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

Ширина и высота элемента div установлена на 200px и 100px . Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

hidden

CSS overflow: hidden скрывает содержимое, выходящее за пределы контейнера.

scroll

Добавляет полосы прокрутки, даже если содержимое не выходит за пределы контейнера. Обратите внимание, что overflow: scroll добавляет горизонтальную и вертикальную полосы прокрутки.

В приведенной ниже демо-версии полосы прокрутки добавлены для обоих блоков, даже когда размеры содержимого не превышают высоту и ширину второго блока.

Это значение похоже на значение scroll , но полосы прокрутки добавляются только при необходимости. В приведенной ниже демо-версии overflow: auto добавляет вертикальную полосу прокрутки к первому блоку, содержимое которого превышает его высоту блока. А во втором случае полосы прокрутки не добавляются.

Также можно управлять тем, как содержимое, выходящее за пределы контейнера, ведет себя в горизонтальном и вертикальном направлении. Для этого используются два других свойства, о которых речь пойдет ниже.

overflow-x и overflow-y

Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

Если ширина внешнего блока составляет 200 пикселей , а внутреннего — 250 пикселей , то задав для внешнего блока overflow-x: auto , мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Если высота внешнего блока 100 пикселей , а высота внутреннего блока — 150 пикселей , то overflow-y: auto добавляет вертикальную полосу прокрутки.

Разбивка длинного текста

Предположим, что одно слово превышает ширину контейнера, и вы не хотите ни скрывать выходящий за пределы контейнера текст, ни добавлять полосу прокрутки. В этом случае можно разбить слово и принудительно перенести его на новую строку, используя свойство word-wrap , указав для него значение break-word .

Если мы укажем word-wrap: break-word , выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden .

Поддержка браузерами

Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.

Данная публикация представляет собой перевод статьи « CSS overflow Property » , подготовленной дружной командой проекта Интернет-технологии.ру

Параметры css w >

Здравствуйте, уважаемые читатели! Сегодня мы рассмотрим как задавать размеры блочных элементов веб страницы с помощью css свойств и настроить отображение контента в случае если он не помещается в элементе.

w >С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto| |inherit
height: auto| |inherit

В качестве значений можно использовать любые доступные в css единицы измерения — например, пикселы (px), дюймы (in), пункты (pt) и др.:

Кроме абсолютных единиц можно задавать относительное значение размера элементов в процентах. В этом случае ширина и высота элемента будет зависеть от ширины и высоты родительского элемента. Если родитель явно не указан, то размеры будут зависеть от окна браузера.

Значение auto отдает управление размерами элемента веб-браузеру и является значением по умолчанию. В этом случае размеры элемента будут такие, чтобы в нем полностью поместилось все его содержимое.

Рассмотрим несколько примеров.

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.

Свойство overflow

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.

Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow .

visible

Если не ставить overflow явно или поставить visible , то содержимое отображается за границами блока.

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

hidden

Переполняющее содержимое не отображается.

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

При переполнении отображается полоса прокрутки.

scroll

Полоса прокрутки отображается всегда.

То же самое, что auto , но полоса прокрутки видна всегда, даже если переполнения нет.

overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y :

Итого

Свойства overflow-x/overflow-y (или оба одновременно: overflow ) задают поведение контейнера при переполнении:

visible По умолчанию, содержимое вылезает за границы блока. hidden Переполняющее содержимое невидимо. auto Полоса прокрутки при переполнении. scroll Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float . Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow , то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

Как задать высоту блоку по содержимому?

Есть header, в нем контейнер, внутри контент :

Нужно, чтобы высота header’a определялась содержимым и была адаптивна, у меня почему-то при каждом разрешении она остаётся одинаковой.

  • Вопрос задан более года назад
  • 855 просмотров

Высота div по умолчанию считается по содержимому. Ну и еще у вас задана минимальная высота. Соответственно, пока контента меньше, чем на 450px, высота блока будет одинаковой и равной этим 450px.

Либо содержимое float или абсолюты или что-то в таком роде.

Если высота считает не так, значит вы показали не все стили, влияющие на этот элемент.

Очередной блог фрилансера

коротко и полезно о веб-разработке

Изучаем CSS-позиционирование за 10 шагов

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float.

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

На данном этапе может показаться, что относительное позиционирование не так уж и полезно, но, не спешите с выводами, далее в статье, вы узнаете, для чего его можно использовать.

3. position: absolute

При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения.

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.

6. Две колонки

Вооружившись знаниями из предыдущих шагов, можно попробовать сделать две колонки, с помощью относительного и абсолютного позиционирования.

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

Решение не очень подходящее, поскольку мы никогда не знаем заранее, какого размера текст, будет расположен в колонках, и какой шрифт будет использован.

8. Float

Для колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант.

Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто.

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

Или же назначить родительскому контейнеру свойство overflow: hidden

В любом случае, результат будет один и тот же.

Заключение

Сегодня были рассмотрены только базовые приемы позиционирования, и самые простые примеры. Также, в помощь начинающим верстальщикам я всегда рекомендую цикл статей Ивана Сагалаева, которые в свое время мне очень помогли.

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

Height, width и overflow — CSS правила для описания области контента при блочной верстке

Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.

Особенности вычисления ширины и высоты

Для определения ширины либо высоты объекта можно использовать любые единицы измерения длины в CSS. Наиболее просты в понимании пикселы. Если вы используете процентную запись, имейте в виду, что в этом случае ширина объекта будет зависеть от ширины его родителя. Если такового нет, то ширина элемента вычисляется, исходя из ширины окна браузера (при изменении пользователем ширины окна значение width будет пересчитано).

Топ-пост этого месяца:  Вебмастера сообщают от глобальном сбое индексирования AMP-страниц

В качестве значения ширины можно использовать и единицу em , которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px . Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em , то ширина составит 2×24px = 48 пикселов. Если размер шрифта не задан, он будет унаследован.

Высота height , заданная в процентах, вычисляется аналогичным образом, что и ширина, но расчет основывается уже на высоте родительского элемента, а не на его ширине. Если родитель отсутствует, высота будет зависеть от высоты окна браузера.

Процентная ширина и высота дочернего элемента вычисляются на основании размеров родителя

Что входит в ширину и высоту

Сразу стоит запомнить, что у свойств width и height есть особенность — они не включают в себя значения margin , padding и border . Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.

Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина — это сумма значений, таких как width , padding , border и margin . Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS.

Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:

Для подсчета фактической ширины элемента выполним сложение:

Рекомендации по высоте

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

Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.

Другой способ избежать развала верстки — использовать запись overflow: auto . В таком случае, если высота содержимого будет превышать значение height своего контейнера, браузер добавит к контейнеру полосу прокрутки.

В следующем уроке вы узнаете, как можно переопределять ширину элемента с помощью интересного и очень полезного свойства box-sizing.

Блочная верстка сайта

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега , то концепция блочной вёрстки основана на активном использовании универсальных тегов

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок

Конечный HTML-документ представляет собой набор блоков

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

Разберём некоторые моменты.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

С помощью стилей мы последовательно оформляем содержимое тега и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

5 нетривиальных моментов разработки фронтэнда на CSS

Ребята из Noveo нашли статью о некоторых аспектах использования CSS, на которые при верстке следует обратить особое внимание. После перевода материал был отдан на вычитку штатной верстальщице Светлане. Светлана нашла в статье несколько спорных пунктов, добавила комментарии и предложила свои варианты решений — предлагаем вам почитать интересную полемику двух фронтенд-разработчиков!

Фронтэнд-разработчик WebiNerds Евгений Половный охотно делится знаниями и опытом с коллегами, организуя тренинги и воркшопы, а также с читателями ГитХаба, публикуя часть своих материалов в книге на GitHub. WebiNerds адаптировали части этой книги для настоящей статьи.

Введение

Многие разработчики считают, что сделали достаточно, если что-то «работает». Я думаю, сегодня это одна из самых больших проблем в нашей индустрии. На своем последнем воркшопе я попытался обратить внимание на некоторые нюансы фронтенд-разработки, указать на проблемы, которые мы часто встречаем, работая с CSS.

Возьмем, например, флексбокс, представленный в CSS3. К сожалению, многие программисты, работающие во фронт-энд-разработке, не изучают флексбокс — или, по крайней мере, не делают это тщательно. Очень важно понимать разницу между флексбоксом и float-макетом, не только в общем, но и на глубоком уровне. Разработчики вполне могут написать какой-то работающий код (т.е. на экране визуально все нормально работает), не понимая, что происходит за фасадом — а следовало бы.

У CSS много нюансов. Рассмотрим 5 интересных моментов этой технологии, включая flexbox и float, на которые стоит обратить особое внимание.

Свойство CSS Float

Свойство CSS float представляет собой значительное усложнение для разработчика: обтекаемые элементы не остаются в обычном потоке рендеринга. Другими словами, позиция обтекаемых элементов рассчитывается иначе — от позиции других, не обтекаемых элементов. По умолчанию поток для HTML-элементов линейный. Элементы размещаются на странице слева направо, и затем переходят на следующую строку, когда на текущей больше нет места. Элементы, к которым применяется float , выпадают из этого потока.

Здесь мы должны приостановиться и рассмотреть термин «поток рендеринга». Этот термин может сбивать с толку. Что он на самом деле значит? Когда веб-страница загружается, наш браузер сначала загружает структуру Document Object Model (DOM). Затем, прежде чем отрисовать страницу, браузер должен найти блоки в DOM, соответствующие свойствам CSS в CSS файле (или файлах). Поток описывает порядок операций для механизма визуализации браузера. По сути поток — это то, как браузер решает, где каждый элемент будет размещен перед рендерингом. Только после того, как браузер все это сделает, сайт будет визуально отражен на экране.

Направление потока с выровненными элементами.

Трудность с CSS Float

В тот момент, когда строится HTML-страничка, обтекаемые элементы не распознают другие элементы в DOM (Document Object Model), за исключением текстовых элементов, таких как

или
. Происходит это потому, что обтекаемые элементы «выравниваются» — вдобавок к основным элементам — по границе родительского элемента. Из-за этого элементы со свойством CSS float не всегда ведут себя одинаково во всех контекстах. В частности, обтекаемый элемент может неожиданно отреагировать, когда он расположен рядом с нетекстовыми элементами, такими как блочные (

) или строчно-блочные элементы ( ), или рядом с

. Неожиданное поведение может возникать потому, что отображение обтекаемых элементов зависит от окружающих их объектов, и обтекаемые элементы «не видят» элементы нетекстовые .

Мы можем решить эту проблему, добавив элемент к DOM между других элементов:

Но как мы знаем, пустые и нефункциональные элементы в DOM – плохая практика.

Однако у этой проблемы есть простое решение. Мы можем добавить псевдо-класс, способствующий нормальному рендеринговому потоку. Когда этот псевдо-класс добавлен, элементы могут распознавать друг друга. Если кратко — псевдо-класс заставляет необтекаемые элементы реагировать на расположение обтекаемых элементов.

Есть и более элегантное решение. Мы просто добавляем отдельный класс для элементов, требующих очистки. Этот класс CSS устраняет необходимость нефункциональных элементов в DOM:

Светлана: Способов «зачистки» ( clearfix ) обтекаемых элементов было придумано довольно много, но как известно, чем меньше строчек, тем легче файл. Вот самый короткий вариант из всех существующих:

Этот способ зачистки будет работать во всех современных браузерах, поддерживающих псевдоэлементы (IE9+). Если требуется поддержка IE8, просто удалите одно двоеточие перед after. Подробное описание этого способа можно прочитать здесь: http://nicolasgallagher.com/micro-clearfix-hack/.

Свойство CSS Position

Свойство CSS position на самом деле довольно простое по сути. Однако нельзя забывать, что абсолютные и фиксированные элементы — как обтекаемые элементы — не участвуют в потоке рендеринга. При этом относительные и статично позиционированные элементы остаются в потоке рендеринга. По этой причине нам нужно крайне осознанно и внимательно использовать свойство position . Когда бы мы его ни использовали, мы должны понимать глубинный смысл того, что мы делаем.

Светлана: Автор безусловно прав в том, что относительно позиционированные элементы не влияют на основной поток. Однако здесь стоит внести ясность: в потоке резервируется место под элемент, как если бы к нему применялось свойство position: static . После этого элемент смещается на указанное расстояние (свойства top , bottom , left и right ). В своем новом месте обитания элемент уже не в потоке и может наслаиваться на другие элементы.

Похожую картину можно наблюдать при использовании CSS3 трансформаций, но это уже тема для отдельной статьи.

Распространенная ошибка при работе с position : попытка растянуть элемент с position: absolute до полной ширины страницы:

Это работает до тех пор, пока вы не попытаетесь прокрутить страницу вниз. Тогда вы понимаете, что ширина, высота и расположение рассчитаны не на основе размера документа, но на основе размера экрана. Этот объект с абсолютным позиционированием выпал из потока.

Сам поток по себе не вызывает проблем. Но нужно осознавать, что элементы с абсолютным и фиксированным позиционированием ускользают из потока рендеринга.

Светлана: Говоря про позиционирование элементов и их рендеринг относительно друг друга, очень важно упомянуть такой термин, как «контекст наложения» (stacking context). Это не самый простой термин из вокабуляра фронтендщика, но я попробую объяснить его на пальцах.

Контекст наложения тесно связан с понятием потока. Представьте себе нормальный поток рендеринга. Ко всем элементам применяется position: static (значение по умолчанию), никаких float’ов и других влияющих на поток свойств нет. В этом случае есть всего один контекст наложения, принадлежащий окну браузера. Именно по этой причине абсолютно позиционированный div в примере выше будет рассчитывать высоту и ширину от окна браузера, а не от тега html или body .

Теперь давайте создадим еще один контекст наложения. Свойств, которые за это отвечают, существует несколько: position (кроме static ), transform и даже opacity . Предлагаю использовать наиболее распространенный прием – добавим body свойство position: relative .

В результе создается новый контекст наложения относительно тега body . Т.е. теперь любой вложенный в body тег с position: absolute будет позиционироваться относительно body .

Очень важно переварить и усвоить эту идею. Этот прием частенько называют «позиционирование относительно родителя», и он бывает чрезвычайно полезен в ряде случаев, будь то центрирование или responsive-таблицы.

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

Контекст наложения влияет на абсолютно позиционированные блоки. Блоки с фиксированным позиционированием всегда будут располагаться и рассчитывать свои значения в % (например, высоту) относительно окна браузера.

Еще хотелось бы внести ясность в то, что значат значения свойств top , bottom , left и right . Казалось бы, все просто: это значения, говорящие браузеру, где отобразить блок. Это так, но… Рассмотрим пример: есть блок со значением top: 100px . Если у него позиционирование relative , то это будет означать, что браузер отрисует его на 100px ниже его первоначального отображения. При этом помним, что место под его первоначальное отображение резервируется.

Теперь изменим позиционирование на абсолютное. Как уже знаем из примеров выше, новое положение будет рассчитываться от границ контекста наложения. Т.е. на 100px ниже верхней границы окна браузера, при этом его горизонтальное смещение может интерпретироваться по-разному разными браузерами. Чтобы создать кроссбраузерную картинку, лучше всегда задавать не только top или bottom , но еще и left или right .

Вместо окна браузера отсчет может происходить от блока с новым контекстом.

Блоки с фиксированным позиционированием будут всегда смещаться на указанные величины в свойствах top , left и т.п. относительно окна браузера.

На блоки с позиционированием static значения свойств top , left и т.п. не влияют. Т.е. браузер их просто проигнорирует. Советую это запомнить, т.к. весьма удобно «сбрасывать позиционирование» в отдельных медиазапросах, используя position: static .

Свойство флексбокс (Flexible Boxes)

Флексбокс новее, чем свойства float и position . Он был разработан для того, чтобы предложить другой способ расположения элементов, и основан на другом образе мышления. Флексбокс предлагает больше возможностей позиционирования и возможностей определять отношения между элементами, чем свойства float и position — потому что флексбокс позволяет вам располагать элементы относительно друг друга. Это важно. С float и position элементы располагаются относительно страницы. С флексбоксом элементы соотносятся только между собой.

Это открывает перед нами много восхитительных возможностей. Например, мы можем поменять расположение элемента, меняя его порядковый номер только в CSS. Таким способом элементы легко подвинуть или поменять местами. Трудность с флексбоксом в том, чтобы понять, КАК и ПОЧЕМУ он работает именно таким образом. Это новая парадигма, которая, соответственно, требует нового образа мышления. Для начинающих разработчиков, только вступающих на этот путь, это может не быть такой уж большой проблемой. Но разработчикам-ветеранам нужно научиться думать так же, как флексбокс. В наши дни это обязательный скилл для всех разработчиков.

Светлана: Ключевое отличие стандартных сеток на флексах от сеток на float’ах (например, bootstrap) заключается в том, что для флексов нет необходимости создавать обертку ( > в bootstrap), группирующую колонки. При помощи свойства flex-wrap (которое, кстати, есть только в 2 из 3 синтаксисов флексбокса) колонки сетки могут переходить на «новую строку», если для них недостаточно места на текущей. При этом не требуется применять clearfix , а следовательно, отпадает необходимость в дополнительной разметке. Поскольку поддержка этой возможности все еще не достаточно хорошая (IE10+, Android 4.4+), нужно думать о полифиле. К сожалению, на момент написания этих строк универсального полифила для всех фич флексбокса еще не придумали. Существующие решения либо не готовы к продакшену по причине большого количества багов, либо работают хорошо, но требуют серьезной оптимизации (создают ощутимые задержки при отрисовке страницы). Но мы можем с уверенностью применять в качестве полифила сетку «на инлайн-блоках» ( display: inline-block ). Такая сетка тоже не требует дополнительной разметки, а колонки переходят на новую строку, если не помещаются на текущей.

Трудности флексбокса

В настоящее время самая большая трудность с флексбоксом заключается не в его способностях, а скорее связана с поддержкой браузеров. Старые браузеры просто не знают, что с ним делать. К счастью, понять, какие браузеры и версии браузеров поддерживают и не поддерживают Flexbox, на самом деле легко – просто проверьте на caniuse.com.

Из-за проблем с поддержкой браузеров (в старых версиях браузеров) возможность использовать флексбокс в проекте зависит от потребностей клиента. Если заказчик настаивает на поддержке старых браузеров, о флексбоксе не может быть и речи. Если же заказчик ориентируется на современные браузеры, я однозначно использую флексбокс.

Светлана: Этот момент, на мой взгляд, спорный. Можно полифилить большую часть случаев, для которых применяется флексбокс, даже для IE8+.

Также есть очень полезный SASS-миксин для обеспечения оптимальной кроссбраузерной поддержки:

Разные типы верстки: адаптивная vs отзывчивая

Отзывчивые макеты реагируют на размер окна браузера, в котором они открываются, и автоматически отвечают на изменение размера. Например, отзывчивый сайт будет реагировать, когда вы изменяете размер окна браузера на вашем рабочем столе или ноутбуке, потянув за угол окна.

Адаптивные макеты, в свою очередь, предлагают макеты сайта, полностью различные в зависимости от девайсов. Другими словами, мобильная версия сайта может содержать элементы (и даже функциональность), которые не представлены в десктопной версии. Версия сайта, которую посетители видят на планшетах, также может полностью отличаться как от мобильной, так и от десктопной версий. Даже для десктопа вы можете предложить HD-версии сайта или же версии низкого разрешения, в зависимости от экрана, на котором просматривается сайт.

Почти каждый современный вебсайт использует смесь адаптивной и отзывчивой верстки. Возьмите, например, TechCrunch:

Обратите внимание, как рубрика «Избранные новости» (Featured Stories) размещается справа от рубрики «Смотреть репортаж Crunch» («Watch Now Crunch Report»), когда окно на рабочем столе широкое, но затем перемещается вниз, когда окно сужается. Это «отзывчивая» верстка. Однако там происходит намного больше. Обратите внимание, как изменяется весь заголовок, когда окно уменьшается в размерах. В версии, оптимизированной для мобильных девайсов, у нас есть только меню «гамбургер», логотип TechCrunch и иконка космического корабля (при клике на которую разворачивается лист топ-историй):

В десктопной версии сайта у нас абсолютно другой заголовок:

Элементы не просто перераспределены, чтобы вместиться в подходящую для мобилок версию. То, что мы видим — два абсолютно разных макета, две абсолютно разные версии интерфейса.

Мы можем делать адаптивные макеты в CSS с помощью медиа-запросов:

Медиа-запросы позволяют нам уточнить критерии, определяющие, какую версию сайта отображать. В большинстве случаев эти критерии являются параметрами разрешения экрана. Иногда мы можем использовать DPI (Dots Per Inch, буквально – «Количество точек на дюйм», измеряющее плотность пикселей на экране) чтобы определить, какую версию показать. Дополнительно мы можем использовать медиа-запросы и попытаться определить, сенсорный девайс или нет. Для нацеливания на продукты Apple особенно полезен ресурс stephen.io, поддерживаемый Стефеном Гилбертом (Stephen Gilbert). Stephen.io перечисляет медиа-запросы к мобильным девайсам Apple, делая максимально простым определение конкретной модели iPhone или (еще лучше) ВСЕХ моделей iPad с помощью всего одного медиа-запроса:

Сложность с адаптивным дизайном

Сложность с адаптивным дизайном просто в том, что многие разработчики до сих пор не знают, как правильно с ним работать, потому что их никогда этому не учили. Для заказчика это означает, что вы должны убедиться в том, что разработчики в выбранной вами компании веб-разработки имеют опыт работы с адаптивной версткой. Это не какая-нибудь непонятная технология, а распространенный в отрасли тренд. Едва ли не каждый новый сайт использует адаптивный дизайн.

Светлана: Веб-технологии меняются стремительно: меняется стандарт, разработчики со всего мира придумывают различные приемы, улучшающие интерфейсы и упрощающие разработку. Далеко не все термины, которыми пользуются фронтендщики, можно найти в спецификациях. В связи с этим у новичков и даже у опытных разработчиков часто возникает вопрос «а чем отзывчивый макет отличается от адаптивного или резинового?». Сейчас я немного побуду занудой. Термины не просто так становятся общеупотребимыми. Их таковыми делают книги и статьи выдающихся разработчиков. Так вот, четкие различия между этими типами макетов можно посмотреть на liquidapsive.com. Примеры на этом сайте не противоречат тому, как Итан Маркотт (Ethan Marcotte) определяет отзывчивые макеты в своих книгах и статьях (послуживших основой современному тренду), или тому, какая идея была в основе первых адаптивных макетов в далеком 2006-м. Это полезно знать, однако термины невозможно заморозить. И сейчас, особенно среди русскоязычных разработчиков, «адаптивный» и «отзывчивый» стали почти синонимами.

Адаптивные CSS-фреймворки

Адаптивные CSS-фреймворки помогают разработчикам правильно ориентировать элементы, предлагая сетку с 12 колонками. Использование фреймворка сокращает время разработки сайта в целом.

Создание сетки с различными значениями ширины для различных размеров экрана во фреймворке Foundation.

Полноценные фреймворки, такие как Bootstrap и Foundation, представляют собой больше, чем просто систему сеток. Они также предоставляют JavaScript-плагины, правила CSS и элементы дизайна. В последнее время я работаю практически исключительно на Foundation. Не потому, что Bootstrap способен на меньшее, скорее потому, что Bootstrap предлагает так много опций для визуальной адаптации, что нам просто не нужно столько для наших проектов. За счет дополнительной функциональности Bootstrap шире. Bootstrap отличный, особенно если у вас в команде нет дизайнера и вы хотите использовать все встроенные элементы дизайна. Как бы то ни было, мне обычно просто нужны функциональные элементы CSS-фреймворка, а не элементы дизайна.

Светлана: Bootstrap также предлагает простецкий интерфейс, чтоб вырезать ненужные части фреймворка.

Хотя существуют и другие фреймворки, Bootstrap и Foundation могут удовлетворить практически 100% потребностей разработки. И, к счастью, довольно просто выучить оба этих фреймворка. Оба хорошо задокументированы и имеют большое сообщество активных пользователей, которые могут помочь и ответить на вопросы.

За CSS-фреймворками — будущее. Если вы пока не используете какой-нибудь из них, стоит серьезно задуматься над тем, чтобы приобщиться!

Выводы

Сейчас — увлекательное время для CSS и фронтенд-разработки. Благодаря (относительно) новым инструментам, таким как свойство флексбокс, и CSS-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Краткая информация

Значение по умолчанию visible
Наследуется Нет
Применяется К блочным элементам
Анимируется Нет

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Песочница

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

Примечание

Internet Explorer до версии 7.0 включительно:

  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (

,

, ).

Спецификация ?

Спецификация Статус
CSS Basic Box Model Рабочий проект
CSS Level 2 (Revision 1) Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

4 12 1 7 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

5 нетривиальных моментов разработки фронтэнда на CSS

Ребята из Noveo нашли статью о некоторых аспектах использования CSS, на которые при верстке следует обратить особое внимание. После перевода материал был отдан на вычитку штатной верстальщице Светлане. Светлана нашла в статье несколько спорных пунктов, добавила комментарии и предложила свои варианты решений — предлагаем вам почитать интересную полемику двух фронтенд-разработчиков!

Фронтэнд-разработчик WebiNerds Евгений Половный охотно делится знаниями и опытом с коллегами, организуя тренинги и воркшопы, а также с читателями ГитХаба, публикуя часть своих материалов в книге на GitHub. WebiNerds адаптировали части этой книги для настоящей статьи.

Введение

Многие разработчики считают, что сделали достаточно, если что-то «работает». Я думаю, сегодня это одна из самых больших проблем в нашей индустрии. На своем последнем воркшопе я попытался обратить внимание на некоторые нюансы фронтенд-разработки, указать на проблемы, которые мы часто встречаем, работая с CSS.

Возьмем, например, флексбокс, представленный в CSS3. К сожалению, многие программисты, работающие во фронт-энд-разработке, не изучают флексбокс — или, по крайней мере, не делают это тщательно. Очень важно понимать разницу между флексбоксом и float-макетом, не только в общем, но и на глубоком уровне. Разработчики вполне могут написать какой-то работающий код (т.е. на экране визуально все нормально работает), не понимая, что происходит за фасадом — а следовало бы.

У CSS много нюансов. Рассмотрим 5 интересных моментов этой технологии, включая flexbox и float, на которые стоит обратить особое внимание.

Свойство CSS Float

Свойство CSS float представляет собой значительное усложнение для разработчика: обтекаемые элементы не остаются в обычном потоке рендеринга. Другими словами, позиция обтекаемых элементов рассчитывается иначе — от позиции других, не обтекаемых элементов. По умолчанию поток для HTML-элементов линейный. Элементы размещаются на странице слева направо, и затем переходят на следующую строку, когда на текущей больше нет места. Элементы, к которым применяется float , выпадают из этого потока.

Здесь мы должны приостановиться и рассмотреть термин «поток рендеринга». Этот термин может сбивать с толку. Что он на самом деле значит? Когда веб-страница загружается, наш браузер сначала загружает структуру Document Object Model (DOM). Затем, прежде чем отрисовать страницу, браузер должен найти блоки в DOM, соответствующие свойствам CSS в CSS файле (или файлах). Поток описывает порядок операций для механизма визуализации браузера. По сути поток — это то, как браузер решает, где каждый элемент будет размещен перед рендерингом. Только после того, как браузер все это сделает, сайт будет визуально отражен на экране.

Направление потока с выровненными элементами.

Трудность с CSS Float

В тот момент, когда строится HTML-страничка, обтекаемые элементы не распознают другие элементы в DOM (Document Object Model), за исключением текстовых элементов, таких как

или
. Происходит это потому, что обтекаемые элементы «выравниваются» — вдобавок к основным элементам — по границе родительского элемента. Из-за этого элементы со свойством CSS float не всегда ведут себя одинаково во всех контекстах. В частности, обтекаемый элемент может неожиданно отреагировать, когда он расположен рядом с нетекстовыми элементами, такими как блочные (

) или строчно-блочные элементы ( ), или рядом с

. Неожиданное поведение может возникать потому, что отображение обтекаемых элементов зависит от окружающих их объектов, и обтекаемые элементы «не видят» элементы нетекстовые .

Мы можем решить эту проблему, добавив элемент к DOM между других элементов:

Но как мы знаем, пустые и нефункциональные элементы в DOM – плохая практика.

Однако у этой проблемы есть простое решение. Мы можем добавить псевдо-класс, способствующий нормальному рендеринговому потоку. Когда этот псевдо-класс добавлен, элементы могут распознавать друг друга. Если кратко — псевдо-класс заставляет необтекаемые элементы реагировать на расположение обтекаемых элементов.

Есть и более элегантное решение. Мы просто добавляем отдельный класс для элементов, требующих очистки. Этот класс CSS устраняет необходимость нефункциональных элементов в DOM:

Светлана: Способов «зачистки» ( clearfix ) обтекаемых элементов было придумано довольно много, но как известно, чем меньше строчек, тем легче файл. Вот самый короткий вариант из всех существующих:

Этот способ зачистки будет работать во всех современных браузерах, поддерживающих псевдоэлементы (IE9+). Если требуется поддержка IE8, просто удалите одно двоеточие перед after. Подробное описание этого способа можно прочитать здесь: http://nicolasgallagher.com/micro-clearfix-hack/.

Свойство CSS Position

Свойство CSS position на самом деле довольно простое по сути. Однако нельзя забывать, что абсолютные и фиксированные элементы — как обтекаемые элементы — не участвуют в потоке рендеринга. При этом относительные и статично позиционированные элементы остаются в потоке рендеринга. По этой причине нам нужно крайне осознанно и внимательно использовать свойство position . Когда бы мы его ни использовали, мы должны понимать глубинный смысл того, что мы делаем.

Светлана: Автор безусловно прав в том, что относительно позиционированные элементы не влияют на основной поток. Однако здесь стоит внести ясность: в потоке резервируется место под элемент, как если бы к нему применялось свойство position: static . После этого элемент смещается на указанное расстояние (свойства top , bottom , left и right ). В своем новом месте обитания элемент уже не в потоке и может наслаиваться на другие элементы.

Похожую картину можно наблюдать при использовании CSS3 трансформаций, но это уже тема для отдельной статьи.

Распространенная ошибка при работе с position : попытка растянуть элемент с position: absolute до полной ширины страницы:

Это работает до тех пор, пока вы не попытаетесь прокрутить страницу вниз. Тогда вы понимаете, что ширина, высота и расположение рассчитаны не на основе размера документа, но на основе размера экрана. Этот объект с абсолютным позиционированием выпал из потока.

Сам поток по себе не вызывает проблем. Но нужно осознавать, что элементы с абсолютным и фиксированным позиционированием ускользают из потока рендеринга.

Светлана: Говоря про позиционирование элементов и их рендеринг относительно друг друга, очень важно упомянуть такой термин, как «контекст наложения» (stacking context). Это не самый простой термин из вокабуляра фронтендщика, но я попробую объяснить его на пальцах.

Контекст наложения тесно связан с понятием потока. Представьте себе нормальный поток рендеринга. Ко всем элементам применяется position: static (значение по умолчанию), никаких float’ов и других влияющих на поток свойств нет. В этом случае есть всего один контекст наложения, принадлежащий окну браузера. Именно по этой причине абсолютно позиционированный div в примере выше будет рассчитывать высоту и ширину от окна браузера, а не от тега html или body .

Теперь давайте создадим еще один контекст наложения. Свойств, которые за это отвечают, существует несколько: position (кроме static ), transform и даже opacity . Предлагаю использовать наиболее распространенный прием – добавим body свойство position: relative .

В результе создается новый контекст наложения относительно тега body . Т.е. теперь любой вложенный в body тег с position: absolute будет позиционироваться относительно body .

Очень важно переварить и усвоить эту идею. Этот прием частенько называют «позиционирование относительно родителя», и он бывает чрезвычайно полезен в ряде случаев, будь то центрирование или responsive-таблицы.

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

Контекст наложения влияет на абсолютно позиционированные блоки. Блоки с фиксированным позиционированием всегда будут располагаться и рассчитывать свои значения в % (например, высоту) относительно окна браузера.

Еще хотелось бы внести ясность в то, что значат значения свойств top , bottom , left и right . Казалось бы, все просто: это значения, говорящие браузеру, где отобразить блок. Это так, но… Рассмотрим пример: есть блок со значением top: 100px . Если у него позиционирование relative , то это будет означать, что браузер отрисует его на 100px ниже его первоначального отображения. При этом помним, что место под его первоначальное отображение резервируется.

Теперь изменим позиционирование на абсолютное. Как уже знаем из примеров выше, новое положение будет рассчитываться от границ контекста наложения. Т.е. на 100px ниже верхней границы окна браузера, при этом его горизонтальное смещение может интерпретироваться по-разному разными браузерами. Чтобы создать кроссбраузерную картинку, лучше всегда задавать не только top или bottom , но еще и left или right .

Вместо окна браузера отсчет может происходить от блока с новым контекстом.

Блоки с фиксированным позиционированием будут всегда смещаться на указанные величины в свойствах top , left и т.п. относительно окна браузера.

На блоки с позиционированием static значения свойств top , left и т.п. не влияют. Т.е. браузер их просто проигнорирует. Советую это запомнить, т.к. весьма удобно «сбрасывать позиционирование» в отдельных медиазапросах, используя position: static .

Свойство флексбокс (Flexible Boxes)

Флексбокс новее, чем свойства float и position . Он был разработан для того, чтобы предложить другой способ расположения элементов, и основан на другом образе мышления. Флексбокс предлагает больше возможностей позиционирования и возможностей определять отношения между элементами, чем свойства float и position — потому что флексбокс позволяет вам располагать элементы относительно друг друга. Это важно. С float и position элементы располагаются относительно страницы. С флексбоксом элементы соотносятся только между собой.

Это открывает перед нами много восхитительных возможностей. Например, мы можем поменять расположение элемента, меняя его порядковый номер только в CSS. Таким способом элементы легко подвинуть или поменять местами. Трудность с флексбоксом в том, чтобы понять, КАК и ПОЧЕМУ он работает именно таким образом. Это новая парадигма, которая, соответственно, требует нового образа мышления. Для начинающих разработчиков, только вступающих на этот путь, это может не быть такой уж большой проблемой. Но разработчикам-ветеранам нужно научиться думать так же, как флексбокс. В наши дни это обязательный скилл для всех разработчиков.

Светлана: Ключевое отличие стандартных сеток на флексах от сеток на float’ах (например, bootstrap) заключается в том, что для флексов нет необходимости создавать обертку ( > в bootstrap), группирующую колонки. При помощи свойства flex-wrap (которое, кстати, есть только в 2 из 3 синтаксисов флексбокса) колонки сетки могут переходить на «новую строку», если для них недостаточно места на текущей. При этом не требуется применять clearfix , а следовательно, отпадает необходимость в дополнительной разметке. Поскольку поддержка этой возможности все еще не достаточно хорошая (IE10+, Android 4.4+), нужно думать о полифиле. К сожалению, на момент написания этих строк универсального полифила для всех фич флексбокса еще не придумали. Существующие решения либо не готовы к продакшену по причине большого количества багов, либо работают хорошо, но требуют серьезной оптимизации (создают ощутимые задержки при отрисовке страницы). Но мы можем с уверенностью применять в качестве полифила сетку «на инлайн-блоках» ( display: inline-block ). Такая сетка тоже не требует дополнительной разметки, а колонки переходят на новую строку, если не помещаются на текущей.

Трудности флексбокса

В настоящее время самая большая трудность с флексбоксом заключается не в его способностях, а скорее связана с поддержкой браузеров. Старые браузеры просто не знают, что с ним делать. К счастью, понять, какие браузеры и версии браузеров поддерживают и не поддерживают Flexbox, на самом деле легко – просто проверьте на caniuse.com.

Из-за проблем с поддержкой браузеров (в старых версиях браузеров) возможность использовать флексбокс в проекте зависит от потребностей клиента. Если заказчик настаивает на поддержке старых браузеров, о флексбоксе не может быть и речи. Если же заказчик ориентируется на современные браузеры, я однозначно использую флексбокс.

Светлана: Этот момент, на мой взгляд, спорный. Можно полифилить большую часть случаев, для которых применяется флексбокс, даже для IE8+.

Также есть очень полезный SASS-миксин для обеспечения оптимальной кроссбраузерной поддержки:

Разные типы верстки: адаптивная vs отзывчивая

Отзывчивые макеты реагируют на размер окна браузера, в котором они открываются, и автоматически отвечают на изменение размера. Например, отзывчивый сайт будет реагировать, когда вы изменяете размер окна браузера на вашем рабочем столе или ноутбуке, потянув за угол окна.

Адаптивные макеты, в свою очередь, предлагают макеты сайта, полностью различные в зависимости от девайсов. Другими словами, мобильная версия сайта может содержать элементы (и даже функциональность), которые не представлены в десктопной версии. Версия сайта, которую посетители видят на планшетах, также может полностью отличаться как от мобильной, так и от десктопной версий. Даже для десктопа вы можете предложить HD-версии сайта или же версии низкого разрешения, в зависимости от экрана, на котором просматривается сайт.

Почти каждый современный вебсайт использует смесь адаптивной и отзывчивой верстки. Возьмите, например, TechCrunch:

Обратите внимание, как рубрика «Избранные новости» (Featured Stories) размещается справа от рубрики «Смотреть репортаж Crunch» («Watch Now Crunch Report»), когда окно на рабочем столе широкое, но затем перемещается вниз, когда окно сужается. Это «отзывчивая» верстка. Однако там происходит намного больше. Обратите внимание, как изменяется весь заголовок, когда окно уменьшается в размерах. В версии, оптимизированной для мобильных девайсов, у нас есть только меню «гамбургер», логотип TechCrunch и иконка космического корабля (при клике на которую разворачивается лист топ-историй):

В десктопной версии сайта у нас абсолютно другой заголовок:

Элементы не просто перераспределены, чтобы вместиться в подходящую для мобилок версию. То, что мы видим — два абсолютно разных макета, две абсолютно разные версии интерфейса.

Мы можем делать адаптивные макеты в CSS с помощью медиа-запросов:

Медиа-запросы позволяют нам уточнить критерии, определяющие, какую версию сайта отображать. В большинстве случаев эти критерии являются параметрами разрешения экрана. Иногда мы можем использовать DPI (Dots Per Inch, буквально – «Количество точек на дюйм», измеряющее плотность пикселей на экране) чтобы определить, какую версию показать. Дополнительно мы можем использовать медиа-запросы и попытаться определить, сенсорный девайс или нет. Для нацеливания на продукты Apple особенно полезен ресурс stephen.io, поддерживаемый Стефеном Гилбертом (Stephen Gilbert). Stephen.io перечисляет медиа-запросы к мобильным девайсам Apple, делая максимально простым определение конкретной модели iPhone или (еще лучше) ВСЕХ моделей iPad с помощью всего одного медиа-запроса:

Сложность с адаптивным дизайном

Сложность с адаптивным дизайном просто в том, что многие разработчики до сих пор не знают, как правильно с ним работать, потому что их никогда этому не учили. Для заказчика это означает, что вы должны убедиться в том, что разработчики в выбранной вами компании веб-разработки имеют опыт работы с адаптивной версткой. Это не какая-нибудь непонятная технология, а распространенный в отрасли тренд. Едва ли не каждый новый сайт использует адаптивный дизайн.

Светлана: Веб-технологии меняются стремительно: меняется стандарт, разработчики со всего мира придумывают различные приемы, улучшающие интерфейсы и упрощающие разработку. Далеко не все термины, которыми пользуются фронтендщики, можно найти в спецификациях. В связи с этим у новичков и даже у опытных разработчиков часто возникает вопрос «а чем отзывчивый макет отличается от адаптивного или резинового?». Сейчас я немного побуду занудой. Термины не просто так становятся общеупотребимыми. Их таковыми делают книги и статьи выдающихся разработчиков. Так вот, четкие различия между этими типами макетов можно посмотреть на liquidapsive.com. Примеры на этом сайте не противоречат тому, как Итан Маркотт (Ethan Marcotte) определяет отзывчивые макеты в своих книгах и статьях (послуживших основой современному тренду), или тому, какая идея была в основе первых адаптивных макетов в далеком 2006-м. Это полезно знать, однако термины невозможно заморозить. И сейчас, особенно среди русскоязычных разработчиков, «адаптивный» и «отзывчивый» стали почти синонимами.

Адаптивные CSS-фреймворки

Адаптивные CSS-фреймворки помогают разработчикам правильно ориентировать элементы, предлагая сетку с 12 колонками. Использование фреймворка сокращает время разработки сайта в целом.

Создание сетки с различными значениями ширины для различных размеров экрана во фреймворке Foundation.

Полноценные фреймворки, такие как Bootstrap и Foundation, представляют собой больше, чем просто систему сеток. Они также предоставляют JavaScript-плагины, правила CSS и элементы дизайна. В последнее время я работаю практически исключительно на Foundation. Не потому, что Bootstrap способен на меньшее, скорее потому, что Bootstrap предлагает так много опций для визуальной адаптации, что нам просто не нужно столько для наших проектов. За счет дополнительной функциональности Bootstrap шире. Bootstrap отличный, особенно если у вас в команде нет дизайнера и вы хотите использовать все встроенные элементы дизайна. Как бы то ни было, мне обычно просто нужны функциональные элементы CSS-фреймворка, а не элементы дизайна.

Светлана: Bootstrap также предлагает простецкий интерфейс, чтоб вырезать ненужные части фреймворка.

Хотя существуют и другие фреймворки, Bootstrap и Foundation могут удовлетворить практически 100% потребностей разработки. И, к счастью, довольно просто выучить оба этих фреймворка. Оба хорошо задокументированы и имеют большое сообщество активных пользователей, которые могут помочь и ответить на вопросы.

За CSS-фреймворками — будущее. Если вы пока не используете какой-нибудь из них, стоит серьезно задуматься над тем, чтобы приобщиться!

Выводы

Сейчас — увлекательное время для CSS и фронтенд-разработки. Благодаря (относительно) новым инструментам, таким как свойство флексбокс, и CSS-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

Добавить комментарий