Сегодня я слегка приболел, дома, много свободного времени, решил посмотреть полезную часовую запись, ссылку на которую кинул мне, мне, кажется, 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 в Минске, жалею, что не пошёл на РИТ в этом году.

Об этой функции я мечтал с самого начала владения Nexus One. Зачем иметь экран 800×480, если многие сайты показывают урезанную мобильную версию, да ещё и (поубивал бы) запрещают масштабировать страницу?

В общем, есть способ, работает под Android 2.2. Заходим в браузер, набираем в адресной строке «about:debug», жмём стрелочку справа от строки, чтобы перейти по адресу. Страница не меняется, это нормально. Жмём клавишу вызова меню, выбираем оттуда «дополнительно» («more»), оттуда «настройки» («settings»), оттуда, в самом конце — UAString.

И выбираем каким браузером притворяться — Android, Desktop или iPhone.

User-agent выглядит так:

Android — «Mozilla/5.0 (Linux; U; Android 2.2; ru-ru; Nexus One Build/FRF50) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1»

Desktop — «Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_7; en-us) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Safari/530.17»

iPhone — «Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16»