Макет

Макет элемента

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

Важна и работа с шаблонами отдельных элементов, которые расположены в изменяющихся областях страницы. Таким образом, если вы задали сетку, определяющую общий вид страницы и получили с её помощью некоторое количество областей фиксированного размера (для заголовков, изображений в заголовке, панелей управления и так далее), оставшаяся область может сильно меняться в размере при изменении размеров окна. В этом разделе, таким образом, давайте взглянем на некоторые средства, которые мы можем применять в подобных областях: CSS-трансформации, гибкое окно, вложенные и встроенные сетки, многоколоночный текст, CSS-выражения и объединенные CSS-рамки. Информацию по этим и другим возможностям CSS, которые поддерживаются приложениями для Магазина Windows (такие, как фоны, границы, градиенты), можно найти в материале "Каскадные таблицы стилей" (http://msdn.microsoft.com/library/windows/apps/hh996828.aspx).

2D и 3D-трансформации в CSS

Практически невозможно размышлять о макетах для элементов не принимая во внимание CSS-трансформации. Трансформации - очень мощное средство, так как они делают возможным изменение отображения элемента, не воздействуя ни на последовательность элементов в документе, ни на общий макет. Это очень полезно для реализации анимаций и переходов. Трансформации широко используются библиотекой анимации WinJS, которые обеспечивают внешний вид и восприятие встроенных элементов управления, характерные для Windows 8. Как мы узнаем в "Коллекции и элементы управления для вывода коллекций" курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript", вы можете так же напрямую пользоваться этой библиотекой.

CSS-трансформации можно использовать непосредственно, конечно, в любое время, когда вам нужно преобразовать, масштабировать, повернуть элемент. Приложения для Магазина Windows поддерживают и 2D (двумерные) и 3D (трехмерные) трансформации (http://dev.w3.org/csswg/css3-2d-transforms/ и http://www.w3.org/TR/css3-3d-transforms/), в частности, эти стили^{4Во время написания этого материала префиксы -ms-* для данных стилей уже не нужны, но всё еще поддерживаются.}:

Подробности можно найти на странице "Трансформации" (http://msdn.microsoft.com/library/windows/apps/hh453377.aspx). Знайте так же, что так как хост-процесс приложения использует те же механизмы, что и Internet Explorer, трансформации используют все преимущества аппаратного ускорения.

Гибкое окно (flexbox)

Так же, как сетка - отличный инструмент для решения проблем макетов страниц, модуль гибкое окно CSS, описанный в http://www.w3.org/TR/css3-flexbox/, прекрасно подходит для работы с областями, размеры которых могут меняться, содержимое в которых нуждается в "заполнении" доступного пространства. Процититуем спецификацию W3C:

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

Так как спецификации гибкого окна представлены в форме чернового стандарта, конкретные стили, используемые в приложениях для Магазина Windows - это display: -ms-flexbox (уровень блоков) и display: -ms-inline-flexbox (встроенный)^{5Если вы привыкли к стилям -ms-box* для гибких окон, Microsoft с тех пор следует спецификациям W3C, где ожидается последняя старшая редакция перед финальным принятием стандарта. Когда новый синтаксис заменит старый, старый не будет работать ни в приложениях для Магазина Windows, ни в Internet Explorer 10.}. Полную справочную информацию по другим поддерживаемым свойствам вы можете найти на странице "Макет на основе гибкого окна ("Flexbox")" (http://msdn.microsoft.com/library/windows/apps/hh453474.aspx):

Как и для всех остальных стилей, Blend - это отличный инструмент, с помощью которого можно экспериментировать с различными стилями гибких окон, так как вы можете сразу же видеть эффект от их применения. Также полезно знать, что гибкое окно используется во многих местах WinJS и в шаблонах проектов, как мы видели ранее в случае с шаблоном Приложение с фиксированным макетом. В частности, возможности гибкого окна использует элемент управления ListView, это позволяет ему отображать больше элементов, когда доступно больше пространства. Элемент управления FlipView использует гибкое окно для центровки элементов. Элементы управления Ratings, DataPicker и TimePicker организуют свои внутренние элементы с использованием встроенного гибкого окна. Весьма вероятно, что ваши собственные пользовательские элементы управления будут поступать так же.

Вложенные и встроенные сетки

Так же, как и гибкое окно имеет модели блочного уровня и встроенные модели, существуют и встроенные сетки: display: -ms-inline-grid. В отличе от сетки блочного уровня, встроенный вариант позволяет вам располагать несколько сеток на одной и той же линии. Это показано в упражнении InlineGrid, где у нас есть три элемента div в HTML, которые можно переключать между встроенной моделью (по умолчанию) и моделью блочного уровня:

//В обработчике activated	
document.getElementById("chkInline").addEventListener("click", function () {
setGridStyle(document.getElementById("chkInline").checked);	
});	
setGridStyle(true);

//В любом месте в default.js 
function setGridStyle(inline) {
var gridClass = inline ? "inline" : "block";

document.getElementById("grid1").className = gridClass;
document.getElementById("grid2").className = gridClass;
document.getElementById("grid3").className = gridClass;
}	

/* default.css */	
.inline {	
display: -ms-inline-grid;
}	

.block {
display: -ms-grid;
}

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

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