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

К счастью, HTML5 предоставляет нам еще один вариант: веб-шрифты. Набор шрифтов может содержать графические иконки и наборы символов. Wingdings — это один из наиболее известных, но свободные шрифты вроде Iconic могут быть более полезными и обеспечат пример кода на HTML и CSS.

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

#myelement {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?

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

К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдоэлементу :before или :after, а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.

Техника замены изображений через -9999px была популярна почти десятилетие. Для замены текстового элемента изображением, можно использовать следующий код:

<h1>Заменяемый текст</h1>
<style>
h1
{
  background: url("myimage.png") 0 0 no-repeat;
  text-indent: -9999px;
}
</style>

Фон элемента отображается, а текст перемещается за пределы экрана, чтобы он не мешал. Просто и эффективно. Этот приём принят для показа графических заголовков — теперь он необходим редко, потому что у нас есть веб-шрифты, — но вы всё равно найдёте примеры использования по всему Интернету.

До сих пор.

Как мы уже сообщали, Mozilla, Microsoft и Opera недовольны сайтами, которые ориентированы только на свойства с -webkit. Это заставляет их браузер выглядеть плохо даже в случае, когда он реализует идентичные или лучшие технологии. Чтобы решить эту проблему, они предлагают включить поддержку префикса -webkit в не Webkit-браузеры.

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

В феврале 2012 года мы выложили протокол заседания W3C, на котором Mozilla, Opera и Microsoft обсуждали внедрение префиксов -webkit в не-Webkit-браузеры. Причина: часть разработчиков использует только префиксы webkit — их сайты хорошо выглядят в некоторых браузерах, но рушатся в других, даже если они предлагают такой же уровень поддержки CSS3. Проблема особенно распространена в мобильных браузерах и многие разработчики не в состоянии выйти за рамки своих высокотехничных устройств Apple или Android.

Опера анонсировала поддержку 14 CSS3-свойств Webkit в своём Mobile Emulator. Реализация в конечном итоге дойдёт до всех выпусков настольных и мобильных браузеров. Если вы считаете, что «Opera это малая доля рынка», подумайте еще раз: это наиболее используемый мобильный браузер в мире.

Возможно, я чрезмерно драматизирую, но на ум приходит известная фраза Чарлтона Хестона: «Они действительно это сделали. Вы маньяки. Вы взорвали это!».

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

1. Производители браузеров внедряют экспериментальные свойства CSS3 с помощью собственных префиксов, например: -webkit-transform, -moz-transform, -ms-transform, -o-transform.
2. Разработчики могут использовать современные технологии без нарушения кроссбраузерности. Чтобы свойства работали везде, они могут перечисляться с префиксами или без них.
3. После того как свойство входит в рекомендацию W3C, все производители браузеров могут обеспечить стабильное свойство без префикса, например, transform.
4. При необходимости разработчики могут удалить свойства с префиксами из своих стилей. Однако это не является строго обязательным, если свойство без префикса определяется последним в правилах CSS.

Разработчики с любовью и ненавистью относятся к вендорным префиксам CSS, которые позволяют быть на острие прогресса за счёт многословных объявлений:

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

Это хорошо работает в теории, но вот что происходит в реальности.

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

В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.

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

Я помню как делал первый свой словесный пузырь без картинок много лет назад. Для этого потребовалась многострочная функция JavaScript для введения элементов в DOM и ужасный CSS, который выглядел довольно страшно и не так хорошо работал в IE5.

CSS3 начинает менять нашу жизнь к лучшему. Теперь можно создать симпатичный словесный пузырь, который работает во всех браузерах, использует единственный элемент HTML, несколько строк кода CSS3, без картинок и без всякого JavaScript.