🌟 atbliss.ru

CSS3: будущее механизмов раскладки

Краткий обзор новых технологиях верстки в своем блоге написал заметку Евгений Степанищев, руководитель группы разработчиков внутренних сервисов «Яндекс», CSS3: layout

CSS3: layout

Про будущее layout в CSS. Три черновика, которые сейчас предлагаются — Grid (от Microsoft), Flexbox (Mozilla) и Template Layout (W3C).

Вкратце.

Первая спецификация (Grid) задаёт на страницу абстрактную сетку, а контенту, при желании, указывается в какой ячейке сетки ему располагаться и сколько занимать. Например:

body { columns:3; column-gap:0.5in; } 
img { float:page top right; width:3gr; }

Это настолько простая и очевидная идея, что у меня возникал вопрос «а почему не так», когда я ещё начинал верстать — в 1997-м году. Спецификация пока не дописана (вот уже три года как) и нигде не реализована.

Спецификация от Mozilla (Flexbox) уже посложнее, это часть XUL, то есть эта сетка уже в браузерах, основанных на Gecko, а так же реализована в Chrome и Safari. Спецификация вводит кучу новых свойств, а сетка получается древовидная. Задаётся родительский контейнер, его потомки группируются и внутри групп задаётся расположение элементов относительно друг друга.

Хотя для понимания это всё сложнее, но, кажется, такая раскладка более подходит для вёрстки «резиновых» сайтов. Чем-то это похоже на старые знакомые таблицы, но круче.

    #div1 {
      display: box;
      box-lines: multiple;
      box-pack: center;
      width: 300px;
    }
    button {
      box-flex: 1.0;
      width: 90px;
      max-width: 90px;
    }

Спецификация Template Layout (W3C) — это шаблоны, при помощи свойства display задаются «слоты», «position» задаёт в каком слоте у нас контент. Видимо, это ближе к тому, что предалагает Microsoft.

  body { display: "aaa"
                  "bcd" }
  #head { position: a }
  #nav { position: b }
  #adv { position: c }
  #body { position: d }

Эта спецификация нигде пока не реализована, но есть плагин к jQuery, который позволяет начать пользоваться Template Layout уже сейчас (в IE тоже работает).

Это, конечно, только приблизительные описания технологий, краткий обзор. Сами стандарты чуть сложнее, особенно Flexbox.

Три черновика, которые сейчас предлагаются:

  1. Grid (от Microsoft) //www.w3.org/TR/css3-grid/.
  2. Flexbox (Mozilla) //www.w3.org/TR/css3-flexbox/.
  3. Template Layout (W3C) //www.w3.org/TR/css3-layout/.

Вкратце об этих проектах.

Спецификация Grid

Первая спецификация (Grid) задаёт на страницу абстрактную сетку, а контенту, при желании, указывается в какой ячейке сетки ему располагаться и сколько занимать. Например:

body { columns:3; column-gap:0.5in; }
img { float:page top right; width:3gr; }

Это настолько простая и очевидная идея, что у меня возникал вопрос «а почему не так», когда я ещё начинал верстать — в 1997-м году. Спецификация пока не дописана (вот уже три года как) и нигде не реализована.

Спецификация от Mozilla (Flexbox)

Спецификация от Mozilla (Flexbox) уже посложнее, это часть XUL, то есть эта сетка уже в браузерах, основанных на Gecko, а так же реализована в Chrome и Safari. Спецификация вводит кучу новых свойств, а сетка получается древовидная. Задаётся родительский контейнер, его потомки группируются и внутри групп задаётся расположение элементов относительно друг друга.

Хотя для понимания это всё сложнее, но, кажется, такая раскладка более подходит для вёрстки «резиновых» сайтов. Чем-то это похоже на старые знакомые таблицы, но круче.

#div1 {
display: box;
box-lines: multiple;
box-pack: center;
width: 300px;
}
button {
box-flex: 1.0;
width: 90px;
max-width: 90px;
}

Спецификация Template Layout (W3C)

Спецификация Template Layout (W3C) — это шаблоны, при помощи свойства display задаются «слоты», «position» задаёт в каком слоте у нас контент. Видимо, это ближе к тому, что предалагает Microsoft.

body { display: "aaa"
"bcd" }
#head { position: a }
#nav { position: b }
#adv { position: c }
#body { position: d }

Эта спецификация нигде пока не реализована, но есть плагин к jQuery (code.google.com/p/css-template-layout/), который позволяет начать пользоваться Template Layout уже сейчас (в IE тоже работает).

Это, конечно, только приблизительные описания технологий, краткий обзор. Сами стандарты чуть сложнее, особенно Flexbox.


Перейти к верхней панели