CSS3 Grid Layout в IE10 (ч.1)

Автор: Topol Воскресенье, Май 6th, 2012 Нет комментариев

Рубрика: Операционные системы

Эта статья открывает цикл, описывающий возможности стилей CSS3, поддержка которых появится в Internet Explorer  10. На данный момент они поддерживаются Internet Explorer 10 Platform Preview 1.

И начнём мы с рассмотрения так называемой сеточной разметки (grid layout), как она называется в документах W3C. В документации Microsoft она носит название выравнивания по сетке (grid alignment). Ради соблюдения стандартов и во избежание путаницы мы будем называть её так, как рекомендует W3C.

1. Введение в сеточную разметку
Но что такое сеточная разметка? Зачем она нужна? И чем она лучше всего того, что уже присутствует в HTML и CSS? Ответы на все эти вопросы мы дадим во введении. Но приготовимся — введение будет долгим.

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

Надо также сказать несколько слов о размерах отдельных фрагментов. Они могут:

 

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

Размеры, относящиеся к первой разновидности, называются фиксированными, а относящиеся к остальным трём разновидностям -относительными. Фиксированные размеры не меняются при изменении размеров окна браузера, относительные — меняются.

Давайте рассмотрим пример такой сложно отформатированной веб-страницы. Её схема показана на рис. 1.


Рис. 1. Пример страницы со сложным форматированием

Здесь:

  • фрагмент 1 занимает всю ширину страницы и имеет фиксированную высоту в 50 пикселов;
  • фрагмент 5 занимает всю ширину страницы и имеет фиксированную высоту также в 50 пикселов;
  • фрагмент 2 имеет такую ширину, чтобы полностью вместить своё содержимое, и занимает оставшееся свободное пространство страницы по высоте;
  • фрагмент 4 имеет ширину, равную 1/4 от оставшегося свободного пространства страницы, и занимает оставшееся на ней свободное пространство по высоте;
  • фрагмент 3 имеет ширину, равную 3/4 от оставшегося свободного пространства -страницы, и имеет такую высоту, чтобы полностью вместить своё содержимое.

Как всё это реализовать на практике?

1.2. Три способа форматирования веб-страниц, их достоинства и недостатки
Существуют три способа. Рассмотрим их по порядку, так сказать, старшинства.

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

Достоинства фреймов:

  • Фреймы гарантированно поддерживаются всеми современными браузерами. Вообще, фреймы появились очень давно, ещё во времена HTML2; правда, тогда они ещё не входили в стандарт этого языка. Стандартными средствами они стали только в HTML4.
  • HTML-код, создающий фреймы, очень компактен.
  • Не требуется никаких веб-сценариев — всё реализуется средствами HTML.

Недостатки:

  • Для создания сложного форматирования требуется создать многократно вложенные друг в друга наборы фреймов, а это довольно трудоёмко.
  • Веб-страница, содержащая фреймы, не может иметь никакого другого содержимого.
  • Содержимое страницы оказывается разделённым на множество фрагментов, хранящихся в отдельных файлах, что может быть неприемлемо.
  • Если требуется управлять содержимым страницы из веб-сценариев, могут возникнуть трудности с получением доступа из содержимого одного фрейма к содержимому другого.
  • С помощью фреймов мы можем только отформатировать только страницу целиком, но не её фрагмент (например, содержимое ячейки таблицы или блочного контейнера <DIV>).
  • В конце концов, фреймы сейчас выглядят крайне архаично.

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

Достоинства таблиц разметки:

  • Таблицы гарантированно поддерживаются всеми современными браузерами. Их поддержка появилась в HTML4.
  • Всё содержимое страницы хранится прямо в ней.
  • С помощью таблиц разметки мы можем отформатировать и фрагмент страницы, например, содержимое ячейки другой таблицы или блочного контейнера <DIV>.

Недостатки:

  • Для реализации сложных веб-страниц придётся создавать набор таблиц, причём одни таблицы будут вложены в ячейки других. Во-первых, этот процесс очень трудоёмок. А во вторых, в результате мы получим громоздкую структуру таблиц и, соответственно, сложный HTML-код, разобраться в котором будет непросто.
  • Указанные нами размеры строк и столбцов таблицы — не более чем рекомендация браузеру. В реальности он вполне способен задать для них совершенно другие размеры, что может испортить дизайн.

Способ третий - плавающие контейнеры <DIV>. Мы создаём контейнеры, форматируем их как плавающие (float) средствами CSS и помещаем в них фрагменты содержимого веб-страницы.

Достоинства плавающих контейнеров:

  • Плавающие контейнеры гарантированно поддерживаются всеми современными браузерами. Их поддержка появилась в HTML4 и CSS1.
  • HTML-код, создающий контейнеры, исключительно компактен.
  • Всё содержимое страницы хранится прямо в ней.

Недостатки:

  • Одними лишь средствами CSS очень трудно создать контейнеры с относительными размерами; для этого придётся использовать набор многократно вложенных друг в друга контейнеров и сложные стили. Как вариант, можно задействовать веб-сценарии, которые будут изменять размеры контейнеров, но это также нетривиальная задача, особенно при сложном форматировании.
  • С помощью плавающих контейнеров можно просто отформатировать Web-страницу целиком, но очень трудно — её фрагмент. Хотя средства CSS вроде бы предусматривают возможность сделать это.

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

1.3. Четвёртый способ — сеточная разметка CSS3
Давайте сформулируем требования к средствам форматирования веб-страниц, который мы хотели бы получить в своё распоряжение.

Прежде всего, желательно, чтобы эти средства основывались на контейнерах <DIV>. Благодаря этому в список их достоинств добавятся компактность HTML-кода и «монолитность» веб-страницы.

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

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

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

Наконец, эти средства не должны требовать для реализации сложного HTML- и CSS-кода. В конце концов, любое нововведение должно облегчать наш труд, а не усложнять его.

Что же мы получим в результате?

А получим мы четвёртый способ форматирования веб-страниц - сеточную разметку (grid layout), являющуюся частью разрабатываемого в настоящий момент стандарта CSS3. Всеми заявленными нами требованиями она обладает в полной мере.

Единственный недостаток сеточной разметки — крайне ограниченная поддержка браузерами. В самом деле, очень немногие из даже самых современных на данный момент программ поддерживают её; так, совсем недавно вышедший Internet Explorer 9 «не понимает» сеточной разметки.

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

2. Реализация сеточной разметки
Сеточная разметка реализуется с помощью особых атрибутов стилей CSS. Эти атрибуты мы сейчас рассмотрим.

Примечание:
Имена всех атрибутов стилей, что будут описаны в этой статье, предваряются символами «-ms-». Именно в таком виде они поддерживаются Internet Explorer 10 Platform Preview 1. В последующих редакциях Internet Explorer 10, вероятно, эти атрибуты стилей будут поддерживаться в том виде, в каком они указаны в стандарте CSS3, — без вышеуказанных символов в именах; так, атрибут стиля -ms-grid-columns будет называться grid-columns.

2.1. Указание на использование сеточной разметки в элементе-родителе
Первое, что нам нужно сделать для реализации сеточной разметки, — собственно указать, что она будет реализована. Это нужно сделать в элементе веб-странице, который станет родителем для содержимого, что будет отформатировано с её применением: контейнере <DIV>, ячейке таблицы или даже секции тела страницы (теге <BODY>).

Сделать это можно с помощью знакомого нам атрибута стиля display. Для него нужно задать значение -ms-grid.

Код:
#divGrid { display: -ms-grid; }

Задаём сеточную разметку для контейнера divGrid.

2.2. Формирование сетки разметки
Следующий шаг — формирование сетки разметки, которая будет использована для размещения отдельных контейнеров внутри элемента-родителя.

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


Рис. 2. Сетка разметки для страницы, показанной на рис. 1

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

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

Атрибут стиля -ms-grid-columns служит для указания значений ширины отдельных столбцов сетки разметки. Сколько значений указано в нём, столько столбцов будет содержать сетка разметки. Отдельные значения разделяются пробелами.

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

  • Значения, заданные в любых поддерживаемых CSS единицах измерения размеров. Они задают фиксированные значения ширины столбцов в сетке разметки.
    Код:
    -ms-grid-columns: 100px 20ex 3cm;

    Сетка разметки будет иметь три столбца; первый столбец получит ширину 100 пикселов, второй — 20 букв «x», третий — 3 сантиметра.

  • Значение auto. Оно указывает, что данный столбец будет иметь такую ширину, чтобы полностью вместить своё содержимое, и не более.
    Код:
    -ms-grid-columns: 100px auto 3cm;

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

  • Значения вида <число>fr. Такое значение задаёт ширину столбца, равную доле от оставшегося пространства контейнера, которая указывается <числом>.
    Код:
    -ms-grid-columns: 100px auto 3fr 1fr;

    Первый столбец сетки разметки получит фиксированную ширину в 100 пикселов, а второй — такую, чтобы полностью вместить своё содержимое. Оставшееся пространство в контейнере по ширине будет разделено на 4 (3+1) части; третий столбец получит ширину, равную 3 таким частям (3/4 от оставшегося пространства), а четвёртый — ширину, равную 1 части (1/4 оставшегося пространства).

Аналогично, для задания высоты строк сетки разметки используется атрибут стиля -ms-grid-rows. Он ведёт себя так же и поддерживает те же значения, что и атрибут стиля -ms-grid-columns.

Код:
#divGrid { -ms-grid-columns: auto 3fr 1fr;
-ms-grid-rows: 50px auto 50px; }

Формируем сетку разметки для нашей веб-странички (см. рис. 1 и 2).

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

Таких контейнеров будет у нас пять (см. рис. 1). Мы вложим их в контейнер divGrid.

Код:
<DIV ID=»divGrid»>
<DIV ID=»div1″>Фрагмент 1</DIV>
<DIV ID=»div2″>Фрагмент 2</DIV>
<DIV ID=»div3″>Фрагмент 3</DIV>
<DIV ID=»div4″>Фрагмент 4</DIV>
<DIV ID=»div5″>Фрагмент 5</DIV>
</DIV>

Чтобы указать, в какой ячейке сетки разметки будет помещён контейнер, используются атрибуты стиля -ms-grid-column и -ms-grid-row. Они указываются для контейнеров, которые будут расставляться в ячейках сетки разметки.

Атрибут стиля ms-grid-column указывает номер столбца, а атрибут стиля -ms-grid-row — номер строки, на пересечении которых находится нужная ячейка. Номера задаются в виде целых чисел. Отметим также, что нумерация строк и столбцов сетки разметки начинается с единицы.

Значение атрибутов ms-grid-column и -ms-grid-row по умолчанию — 1. То есть, чтобы поместить какой-либо контейнер в ячейку первой строки или первого столбца, мы можем не указывать соответствующий атрибут стиля.

Код:
#div1 { -ms-grid-row: 1;
-ms-grid-column: 1; }

Помещаем первый контейнер (он имеет имя div1) в ячейку, формируемую на пересечении первой строки и первого столбца сетки разметки.

Вообще-то, нам не обязательно задавать для контйнера div1 этот стиль. Вспомним, что говорилось чуть ранее: значение атрибутов ms-grid-column и -ms-grid-row по умолчанию — 1. Так что и без этого стиля контейнер div1 всё равно окажется в ячейке первой строки и первого столбца сетки разметки.

Код:
#div2 { -ms-grid-row: 2;
-ms-grid-column: 1; }
#div3 { -ms-grid-row: 2;
-ms-grid-column: 2; }
#div4 { -ms-grid-row: 2;
-ms-grid-column: 3; }
#div5 { -ms-grid-row: 3;
-ms-grid-column: 2; }

Расставляем по ячейкам остальные контейнеры.

  • Второй контейнер (div2) — в ячейку, образованную пересечением второй строки и первого столбца сетки разметки.
  • Третий контейнер (div3) — в ячейку, образованную пересечением второй строки и второго столбца.
  • Четвёртый контейнер (div4) — в ячейку, образованную пересечением второй строки и третьего столбца.
  • Пятый контейнер (div5) — в ячейку, образованную пересечением третьей строки и второго столбца.

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

Код:
DIV { border: black solid thin; }

И уберём её у контейнера divGrid.

Код:
#divGrid { border: none; }

Результат показан на рис. 3.


Рис. 3. Результат расстановки контейнеров в ячейках сетки разметки

Интересно, что нам совсем не обязательно заполнять все ячейки сетки разметки. Некоторые ячейки можно оставить пустыми (как, например, в нашем случае — см. рис. 3).

2.4. Размещение контейнеров сразу в нескольких ячейках сетки разметки
Да, показанное на рис. 3 сильно отличается от того, что мы планировали (см. рис. 1 и 2)…

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

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

С помощью атрибутов стиля -ms-grid-column-span и -ms-grid-row-span. Они также указываются для контейнеров, которые будут расставляться в ячейках сетки разметки.

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

Осталось только сказать, что значение атрибутов стиля -ms-grid-column-span и -ms-grid-row-span по умолчанию — 1. То есть, если мы не укажем какой-либо из этих атрибутов стиля, контейнер займёт только одну ячейку в соответствующем направлении (что мы и наблюдали ранее).

Код:
#div1 { -ms-grid-column-span: 3; }

Размещаем первый контейнер (div1) сразу в трёх ячейках по горизонтали.

Код:
#div2 { -ms-grid-row-span: 2; }
#div5 { -ms-grid-column-span: 2; }

Размещаем второй контейнер (div2) в двух ячейках по вертикали, а пятый (div5) — в трёх по горизонтали.

И посмотрим на результат — см. рис. 4. То, что мы и хотели получить!


Рис. 4. Результат этапа размещения контейнеров в нескольких ячейках сетки разметки

Для желающих получить всё и сразу — ниже приведён полный код окончательного варианта нашей веб-страницы.

Код:
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV=»Content-Type» CONTENT=»text/html; charset=utf-8″>
<TITLE>Сеточная разметка</TITLE>
<STYLE>
#divGrid { display: -ms-grid;
-ms-grid-rows: 50px auto 50px;
-ms-grid-columns: auto 3fr 1fr;
border: none; }
DIV      { border: black solid thin; }
#div1    { -ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3; }
#div2    { -ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-row-span: 2; }
#div3    { -ms-grid-row: 2;
-ms-grid-column: 2; }
#div4    { -ms-grid-row: 2;
-ms-grid-column: 3; }
#div5    { -ms-grid-row: 3;
-ms-grid-column: 2;
-ms-grid-column-span: 2; }
</STYLE>
</HEAD>
<BODY>
<DIV ID=»divGrid»>
<DIV ID=»div1″>Фрагмент 1</DIV>
<DIV ID=»div2″>Фрагмент 2</DIV>
<DIV ID=»div3″>Фрагмент 3</DIV>
<DIV ID=»div4″>Фрагмент 4</DIV>
<DIV ID=»div5″>Фрагмент 5</DIV>
</DIV>
</BODY>
</HTML>

Отметим, что эта веб-страница должна быть сохранены в кодировке UTF-8. Эта кодировка рекомендуется для всех веб-страниц, создаваемых с использованием HTML5 и CSS3.

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты