CSS3: layout

Сегодня я слегка приболел, дома, много свободного времени, решил посмотреть полезную часовую запись, ссылку на которую кинул мне, мне, кажется, Pepelsbey (спасибо!) — это рассказ на конференции РИТ-2010 про будущее 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.

P.S. Кстати, доклад читал Вячеслав Олиянчук, с которым я познакомился на WSD-2009 в Минске, жалею, что не пошёл на РИТ в этом году.

программированиеcsscss3