Техника замены изображений через -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.

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

Статья взята с сайта PHP Junior с разрешения автора.

В своей предыдущей статье «Font Squirrel @font-face Generator vs Google WebFonts» я сделал обзор двух самых популярных сервисов для встраивания шрифтов в вёрстку, а также обещал в следующей статьей раскрыть секреты его использования.