Перевод которой специально для читателей хабра представлен ниже.

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

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

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

Консорциум W3C и создатели браузеров в курсе этих проблем и работают над рядом решений. Лидером среди них является (как не удивительно) Internet Explorer. Похоже, что IE10 будет предвестником новой эры CSS разметки, которая позволит создавать отличные, динамические и привлекательные сайты, используя недосягаемые ранее возможности.

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

Колонки

Div { column-count: 3; }
Во втором способе ширина колонок фиксирована, они будут повторяться до тех пор, пока не заполнят ширину родительского элемента. В этом примере ширина колонки установлена в 140px, значит в блоке шириной 800px должно появиться пять колонок:

Div { column-width: 140px; }
По умолчанию, зазор между колонками равен 1em, но его можно сменить, используя свойство column-gap . Также между колонками можно разместить разделительные линии с помощью column-rule , похожий по синтаксису на свойство border. Представленный ниже код создаст пунктирную линию шириной 2px, а также установит отступ между колонками в 28px (разделитель будет располагаться посредине):

Div { column-gap: 28px; column-rule: 2px dotted #ccc; }
Если хотите посмотреть результат, взгляните на пример реализации CSS колонок . Для того, чтобы увидеть три колонки, необходимо использовать Firefox, Chrome, Safari, Opera 11.1 или IE10 Platform Preview (IE10PP) . Либо посмотрите на представленный ниже скриншот.

С колонками можно делать разные вещи. Практический пример их использования есть в Википедии, в секции примечаний , где используется column-count . В Firefox многоколоночность реализована с префиксом -moz- , в Chrome и Safari с префиксом -webkit- , в Opera 11.1 и IE10PP без префиксов.

Таблица

Div { display: grid; grid-columns: 1fr 3fr 1fr; grid-rows: 100px auto 12em; }
Этот код создаст таблицу из трех колонок, центральная из которых будет в три раза шире левой и правой, а также из трех строк, где верхняя будет 100px по высоте, нижняя 12em, а средняя расширится по высоте автоматически, в зависимости от длины контента.

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

Header { grid-column: 1; grid-column-span: 3; grid-row: 1; } nav { grid-column: 1; grid-row: 2; } article { grid-column: 2; grid-row: 2; } aside { grid-column: 3; grid-row: 2; } footer { grid-column: 1; grid-column-span: 3; grid-row: 3; }
Вматриваясь в код, можно заметить, что контент на странице распределен по строкам и столбцам с помощью, соответственно, свойств grid-row и grid-column . Элемент article размещен во вторую колонку второй строки - центр таблицы 3х3. Также используется свойство column-span для элементов header и footer , которое растягивает их на все три колонки (подобно действует свойство row-span , которое здесь не использовалось).

Демо разметки можно посмотреть в примере использования CSS Grid , но нужна платформа IE10. Если её нет, то просто взгляните на скриншот.

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

Шаблон

Header { position: a; } nav { position: b; } article { position: c; }
Как только мы присвоим позицию, можно создавать разметку, используя последовательность символов. Каждая последовательность эквивалентна строке, а каждый символ в последовательности это колонка. Например, чтобы создать таблицу из одной строки и трех колонок, можно использовать:

Div { display: "abc"; }
В данном случае отобразится три равномерно распределенных элемента в горизонтальной строке. Но можно повторять символы чтобы расширять колонки, а также использовать одинаковые символы на той же позиции в разных строках, чтобы расширять строки. В приведенном ниже примере элемент nav перекрывает две строки, а header и article перекрывают два столбца (код отформатирован для наглядности):

Div { display: "baa" "bcc"; }
Template Layout ещё не используется браузерами, но уже есть хороший скрипт polyfill на jQuery , который позволит поэкспериментировать, именно он использован в примере по ссылке . Результат выглядит также, как в примере с табличной разметкой, но код совсем другой.

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

Header { grid-cell: a; } article { grid-cell: b; } div { display: grid; grid-template: "a" "b"; }
По функционалу этот код идентичен свойствам Template Layout, но также ещё не внедрён (а может быть никогда и не будет).

Позиционируемые плавающие блоки

Div { float: positioned; left: 200px; position: absolute; top: 100px; width: 250px; }
Этот код создаст элемент 250px по ширине, расположенный слева на 200px и сверху на 100px от родительского объекта. По умолчанию, любой другой контент внутри родительского будет обтекать позиционируемый элемент со всех сторон, но это можно изменить различными значениями свойства wrap-type , например, когда текст обтекает элемент только сверху и снизу:

Div { wrap-type: top-bottom; }
Можно комбинировать свойства позиционирования и табличной разметки, размещая элемент в таблице и позволяя контенту обтекать его со всех сторон:

Div { float: positioned; grid-column: 2; grid-row: 2; }
Если у вас имеется IE10PP, то можно . Если нет, то результат показан на скриншоте ниже, его невозможно реализовать текущими возможностями CSS.

Exclusions

Div { wrap-shape: circle(50%, 50%, 100px); }
Этот код создаст окружность с радиусом 100px, которая будет центрирована в родительском элементе. Можно использовать функцию polygon() для создания любой фигуры, указывая координатные пары, разделенные пробелом, например для треугольника:

Div { wrap-shape: polygon(0,100px 100px,100px 50px,0); }
Когда уже имеется заданная фигура, внутренний контент можно сделать обтекаемым по этой фигуре, используя второе свойство wrap-shape-mode , как здесь:

Div { wrap-shape: circle(50%, 50%, 100px); wrap-shape-mode: around; }
Работу CSS Exclusions в действии можно посмотреть, скачав прототип для Mac или Windows с лаборатории Adobe . Там имеется полная документация и несколько очень классных демо-файлов, например, такой:

Области

Content { flow: foo; } .target1, .target2 { content: from(foo); }
Здесь контент будет браться из элемента .content , а далее распределятся сперва по элементу .target1 и если блока не хватит для отображения контента, то он будет продолжать отображаться в .target2 . Контент не будет дублироваться в блоках, он будет начинаться в первом и продолжаться во втором (если необходимо). Чтобы лучше понять, просто взгляните на изображение ниже.

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

Спеки по CSS областям ещё не были внедрены в браузеры, но по аналогии с Exclusions, можно использовать прототип с лаборатории Adobe и попробовать функционал самостоятельно.

Заключение

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

Теги:

• css3
• flexbox
• ie10
• html5

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

Шаблон вебсайта мы будем делать с помощью блочной верстки , использую тег - «DIV ».

Шаг 1 - Разметка веб страницы с помощью тегов HTML

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

HTML - это язык разметки гипертекста . С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "<" и ">".

Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например:

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

Простейшие теги веб страницы это:

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

Важным тегом для структурирования страницы является тег