Главное назначение блочной модели — обеспечивать механизм разбиения оконного пространства на отдельные блоки и создания строк и столбцов, которые и составляют основу дизайна обычной веб-страницы. Однако традиционная блочная модель, используемая еще со времен первой версии CSS и широко распространенная по сей день, не слишком хорошо справляется с этой задачей. Например, в этой модели невозможно определить расположение блоков и задать их ширину и высоту, не прибегая к помощи разнообразных трюков или сложных наборов правил, которые придумал башковитый парень откуда-то с другого континента.
Сложность создания популярных дизайнерских эффектов (таких, как увеличение ширины столбцов в зависимости от размера свободного пространства, выравнивание содержимого по вертикали, вытягивание столбцов по вертикали независимо от содержимого) заставила разработчиков задуматься о возможности применения к документам каких-то новых моделей. Было разработано несколько образцов, но ни один из них не сумел привлечь к себе столько внимания, как гибкая блочная модель.
Гибкая блочная модель элегантно решает проблемы предыдущей модели. Благодаря новой реализации у нас наконец-то появились блоки, представляющие виртуальные строки и столбцы, которые в действительности больше всего и нужны дизайнерам и пользователям. Теперь мы получили полный контроль над макетом, позициями и размером блоков, распределением блоков внутри других блоков и размещением их в общем оконном пространстве. Код раз и навсегда принял форму, удовлетворяющую требованиям дизайнеров.
Несмотря на то что гибкая блочная модель обладает массой преимуществ по сравнению с предыдущей моделью, она все еще находится на экспериментальной стадии разработки.
Еще по меньшей мере несколько лет придется ждать полного внедрения ее в браузеры и процессы создания веб-сайтов и приложений. В настоящее время существует две спецификации, и только одну поддерживают браузеры на базе WebKit и Gecko, такие как Firefox и Google Chrome. Вот почему мы также подробно рассмотрели применение традиционной блочной модели.
В этом разделе мы познакомимся с работой гибкой блочной модели, узнаем, как применить ее к нашему шаблону, а также изучим предоставляемые этой моделью новые возможности.
Одна из главных особенностей данной модели заключается в том, что некоторые возможности (например, ориентация — вертикальная или горизонтальная) объявляются в родительских блоках. Из этого следует, что для правильной организации блоков необходимо одни блоки вставлять в другие. В новой модели у каждого набора блоков обязательно должен быть родительский блок.
Если вы взглянете на шаблон, с которым мы до сих пор работали, то увидите, что несколько родительских блоков там уже определены. Элемент <body> и обертку <div> можно с успехом превратить в родительские блоки. Однако родительский блок требуется и для еще одной составляющей структуры. Мы добавим новый элемент <div> для обрамления поднабора блоков, представляющего два столбца в середине страницы (в коде документа они определяются элементами <section> и <aside>).
Вот как наш шаблон будет выглядеть после добавления новой обертки.
Листинг 2.37. Добавление родительского блока для обрамления <section> и <aside>
<! DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content^^™ пример HTML5">
<link rel="stylesheet" href="mystyles. css">
</head>
<body>
<div id="wrapper">
<header id="main_header">
<h1>Это главный заголовок веб-сайта</h1>
</header>
<nav id="main_menu">
<ul>
<li>домой</li>
<li>фотографии</li>
<li>видео</li>
<Н>контакты</Н>
</ul>
</nav>
<div id="container">
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Заголовок статьи 1</h1>
<h2>подзаголовок статьи 1</h2>
</hgroup>
<time datetime="2011-12-10" pubdate>опубликовано 10.12.2011</time> </header>
Это текст моей первой статьи <figure>
<img src="http://minkbooks.com/content/myimage.jpg"> <figcaption>
Это изображение для первой статьи </figcaption>
</figure>
<footer>
<p>комментарии (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Заголовок статьи 2</h1>
<h2>подзаголовок статьи 2</h2>
</hgroup>
<time datetime="2011-12-15" pubdate>опубликовано 15.12.2011</time> </header>
Это текст моей второй статьи <footer>
<p>комментарии (0)</p>
</footer>
</article>
</section>
<aside id="main_aside">
<blockquote>Статья 1</blockquote>
<blockquote>Статья 2</blockquote>
</aside>
</div>
Footer id="main_footer">
Copyright © 2010-2011 </footer>
</div>
</body>
</html>
В оставшейся части главы мы будем использовать шаблон из листинга 2.37. Замените шаблон в своем HTML-файле представленным ранее кодом. Также вам понадобится очистить файл mystyles. css, для того чтобы добавить туда правила CSS, которые мы рассмотрим далее.
Прежде чем применять свойства CSS, относящиеся только к гибкой блочной модели, давайте добавим в новую таблицу стилей базовые правила, общие для обеих моделей.
Листинг 2.38. Общие правила CSS для обеих моделей * {
Margin: 0px; padding: 0px;
}
Hi {
Font: bold 20px verdana, sans-serif;
}
H2 {
Font: bold 14px verdana, sans-serif;
}
Header, section, footer, aside, nav, article, figure, figcaption, hgroup{
Display: block;
}
Здесь происходит то же самое, чем мы уже пользовались раньше: первое правило в листинге 2.38 устанавливает нулевую ширину полей для всех элементов в коде. После этого определяются свойства шрифта для текста в тегах H, а затем элементы HTML5 описываются как блочные элементы (это необходимо для браузеров, которые не умеют по умолчанию назначать стили).
Теперь, когда базовые правила готовы, можно связать с нашим шаблоном гибкую блочную модель. В этой модели каждый элемент, внутри которого находятся структурные элементы, должен быть объявлен как родительский блок. Первый родительский блок в нашем документе — это само тело документа.
Листинг 2.39. Объявление элемента <body> в качестве родительского блока
Body {
Width: 100%;
Display: — moz-box; display: — webkit-box;
-moz-box-pack: center;
-webkit-box-pack: center;
}
Для того чтобы сделать элемент родительским блоком, нужно связать с ним свойство display и присвоить ему значение box.
В листинге 2.39 помимо объявления тела документа родительским блоком мы определили стиль, выравнивающий содержимое элемента <body> по центру. Значение center свойства box-pack выравнивает по центру дочерние элементы родительского блока. В нашем случае у <body> только один дочерний элемент, а именно <div id="wrapper">, поэтому настройка выравнивания распространяется на всю веб-страницу.
Еще одна важная характеристика данной модели заключается в возможности с легкостью увеличивать и уменьшать размер любого элемента вебстраницы в зависимости от доступного свободного пространства. Однако для того, чтобы блок обладал подобной гибкостью, он должен быть потомком такого же гибкого родительского элемента. Размер элементов невозможно корректировать, если неизвестен размер их родительских элементов, поэтому необходимо указать, что тело документа займет все пространство окна браузера. Для этого мы в предыдущем правиле объявили ширину 100%.
Поскольку свойства CSS, которые мы здесь изучаем, находятся на стадии разработки, большинство их них необходимо объявлять с использованием специального префикса, соответствующего механизму визуализации. В будущем можно будет использовать простую запись display: box, однако пока экспериментальный этап не завершился, приходится делать так, как показано в листинге 2.39. Далее перечислены префиксы для большинства распространенных браузеров:
|
-moz- |
— Firefox; |
|
-webkit- |
— Safari и Chrome; |
|
-o- |
— Opera; |
|
-khtml- |
— Konqueror; |
|
-ms- |
— Internet Explorer; |
|
-chrome- |
— только Google Chrome. |
Существует множество свойств, предназначенных для определения позиции каждого блока на экране. Можно поставить блоки один на другой, вывести их в одной строке, поменять порядок вывода на противоположный или даже объявить конкретную последовательность отображения блоков. Некоторые из этих свойств мы применим в нашем шаблоне прямо сейчас, а чуть позже рассмотрим их подробнее.
Одно из новых свойств называется box-orient. Оно определяет вертикальную или горизонтальную ориентацию дочерних элементов. Значение по умолчанию равно horizontal, поэтому для элемента <body> его указывать не нужно, однако для обертки оно требуется.
Листинг 2.40. Задание для родительского блока максимального размера и вертикальной ориентации
#wrapper{
Max-width: 960px; margin: 15px 0px;
Display: — moz-box; display: — webkit-box;
-moz-box-orient: vertical; — webkit-box-orient: vertical;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
Блок, для которого объявляется свойство display: box, обладает свойствами блочного элемента и занимает все свободное пространство в своем контейнере. В предыдущей модели мы использовали для главного блока фиксированное значение ширины, равное 960 пикселам. Это значение фиксировало размер не только данного блока, но и всей веб-страницы. Для того чтобы воспользоваться преимуществами гибких свойств новой блочной модели, необходимо снизить уровень точности. Если <body> уже занимает 100% окна, то обертка будет вести себя точно так же и в некоторых случаях это приведет к искажению пропорций страницы. Чтобы избежать этого, но все же иметь на странице гибкое содержимое, мы в листинге 2.40 использовали свойство max-width со значением 960px. Таким образом мы определили переменную ширину для обертки (и, следовательно, для всей веб-страницы), которая никогда не будет превышать 960 пикселов. Теперь размер веб-страницы будет адаптироваться под каждое устройство и любые условия, а за тем, чтобы единообразие дизайна не нарушалось, будет следить свойство, определяющее максимальную ширину.
Так как блок <div>, стиль для которого мы создали в последнем фрагменте кода, обрамляет все содержимое веб-страницы, его также необходимо объявить родительским блоком, применив для этого display: box. На этот раз его дочерние элементы будут располагаться один над другим, поэтому мы присвоили свойству box-orient значение vertical.
Для того чтобы сделать родительский блок гибким, мы добавили свойство box-flex. Без этого свойства блок <div> невозможно было бы увеличить или уменьшить: его ширина всегда совпадала бы с шириной его содержимого. Значение 1 определяет гибкий блок, а значение 0 — фиксированный. Это свойство может принимать и другие значения, с которыми мы познакомимся чуть позже при других обстоятельствах.
Далее в нашем HTML-документе встречаемся с блоками, создаваемыми элементами <header> и <nav>. Это первые потомки родительского блока <div id="wrapper">. В листинге 2.41 мы всего лишь объявляем некоторые визуальные стили; что касается позиционирования, эти элементы уже обладают свойствами вертикальных блоков, унаследованными от родительского блока.
Под блоком, созданным тегом <nav>, находится еще один блок, являющийся предком для двух потомков. Это новый блок <div>, который мы добавили в листинге 2.37 для обрамления столбцов в центре веб-страницы. Для идентификации данного блока используется атрибут id="container".
Листинг 2.41. Простые правила для отображения заголовка и меню на экране
#main_header {
Background: #FFFBB9; border: 1px solid #999999; padding: 20px;
}
#main_menu {
Background: #CCCCCC; padding: 5px 15px;
}
#main_menu li {
Display: inline-block; list-style: none; padding: 5px;
Font: bold 14px verdana, sans-serif;
}
Листинг 2.42. Создание еще одного родительского блока
#container {
Display: — moz-box; display: — webkit-box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}
Правило из листинга 2.42 определяет родительский блок для двух столбцов в середине страницы. Первый стиль создает блок, а второй определяет горизонтальную ориентацию его дочерних элементов. Этот контейнер не нужно делать гибким, так же как мы не определяли гибкие блоки для заголовка и строки меню. Его размер по умолчанию равен 100%, поэтому он занимает все доступное пространство, предоставляемое контейнером, внутри которого он находится. Кроме того, поскольку родительский элемент данного блока гибкий, то и сам блок тоже гибкий. Следовательно, это свойство опускаем.
Подготовив стили для родительских элементов, можно переходить к работе над столбцами. После применения правил из листинга 2.43 первый столбец, определяемый элементом <section>, станет гибким, то есть потеряет фиксированный размер. Благодаря свойству box-flex он будет адаптироваться к свободному пространству, предоставляемому его родительским элементом. В противоположность этому для правого столбца, создаваемого элементом <aside>, определяется фиксированный размер: 220 пикселов плюс 40 пикселов внутреннего поля (забивки). Разумеется, это всего лишь наше решение для конкретного шаблона. Мы могли бы сделать гибкими оба столбца или разделить доступное пространство между ними пропорционально, применив для этого различные инструменты, доступные в данной модели. Однако вместо этого мы решили сделать размер одного столбца фиксированным, для того чтобы вы смогли сравнить поведение разных блочных моделей на примере одного и того же документа. Кроме того, такая практика широко распространена. Обычно в столбец фиксированной ширины дизайнеры помещают меню, объявления или важную информацию, исходный размер которой важно сохранять.
Листинг 2.43. Создание гибкого и фиксированного столбцов
#main_section {
-moz-box-flex: 1;
-webkit-box-flex: 1;
Margin: 20px;
}
#main_aside {width: 220px; margin: 20px 0px; padding: 20px; background: #CCCCCC;
}
Комбинация гибких и фиксированных столбцов — не уникальное свойство гибкой блочной модели, однако ее возможности весьма широки, и некоторые эффекты, для разработки которых когда-то требовалась не одна строка кода, теперь можно реализовать с помощью нескольких простых свойств.
Есть еще одно важное свойство, которое нам объявлять не требуется, так как оно автоматически связывается с обоими столбцами. Свойство box-align со значением по умолчанию stretch растягивает столбцы по вертикали так, чтобы они занимали все доступное пространство. Благодаря ему правый столбец в нашем шаблоне занимает столько же места по вертикали, сколько и левый.
Результат применения этих свойств — явным образом или по умолчанию — заключается в том, что ширина и высота определенного содержимого веб-страницы могут меняться в зависимости от того, сколько свободного места осталось в окне. Столбец, создаваемый элементом <section>, сможет растягиваться и сжиматься по горизонтали, как и его содержимое. Кроме того, если мы уменьшим или увеличим окно браузера, то автоматически поменяется размер заголовка, навигационной полосы и нижнего колонтитула нашего шаблона. Второй столбец, создаваемый элементом <aside>, растянется по вертикали на все пространство между навигационной полосой и нижним колонтитулом. Всех этих эффектов было довольно сложно достичь в старой блочной модели. Простота реализации эффектов делает гибкую блочную модель отличным кандидатом для замены традиционной блочной модели.
Теперь, с добавлением последних правил из листинга 2.43, у нас есть все необходимые стили для организации блоков и применения гибкой блочной модели к нашему шаблону. Осталось только добавить немного визуальных стилей к оставшимся элементам, чтобы восстановить предыдущий вариант оформления.
Листинг 2.44. Завершение таблицы стилей
#main_footer {
Text-align: center; padding: 20px;
Border-top: 2px solid #999999;
}
Article {
Background: #FFFBCC; border: 1px solid #999999; padding: 20px; margin-bottom: 15px;
}
Time {
Color: #999999;
}
Article footer {text-align: right;
}
Figcaption {
Font: italic 14px verdana, sans-serif;
Вы уже должны были заменить код шаблона в HTML-файле новым кодом из листинга 2.37. Также вы должны были собрать все CSS-стили, начиная с листинга 2.38, в файле mystyles. css. Теперь этот HTML-файл нужно открыть в браузере и визуально проверить результаты. Разверните и сожмите окно браузера и посмотрите, размер каких блоков будет меняться вслед за изменением доступной площади. Проверьте вертикальный размер правого столбца. На нашем веб-сайте вы сможете одним щелчком мыши загрузить все эти коды и примеры — заходите на http://www.minkbooks.com.
Правила из листинга 2.44 схожи с теми, что мы использовали раньше. Единственное различие заключается в том, что больше не нужно добавлять свойство clear: both для нижнего колонтитула, потому что плавающих элементов, требующих «очистки», в данной модели нет.
На рис. 2.3 вы видите схематическое визуальное представление того, что нам удалось сделать в предыдущих фрагментах кода. Блоки с номерами
1, 2 и 3 — родительские. Остальные блоки представляют собой дочерние элементы, указанные в порядке, определяемом унаследованными от предков свойствами.
Добавить комментарий