Книга «CSS для профи»

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

    Эта книга называется «CSS для профи», но это также всеобъемлющая книга. В тех случаях, когда какие-то понятия или принципы трудны либо, как правило, трактуются неправильно, автор подробно объясняет, что они обозначают или как работают и почему именно так. Другие главы, возможно, не настолько исчерпывающи, но Кит Грант дает достаточно сведений, чтобы вы могли эффективно работать и двигаться в правильном направлении, если захотите расширить свои знания. В целом эта книга заполнит пробелы в ваших теоретических познаниях.

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

    Отрывок. 4.1. Предназначение плавающих элементов


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

    Плавающий элемент — объект (зачастую изображение), выровненный по одной из сторон контейнера, что позволяет потоку документа обтекать его (рис. 4.1). Такая компоновка часто встречается в газетах и журналах, поэтому для достижения описанного эффекта плавающие элементы были добавлены и в CSS.

    image На этой иллюстрации элемент выровнен по левому краю, но вы могли бы разместить его и у правого края. Плавающий элемент извлекается из нормального потока документа и выравнивается по одной из сторон контейнера, после чего поток документа станет обтекать участок, где теперь располагается этот элемент. Если вы выравниваете два плавающих элемента по одной стороне, то они выстраиваются один за другим (рис. 4.2).

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

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

    Мы делали это, потому что это был единственный вариант. В конце концов появилась возможность задействовать свойства display: inline-block или display: table — альтернативные, хотя и весьма ограниченные. До последнего времени, пока не были добавлены flex-контейнеры и CSS-сетки, плавающие элементы оставались козырем при верстке макетов страниц. Посмотрим, как они работают. Для примера создайте страницу, показанную на рис. 4.3.

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

    image

    image

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

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

    image

    image

    Этот код позволяет установить некоторые базовые стили для страницы, в том числе исправление свойства box-sizing и селектор лоботомированной совы (см. главу 3). Далее необходимо ограничить ширину контента страницы (рис. 4.4). Обратите внимание на светло-серые поля по обеим сторонам, а также на то, что шапка и основной контейнер одинаковой ширины.

    image

    Такая разметка часто используется для центрирования контента страницы. Вы можете добиться этого, расположив контент внутри двух вложенных контейнеров и настроив поля внутреннего контейнера так, чтобы он не выходил за пределы внешнего (рис. 4.5). Веб-разработчик Брэд Вестфол (Brad Westfall) называет такой подход шаблоном двойного контейнера.

    image

    В нашем примере элемент body играет роль внешнего контейнера. По умолчанию данный элемент занимает 100 % ширины страницы, так что вам не придется применять к нему новые стили. Мы упаковали весь контент страницы внутрь этого элемента, в элемент , играющий роль внутреннего контейнера. Добавьте код из листинга 4.3 в свою таблицу стилей.

    image

    Благодаря использованию свойства max-width вместо свойства width элемент сжимается до значений менее 1080 пикселов, если разрешение области просмотра ниже этого значения. Иными словами, контейнер заполнит меньшие области просмотра, но в больших областях просмотра он расширится до 1080 пикселов. Это важно для того, чтобы избежать горизонтального прокручивания на устройствах с небольшой областью просмотра.

    4.2. Схлопывание контейнера и clearfix


    В прошлом ошибки браузеров искажали поведение плавающих элементов, впрочем, это было характерно в основном для Internet Explorer 6 и 7. Я почти убежден, что вам больше не нужно поддерживать эти браузеры, поэтому не следует и переживать по поводу этих ошибок. Теперь вы можете быть уверены в том, что браузеры будут правильно обрабатывать плавающие элементы.

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

    4.2.1. Что такое схлопывание контейнера


    Выровняем четыре плавающих медиаобъекта на странице по левому краю — и проблемы не заставят себя долго ждать (рис. 4.6).

    image

    Что случилось с белым фоном? Мы видим его позади названия страницы («Полезные советы»), однако этим он и ограничивается, вместо того чтобы расширяться вниз и включать все медиаобъекты. Чтобы увидеть это на своей странице, добавьте код из листинга 4.4 в таблицу стилей. Затем рассмотрим, почему так происходит и как это исправить.

    image

    Мы установили светло-серый фон для каждого медиаобъекта, ожидая, что белый фон контейнера окажется позади (или, точнее, вокруг) них. Однако вместо этого белый фон исчезает у верхнего края медиаобъектов. Почему так?

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

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

    image

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

    image

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

    image

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

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

    4.2.2. Что такое clearfix


    Вместо добавления еще одного контейнера div в разметку воспользуемся псевдоэлементом. С помощью селектора псевдоэлемента ::after можно эффективно вставить элемент в DOM в конце контейнера без добавления его в разметку.

    В листинге 4.6 показан общий подход к решению проблемы умещения плавающих элементов, называемый clearfix. (Некоторые разработчики предпочитают сокращать имя класса до cf, что удобно, так как одновременно это сокращение фразы containing floats — умещение плавающих элементов.) Добавьте следующий код в свою таблицу стилей.

    image

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

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

    Иногда разработчики предпочитают использовать модифицированную версию метода clearfix, которая будет вмещать все поля и окажется более предсказуемой. Добавление этой версии на вашу страницу предотвратит схлопывание верхнего поля названия страницы вне элемента main (рис. 4.9), что оставит нужное расстояние над заголовком.

    image

    Для использования модифицированной версии обновите код метода clearfix в своей таблице стилей, как показано в листинге 4.7.

    image

    В этой версии используется свойство display:table, а не display:block. Применив его к обоим псевдоэлементам, ::before и ::after, вы уместите любые поля дочерних элементов, располагающихся в верхней и нижней частях контейнера. Во врезке «Метод clearfix и свойство display: table» ниже более подробно объясняется, как это работает.

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

    Метод clearfix и свойство display: table
    Применение свойства display: table в методе clearfix умещает поля благодаря некоторым особенностям CSS. Создание табличного элемента (или в данном случае псевдоэлемента) неявно создает строку таблицы внутри этого элемента, а также ячейку таблицы в строке. Так как поля не схлопываются через табличные элементы (как упоминалось в главе 3), поля не будут схлопываться и через табличный псевдоэлемент.

    Может показаться, что при использовании свойства display: table-cell вы получили бы тот же эффект. Однако свойство clear срабатывает только применительно к блочным элементам, коим ячейка таблицы не является. Таким образом, свойство clear нельзя применять со свойством display:table-cell. В общем, чтобы уместить поля, сбросить обтекание всех плавающих элементов и подразумеваемой ячейки, воспользуйтесь свойством display: table.

    4.3. Неожиданный «захват» плавающего элемента


    Теперь, когда белый контейнер содержит плавающие медиаобъекты, становится очевидной другая проблема: четыре медиаобъекта не образуют две одинаковые строки, как нам нужно. Вместо этого первые два блока («Физкультура» и «Темп») стоят в одной строке, как и ожидалось, но третий блок («Меняйтесь») расположен справа, под вторым блоком. При такой компоновке под первым блоком остается большой промежуток, это происходит из-за того, что браузер размещает плавающие элементы как можно выше.

    На рис. 4.10 приведена упрощенная схема.

    image

    Так как блок 2 ниже блока 1, для блока 3 попросту нет места под блоком 1. Вместо обхода блока 1 блок 3 «захватывает» его. Иными словами, блок 3 не выравнивается по левому краю, а обтекает нижний угол блока 1.

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

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

    image

    Исправить эту проблему просто: третьему плавающему элементу необходимо сбрасывать обтекание плавающих элементов, расположенных над ним. Или, иными словами, первый элемент в каждой строке должен сбрасывать обтекание плавающего элемента, расположенного над ним. Так как у вас по два блока в строке, то потребуется, чтобы каждый нечетный элемент сбрасывал обтекание вышестоящей строки. Вы можете адресно выбрать такие элементы с помощью селектора псевдокласса :nth-child(). Добавьте в таблицу стилей следующий набор правил (листинг 4.8).

    image

    Этот код будет работать, даже если позднее вы добавите на страницу новые элементы. Код применяется к первому, третьему, пятому элементам и т. д. Если бы требовалось разместить по три элемента в строке, то вы могли бы нацелить селектор на каждый третий элемент: .media:nth-child(3n+1) (см. приложение А для получения дополнительной информации об использовании селектора :nth-child).

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

    image


    » Более подробно с книгой можно ознакомиться на сайте издательства
    » Оглавление
    » Отрывок

    Для Хаброжителей скидка 25% по купону — CSS

    По факту оплаты бумажной версии книги на e-mail высылается электронная версия книги.
    Издательский дом «Питер»
    231,64
    Компания
    Поделиться публикацией

    Похожие публикации

    Комментарии 14

      0
      А что такое селектор лоботомированной совы? :)
        0
        Там отсылка к главе 3. Почитайте, интересно )
          0
          body * + * {
          }
            0
            OMG! Бежать, бежать!
              0
              За применение таких селекторов на продакшене надо лоботомию делать.
            0
            Книгу ждал, еще думал почему диалектика за нее не берется, а тут бац и вы ее выпускаете.
            Есть полезные и интересные моменты. Но перевод… как будто читаю не первые главы, а последние, когда уже все спешили к сдаче книги. Дело не в грамматике, а именно смысл предложения другой.
            Например, рисунки 3.11 и 3.12 одинаковые, но должны отличаться. Там где про отрицательные отступы. Сидишь, как дурак, ищешь отличия.
            PS насколько книга дороже будет, если в нее добавить цвета? Хотя бы как в оригинале оттенков синего?
              0
              согласен, есть такие темы, где цвет очень важен для донесения информации, вы привели отличный пример, а еще цвет важен в книгах по машинному обучению, где описывается работа какой-нибудь нейросети
                0
                Данным картинкам даже цвет не поможет, они просто одинаковые. Тут откровенный косяк издательства.
              +1

              Шел 2019: выпускались книги про вёрстку на float...


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

                0
                Там верстают на всем. Один и тот же пример с помощью разных решений. Там даже html-таблицы упоминают.
                  0

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

                +2
                Зачем читать книгу про float в 2019?
                  0
                  Для прямого предназначения- обтекания текста
                  0
                  В свое время не успел купить книги ES6 и не только и Ecmascript для разработчиков. Не планируете ли допечатать их?

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

                  Самое читаемое