суть проблемы вкратце

В данный момент некоторые мобильные браузеры теряют аудиторию из-за того, что многие сайты сделаны исключительно под webkit-браузеры (iPhone, iPod, iPad). Чтобы сохранить свою аудиторию они (браузеры) хотят начать «притворяться» webkit и поддерживать -webkit-*** свойства, в частности -webkit-text-size-adjust и какие-нибудь другие.

Кроме этого, и, что я думаю важнее, им придется отдавать такой user agent, чтобы фильтры принимали их за вебкит браузер (deja vu?), несмотря на то, что они им не являются.

Из-за этого многие стандартисты в ужасе. «Интернет катится в ад» и все такое :)

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

Почему это многих пугает

Во-первых потому что это как-то философски неправильно. Вот написал я в CSS -webkit-border-radius:10px; а окажется что граница закруглится и в Мозилле. А я, может, не хотел.

А, предположим, я дурак, и я писал всегда только -webkit-border-radius и не добавлял просто border-radius (как это по стандартам должно быть). И сайт был красивый только в iPhone, но никогда в Опере. А потом вдруг Опера начала поддерживать -webkit-border-radius. И все стало красивым и в Опере, зачем мне тогда использовать что-то кроме -webkit-border-radius?

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

Вобщем, это неправильно. Но.

Почему это не так уж страшно все

Потому что все они видят только “ОНИ РЕАЛИЗУЮТ ВЕСЬ ВЕБКИТ”, а на самом деле один из инициаторов этого всего Тантек Челик (представитель Mozilla, и «автор» IE5 Mac) говорит вот о чем:

One possible proposal is to only parse other vendors’ prefixes in conjunction with parsing unprefixed. e.g. with -webkit-transform. We wouldn’t parse that until we also parse transform.

plinss: You’re telling authors to just use webkit prefixes, we’ll make it work.
Tantek: No, we’re only implementing a small minimized number of these.

Никто не собирается сделать вебкит универсальными свойствами, скорее они хотят залатать дыры, пару важных свойств, чтобы их браузеры сейчас хоть как-то отображали iphone-сайты.

Более того, предлагают решить эту проблему только для мобильных, тогда вообще использовать только -webkit- будет ненадежно, и придется писать все свойства рано или поздно.

fantasai: What if -webkit- was implemented only for mobile? That would add
the unreliability factor that Tantek was asking for, because it
would not work on desktop. And that would bias authors to using
unprefixed, which is what we want.

В конце концов все пришли к мнению что от всех префиксов надо избавляться :). Чего и вам советую.

Реальная статистика свойств

Чтобы исследовать этот вопрос мозилловцы даже распарсили кучу CSS файлов, чтобы понять насколько велика проблема и какие свойства с префиксами используются. Статистика 30 000 сайтов, и примерно 90 000 CSS файлов.

Среди прочего, рейтинг использования css-свойств вообще. Width уверенно побеждает.

Кстати одни из самых редкоупотребляемых свойств dispaly и heigth, я, периодически, их тоже использую! Yeah!

А вот рейтинг префиксных свойств.

Скругления и тени побеждают с отрывом

Забавно, но ни одному из этих свойств уже год префиксы не нужны. Потому, ну кому какой вред от того что -webkit-border-radius заработает в Mozilla? Вряд ли бы кто-то это вообще заметил.

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

Кто виноват

Конечно, все валят вину друг на друга.

Теперь w3c и браузеры говорят что виноват Webkit, который не сабмитит стандарты. Вебкиту, при этом как-то все равно. Другие хвалят Webkit за инновации, но винят во всем стандартистов и лень Webkit.

И в конце концов многие вдруг решили что виноваты разработчики!

Более того, на некоторых популярных блогах можно прочитать даже такую идеологически правильную фигню:

We at Webmonkey hope it’s obvious that building WebKit-only sites is a waste of time.

О, да.
Конечно, по-хорошему надо делать для всех, но говорить что делать сайты только для вебкит – трата времени, перегиб в другую сторону.
Кого из нас когда-то просили сделать сайт для Fennec или Opera Mini?

Хоть код и надо писать правильно, для всех, но спихивать ответственность на разработчиков тут тоже не очень верно. Они делали то, за что им платили деньги.

Я думаю никто не виноват, просто веб стал меняться слишком быстро, и процесс стандартов-реализации не успевает за ним. А тут еще эти префиксы которые уже давно все можно было отменить, но CSS WG не решается это сделать толком. А еще этот вебкит который столько всего наделал нового, и за ним мало кто успел.

Вобщем, виновник этой забавной ситуации, разве что популярность Андроида и Айфона.

А все остальные просто пытаются сохранить свои доли на рынке. На самом деле браузеры ходили этим путем уже много-много-много раз. Достаточно почитать историю user agent string, чтобы понять что все притворяются всеми, и никто еще не умер. Хотя, порядка это тоже не добавляло.

Такие пироги в нашей веб-стандартной песочнице.

Почитать об этом же

• Update! Интервью в Тантеком о том что они собираются делать с этим в Мозилла
• «Исторические» разговоры браузеров и стандартистов о реализации -webkit- свойств
• Исследование префикс-свойств от Мозиллы
• Мысли на эту же тему от главы CSS Working Group
• Одна из полупанических статей которые меня забавляют
• Отличная объективная статья об этом всем от Remy Sharp

Что делать?

Да ничего, верстать по стандартам, и стараться всегда использовать свойства без префиксов. Потому что главным результатом этой миниинтрижки, я думаю, будет постепенный отказ от префиксов вообще. Наконец-то.

Буду рад и вашему мнению об этом всем, особенно если оно отличается от моего :)

TL;DR: Webkit популярен, CSS WG медленное и педантичное, разработчики ленивые, Opera-IE-Moz тоже хотят жить, Жизнь прекрасна.

Киев — 8 октября (план и регистрация тут)

Харьков — 15 октября (план и регистрация тут)

Николаев — 29 октября. (план и регистрация).

Это не я устроил себе такие гастроли, оно само, поймите меня правильно, я слишком скромный и ленивый для такого :)

А еще! У нас (в Киеве) будет 22 октября Web Standards Days. И мы принимаем заявки от докладчиков, если вы клевый, или знаете что-то клевое о веб-стандартах, или знаете кого-то клевого кто знает что-то клевое про веб-стандарты, немедля ни секунды пишите мне в почту akella.a(wtf)gmail.com.

в итоге занял почти 2 килобайта (О УЖАС!)

Аж 1834 байта. После чего я сыграл в игру «challenge accepted» и забыл пообедать.

Рассказать о том что было дальше трудно, лучше приложу скриншот нашего с genn чата:

Очень хорошо видно когда у меня пропал евпаторийский интернет :)

Жертвуя красотой дизайна и используя селекторы вроде:

1. header~a{/*…*/}
2. ul li,[role]>*>*:not(h2),ul li:hover a{/*…*/}
3. [role]>*+*+*:hover{/*…*/}

Мне и Гене таки удалось свести дело к 1000 байт.
Вобщем, это было весело :).

Самое удивительное и любопытное, что я изначально писал сжатый CSS-код, и после того как я начал оптимизировать его, только без жертв дизайна удалось удалить 30% файла. И это не считая пробелов, и не считая упрощения дизайна — исключительно сокращение кода.

Впрочем, каждые сто байт оптимизации казалось что дальше уже некуда :)

В итоге за полдня родились Bbubles.
Возможно таки удастся подчистить еще пару десятков байт чтобы добить красоту :)

Буду рад советам, и вашим собственным вариантам дизайна.

• Итоговый CSS на Github
• Живой пример Bbubles (лучше всего в Сафари и Хроме, ну как всегда)
• Отчет в блоге Genn.org

В завершение, несколько советов тем кто захочет поучаствовать в галерее.

Не бойтесь если у вас получилось 2kb

Мы все сильно недооцениваем то насколько наш код можно упростить. ;) Лучше отнеситесь к этому как к сложной задаче и попробуйте решить. Обычно в таких случаях абсолютно неважно добьетесь ли вы 1000 байт, но вы узнаете много нового и получите кайф =)

Где упрощать?

1. Группировать длинные свойства. Например, text-decoration или position:absolute стоит собрать в одном месте: div,p,section{position:absolute}
2. Использовать крутые селекторы вместо обычных. Например вместо article section p,article section ol можно написать: [role]>*>*:not(h2)
   А вместо section:last-child
[role]>*+*+*
3. Вместо px использовать em. Запись 5em короче чем 50px
4. Короткую запись для цвета. Очевидно #f3f5f8 длиннее чем red или #fff
5. А еще, часть свойств из CSS можно просто удалить и ничего не изменится, мы же делаем под современные браузеры.

Оптимиизировать свой CSS очень интересно :)

Реклама, пам-пам:
Пользуясь случаем хочу анонсировать мастер-класс Николая Мациевского об ускорении сайтов (он кстати написал про это две книги, и участвует в W3C), 9 октября в Киеве.

Зачем оно вообще могло понадобиться?

Дело в том, что год назад я перепрошил свой айфон на чужом компьютере. И этот бедняга, уроженец Сан-Франциско, и без того залоченный, еще и заглючил. Я больше не смог ставить ничего из AppStore, и использование мной i2reader закончилось. Да, вот такой какой-то глюк с аккаунтами в itunes.

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

Я решил сделать читалку на HTML. После исследования этого вопроса, оказалось что меня спасёт HTML5. Стандарт еще не вышел, а уже помог мне прочитать несколько книг! Это для тех кто вечно спрашивает когда же HTML5 станет реальностью. Так вот, правильный ответ — вчера.  

А потом мы c Геной вдохновились и решили сделать проект супербыстро. Хотя идея жила во мне давно. Так и получился этот проект за сутки:

Вот так это выглядит на моем iPhone 3G

Сразу оговорюсь, проект конечно же заточен под Webkit, просто потому что у меня айфон, а не что-то там еще с Оперой. И в Хроме и Сафари он выглядит ближе всего к дизайнерскому. Можно конечно заставить его выглядеть везде одинаково, но за сутки я этого не хотел и не мог сделать. Потом, ок.

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

Каталог

Обычный сайт, но в разработке столкнулись с интересными моментами.

Так как пикселов на новом экранчике iPhone 4 ровно в 4 раза больше чем в старых. То иконки в формате PNG выглядели достаточно размыто и не очень клёво. Однако, мы перевели их все в SVG (ага, именно поэтому пользователи Фаерфокса не видят иконок вообще) и на новых айфонах они выглядят просто офигительно. Чего и вам советую при разработке сайтов под айфон.

Вверху то, как это выглядит на старых айфонах (почти не видно разницы), а ниже скриншот из iPhone 4. Угадайте где PNG, а где SVG.

Кстати, проверить поддерживает ли браузер SVG можно таким образом:

1. if (document.implementation.hasFeature(“http://www.w3.org/TR/SVG11/feature#Shape”, “1.1″)) {
2. …а тут например добавить class для body
3. }

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

Причем тут html5?

Это вторая часть сервиса.

В проекте используется часть спецификации называемая application cache и local storage (это вместо кук, только чтобы запомнить место последнего чтения книжки). Хорошая новость, что их почти все браузеры поддерживают. В том числе Сафари на iPhone.

Суть примерно такова: мы можем заставить браузер закешировать какие-то картинки и скрипты. То есть, при открытии этой страницы браузер не будет их запрашивать. Более того, если у вас не будет интернета, то браузер все равно откроет эту страницу, и покажет вам закешированную в последний визит копию вместе с картинками и джаваскриптом.

Синтаксис примерно такой:

1. <!DOCTYPE HTML>
2. <html manifest=”reader.manifest”>

А внутри файла что-то вроде этого:

1. CACHE MANIFEST
2. js/jquery.js
3. css/style.css
4. img/read.png
5. img/read-gr.png

(вообще говоря это точная копия с reader.org.ua)

На самом деле в стандарте есть еще куча наворотов, но они мне не нужны были, вы же можете почитать.

Собственно это я и проделал, я сделал страницу с текстом книги офлайновым приложением.

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

Много пространства занято совершенно не относящимся к чтению интерфейсом

Тут на помощь приходят всякие крутые метатеги которые работают только для продуктов Apple:

1. <meta name=”apple-mobile-web-app-capable” content=”yes” />
2. <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

Подробнее о них на сайте apple.com.

В результате, если сохранить этот сайт на ваш Home Screen (в айфоне для этого есть кнопка «+» в сафари). Он превращается в нечто похожее на обычное приложение:

Здесь у меня сохранено много книг, в 4-й прошивке думаю их логично группировать

И после запуска выглядит вот так:

Максимально используется экран, никаких баров, ничего лишнего. Кроме этого, уже не нужен интернет чтобы читать эту книгу.

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

Полезные ссылки

• reader.org.ua
• Пост на genn.org про дизайн интерфейса
• HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript
• для девелоперов на apple.com

Из того что пока не удалось до конца победить или успеть:

• В каталоге порядка 10 000 книг, но есть дубли и пустышки. Скоро надеюсь залить новую базу.
• Настройки для чтения: размер и цвет текста и фона
• Если у вас не iPhone 3gs или 4 то может ощутимо тормозить и долго все делать
• Все что вызвано предыдущим пунктом, иногда лучше подождать, пока что-то произойдет
• Пока только portrait mode. Не придумал как сочетать оба.
• Постраничное перелистывание, есть идеи, но это уже сложнее чем 10 часов :)

Буду рад мнениям, советам и идеям. Или тому на что это вас может вдохновить.

DC

Случайно провел там ночь, сфоткал святую святых и улетел

Washington

LA

На этот раз запомнился: перуанской и японской кухней, бирманскими врачами, и сальса-вечеринками с живой музыкой.
А еще буфетом в Caltech (тот самый вуз Шелдона и Леонарда) и USC. Все хорошие девчонки в USC. Калтех обитель ботанов, что и следовало ожидать.

Manhattan beach

Центральная Америка

Точнее, Никарагуа.
Почему я туда поехал? Потому что ничего не знал о них.

Набор впечатлений:

• Я видел гуардабарранко.
• Самая бедная страна в регионе, четверть страны эмигрировала в Коста-Рику.
• Нет кранов с горячей водой. Никому не нужна.
• От лихорадки нет ни лекарств ни прививок. Вообще. Можно заболеть если укусит комар. Это почти как грипп. А малярия еще неприятней, и тоже комары.
• В пробках мальчики могут жонглировать факелами, потом собирать деньги с машин.
• Никто не говорит по-английски. Без испанского делать почти нечего. А испанский звучит круто.
• В словах Никарагуа и Манагуа (это столица)  — буква «г» не произносится
• Половина страны смуглая, а половина мулаты. И эти две части страны почти не сообщаются.
• Существует вулканобординг.
• Есть еще минимум 10 непохожих ни на что фруктов о которых я не знал. И у каждого десяток сортов.
• Есть реклама белорусских тракторов.
• В маршрутках и такси играет бачата, вместо шансона. А на дискотеках все танцуют под сальсу и реггетон. Но никто не танцует, то что в европе называют сальсой.
• Теперь я учу испанский.

Где-то у входа в хостел

Молодежь перед выступ лением

Юка, жареное сало, кукурузный лист, капуста перец и стакан с тамариндом. Типичное блюдо для центра Гранады, невкусно. Тамаринд, который коричневый в стакане — очень, очень вкусно.

В центре Гранады, кушал

У них почти все церкви такие вот.

Старая церковь

Набережная у большого озера

Дети

Атмосфера

Любимый фрукт моей знакомой и (красная) «пера»

Действительно, почему бы в фонтан в центре города не напустить черепах.

А в этом фонтане плавали черепахи, центр Масайи, О_о

Обычный рынок в Масайе

Мальчик

Кто-то припарковал лошадь

Все нарисовано на стенах от руки, тут я бы обратил внимание на 3д-эффект справа внизу. Не поленились :)

IT-бизнес в Никарагуа

Девочка в автобусе

Кокос

Очень непонятное существо, живет в мокром песке.

Муи-муи

А тут есть краб

«Автобусы» по Леону

Вулкано бордисты

Я разогнался на этой фанерке до 70км/час.

Вулкано бординг

3 часа ехал 100 километров

Чуть больше фоток можно посмотреть на фликре.

P.S.: Да, если захотите ехать, но не знаете испанского, лучше в Коста-Рику, там говорят по-английски, а в принципе тоже самое.

IE9

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

Компания Microsoft оказала мне честь рассказать о поддержке CSS в ИЕ9, что я с удовольствием и сделал. Презентация включала много примеров, слайды же все равно можно посмотреть, там есть щенок, Дуглас Адамс и look of disapproval.

Из того, что обязательно надо знать, IE9 бета уже поддерживает:

• border-radius!
• RGBa
• WOFF
• calc() (например, width:calc(50%-20px))
• multiple backgrounds
• Data URI —, в полной мере и без ограничения в 32Кб как в IE8.
• SVG (причем проще чем все другие браузеры)
• HTML5 видео аудио

Ну и аппаратное ускорение которое можно посмотреть на разных демках вот здесь.

Сергей Байдачный из Microsoft об IE9

Какой-то парень в белой рубашке

Владимир Белоненко про поддержку SVG и HTML5

Презентация Владимира находится онлайн, и вот тут её можно посмотреть, рекомендую. Можно даже в IE9.

Еще фото с мероприятия и отчеты:

• Фотографии с мероприятия
• Страничка мероприятия
• На kit1980.ru

Web Standards Days

Летом мне внезапно подумалось что эту серию мероприятий надо наконец довезти до Киева. Благодаря многим хорошим людям, всё получилось.
Как все прошло лучше расскажут участники, я выложу несколько фото :)

Мациевский перед докладом

Вадим Пацев, дизайнер-разработчик интерфейсов из Яндекса

Андрей Сумин из hh.ua рассказывал о специфике использования веб-стандартов в больших проектах

Люди

Тимофей Бабич из Mozilla

Какие-то чуваки

Мациевский рассказывает о рабочей группе W3C в которой он участвует

Очень интересно было узнать, что способы измерения скорости загрузки страницы и многих других параметров будут стандартизированы. И Николай сам является участником рабочей группы W3C занимающейся этой задачей.
Кстати скоро он возможно приедет в Киев с мастер-классом, stay tuned ;-).

Виталий Рыбалка сделал обзор библиотек и способов разработки

Антон Немцев показал как нам будет хорошо, когда-нибудь :)

Вадим pepelsbey Макеев рассказал об SVG и способах его использования

Все фото © Михаил Баранов.
Видео докладов появится на сайте WSD в ближайшие пару недель.

Credits

Без Евгения Некоза и Вадима Макеева мероприятие бы не состоялось. Спасибо им большое, и надеюсь мы сделали это не последний раз.
Кроме этого спасибо нашим спонсорам и партнерам Opera, Mozilla Foundation и SmartMe, без них бы тоже мало что получилось.
В целом все прошло гладко, только гостиница подставила нас с интернетом. Больше не допустим.

Будем надеяться мероприятий будет всё больше и они будут всё лучше =).
Буду рад услышать ваши мнения и впечатления, или просто ссылки на фото и отчеты (добавлю в пост).

Проблема

Еще пять лет назад я искал решение проблемы: как запретить обтекание float. Подробнее можно читать в старом посте (2005 год, офигеть). Вкратце, мы приводили это:

Картинка-float

к такому виду:

Картинка-float + display:table для текста

Для этого тексту задавалось свойство display:table. А для IE zoom:1.

overflow:hidden magic

Относительно недавно (относительно пяти лет) мы столкнулись с новым способом, оказалось что overflow:hidden может повторить этот эффект, и сделать его даже лучше. Причина обоих трюков, вовсе не глюки браузеров или специфика их отображения. Причина на сайте W3C:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
W3C, CSS 2.1

источник
То есть это не хак, а документированное поведение. Всё дело в так называемом «контексте» или «контексте форматирования», такие правила как display и overflow создают этот контекст, и согласно правилам он (созданный контекст) не может пересекаться с флоатами. Что вобщем и происходит. В результате блок занимает все доступное пространство кроме флоата.

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

Как видим контекст можно создавать разными способами.

Важное отличие от display:table — ширина блока, я сделал специальный пример чтобы было видно, чем часто был неудобен именно display:table.

Именно это отличие позволяет делать с overflow более сложные вещи чем с display:table.

Когда мало текста, блок не занимает всю ширину

IE?

IE6 — не работает ни display:table ни overflow:hidden. Нужно использовать zoom:1; (или любой hasLayout). В результате эффект идентичен действию overflow в других браузерах.

IE7-8 — overflow:hidden работает также как во всех остальных возможных браузерах.

Резюмируя: можно добавить к overflow:hidden еще zoom:1; и забыть о проблеме.

Возможные применения

Самое простое и банальное, вёрстка блоков с текстом и картинкой:

Редкий сайт обходится без такого блока

Используя overflow:hidden можно их стилизовать для произвольной ширины картинок.

Чуть более сложный кейс, резиновый инпут и кнопка:

Обычное дело на резиновых сайтах

С подобной проблемой недавно столкнулся Глеб Арестов и успешно решил её как раз с помощью этого же свойства.

Более того, можно строить layout страниц. В частности в фреймворке OOCSS колонки строятся как раз с использованием этого свойства. Примерно так:

Можно не задавать ширину резиновой колонке

Конечно, тут минимум два недостатка. Во-первых, порядок контента — средняя колонка должна идти в коде после обоих боковых. Во-вторых, нестабильность при сжатии, когда что-то начинает не помещаться в блоке с overflow:hidden, его самым невероятным образом разрывает на части в IE. min-width мог бы спасти. Использовать осторожно.

Но, помнить о таком мощном приеме стоит.

Еще

• Пост Gunlaug про это же поведение
• Мой пост про display:table
• Мой простой пример, пример трехколоночного сайта
• Пост Flack на эту же тему
• Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?
• Управление потоком в CSS: создаём контекст форматирования

Это не CSS3 и далеко не вчерашнее изобретение, но кажется многие недооценивают силу этого простого приема.

Буду рад если поделитесь своим опытом!

Алекс Могилевский про IE9

Ключевое слово выступления — HTML5. Именно так, это один из приоритетов нового браузера. Уже работает и видео таг, и SVG, и скоро будет много другое, из того что уже устоялось.

Вторым, и даже более важным приоритетом является скорость. Команда заново переписала джаваскриптовую составляющую браузера, чтобы сделать всё еще более быстрым.
Они даже провели аудит 7000 сайтов, чтобы узнать какие части джаваскрипта используются чаще всего. На первом месте, к слову, оказался indexOf и где-то в десятке getElementById. Они очень серьезно относятся к будущему интернета, веб-приложениям и потому готовят браузер к отрисовке множества элементов на странице.

ИЕ9 будет иметь аппаратное ускорение. Алекс покаал несколько демок, которые работают в ИЕ9 в несколько раз быстрее чем в Фаерфоксе и Хроме (видео и анимация картинок). Вот такая демка в IE9 не тормозит даже когда весь экран в иконках.

Могилевский фактически поставил на место наши современные браузеры с их поддержкой CSS3. Вот так к примеру выглядит реализация border-type и border-radius.

Угадайте какой браузер слева

Я уже в твиттере высказывался о том какой замечательный шаг они сделали опубликовав эту статью. А у них в блоге сейчас можно найти еще очень много интересного и практического. Если так пойдет и дальше, у нас может окончательно исчезнуть «враг».

Еще один посыл Могилевского, и компании Microsoft — помогите нам избавиться от IE6. Он рекомендовал не поддерживать его, и не разрабатывать приложения только под него. Сама компания будет продолжать выпускать для него фиксы. Но удалить его насильным апдейтом у пользователей они не могут, очень многие используют приложения которые работают только в IE6.

Алекс Могилевский

Превью движка нового IE9 уже можно скачать. Каждые два месяца превью будет обновляться. В частности девелоперская версия уже поддерживает HTML5 video (с кодеком H.264). Про дату релиза нового IE Алекс рассказать не смог, но судя по предыдущим релизам ждать его следует ровно через год, на следующей весенней конференции MIX. IE9 можно будет ставить только на Windows 7 и Vista.
Превью которую можно скачать не содержит интерфейса, потому пока непонятно как он будет выглядеть.

Другим браузерам нужно будет поднапрячься чтобы конкурировать с ИЕ9 в будущем. Вся прошлая репутация Internet Explorer была реабилитирована выступлением Могилевского.
А тут Ольга как будто грозит Алексу «не шали там с IE9!» @©martynov.

Фото Сергея Мартынова.

Чарльз Невилл, директор по стандартам Опера.

Чарльз Невилл

Выступление было в основном про то как ведется работа над стандартами и что такое эти стандарты вообще. Невилл начал с метафоры, что стандарты как сосиски, их едят все, но лучше нам не знать как они делаются ;)

Рассказывал про geolocation и проблемы с ним. Оказывается почти все браузеры уже его реализовали, но из-за нерешенных проблем с прайваси он до сих пор не запущен. В частности, что делать с тем что какой-то сайт будет знать географическое положение всех своих пользователей. Это уже гораздо круче чем просто пароль к имейлу ;).

CSS3 анимации, Сергей Чикуёнок

Вкратце рассказал о свойствах transition, animation и transform. После чего поделился некоторыми практическими советами по их применению.

Например, правильным скриптом по определению вендор-префикса:

Вендор-префиксы

Еще показал отличный способ определения поддержки 3д-трансформаций в браузерах.

1. .foo{
2. width:0
3. }
4. @media screen and (-webkit-transform-3d){
5. .foo{width:300px}
6. }

После этого можно проверить ширину блока джаваскриптом, и узнать поддерживает ли браузер 3д-трансформации.

Очень мило, что Опера 9 тоже прочитает правило про 300 пикселей, как будто она поддерживает трансформации. Красивого решения этой проблемы нет, так что Сергей пока решил ее проверкой window.opera.

Замечательность способа в том, что мы фильтруем не браузеры определенных версий, а браузеры поддерживающие то или иное свойство. Метод понятное дело подходит и для других случаев.

Забавно было узнать что если анимировать картинки которые имеют размер больше 2000 на 1000 пикселей, то в начале анимации они будут мигать. Для айфона граничное число 1024 пикселя. Это вроде бы связано с ограничениями на размер текстур в openGL. (?)

Аппаратное ускорение (начиная с Mac OS 10.6) и субпиксельное сглаживание делают анимации в Сафари очень привлекательными.

В конце Могилевский одобрил скрипт по определению свойств, и добавил что transition и animation немного дублируют друг друга и возможно синтаксис этих свойств будет изменен. Так что использовать их нужно с некоторой опаской и обязательно проверять на поддержку анимаций, а не на версий браузеров.

Резюме: если вы делаете приложения под мак или айфон, обязательно нужно использовать для анимаций transition-transform-animation. Презентация.

Десктоп-подобные веб-приложения, Владимир Колесников

Рассказал о метафоре десктоп приложения, о том что она понятна пользователю даже онлайн, и что таких приложений становится все больше. Взять тот же mobile.me

Списки писем онлайн и на десктопе

Владимир автор новой библиотеки для построения десктоп-подобных интерфейсов Uki. Целью было сделать ее простой и быстрой, и это точно получилось. В действии можно посмотреть на примере копии интерфейса Mail App которую он сделал за пару дней. Вот тут можно почитать подробнее.

Следует упомянуть, что размер всего приложения с картинками и CSS в gzip — 65 килобайт. А сам фреймворк с картинками и стилями в сжатом виде 35 килобайт.

Владимир Колесников

Еще развеял некоторые мифы о таких библиотеках. Например, этот mail app работает отлично в IE6.

Из альтернативных вариантов для построения десктоп-подобных интерфейсов Владимир рекомендовал Sproutcore и Capuccino.

Ошибка. Осознание, анализ, извлечение пользы. Вадим Макишвили

Очередное великолепное выступление Вадима.
Чтобы вы поняли, приведу короткий разговор в кулуарах:

- Ты же уже был на его выступлении?
- Да, но только один раз.

Вадим Макишвили

Философский взгляд на ошибки, самооценку, работу верстальщика. Сдобренный несколькими реальными и интересными ошибками из опыта вёрстки сервисов Яндекса. Пересказывать бессмысленно, не пропустите если будет возможность ;).

Если конечно его отпустят теперь на конференции, во время выступления звучали признания в любви. А ведь он женат! ;)

Костыли это кошерно, Павел Кудинов

Это однозначно один из лучших докладов на конференции рекомендую всем.

И ссылка на отчет самого Кудинова. Если вы еще сомневаетесь смотреть или нет — перестаньте, смотрите.

Ещё

• Фото первого дня
• Сайт конференции
• Слайды и тезисы
• Куча клёвых фотографий от Сергея Мартынова

К сожалению с третьего дня конференции пришлось уехать, потому слушал не все доклады. Будем ждать видео.

Спасибо организаторам за отличную конференцию.
Очень рад был встретить всех старых знакомых. :)
Буду рад и вашим впечатлениям!

Предыстория

Началось с того что мне нужно было сделать доклад об использовании новых технологий. Делать его в Powerpoint и потом все время говорить «Ну вы это легко проверите в своём браузере» мне не нравилось, и я решил сделать презентацию целиком на этих эффектах. Вот что получилось.
То что получилось устроить все без Javascript — случайность. Приятная.

Сразу о поддержке браузеров

Это всего лишь презентация, и я c самого начала не преследовал цель полной кроссбраузерности. Мне было важно чтобы она работала в моем Сафари. Однако, в Опере и Фаерфоксе она будет работать, просто в некоторых местах коряво, а кое-где очень коряво. В Хроме она работает отлично, но иногда по непонятным мне причинам хром делает что-то вроде «Я устал от твоего CSS3» и опускает руки. Редко.
Вобщем Сафари и Хром наш выбор сегодня.

Презентация

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

о том как это сделано

Структура кода примерно такая:

1. <body>
2. <section id="slide1">
3. <h1>CSS3 и HTML5</h1>
4. <p>Openwebcamp, Киев, 2010</p>
5. </section>
7. <section id="slide2">
8. …

Каждый section — отдельный слайд. Всем им задан:

1. section{
2. position:absolute;
3. top:0;left:0;
4. height:100%;
5. opacity:0;/*по умолчанию все слайды скрыты*/
6. }

То есть они отображены все на одном месте, на весь экран, с прозрачностью 0.
Кроме этого, в файле содержится навигация, просто список ссылок на все эти слайды-section:

1. <ul>
2. <li><a tabindex="100" href="#slide1">slide1</a></li>
3. …

Навигации тоже заданы координаты через position:absolute;. tabindex тут не просто так, позднее станет ясно зачем он мне.

Но как же я переключаю слайды? Это делается с помощью псевдокласса :target.

Этот селектор указывает на блоки, которые являются «адресом» внутренней ссылки. То есть при blabla.html#slide21, для блока у которого id=”slide21″ сработает :target.

Результат в CSS выглядит так:

1. section:target{
2. opacity:1;
3. }

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

1. section{
2. transition:all 1s linear;
3. }

Таким образом вместо того чтобы отобразить слайд моментально, он будет плавно появляться.
Более того, я добавил еще пару эффектов, такой например:

1. .effect-slideleft{
2. left:-100%;
3. opacity:1;
4. transition:all 1s ease-in-out;
5. }

Это значит по умолчанию слайд будет смещен влево от экрана, а при клике плавно изменит положение. (opacity:1 значит что прозрачность не будет анимироваться).
А вот эффект кручения-исчезновения в центр:

1. .effect-rotate{
2. transform:rotate(360deg) scale(.01) translate(50%, 50%);
3. transition:all 1s ease-in-out;
4. }

Подробнее об играх с transform можно почитать в моем же посте

Как переключать слайды пультом?

Я написал небольшой applescript, который по нажатию Apple Remote табулировался по ссылкам навигации (вот зачем tabindex), и по нажатию на пульте «Play» — кликал на них. Это единственная часть которую по понятным причинам трудно реализовать совсем без скрипта.

Хотя у меня была идея построить все на -webkit-transition-delay (расписать в CSS появление каждого слайда по времени). Но тогда даже я сам считал бы себя психом.
Если кому-то интересно итоговый скрипт выглядел примерно так (табулирование + enter):

1. on nextElement()
2. simulate keycode 48 with option
3. simulate keycode 76
4. end nextElement

Это я позаимствовал из Sofa Control.

Почитать

• Сама презентация и ее ядро
• CSS3.info
• HTML5 спецификация
• Еще вариант движка на Django
• S5 один из первых движков для презентаций в браузере

Буду рад услышать ваши мысли про эту затею. Надеюсь она вдохновит кого-то на что-нибудь еще клёвое :)

Был рад возможности работать с командой настоящих профи над таким проектом!

Фотоаппарат к сожалению нельзя было взять с собой, однако вот еще несколько фото с того дня.