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

Автор теста HTML5 обновил свой тест, теперь максимальное количество очков, которое может набрать браузер — 300, а не 160. Кроме того, теперь поддержка браузером кодеков для тегов VIDEO/AUDIO не влияет на основные очки, а даёт бонусные. Это правильно, так как стандартном HTML5 кодек так и не выбран.

Результаты по браузерам выглядят так:

«Сафари» 5 — 208 (ночная сборка — 220) «Хром» 5 — 197 (ночная сборка — 217) FireFox 3.6 — 139 (ночная сборка — 176) «Опера» 10.50 — 129 (10.60a 3422 — 159) Internet Explorer 8 — 27 (IE9PP2 — 32)

То есть лидером, по результатам этого теста, является пока пятый «Сафари», при этом тот же пятый «Сафари» под Windows набирает только 165 очков.

Пока я тут ною, что «Опера» не поддерживает CSS1 в полном объёме, новый билд «Оперы» (10.60а build 3419) стал поддерживать кодек WebM для тега VIDEO (у которого есть все шансы стать стандартом), HTML5 offline web applications, Geolocation API (что давно было известно), Web Workers и Cross-Document Messaging.

Круто, ребята, очень круто. Но сделайте поддержку CSS1 уже наконец.

В комментариях к одному из постов, меня попросили сделать кнопку добавления RSS комментариев в «Google Reader» (если я правильно помню суть просьбы).

Мне эта идея не нравится, потому что я не знаю какое количество моих читателей пользуется «Google Reader», остальным, понятно, эта кнопка ни к чему. Я тут подумал — хорошо было бы ставить эту кнопку тем, что этим сервисом «Гугла» пользуется. Но как узнать кто пользуется, а кто нет?

Сейчас меня осенило (впрочем, скоро это не будет работать в Firefox, когда выйдет версия 3.7). Всё просто — надо найти URL по которому заходит только авторизованный пользователь «Google Reader», причём URL этот должен быть инвариантен пользователю, может это какая-то картинка или CSS/JS. Далее, на моей странице делается ссылка на этот URL и через псевдоселектор «:visited» ей ставится какое-то свойство CSS, которое я смогу проконтролировать через JavaScript.

Далее всё просто — у данной ссылки есть то свойство, значит пользователь недавно логинился в «Google Reader», если нет, не логинился. На основании этого можно ставить или убирать кнопку добавления RSS в этот сервис. Можно ещё выставить куку, чтобы в дальнейшем основываться уже на её наличии (если есть — пользователь пользуется «Google Reader», нет — ничего не значит).

Что я хочу сказать по поводу статьи «Хитрая тень» в блоге Олега Мохова?

<html>
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
.vml {
    behavior: url(#default#VML);
    -ms-behavior: url(#default#VML);
    font: 12px Tahoma, sans-serif;
}
#bar1 {
    width: 400px;
    height: 60px;
    color: white;
    padding: 12px;
    display: block;
}

#bar2 {
    width: 20px;
    height: 22px;
    padding: 12px;
    color: white;
    position:absolute;
}
</style>
</head>

<body>

  <v:roundrect class="vml" id="bar1" fillcolor="navy" strokecolor="navy" strokeweight="1px" arcsize="0.1">
  Привет, ребята из W3C! Отсталый Internet Explorer уже много-много лет умеет смешивать векторный язык и
  HTML, а в 2010 году не все продвинутые браузеры так умеют.
  <v:shadow class="vml" on="true" opacity="0.3" color="navy" offset="7px,5px" />
  </v:roundrect>

   <v:shape class="vml" id="bar2"
   fillcolor="red" strokecolor="red"
   coordorigin="0 0" coordsize="200 200"
   path="m 1,1 l 800,1, 800,400, 1800,400, 1800,1500, 1,1500, x e">
   <v:shadow class="vml" on="true" opacity="0.3" color="red" offset="7px,5px"  />
    <p>Привет<br />ещё раз!</p>
    <p>Вы знаете, уже Internet Explorer 5.0 умеет делать непрямоугольные блоки.</p>
    <p>Причём, делает это непринуждённо.</p>
   </v:shape>
</body>

</html>

Что IE умеет круче ещё с пятой версии.

Добавлено позднее: в комментариях мне подсказывают, что в IE8/9 надо либо включать режим эмуляции, либо использовать «-ms-behavior» и позиционировать элементы абсолютно.

На «Хабре» кто-то в очередной раз кто-то наткнулся на статью полугодовой давности и понеслось — сделаны далекоидущие выводы.

Упомянутая статья за полгода не обновлялась (о чём говорит отсутствие упоминания об SVG в IE9), так что предпосылки неверные. Предпосылки неверные, но вывод, впрочем, правильный. В плане стандартов будущее крайне далеко.

Должен сказать, что любые тесты браузеров — это сферические кони в вакууме. Какие, нахрен, ACID3, какие SunSpider? «Опера» до сих пор не поддерживает CSS1! Ибо сказано:

The format of a percentage value is an optional sign character (’+’ or ’-’, with ’+’ being the default) immediately followed by a number (with or without a decimal point) immediately followed by ’%’.

CSS1, раздел 6.2, проценты могут быть указаны с десятичной точкой. Мне кажется, это означает, что я могу указать дробные проценты и всё будет хорошо. Во всех браузерах так и есть. Во всех, кроме «Оперы». Самая распоследняя «Опера» округлит их вниз.

CSS3-селекторы. Уже все основные браузеры хвастаются их поддержкой. На сайте CSS3.info есть даже специальный тест, на который часто ссылаются. Ну, хорошо «Хром» этот тест проходит. И начал проходить едва ли не раньше всех.

Если этот браузер заявляется поддержку селекторов CSS3, то для меня, как разработчика, это должно, видимо, означать, что работает и любая их комбинация, не так ли? Иначе, что толку от поддержки селекторов по одному в строке?

И вот реальная задача — делал я галереи на сайте без использования JavaScript, на голом CSS (спасибо селектору «:target», это самое крутое, что появилось в CSS за последние годы). Простая задача — если «:target» не указывает ни на один из тегов в текущей галерее, нужно указать, что выбрано первое изображение.

Да, пожалуйста (у меня первое изображение это последний элемент списка):

.gallery li:not(:target) ~ li:last-child a {
    background: #fff;
    color: #000;
}

.gallery li:target ~ li:last-child a {
    background: #aaa;
    background: rgba(170, 170, 170, 0.5);
    color: #fff;
}

Несложно же. «Опера» и «Файерфокс» чудесно с этим справляются, почему бы и нет, все селекторы им знакомы. Но это не работает в «Хроме» и «Сафари» (5-й «Сафари» я ещё не тестировал), точнее, это работает, но глючит — срабатывает только на следующем элементе, а не каждом. Чтобы исправить проблему, мне пришлось изобрести CSS hack для «Safari» и Chrome.

Так повсюду, в блоге IE авторы как-то показывали, что «border-radius» и «box-shadow» поддерживаются браузерами с глюками или имеют серьёзные различия в рендере. Всюду так — заявлена поддержка SVG1.1, но чего-то нехватает, Canvas, но текстом писать нельзя, тег VIDEO, но нельзя открывать на весь экран.

Конечно, тут ещё сказывается тот факт, что большинство этих спецификаций находятся в стадии черновика, вот реализовала «Опера» четыре года назад в браузере Server-sent Events, а черновик изменился и тег «event-source» теперь оказался не нужен.

В общем, к этим стандартам нам ещё всем идти и идти, много лет. Это основной вывод. А теперь другие мысли.

Селектор «:target» хоть и самое чудесное, но, в то же время, почти самое недодуманное в CSS за последние годы. Это уже ощутили мои читатели. Конечно, «:target» добавляет интерактива в CSS, но хотелось бы, чтобы этот интерактив не касался напрямую HTML, т. е. был какой-то флаг, указал его и страница не прокручивается к целевому тегу. Придётся переделать галерею на JavaScript.

Предыдущая моя заметка о conditional comments. Я уже когда-то говорил и ещё раз скажу — W3C делает большую ошибку, что не включает их в стандарт, причём на уровне и HTML, и CSS. W3C заявляет, что конечная цель — стандартное счастье у всех браузеров. Увы, в свете сказанного, туда идти ещё очень долго, учитывая все баги, недоделки, несделанное и просто ещё не дописанное самим W3C. А сейчас-то что делать? Как мне для «Сафари» и «Хрома» такой-то версии что-то выключить? Использовать CSS-хаки?

И ещё, как я уже писал W3C вряд ли когда-нибудь вообще остановится. Будут всё новые и новые стандарты, улучшения существующих. Это значит, что браузеры никогда не достигнут всего, что описано. И поэтому тоже нам нужны conditional comments.

Во-первых, при помощи условных комментарие в IE можно определять не только версию IE. Например, можно узнать есть ли поддержка VML. Подозреваю, что эту поддержку из Internet Explorer когда-то удалят, так как сейчас удаляют expression. Так что проверять поддержку VML, правильнее так:

<!--[if VML]> Код VML <![endif]-->

Во-вторых, начиная с Windows 7, в браузере условными комментариями можно проверить версию операционной системы, так же как это делается с версией браузера, константы для проверки перечислены в таблице на сайте «Микрософт».

Можно, например, проверить запущен ли браузер на Windows 7. «Семёрка» и Vista вообще сильно отличаются по возможностям по XP, так что это иногда может быть полезно. Например, в Vista/7 поддерживается TLS SNI или аппаратное 2D-ускорение в Internet Explorer 9.

<!--[if WindowsEdition]> Это Windows 7 или старше <![endif] -->

В-третьих, если вы автор какого-то плагина, можно добавить возможность проверки версии плагина и его наличия в условные комментарии. Для этого нужно поместить его версию и название в ветку реестра HKEY_LOCAL_MACHINE → Software → Microsoft → Internet Explorer → Version Vector → MyPlugin = 0.5.

<!--[if gte MyPlugn 1.2]> Мой плагин версии 1.2 и выше <![endif] -->

Этот же способ позволяет изменить версию IE для проверки в conditional comments на любую — достаточно исправить значение «IE» в указанной ветки реестра и перезапустить браузер.

В-четвёртых, удивительно, но не все знают, что в conditional comments доступны операторы «И», «ИЛИ» и группировка. Что полезно, чаще всего, для указания диапазона версий браузера.

<!--[if (IE 7) | (WindowsEdition)]> Это IE7 или любой IE на Windows 7 и выше <![endif] -->
<!--[if (gte IE 6) & (lt IE 9)]> Это IE6-8 <![endif] -->

В свежей статье в блоге IE есть ответ на вопрос как обнаружить версию браузера Internet Explorer в любом режиме (например, в режиме эмуляции другой версии):

@_jscript_version statement is actually an indicator of which version of JScript is in use by the browser as a whole. In ALL document modes of IE9, this statement currently equates to “9”. In ALL document modes of IE8 it equates to “5.8” and in IE7 it is “5.7”

Отсюда вывод:

/*@cc_on
    @if( @_jscript_version == 5.8 )
        // Это полюбому IE 8
        ...
    @end
@*/

То есть (перевожу) «@_jscript_version» в IE8 всегда равно «5.8», в IE7 — «5.7» , а в IE9 — «9».

Ну и раз уж я решил перед сном пописáть о PHP, то продолжу. Ещё новость из мира PHP — в PHP будет scalar type hinting. Илья Альшанетский добился включения своего патча в код.

Сейчас type hinting в PHP есть, я могу указать явно, что параметр будет объектом определённого класса или массивом:

function test1(MyClass $var) {}

function test2(array $var) {}

Скоро можно будет указать, что передаваемый аргумент должен быть скаляром. Жаль только, что появилась только возможность указать определённый тип. Если «object» указать можно, то «scalar», к сожалению, нет. Это странно. Придётся указывать явно:

function test3(string $var) {}

Что поможет снизить количество ошибок в отдельных случаях, но как быть, если мне такая жёсткость ни к чему, если я хочу оставить возможность преобразования типов, там где это сделано хорошо (преобразование типа «array» в «string» в PHP сделано бессмысленно, посмотрите на Perl, там это имеет смысл)? Да и как мне указать, что мне всё равно — придёт int или float? Видимо, только явным приведением типа при вызове, а про возврат значения по ссылке, в этом случае, придётся забыть.

В отдельных случаях, хотелось бы, чтобы передав объект в такой типизированный параметр, у объекта дёрнулся метод __toString, а то и __toNumber, если указано, что должен быть передан числовой скаляр.

Надеюсь, не одному мне этого хочется и Илья продолжит работу над патчем.

Добавлено через несколько минут: прочитал комментарии, оказывается идут дискуссии о добавлении ключевых слов «scalar» и «numeric». Кроме того, Илья рассуждает и о преобразованиях типов в рамках type hinting. Ура.

Отличная новость PHP-FPM (это патч к PHP, который делается Андреем Нигматуллиным и Майклом Шадлом, улучшает в PHP поддержку FastCGI) наконец-то будет входить в состав PHP 5.3.X.

Если вы не знакомы с этим патчем, то перечислю основные отличиями PHP-FPM от того, что входит в PHP по-умолчанию: умеет демонизироваться, умеет останавливать процессы без потери запросов, адаптивное к нагрузке количество процессов, возможность запуска с указанным gid/uid, chroot и различными опциями php.ini для каждого демона, возможность писать лог stdout и stderr, возможность рестартовать процессы без порчи кеша opcode в разделяемой памяти (при использовании eaccelerator), насильное завершение процесса по времени выполнения (как известно, set_time_limit не всегда это делает).

А так же возможность задавать заговолок ответа при фатальных ошибках PHP, поддержка возможности nginx 0.5.9+ передавать большие POST-запросы (например, загрузку файла) без сброса на диск, новая функция PHP fastcgi_finish_request, которая позволяет выполнять код после того как контент был отдан клиенту и веб-сервер и освободился для следующего запроса и slowlog, позволяющий контролировать какие скрипты выполняются медленнее указанного лимита.

В общем, исключительно полезный патч. Жаль, что в ветку PHP 5.2.X его почему-то не включат. Я не знаю причины, в сообщении на «Гугл-группах» по этому поводу написано « no way to add it to 5.2, sorry». Для PHP 5.2.X патч по-прежнему придётся накладывать руками, жаль.

На ветку 5.3.X вряд ли пока переходит много народу. Я попробовал мигрировать пару проектов, неудачно. Один завис (из-за использования crypt), второй заработал только частично. Очевидно, что обратная совместимость серьёзно поломана. При этом я не использую ничего, что перечисленно в официальном списке несовместимости.

Я недавно делал плеер для Internet Explorer по функциональности похожий на VideoJS. Как я уже упоминал, там ни одной картинки — всё VML. Регулятор громкости и кнопочки — UTF-арт.

Попробую описать как сделан регулятор громкости, но писать буду под стандартные браузеры, так что код будет несколько отличаться.

В UTF-8 есть такой символ «❚», им у меня сделана кнопка «Пауза» и им же нарисован регулятор громкости. Нарисовать нужно что-то подобное вот этому:

На рисунке мы видим прямоугольник со скруглёнными углами, это сумеет сделать даже моя бабуля (в IE для этой цели я использовал VML):

#video_volume {
    width: 34px;
    height: 20px;
    font: 14px Arial;
    color: white;
    background: gray;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
    border-radius: 0.5em;
}

У нас получается пустой скруглённый прямоугольник. Теперь надо нарисовать уменьшающиеся прямоугольники. Как? Первая идея, которой я и воспользовался — вложить теги внутрь друг друга и сделать что-то, чтобы каждый потомок был ниже своего родителя:

<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>

В стиле прописываем абсолютную позицию и margin-top, чтобы сделать отступ от родительского элемента:

#video_volume span {
    position: absolute;
    margin-top: 1px;
}

Получилась этакая рекурсия стилей. Уже близко к тому, что хочется получить.

Теперь надо снизу обрезать лишнее. В IE я просто ограничил размеры и выставил overflow-y в hidden, тут я поступлю иначе — воспользуюсь crop.

#video_volume div {
    clip: rect(auto, auto, 14px, auto);
    position: absolute; /* crop работает только у абсолютно позиционированных элементов */
    /* кстати, ребята из W3C, почему вы забыли про crop? почему только прямоугольник, зачем position? */
}

Почти то что нужно, но повёрнуто в другую сторону:

Что делать? Всё просто, это текст, значит, его можно просто развернуть в другую сторону, указав ему direction, правда при указании direction элементы регулятора прилипают к правому краю, для того, что это исправить, укажем отступ справа.

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

Получился такой код:

<head>
<style type="text/css">
#video_volume, #video_volume div {
    width: 34px;
    height: 20px;
    font: 14px Arial;
    color: white;
    background: gray;
    padding-right: 5px;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -khtml-border-radius: 0.5em;
    border-radius: 0.5em;
}

#video_volume div {
    clip: rect(auto, auto, 14px, auto);
    position: absolute;
    direction: rtl;
}

#video_volume span {
    position: absolute;
    margin-top: 1px;
}

</style>
</head>
<body>
<div id="video_volume">
<div>
<span>❚<span>❚<span>❚<span>❚<span>❚</span></span></span></span></span>
</div>
</div>
</body>

Кстати, «Опере» rtl правильно не работает (по крайней мере в моей 10.60 alpha), нужно расставлять margin, но я этого делать не буду. В конце-концов, это пример, демонстрирующий идею.

На «Хабре» сравнили вышедший вчера Safari 5 и Internet Explorer 9 Preview 2. Оба браузера обладают аппаратным ускорением (на скриншоте — результаты теста «Flying Images»).

Видно крайне низкий показатель FPS у «Сафари». Странно, но под «Мак» таких проблем нет, похоже под Windows аппаратное ускорение неполное, если оно вообще там есть.

У меня на машине «Сафари» 5 показывает в том же тесте 1…2 fps, тогда как «Опера» 10.60a — около 35. Заметьте, у «Оперы» аппаратное ускорение не заявлено.

Тем временем в версии 0.8.40 появился модуль ngx_http_uwsgi_module от Roberto De Ioris.

Если у кого-то есть Safari или Chrome (Chromium), проверьте, пожалуйста, CSS-хак, который я сейчас изобрёл:

<head>
<style type="text/css">
   /* содержимое этого стиля увидит только WebKit-браузер */
    body:not([x|x]) div {
        background: red;
        width: 100%;
        height: 100%;
    }
</style>
<body><div></div></body>

Хочется узнать для каких версий браузеров он действует. Можно в почту написать: imbolk@gmail.com

P.S. Должна быть красная страница с белой рамкой.

P.P.S. В WebKit-браузере «Андроида» 2.2 тоже работает.

P.P.P.S. Для Konqueror 3.5 и выше этот CSS hack тоже работает. То есть это, скорее всего, особенность ещё KHTML-движка, из которого появился WebKit.

P.P.P.P.S. В комментариях проверили Safari 2 и Chrome 4, CSS hack работает.

P.P.P.P.P.S. Проверил под Chrome 1.0.154.59, работает.

P.P.P.P.P.P.S В комментариях проверили Chromium 6.0.424.0 (48800), CSS hack работает.

Попробовал посмотреть как браузер «Андроида» (основан на WebKit) загружает ресурсы со страницы. Вот что получилось. Количество одновременных соединений к одному домену — 4, все CSS загрузились последовательно, в одном соединении, JS тоже по порядку, но в разных (!). Картинки (логично) подгрузились параллельно.

iPhone Safari открыл 11 (!) соединений (всего я загружал 29 ресурсов), причём параллельно грузились и JS, и CSS. Число одновременных соединений посчитать трудно, но что-то порядка 7. Одна из картинок начала грузиться быстрее, чем последний CSS. Сильно. Странно, но почему-то этот браузер не попросил favicon.ico, хотя иконка указана в HTML-коде явным образом

Добавлено позже: в комментариях подсказали, что iPhone Safari не использует favicon.

Ничего неожиданного — ребята из freeciv сделали набор из 444 тестов, которые проверяют поддержку браузером различных мест стандартов HTML5/CSS3 (Canvas, WebSockets, HTML5 Video/Audio, Getlocation API, Storage, Workers и какая-то часть CSS3).

Internet Explorer 9 Preview 2 не прошёл ни один из этих тестов. Это ожидаемо; о том, что Microsoft выбрала какие-то определённые тесты из HTML5 в своих промо-текстах, на которых и обогнала другие браузеры, уже говорилось не раз.

Добавлено 5 июня 2010: в комментариях говорят, что эти тесты — фейк. Например, «Опера» пока не поддерживает GeoAPI.

Интересно, когда консорциум W3 отвернулся от тега OBJECT? Помнится, даже IFRAME старательно пытались заменить на OBJECT, а сейчас зачем-то выделили аж два новых тега VIDEO и AUDIO для проигрывания одноимённого контента.

Вообще-то, конечно, с VIDEO и AUDIO всё несколько стандартнее, чем с тегом OBJECT. В IE можно подключить любой ActiveX для проигрывания видео (например, Windows Media Player или Apple QuickTime) и у них будут разное API и свои особенности.

Тем не менее, API ActiveX Windows Media Player хорошо документирован и работать с ним очень просто. Я в последнее время мало программирую на JavaScript и вчера вечером, чтобы освежить знания, попробовал сделал плеер, похожий на VideoJS, но только для IE — с тегом OBJECT и применением VML.

По-моему, получилось неплохо (проверял под IE8, подчёркиваю, это сделано только для IE).

Сегодня утром решил не останавливатся на достигнутом и за завтраком начал делать другую JS-задачу (уже по работе). Так запрограммировался, что опоздал на работу. Всё-таки JavaScript очень приятный язык.

P.S. Некоторые вещи там сделаны неоптимально, так что я бы очень рекомендовал несколько подчистить код, если кто-то захочет его использовать.

P.P.S. Кнопочки и progress bar нарисованы через VML.

Вроде как из блога AMD утекли сведения о том, что IE9 будет поддерживать Canvas:

The <canvas> element will be accelerated on the GPU via Direct2D and will enable hardware accelerated rendering contexts for application development, improving visual display, reducing CPU usage, and improving power usage. … AMD is working with multiple teams at Microsoft to ensure that technologies such as IE and Silverlight continue to move the PC platform forward.

Хотя в AMD чуть позднее поспешили откреститься от этого:

Got a little ahead of myself; Microsoft did not announce they were supporting <canvas>. However, they did say that all of Internet Explorer 9’s graphics, text, and rendering will be hardware accelerated. Given the embraced HTML5 across DOM, CSS3, SVG, and XHTML, it will be fun to watch this space closely as the IE9 Preview gets updated in the weeks to come.

Посмотрим.

alexleo: Вот оно — наше будущее… Хром, конечно, старается вовсю… 70-80% загрузки двухъядерного p9500/2.5G для рисования простейшей анимации… Жесть.

Meroving: и еще эти люди запрещают адобе ковыряться в носу))

Из обсуждения на «Хабре» CSS-анимации в «Our Solar System» (работает в «Хроме» и «Сафари»), сделанной почти на голом CSS3 (неясно только почему пояс астероидов сделан PNG-картинкой, а не веб-шрифтом, было бы круче).

Забавная тенденция — несколько лет назад я бы сказал, что это Флеш (апплет Джавы можно распознать), теперь я теряюсь что это. SVG+SMIL? SVG+JavaScript? Canvas? CSS3? Flash? Silverlight?

Скоро, видимо, внутри браузера будет столько всякого, что программисты разойдутся на несколько лагерей. Как сейчас с бакэндом — есть те, кто пишет на PHP, те, кто на Python, те кто на Perl и т. д. Кстати, сейчас есть ещё более мелкое деление — по CMS и фреймворкам. Всякие там Django, Twisted, Drupal, Plone, Zend Framework, Catalyst и прочее.

По фреймворкам в браузере разделение уже есть. Я, например, пишу с использованием jQuery и считаю Dojo ересью.

Perl, говорите? Хехе. Этот небольшой JavaScript выполняет alert(1):

(É=[Å=[],µ=!Å+Å][µ[È=-~-~++Å]+({}+Å) [Ç=!!Å+µ,ª=Ç[Å]+Ç[+!Å],Å]+ª])() [µ[Å]+µ[Å+Å]+Ç[È]+ª](Å)

Можете попробовать в браузере.

Автор — Йосуке Хасегава Э. Вела.

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