Проблема

Еще пять лет назад я искал решение проблемы: как запретить обтекание 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 один из первых движков для презентаций в браузере

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

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

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

(На самом деле я просто еще не успел дописать описание презентации.)

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

Виталий Рыбалка из Ukr.Net

Доклад Виталия

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

Тимофей Бабич про user scripts

Вот тут Тиму надо было загадать желание

Речь шла о скриптах для GreaseMonkey, Stylish и новом приложении от мозиллы Jetpack. Рекомендую подробнее с ним ознакомиться. Тема эта очень интересная, хотя я лично дальше adblock так и не пошел.

Игорь Кононученко про Canvas

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

Та самая женщина

Pepelsbey про универсальные сайты для мобильных

Вот что нужно сделать

Самая хорошая новость, что порядка 80% нашей аудитории используют браузер Opera Mini или Opera Mobile. Один так клево упрощает странички (и ориентирован на простые мобилы) что почти ни о чем можно не волноваться. А второй поддерживает столько крутого CSS3 что можно творить все что угодно.
В том числе Вадим рассказал о media queries. Это, например, фильтрование CSS для браузера учитывая его размер экрана, вот как-то так:

1. @media screen and (max-device-width: 480px) {…}

Более того в мобильном браузере можно использовать селекторы и свойства вроде:

1. input[type:text]{
2. background: url(pic.svg) no-repeat,
3. url(pic2.svg) no-repeat,
4. rgba(170,0,0, 0.5);
5. }
6. a:first-of-type{display:none}

И это на мобильных! Уму непостижимо :)
Кроме этого, сегодня Опера объявила о виджетах для Opera Mobile Mini.

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

Еще несколько случайных фото

Это я в кого-то стреляю, by @klonfuture

А это мой и pepelsbey ноутбуки, у обоих открыты файлы презентаций, оба правим что-то

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

Народ

А тут всем сказали что можно взять значки со стола

Другие отчеты и ссылки

• Твиты про openwebcamp
• Официальный сайт
• в блоге Vovanada
• от Kigorw (доклад о canvas)
• Доклад vitex о клиентской оптимизации

В целом круто, и побольше бы таких мероприятий Киеву, правда?
Организаторам Тимофею Бабичу и Юрию Клековкину из Mozilla, отдельное спасибо!
И слушателям спасибо за хорошие отзывы! =)
Буду рад услышать и ваши впечатления!

P.S.: презентация в следующем посте.

Буду рассказывать о современных техниках вёрстки, опыте разработки ресурса kremlin.ru, подходах больших компаний (Yahoo, Yandex), ускорению загрузки сайтов, версиях для мобильных, поиске работы верстальщика, CSS3 и HTML5, и о чём меня только спросят, я готов подарить всем свой мозг. Ориентирован на людей которые уже умеют верстать. Примерно 4-5 часов с перерывами, затем с желающими в паб. :)
Подробнее на страничке воркшопа, тут же можно и зарегистрироваться.

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

Что это вообще такое эти слайсы?

Это что-то вроде продвинутых закладок для IE8. Вы можете выбрать кусочек страницы, добавить его в Favorites. И после этого находясь уже на другом сайте, просмотреть этот кусочек. По клику на закладку откроется небольшое окошко с фрагментом другой страницы. Например это может быть погода, вот так это выглядит в слайсе от gismeteo:

Заметьте, что при этом я нахожусь на сайте Digg

Или это может быть десятка популярных линков Digg:

А теперь я на gismeteo, но держу руку на пульсе Digg! Я непредсказуем - согласитесь.

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

Картинка кликабельна

Такая вот полезная мелочь. А для больших сайтов, как известно, все мелочи значимы.

Что это такое для кодера

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

1. <div class="hslice" id="whatever">
2. <div class="entry-title">Название слайса.</div>
3. <div class="entry-content">А тут то что будет отображаться в окошке слайса.</div>
4. </div>

Пару классов, и какой-то, любой, но заданный id.
Это пример самого элементарного слайса.
В моем случае было что-то вроде этого:

1. <div class="b-news-main hslice" id="news">
2. <h2 class="entry-title">Новости</div>
3. <ul class=”entry-content”>…список новостей… </ul>
4. </div>

Это код с главной. А результат получился такой:

Очень мило

Неприятные мысли стали посещать меня в этот момент.
Но я снова воспрял духом едва прочитал документацию до конца. Оказалось, из стилей наложенных на этот фрагмент на оригинальной странице, берутся только инлайновые, и никаких наследованных (body{font-size:12px} не применяется).

style="font-size:12px;" применился бы, но кому интересно марать свой чистый код.

Правильный путь

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

В документации описано несколько путей. Нам подошел следующий.
Код на сайте:

1. <div class="b-news-main hslice" id="news-slice">
2. <h3 class="entry-title">Новости</h3>
3. <a rel="feedurl" href="/slice/news"></a>
4. …
5. </div>

Параметр feedurl используется для указания альтернативного источника для слайса, как раз то что нам нужно в данном случае.

А по адресу /slice/news находится файл который я хочу чтобы отображался в браузере.

При этом важно помнить, что внутри этого файла снова должен быть размечен слайс, поскольку IE рассматривает его именно как альтернативный источник, который снова надо парсить. Если просто вставить в этом файле какой-либо HTML (было бы логично) слайс не будет работать в браузере. Вот такое там содержимое прямо сейчас:

1. <div class="hslice entry-content" id="documents">
2. <h2 class="entry-title">Новости</h2>
3. <!–Адрес куда IE будет ходить при обновлении, сюда же –>
4. <a rel="entry-content" href="http://news.kremlin.ru/slice/news" style="display: none;" ></a>
5. <ul class="entry-content">
6. список новостей
7. </ul>
8. </div>

Как видно, обычный слайс с которого мы начинали. И теперь наконец все работает! На этом мы пока и остановились. Слайс в действии можно видеть на этой страничке, а файл самого слайса берется отсюда.
Выглядит это прямо сейчас вот так:

Слайс можно растянуть по вертикали чтобы уместилось больше новостей

А вот так распознается браузером:

После, я еще много игрался и комбинировал эти методы, если кому-то интересно, вы тоже можете окунуться с головой в увлекательный мир слайсов под IE8. Но я решил удовлетвориться одним рабочим вариантом :)

Ссылки

• Подробная статья на Хабрахабре
• Про слайсы на MSDN
• Слайсы на других русскоязычных сайтах

Надеюсь кому-то это сэкономит время в будущем, и буду рад вашему опыту!
В одном из следующих постов могу рассказать об опыте вёрстки этого большого проекта. И почему все получилось сделать валидным.

P.S.: Так как у меня windows XP, и в ней стоит родной IE6, который я не хотел терять, тестировал я все в SaaS решении Spoon.net. Нужно лишь установить плагин порядка 25 мегабайт, и можно запускать почти любой браузер (всё это работает правда пока под Windows).

Андрей Сумин и редизайн hh.ru

Три верстальщика, около 60 разных страниц сайта, и пара месяцев на полный редизайн, включая внедрение.

Андрей Сумин

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

Было-стало

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

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

Для работы над проектом ребята придумали некий движок:

Работа над страницами сайта

Там они разными цветами отмечали готовность верстки для разных страниц сайта. По словам Андрея подход очень помог в работе. (на фото видно что всё почти зеленое — это уже последние дни перед запуском, когда всё было готово)

Исповедь Макишвили

Настолько проникновенно и с чувством Вадим рассказывал что по-другому и не назовешь.

Рассказ начался с вот такого слайда:

Shame on you, Opera!

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

Также с сожалением сказал что quirksmode на страницах Яндекса возможно был не самым удачным решением.

Кроме того Вадим рассказал о нескольких наиболее вредных глюках. И его личном «любимом» баге на решение которого он потратил больше недели. Условий для бага целых 8, и он связан с флоат блоками и длинными неразрывными словами внутри таблиц.

В среднем на одну задачу приходится две ошибки

По количеству положительных отзывов Вадима можно однозначно считать рок-звездой минской встречи. :)

Макеев о веб-шрифтах

Первый слайд презентации:

Ответ Вадима Вадиму

Pepelsbey рассказывал о шрифтах для веб, их истории и самых последних обновлениях. О том как все уже намучились c .eot. И всяком другом интересном про шрифты.

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

А ещё

Николай Мациевский рассказал о том что и когда лучше использовать для рисования, SVG или canvas. Доклад доступен у него на сайте. Результат сравнения примерно такой: сложные области или чисто растровая графика — Canvas, большие по пиксельной площади объекты, которые могут быть в векторе — SVG.

Ему вообще отдельная благодарность, так как много его хороших книг подарили по ходу мероприятия.

Николай Мациевский

Весь зал выглядел примерно так, почти полный:

Народу было очень много. Ловцевич об HTML5

Кроме этого выступали и Константин Ефимов (о современных технологиях в верстке и их правильном использовании) и Павел Ловцевич (об HTML5). Артемий Ломов рассказал о конкурсе WebHiTech который недавно закончился.

Ожидался Сергей Чикуёнок, но, жаль, кажется просто не хватило времени.

• Официальный сайт мероприятия и твиттер
• Отчет Вячеслава Олиянчука aka miripuni
• Отчет на хабре
• Отчет на WebHiTech
• Фотографии от Михаила Баранова

Видео и слайды докладов думаю скоро появятся на сайте WSTdays.

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

Дальше будет немного теории, можно сразу перейти к примерам внизу.

transition transform

Это CSS3 свойства, которые пока работают только в Safari и Chrome. Еще они будут в следующей версии Firefox и Opera. Но пока нет.

Если вам совсем нечего делать, можно прочитать о них в спецификации про 2d-transforms и про transitions. Это всё конечно draft, но вряд ли что-то изменится.

Вкратце всё обстоит так.

transform — совершает всякие странные эффекты с блоком. По сути похоже на text-transform, просто эффекты более странные.
Например можно писать так:

1. .weirdblock{
2. transform: rotate(45deg) scale(2);
3. }

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

Был маленький и прямой, стал большой и кривой

Пока спецификация неактуальна, для Сафари и Хрома правило нужно писать с префиксом -webkit-. То есть вот так:

1. .weirdblock{
2. -webkit-transform: rotate(45deg) scale(2);
3. }

Вот вобщем и всё, transform уже работает в последнем Фаерфоксе, кстати. Подробнее о нём.

transition — определяет анимацию блока. Используется примерно так:

1. div{
2. opacity:0.5;
3. -webkit-transition: opacity 1s linear; /*opacity - что анимируем,1s - длительность эффекта, linear - плавность эффекта*/
4. }
5. div:hover{
6. opacity:1;
7. }

По наведению курсора, блок просто плавно изменит свою прозрачность за 1 секунду. Это мог бы быть фон, размер и цвет текста и все что угодно. Всё можно анимировать.
А вот так например можно плавно менять цвет ссылки по наведению мыши:

1. a{
2. color:green;
3. -webkit-transition:all 1s linear;
4. }
5. a:hover{
6. color:red;
7. }

А теперь примеры! ;)

Примеры (пока только для Safari и Chrome)

Анимация во всех примерах начинается по наведению мышки. Когда убираете мышку, она проигрывается до исходного состояния.

Первое что пришло в голову, сделать анимированный комикс ;) Вот что получилось, выглядит странно, но он целиком сделан на CSS! Подумать только!

Дальше, еще интересней, я решил анимировать слова. А потом, конечно, это случилось и с буквами. :) Удивительно в этом то, что эту анимацию совершают всего 3-4 строки CSS-кода. (ну и джаваскрипт который предварительно раскидывает буквы по всему экрану, но это его единственная задача)

Если добавить изменение размера, получается забавно. А потом их можно еще и крутить ;), тогда они похожи на муравьёв. Но с двумя лимериками уже начинает тормозить.

По дороге получился смешной неудачный вариант. Буквы тут довольно неуклюжие.

Genn сделал ASCII трибьют, и еще один, не менее клёвый. Еще один прекрасный с отложенной анимацией (-webkit-transition-delay). И синяя лужа.

Может и у вас есть варианты? :)

Если у вас вдруг нет ни Сафари ни Хрома, вот видео пары анимаций:

Opera & Firefox

В последних непубличных версиях этих браузеров эффекты уже работают, и вызываются соответствующими правилами -o-transform, -o-transition, -moz-transform, -moz-transition. Так что теоретически, если вы делаете эффект для сайта, правила можно продублировать с этими префиксами, авось потом заработает ;). Пока что свойства идеально деградируют в других браузерах, просто анимации нет, все происходит мгновенно. А красотами наслаждаемся в Хроме и Сафари.

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

Все примеры

• Комикс на CSS
• Трибьют от Genn и второй, а также суперкрутой третий, и ошеломляющий четвертый
• Крутящиеся буквы, буквы которые засасывает и поворачивающиеся буквы, и еще неудачный вариант
• Аналоговые часы с помощью transition

Ваш арт по теме и мнение более чем приветствуется! :)

P.S.: Лимерики взяты из журнала Трамвай,
автор Татьяна Петросян, остальные тут.

Практически, будущее наступило, во всех современных браузерах на данный момент можно вставить нестандартный шрифт на страничку только с помощью CSS. (Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE 5+)

Шрифты вообще

Способов за годы веб-разработки придумано множество. И SIFR (шрифты через Flash), которому скоро 5 лет стукнет, и Cufon (шрифты через <canvas>), и всякие другие вариации типа Typeface (там кстати уже можно выделять и копировать!).

Но еще с прошлого тысячелетия самым крутым способом было конечно просто подключить нужный шрифт на страничку, и написать им текст. Сначала это сделали в Netscape, потом в IE 4.0. А теперь это в грядущем CSS3. По спецификации это принято делать так:

1. @font-face {
2. font-family: Parampampam;
3. src: url(parampampam.ttf);
4. }

И затем использовать это:

1. p { font-family: Parampampam, serif; }

Именно такой подход на данный момент сработает в Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+. То есть практически во всех последних версиях браузеров. Они поддерживают .ttf и .otf файлы.

В IE использование своих шрифтов работает еще с версии 4.0. Но, видимо, споткнувшись еще тогда на лицензировании (или по своим иррациональным причинам), они решили создать свой формат для подключаемых файлов Embedded OpenType (.eot). Который и является средоточием геморроя в этом шрифтовом вопросе.
В любом случае, подключение там работает примерно также:

1. @font-face {
2. font-family: Parampampam;
3. src: url(parampampam.eot);
4. }

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

Как создать EOT

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

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

Вариант 1: FontForge+ttf2eot

Появился отличный онлайн сервис ttf2eot для конвертации. Но, если в него просто засунуть первый попавшийся TTF файл, получившийся EOT не будет работать в IE. Чтобы он работал, нужно предварительно почистить атрибуты шрифта. Для этого понадобится FontForge.

Если открыть шрифт в FontForge, мы получим примерно такое окошко:

FontForge

Затем нам нужно будет открыть окно с «Font Info→TTF Names» и удалить все записи отсюда, красные не удалятся, ну и ладно:

Это окошко находится в меню Element>Font Info

Можно посмотреть как это разжевано в скринкасте.

После чего просто сохраняем шрифт (File→Generate Fonts) и скармливаем его сервису ttf2eot. Результирующий файл будет работать в IE.
В скринкасте кстати, сказано, что надо удалить все атрибуты, и добавить несколько своих. Я просто удалял все, и у меня все работает. Так что можно не заморачиваться.

Вариант 2: fontsquierrel

Однако увидев всю эту мороку из предыдущего варианта, люди ее автоматизировали.
Это просто онлайн сервис. Вы загружаете шрифт, он вам генерирует .svg версию шрифта, .eot версию шрифта, и даже WOFF версию (формат для новых Firefox). Вдобавок ко всему, CSS файл с правильным подключением всех этих woff-eot-svg-otf (кошмар какой-то) в @font-face.

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

Как внедрить для всех

На данный момент оптимальным принят следующий код:

1. @font-face {
2. font-family: ‘Graublau Web’;
3. src: url(’GraublauWeb.eot’);
4. src: local(’Graublau Web Regular’), local(’Graublau Web’),
5. url(’GraublauWeb.otf’) format(’opentype’);
6. }

Подробнее почему именно так, можно прочитать здесь. local — означает, что браузер должен проверить есть ли в системе такой шрифт, прежде чем скачивать. Должен, но все равно не везде работает. =(

Еще можно подключать шрифты в формате .svg, тогда они отобразятся даже в iPhone.

А буквально на днях активно продвинулся WOFF, это «сжатый» truetype который пока будет работать только в Firefox 3.6. Просто чтобы веб-разработчикам было нескучно с OTF, TTF, SVG и EOT.

Оптимизация

Во-первых файлы шрифта можно просто gzip’ить. Как показывает опыт, можно ужать в два раза. Что вовсе не так мало, при размере порядка 100 килобайт.

Кроме того, если открыть файл шрифта тем же FontForge, то можно увидеть кучу символов, которые вряд ли будут вами использоваться:

Вся эта бяка, которая обычно никому не нужна, занимает такое же кол-во байт, как и нужные всем буквы

Прямо в этом же FontForge ненужные символы можно удалить:

Выделить с шифтом и сделать Clear

Благодаря удалению только таких символов, файл для шрифта Myriad у меня уменьшился с 96 килобайт, до 40. Соответственно уменьшается и файл .eot.

Лицензия

Не все шрифты можно использовать в @font-face. Просто потому что его же можно будет легко скачать, а он может стоить денег. И хотя на практике вряд ли кого-то будут доставать по этому поводу, для популярных сайтов лучше не рисковать. Уже есть сайты-сборники шрифтов доступных для @font-face. Такой список есть на Webfonts.info, например, и вот еще один отличный ресурс. (Спасибо Илья!) И время от времени на разных других сайтах.

Кириллических среди них конечно мало, но, пока никто толком не разобрался с этим вопросом, полагаю шрифты можно использовать какие найдете, или просто бесплатные. Вряд ли кого-то засудят за подключение Myriad на свой блог ;)

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

Ссылки

• Пример на живом проекте и искусственный пример (с WOFF и SVG сгенерированными на Fontsquirrel)
• Becoming a Font Embedding Master — подборка информации о современном font embedding
• Лучший способ использования @font-face на данный момент и оптимизация вставки шрифтов
• Тестирование gzip для шрифтов
• Where to get web fonts — отличная статья о лицензировании шрифтов и будущем этой проблемы
• Про WOFF
• @font-face или назад в будущее
• Внедрение шрифтов — EOT и @font-face
• Тест 16 кириллических шрифтов доступных для использования

Похоже, скоро мы забудем о SIFR и Cufon! Ура!