Displaytable — Слайдер + блок контента слева = помогите найти ошибку!


Содержание

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-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

Особенности блоков с display:inline-block

В спецификации HTML представлены теги, которые являются изначально либо строчными (свойство display имеет значение inline), либо блочные (display: block). Однако с выходом стандарта CSS3 появилась возможность изменять отображение элемента на строчно-блочное (display: inline-block).

По сути строчно-блочные элементы являются чем-то средним между строчными и блочными. То есть они имеют свойства и тех, и других элементов, комбинируя их. Каким образом? — В тексте они ведут себя, как строчные элементы, т.е. занимают ровно столько места, сколько текста содержится в них (если не заданы ширина или отступы), однако при назначении свойств box-модели, интерпретируют их, как блочные элементы.

Лучше всего это можно продемонстрировать на примере. В файле ниже в двух колонках с одинаковым текстом выделены одни и те же словосочетания. Выделения находятся в элементах span с классом inline слева и inline-block справа. Для этих классов заданы общие правила:

Но в левой колонке все span имеют свойство display: inline , которое назначено для них в спецификации по умолчанию. А для span в правой колонке задан display: inline-block .

Можно заметить, что за счет внутренних отступов ( padding ) слева цветные выделения накладываются друг на друга, кое-где перекрывая текст, а это и некрасиво, и нечитабельно. Что касается внешних отступов (margin), то сверху и снизу для span в левой колонке они просто игнорируются, и только слева и справа отодвигают текст от соседнего.

В правой колонке ситуация несколько иная — здесь все элементы span визуально отделены от соседнего текста, причем margin-ы работает по всем 4-м сторонам, а padding не приводят к перекрыванию текста выше. Выделенные блоки с большим количеством текста выглядят именно как блочные элементы, а те, где текста мало вписываются в текст, но за счет margin-ов увеличивают высоту строки.

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

  1. строчным элементам с фоном не стоит задавать большие внутренние отступы ( padding ), иначе они перекрывают выше идущий текст. Максимально это должно быть 3px и при этом стоит увеличить высоту строки ( line-height ) для родительского элемента (абзаца или div-а, например);
  2. строчно-блочные элементы с фоном, размещенные в тексте, не должны содержать большие объемы текста, иначе они будут «вываливаться» из него наподобие цитат, или врезок. Лучше использовать этот тип отображения для элементов, которые предназначены для каких-либо оформительских целей, например, для буквиц, шрифтовых иконок, кнопок, ссылок и т.п.

Использование inline-block элементов для создания кнопок

Сделаем еще один небольшой сравнительный анализ. В примере ниже представлены ссылки, внешний вид которых с помощью css-стилей отображает их как кнопки. Но 2 из них имеют display: inline-block , одна — display: inline (по умолчанию заданный в спецификации для ссылки) и еще одна — display: block . Над каждой кнопкой подписано, каким образом она была отформатирована.

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

Что касается кнопок с display: inline-block и display: inline , у которых размер был сформирован padding-ами, то при добавлении текста они просто расширяются. Оранжевая кнопка Sale, у которой размер имеет фиксированную ширину и высоту, увеличивается за счет добавленного текста вниз, хотя ни фон, ни рамка на этот текст не распространяются. Кнопка-ссылка с display: block изначально занимает всю ширину родительского элемента, поэтому добавление текста не влияет на ее размер на больших экранах. А вот на маленьких в ней текст за счет фиксированной высоты тоже выходит за пределы фона вниз. Еще можно заметить, что для желтой кнопки с display: inline несколько иначе определяются отступы от заголовка сверху — она расположена чуть выше всех остальных кнопок, хотя margin ни для одной из них в свойствах задан не был. Форматирование кнопок определялось такими свойствами:

CSS display table

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице

, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Полный список свойств и тегов, которые они заменяют:

display: table;
display: inline-table; но с display: inline-block
display: table-caption;
display: table-column-group;
display: table-column;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-cell; или

Таблица — сетка

Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Gr >display: table .

Рассмотрим пример – сетка 3×2 в три колонки сделанная таблицей:

Таблица без таблицы или display: table-cell для всех браузеров :: Хранитель заметок

Таблица без таблицы или display: table-cell для всех браузеров

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

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

Разметка, например, может быть такой:

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


Комбинация float: left; и clear: right; заставляет следующий блок намертво прилипнуть к предыдущему, образовывая ячейки нашей таблицы. Можно использовать прибивку в другую сторону, если нужен обратный порядок элементов.

Ещё заметки со схожей тематикой

Категории
Коментарии к заметке

В пост врывается inline-block, который с white-space: nowrap у родителя даст как раз то, что нужно.

Кроме того, подобную «ленту» можно довольно удобно двигать влево без лишних врапперов, задавая первому элементу отрицательный левый маджин.

Точно. Элементы с inline-block можно выравнивать по вертикали как в настоящей таблице.

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

Я уж было поверил, что вы действительно нашли способ эмулировать свойство table-cell. А оказывается тут всего лишь давно известный способ расположить блочные элементы в строку, причём как правильно подмечено, это можно сделать более изящно. Самое главное вы, мне кажется, не уловили. Свойство table-cell позволяет элементам не только размещаться в одном ряду, но и заполнять родительский блок полностью, РАСТЯГИВАЯСЬ по всей его ширине. Копируя таким образом поведение ячеек в таблице. Это крайне полезно, к примеру, в вёрстке горизонтальной навигации, где количество пунктов может меняться, но при этом не потребуется менять стили.

Роман, чаще всего в реальной жизни не бывает одного универсального способа для решения какой-либо задачи. Мне кажется полезным знать не только «cutting edge» решения (которые тоже не идеальны), а еще и вытаскивать из нафталина что-нибудь старенькое проверенное годами.

По поводу растягивания ячеек я могу предложить только expression. Но, так полагаю, что «это не наш метод». Не поленитесь оставить комментарий, пожалуйста, если найдете что-нибудь интересное по этой теме.

Сегодня целый день пытался всеми известными способами выровнять два блока, и только это решение меня спасло. Благодарен Вам за полезный пост

Насколько я знаю в основном table-cell используют для вертикального выравнивания контента, а при обтекании оно перестает работать. Ну и еще для таких блоков не работают внешние отступы margin.

Отлично! То что нужно. Замечательная альтернатива

В верстке присутствуют ошибка!

Александр, по-моему, всё в порядке с вёрсткой. Ширина ячейки таблицы зависит от контента. Ширина таблицы равна сумме ширин всех её ячеек.

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

© 2009–2020 Владимир Кузнецов.
Все права защищены и принадлежат их владельцам.

Копирование материалов данного блога допускается только с разрешения автора.

Проблемы float и их решения

В процессе верстки с использованием float-элементов вы непременно заметите некоторые странности в их поведении. Мы расскажем о наиболее часто встречающихся проблемах и способах их решения.

Проблема 1. Обтекание влияет на другие элементы

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

На примере ниже более явно показано, что происходит с элементом, который должен обтекать соседний элемент, но при этом им не хватает места в одном ряду:

Элемент с классом .b4 пробует обтекать float-элемент .b3 , содержащийся в контейнере .wrapper , но поскольку .b4 не влазит в один ряд с .wrapper , он просто прижимается верхней стороной к этому ряду, из-за чего между блоками не остается свободного пространства. Как видите, элементу .b4 дополнительно задано свойство margin-top: 50px , эффект которого сейчас не заметен. Не зная причины, можно долго ломать голову, почему margin не работает. Однако, если посмотреть на элемент через инспектор кода, можно увидеть, что margin-top всё же работает, просто сейчас он никак не влияет на картину.

Как сделать, чтобы элемент .b4 перестал обтекать соседний? Конечно же, с помощью свойства clear , которое мы уже рассматривали ранее. Повторим еще раз:

Добавив этот код, мы получили такую картину:

Уже лучше, но отступ в 50 пикселей сверху так и не появился. Он всё ещё накладывается на верхний блок:

Такое впечатление, что элементу со свойством margin-top нет от чего отталкиваться. На самом деле, так и есть, потому что если мы проинспектируем элемент .wrapper , то увидим, что его высота странным образом стала равна нулю:

Проблема 2. Нулевая высота контейнера с float-элементами

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

  • Если в контейнере содержатся только плавающие элементы, то его высота станет нулевой. Либо, если родителю задано, к примеру, свойство padding-top и/или padding-bottom , то его высота будет равна сумме этих padding-ов.
  • Если в родительском контейнере помимо float-элементов имеются также обычные элементы, то высота родителя будет равна высоте этих обычных элементов плюс отступы.

Иными словами, из высоты блока-родителя просто вычитается высота float-элементов.

Как заставить родительский контейнер учитывать высоту содержащихся в нем плавающих элементов? Есть несколько способов решения этой проблемы. Мы расскажем о двух наиболее распространенных и эффективных хаках:

Micro Clearfix. Этот хак был придуман разработчиком по имени Nicolas Gallagher, и заключается он в добавлении нескольких строк CSS к псевдоэлементу :after родительского контейнера, потерявшего высоту:

Этот код работает во всех современных браузерах. Преимущество данного способа состоит в отсутствии необходимости писать лишний HTML-код.

Overflow: hidden. Второй вариант решения проблемы с пропавшей высотой контейнера — добавить к этому блоку свойство overflow: hidden . Вообще, данное свойство определяет, будет ли видно содержание блочного элемента, если оно не помещается в него целиком и выходит за пределы области. Однако в данном случае оно еще и заставляет учитывать высоту float-элементов.

У этого метода есть недостаток: если в контейнере находятся абсолютно позиционированные элементы, размещенные за пределами его границ, то они могут исчезнуть из поля зрения. Впрочем, то же самое произойдет с любым содержимым, которое будет вылезать за область контейнера — такова работа значения hidden.

Итак, воспользуемся первым хаком и взглянем на результат:

Как видим, высота блока-родителя стала включать в себя плавающие элементы, а у элемента .b4 теперь нормально отображается верхний отступ в 50 пикселей.

Проблема 3. Перенос блоков при добавлении отступов

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

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

И здесь у нас появляется проблема: одна из колонок съехала вниз. Это случилось из-за того, что ширина каждой колонки стала равна не 33.333333% , а 33.333333% + 10px + 10px. Как вы помните из предыдущего раздела учебника, полная ширина блока — это сумма чисел, в которую включена ширина содержимого, а также размеры боковых отступов, границ и полей.

Чтобы исправить эту проблему, используйте свойство box-sizing со значением border-box . Тогда браузер будет автоматически включать отступы, поля и рамку в заданную вами ширину блока:

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

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

Далее в учебнике: что такое адаптивный веб-дизайн.


Создание красивого контент-слайдера

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

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

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

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

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

Обзор, как это работает

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

Во-первых, у нас есть контент, который мы хотим загнать в слайдер:

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

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

Мы исправим это в два этапа. Во-первых, мы обернём содержимое в контейнер, который имеет такой же размер, как один из блоков контента:

После того, как мы заключили контент в контейнер, обрезаем все элементы вокруг блока контента, чтобы обеспечить вывод только одного блока одновременно:

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

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

В следующих нескольких разделах мы рассмотрим реальные HTML , CSS и JavaScript коды, которые приведут наш слайдер в действие.

Контент

Давайте следовать тем же шагам, которые мы рассмотрели в кратком обзоре и начнем с … контента. Во-первых, мы должны создать отправную точку. Давайте создадим пустой HTML -документ и добавим в него следующий код из начального шаблона НTML5 :

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

Контент (на этот раз настоящий)

Внутри элемента body добавьте следующий HTML -код:

Между тегами style добавьте следующие правила для стилей, которые задают форму и цвет нашего контента:

Теперь при просмотре страницы вы увидите нечто похожее на то, что приведено на скриншоте:

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

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

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

Что мы сделали

В нашей HTML -разметке контент, который вы видите, состоит из четырех элементов div , каждый из которых содержит значение класса content . Это значение класса проистекает из правила стиля .content , которое определяет размер каждого блока: 550 пикселей в ширину и 350 пикселей в высоту:

Правило стиля .content также задает значение float — left . В результате элементы div выстраиваются в ряд. И последнее, что это правило стиля объявляет, это свойство white-space . Это свойство определяет, как будет обернут текст в абзаце.

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

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

Для решения этой проблемы, мы присваиваем каждому div уникальный идентификатор через значения id: itemOne , itemTwo , itemThree , anditemFour . В разделе стилей у нас есть четыре правила стиля, которые соответствуют этим значениям id :

Как вы можете видеть, эти правила стилей определяют только цвет фона и фоновое изображение для нашего контента. С этого момента элементы div больше не невидимы. Они выводятся в виде прямоугольников разного цвета с размером 550 на 350 пикселей.

Мы почти закончили. Последнее, что мы рассмотрим, это таинственный div , который содержит id wrapper :

Этот элемент обертывает весь наш контент в один контейнер. Это не тот контейнер, который я имел в виду в обзоре, когда говорил об обрезании всего содержимого вокруг блоков контента.

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

Соответствующее правило стилей #wrapper выполняет эту задачу:

Сначала это правило стилей определяет ширину элемента оболочки в 2200 пикселей. То есть общую ширину нашего контента … которую вы получите умножив 4 ( по количеству элементов div ) на 550 пикселей.

Свойства position и left предназначены для того, чтобы установить возможность переместить контейнер в любое место, куда мы захотим. Установив для свойства position значение relative , мы убираем этот элемент из стандартной структуры документа и делаем возможным разместить его в любом месте с использованием значений в пикселях относительно того места, где он сейчас находится.

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

Обрезка контента

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

Вот где нам понадобится основной контейнер. Оберните все элементы div вашего HTML -кода в div с идентификатором contentContainer :

Просто добавьте две новые строки и, если хотите, отступы строк, которые просто предназначены для укладки HTML -кода надлежащим образом.

Сейчас, если вы просмотрите наш обернутый ( еще раз ) контент, вы не увидите ничего нового. Просто укладка элементов в еще один div ничего значимого не делает — тем более ничего из того, что мы хотим сделать, чтобы обрезать контент.

Чтобы добавить это значимое действие, создайте следующее правило стиля #contentContainer :

Обратите внимание, что вы задаете размер элемента contentContainer 550 пикселей на 350 пикселей. То есть точно такой же размер, какой имеет каждый из блоков контента. Чтобы слайдер немного выделялся, мы задаем черную рамку шириной в 5 пикселей.

Последнее, что мы делаем, это обрезаем контент, установив для свойства overflow значение hidden . Это нужно, чтобы скрыть все за пределами элемента contentContainer .


Все вместе дает нам следующую картину в браузере:

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

Ссылки навигации

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

Эти ссылки не имеют ничего общего с нашим contentContainer или любой другой частью HTML -кода, который у нас уже есть. Вам нужно добавить выделенные строки в уже имеющийся у нас HTML -код ( но выше тега script ):

Давайте бегло рассмотрим HTML -код, который вы только что добавили. Во-первых, у нас есть div с идентификатором navLinks , который описывает неупорядоченный список. Сами ссылки представлены в виде пунктов списка.

Каждый элемент списка содержит значение класса itemLinks , а также пользовательский атрибут data-* , называемый data-pos . Мы вернемся к этому атрибуту немного позже, а сейчас просто отметьте для себя, что он существует.

Нам нужно задать стиль для только что добавленного HTML -кода. В разделе стилей добавьте следующие правила:

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

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

Это связано с двумя правилами стилей, которые относятся к классу active :

Если вы помните, в нашем HTML -коде не было элемента, который бы имел значение класса active . Несмотря на это, эти правила стилей все же будут задействованы, потому что класс active добавляется одной из наших ссылок динамически.

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

На данный момент наш слайдер выглядит следующим образом:

Если ваш слайдер выглядит не так, то высока вероятность того, что вы допустили опечатку … или что-то еще. Так и случилось?

Создание самого слайдера

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

Давайте теперь создадим рабочий слайдер, однако перед этим добавим JavaScript и кое-какие крутые элементы… а именно красивые CSS -переходы.

Добавление JavaScript

Внутри тега сценария, добавьте следующие строки JavaScript -кода:

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

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

Добавление перехода

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

Найдите правило стиля #wrapper и добавьте в него одну строку:

Строка, которую вы добавили, определяет переход. Свойство, указанное в ней, определяет, что переход должен осуществляться, когда изменяется свойство left . Наш переход будет осуществляться в течение 0,5 секунды, и будет использовать функцию тайминга ease-in-out для ускорения процесса в начале перехода и замедления в конце.

Поскольку свойство transition все еще претерпевает некоторые изменения в W3C , вы должны будете использовать префиксы, чтобы быть уверенными, что любой современный браузер может применить этот переход. Если вы не хотите иметь с этим дело, добавьте следующий скрипт непосредственно перед тегом script :

Нет, этот скрипт не делает ничего вредоносного. Это размещенная на хостинге версия библиотеки Леи Веру -prefix-free . Чтобы не изучать кучу всего о том, как работают слайдеры, вы также можете просто скачать ее скрипт, загрузить его на свой собственный сервер и ссылаться на свою собственную версию.

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

Разбор кода (и всего остального!)

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

Что на самом деле происходит

После загрузки контент-слайдера вы видите, как отображается первый блок контента. Остальной контент обрезан и скрыт от глаз:

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

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

Откуда мы знаем это? Все наши блоки контента обернуты внутри элемента оболочки, который охватывает весь наш контент, и левый край элемента оболочки имеет позицию 0 пикселей:

Это объявлено в правиле стиля #wrapper . Из этого правила стиля мы также знаем, что все блоки контента смещаются влево и расположены в ряд друг за другом.

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

Первый блок расположен в точке 0 пикселей. Ширина первого блока контента — это позиция второго блока. То есть 550 пикселей. Каждый последующий блок имеет позицию на 550 пикселей больше, чем предыдущий.

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

Атрибут data-pos!

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

Как мы можем указать, что при нажатии на ссылку должен выводиться тот или иной блок контента? Просто. Каждая ссылка содержит точную позицию ( в пикселях ) блока контента, которому она соответствует:

Обратите внимание на то, что атрибут data-pos указывает каждой из ссылок, на значение каждого из атрибутов data-pos . Они равны отрицательному значению исходного горизонтального положения каждого из блоков контента.

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

Например, вот что происходит после нажатия на третью ссылку:

Для третьей ссылки определено значение data-pos — 1100 пикселей. Это соответствует тому, на сколько пикселей нужно будет переместить оболочку контейнера, чтобы в видимой области был выведен третий блок контента. Нажатие любой другой ссылки установит для свойства элемента оболочки значение, содержащееся в атрибуте data-pos этой ссылки.

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

Это все о JavaScript


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

Начнем с самого верха:

Переменная links принимает набор всех элементов нашего документа, которые имеют значение класса itemLinks . Эти элементы представляют собой пункты списка, которые действуют как ссылки навигации. Переменная wrapper очень похожа на links . Она принимает указатель на элемент с идентификатором wrapper .

querySelector и querySelectorAll

Обратите внимание, как я запрашиваю DOM . Вместо того чтобы, использовать что-то вроде getElementsByClassName или getElementById , я использую новые функции querySelectorAll и querySelector .

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

Дальше у нас следует кое-что таинственное:

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

Следующий набор строк — это цикл for:

Здесь мы перебираем каждый элемент переменных links и назначаем ему отслеживание событий. Этот элемент отслеживания событий будет вызывать функцию setClickedItem , когда было зафиксировано событие клика.

Следующая строка вызывает целый ряд изменений:

Мы добавляем значение активного класса к элементу первой ссылки навигации. Это делается через передачу значения activeLink в массив links . Так как activeLink равно 0 , обычно массив принимает первый элемент и, используя classList API , добавляет значение класса active .

После того, как выполнена эта строка кода, помните, мы обращали внимание на следующие правила стиля?

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

Следующее, что мы рассмотрим, это обработчик событий setClickedItem , который вызывается при нажатии на любую из ссылок:

Эта функция сначала переключает состояние всех ваших ссылок на неактивное с помощью вызова removeActiveLinks . Мы рассмотрим эту функцию чуть позже.

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

После выполнения этих двух ( довольно скучных ) действий, данная функция передает ссылку на выбранный элемент в функцию changePosition . Которая в свою очередь делает пару удивительных вещей, о чем я расскажу в следующем пункте.

Вот, где происходят интересные изменения! Давайте немного перепрыгнем вперед и рассмотрим функцию changePosition :

Эта функция делает две вещи:
І. Переключает визуальное отображение выбранной ссылки, чтобы указать, что в настоящее время она является активной.
II. Устанавливает позицию элемента оболочки.

Давайте рассмотрим эти две вещи более подробно.

Переключение визуального отображения выбранной/активной ссылки

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

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

Это изменение визуального отображения осуществляется путем добавления и удаления классов CSS . Класс active добавляется активной ссылке. Все ссылки, которые не являются активными, не содержат значения класса active . Вы поймете, как это работает, когда мы рассмотрим функцию removeActiveLinks .

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

Эти правила стилей применяются только к ссылке, которой был добавлен класс active . Когда пользователь нажимает на любую ссылку, значение этого класса добавляется и удаляется через JavaScript .

В нашей функции setClickedItem ( также известной, как функция, которая будет вызываться в результате нажатия на ссылку ), мы сначала вызываем removeActiveLinks :

Эта функция отвечает за удаление класса active для всех ссылок навигации:

Вы можете представить ее, как глобальную кнопку сброса. Она перебирает ссылки навигации, которые хранятся в переменной ссылок и удаляет значение класса active , используя classList.remove() . Просто имейте в виду, что если любая из ссылок навигации содержала значение класса active , что ж … больше его не будет.

Таким образом, мы рассмотрели, как удалить класс active у всех ваших ссылок. Добавление класса в свою очередь происходит очень просто:

Тот же ClassList , который мы использовали ранее для удаления значения активного класса, мы используем, чтобы обратно добавить значения класса active выбранной ссылке. Эта выбранная ссылка получает аргумент link , который передается ей.

Установка позиции оболочки

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

Давайте рассмотрим следующий фрагмент:

Переменная position хранит значение атрибута data-pos нажатой нами ссылки. После того, как мы получили значение атрибута data-pos , мы устанавливаем для свойства CSS left элемента оболочки то же самое значение.

Как это связано с реализацией эффекта слайдера? Вы помните, что некоторое время назад мы добавили к стилю #wrapper одно правило?

Обратите внимание, что мы определили для transition вступать в действие, когда изменяется свойство left . Угадайте, что делает наш JavaScript ? Задает свойство left ! CSS-переход обнаруживает это изменение и запускает перемещение контента. Все, что вам нужно, чтобы заставить все это работать, это добавить одну строку JavaScript .

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

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

Улучшение контент-слайдера

Слайдер контента, который мы только что создали, довольно крут, но можно сделать его еще круче. В этом разделе мы рассмотрим два улучшения, которые могут оказаться вам очень полезными. Попутно мы узнаем некоторые новые трюки JavaScript и CSS . Это будет, как говорит сейчас молодежь: « Я рыдаю !».

Прокручивание с помощью преобразования translate3d

В данный момент наши слайды прокручиваются с помощью изменения значения свойства CSS left , которое применяется к элементу div wrapper . Используя свойство left , мы заставляем слайдер работать, однако этот метод имеет серьезные недостатки. Вы не можете использовать аппаратное ускорение, чтобы обеспечить плавную смену слайдов.

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

Это можно исправить с помощью функции translate3d transform , которая заставит слайды перемещаться плавно. Эта функция принимает в качестве аргументов значения х , y и z , и изменение любого из этих значений приведет к изменению позиции целевого элемента.

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

Первое, что нам нужно сделать, это изменить правило стиля #wrapper . Замените объявление свойств position и left следующим кодом:

Таким образом, с помощью transform задается исходная позиция элемента оболочки.


Далее нам нужно изменить JavaScript и установить вместо свойства left функцию translate3d transform . Мы осуществим это в два этапа.

Первый этап: Добавление вспомогательных элементов

На первом этапе добавляем следующий вспомогательный код ниже основного кода, который мы имеем на текущий момент:

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

В этой статье я не буду пояснять данные строки. Единственное, что вам нужно знать, это то, что весь этот код помогает установить для свойства Property значения transform , msTransform , mozTransform или oTransform . В зависимости от того, насколько старый браузер вы используете, будет использоваться одно из этих значений.

Второй этап: внесение Ahoy!

После того, как вы добавили вспомогательный код, мы готовы ко второму этапу. Пришло время заменить свойство left подходом, основанным на transform .

В функции changePosition найдите следующие строки кода:

Замените их следующим кодом:

Этот код делает довольно простые вещи. Переменная translateValue создает представление на основе строк функции translate3d , в котором часть X заполняется значением переменной position . После того, как эта строка была создана, все, что нам осталось сделать, это передать ее в объект style элемента wrapper .

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

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

Очевидно, что не это вы ожидали увидеть. Что случилось с плавным перемещением? Ответ заключается в том, что нам недостает еще одного изменения. К счастью, это легко исправить. Если мы вернемся к правилу стиля #wrapper , то заметим, что объявление transition выглядит следующим образом:

Наш переход отслеживает изменения свойства left . Мы больше не используем это свойство, поэтому наш переход и не может начать работать. Чтобы исправить эту ужасную несправедливость, замените ключевое слово свойства left внутри объявления transition на ключевое слово свойства transform :

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

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

Автоматическая смена слайдов с интервалом в несколько секунд

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

Пример одного из таких контент-слайдер вы видите ниже:

Да, это наш старый слайдер, в который внесены небольшие изменения, чтобы контент мог автоматически прокручиваться в контейнере. Угадайте, что мы будем делать дальше?

Заставим слайды прокручиваться автоматически!

В этом нам поможет функции setInterval. Основная задача этой функции — обеспечить выполнение кода через равные промежутки времени:

Каждые несколько секунд ( или сколько вы зададите в качестве значения интервала ), функция setInterval указывает нашему слайдеру переходить к следующему блоку контента.

Когда контент закончился, слайдер через цикл переходит к началу контента и начинает все заново. Делается это довольно несложно. От вас требуется только знание нескольких приемов и четкое понимание того, как работает ваш контент-слайдер.

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

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

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

Правильнее будет сделать так, чтобы после нажатия одной из ссылок таймер сбрасывался на 0. Чтобы внести это изменение, добавьте следующую строку кода в обработчик событий setClickedItem :

После этого контент-слайдер будет вести себя должным образом, когда вы вмешиваетесь и нажимаете на ссылку навигации. Ура!

Пояснение автоматической смены слайдов

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

Начнем с функции goToNextItem/span> :

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

Переменная activeLink указывает на положение текущего отображаемого блока контента. Каждая часть информации связана с соответствующим элементом внутри массива links .

Общее количество элементов внутри массива links может быть установлено через свойство length . Теперь давайте вернемся к нашему коду.

Оператор if функции goToNextItem просто проверяет, остался ли еще контент или слайдеру следует вернуться в начало:

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

Сама магия выполняется с помощью следующих двух строк, предоставляемых функцией changePosition , которая в свою очередь вызывается с указателем на следующий блок контента для вывода:

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

Итак … мы рассмотрели код в функции goToNextItem для перемещения к следующей части контента. Чтобы вызвать этот слайд автоматически задействуются следующие строки:

Для запуска используется функция startTimer . Эта функция содержит вызов setInterval , который обеспечивает, чтобы функция goToNextItem вызывалась каждые 2 секунды ( или 2000 миллисекунд ).

Просто добавив эту функцию ( и вызвав ее ), вы заставите ваш контент-слайдер начать автоматически прокручивать блоки контента.

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

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

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

Этот идентификатор мы сохраняем в переменной timeoutID и инициализируем в вызове startTimer , и этот же идентификатор удобно использовать внутри функции resetTimer :

Функция clearInterval принимает идентификатор ( через timeoutID ) функции setInterval , которую мы хотим остановить.

После того, как мы остановили таймер внутри функции resetTimer , мы вызываем startTimer и начинаем все это снова:


Логика проста. Таймер останавливается, когда вы вручную выбираете, какой блок контента нужно вывести в слайдере:

После того как вы выбираете новый блок контента, слайдер останавливается на две секунды, прежде чем перейти к следующему блоку. Отслеживание всего этого осуществляют функции startTimer и resetTimer .

Заключение

Вот и все, мы рассмотрели, как создать красивый контент-слайдер, используя только

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

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

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

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

Данная публикация представляет собой перевод статьи « Creating a Sweet Content Slider » , подготовленной дружной командой проекта Интернет-технологии.ру

Антигерой CSS-разметки — свойство «display: table»

Восстановление подмоченной репутации CSS-таблиц

Антигерой — один из центральных персонажей фильма, книги или пьесы, не обладающий обычными героическими качествами.

Использование таблицы в разметке — щекотливая тема. Для многих веб-разработчиков табличная вёрстка — табу. Хотя существует множество доводов против этого, большинство разработчиков не могут внятно объяснить, почему нельзя использовать табличную разметку, кроме того, что «таблицы — это плохо».

Импульс от давнего начала движения против использования HTML-таблиц был силен. Он оказал влияние на многие поколения разработчиков, заставив их думать, что любое использование таблиц — зло.

Надо признаться, я один из тех разработчиков, кто избегает табличной вёрстки даже для представления табличных данных. Мало того, я даже упрекал своих коллег, когда они использовали display: table для колоночной разметки (или разметки «Holy Grail»).

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

Два типа табличной разметки

Использовать таблицы в вёрстке можно двумя способами: это HTML-таблица и CSS-таблица.

HTML-таблица — это когда для создания таблицы используется нативный HTML-тег

, а CSS-таблица — это имитация того же поведения, но с помощью CSS-свойств.

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

Если нечто выглядит, работает и ведёт себя как таблица, то оно ведь должно быть таблицей? Неправильно!

На самом деле, у CSS-таблиц есть одно ключевое отличие от HTML-таблиц: они могут перестать быть таблицами, стоит только изменить их CSS-свойства. А HTML-таблицы на такое не способны. Это открывает перед нами широкие возможности выборочного использования в вёрстке нужных табличных особенностей.

Ниже вы найдёте несколько примеров использования display: table :

Динамическое вертикальное выравнивание по центру

Нажимайте на кнопку, чтобы добавить строчки.

Это, пожалуй, самый распространённый способ использования display: table . С его помощью можно получить истинное выравнивание по вертикали элементов с динамической высотой.

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

Динамическое горизонтальное выравнивание по центру

Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным ( display: inline-block ). Затем внешнему контейнеру этого элемента нужно задать свойство text-align: center . Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство text-align: center , которое может переопределить существующие свойства.

Благодаря @mojtabaseyedi я нашёл новый способ выравнивать динамические элементы по горизонтали без побочных эффектов. Нужно применить к динамическому элементу display: table и margin: auto .

Адаптивная вёрстка

Уменьшите окно до , чтобы увидеть адаптивность в действии.

Как я уже упоминал, CSS-таблица может вести себя не как таблица, когда это необходимо. Переключив у элемента свойство display с table-cell на block , мы сможем расположить элементы в стопку.

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

  1. Подвал должен прилипать к низу страницы, когда основного контента слишком мало, чтобы заполнить всю страницу по высоте.
  2. Подвал должен следовать в потоке как обычно, если объём контента превышает высоту страницы.

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

Эти решения отлично работают, но у них есть один недостаток: подвал должен быть фиксированной высоты. Эту проблему можно обойти средствами JavaScript, но я всё же предпочитаю использовать для этого CSS. С помощью display: table можно сделать прилипающий подвал с динамической высотой.

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.

Разметка «Holy Grail»

Такая разметка должна по мере возможности удовлетворять следующим требованиям:

  1. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
  2. Центральная колонка может идти первой в разметке.
  3. Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью display: table


В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью display: table вы сравнительно легко сделаете разметку «Holy Grail».

Вы шутите? Flexbox всё решит!

Это действительно так. Ознакомьтесь, например, с решением вышеприведённых задач с помощью flexbox от Phillip Walton. Однако, я бы не торопился его применять. На долю IE8 и IE9 до сих пор приходится 32% рынка десктопных браузеров — а это слишком много пользователей, чтобы отказываться от них ради удовольствия применить flexbox. Если только ваш сайт не рассчитан целиком на мобильный трафик — в чём я сильно сомневаюсь, — стоит выбрать display: table .

Уточнение: Я работаю на консалтинговую компанию, поэтому заинтересован в поддержке десктопов. Но если вам нужно поддерживать только мобильные браузеры, можете смело использовать flexbox.

Заключение

Надеюсь, с помощью приведённых примеров мне удалось продемонстрировать полезные свойства несправедливо пренебрегаемого display: table . Однако должен подчеркнуть, что CSS-таблицы — не панацея для разметки. Используйте их уместно, это позволит вам избежать длительных ночей правки CSS-кода.

Расположение блоков с помощью display:table

Дата публикации: 2013-07-05

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

Я говорю «сейчас», хотя, конечно, сейчас мы можем использовать и Flexbox, но выполнение разнится в зависимости от браузера, как и необходимый синтаксис. Крис Миллс (Chris Mills), работающий для Opera, написал две великолепные глубокие статьи (Основы Flexbox (Flexbox basics) и Продвинутый кроссбраузерный flexbox (Advanced cross-browser flexbox) о разных особенностях этого модуля.

Конечно, Flexbox предлагает больше, чем просто перемещение элементов, но если вам нужно только это, то далее свойства CSS display можно не смотреть.

(Между прочим, эта идея основана на том, о чем говорил нам Брюс Лоусон (Bruce Lawson) на beyondtellerand 2012)

Давайте возьмем четыре блока, чей простейший HTML размечен следующим образом:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Изменить поведение slideToggle() для отображения: inline-block вместо отображения: block?

my target slideToggle() div должен быть display:inline-block вместо display:block при его открытии. Есть ли способ изменить поведение jquery здесь?

Я использую jQuery 1.7.0 на данный момент. Кроме того,

Маленькая птичка сказала мне.

Просто попробуйте скрыть свой блок с помощью скриптов (dont display:none через стили)

Если вы обнаружите, что видите нежелательную «Flash of Unstyled Content», вы также можете использовать встроенный стиль. Обычная мудрость «не ставьте стиль inline» действительно предназначена для вашего основного стиля, а не для визуальных эффектов (эффекты JS все просто добавляют встроенные стили).

Конечно, содержание не будет видно JS-инвалидам поисковых систем пауков, если это важно. Если это не важно, вы хорошо!

Вы используете старую версию jQuery? Это должно было быть исправлено уже, см. Обсуждение здесь:

Мне понадобился дисплей: flex для переупорядочения элементов со свойством order. Изменение отображения: flex работал, но ему пришлось ждать завершения анимации, чтобы изменить порядок элементов, поэтому был момент, когда все выглядело явно беспорядочным.

Что меня устроило, так это использование опции запуска (см. Документ):

Посмотрите другие вопросы по меткам jquery css slidetoggle или Задайте вопрос

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-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

Цукерберг рекомендует:  6 методов создания треугольников
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих