Ещё одна CSS-техника замены текста изображением

Николас Галлахер 10 сентября 2012

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

Ниже приведен CSS недавно обновлённого вспомогательного класса (для замены текста изображением) из HTML5 Boilerplate. Этот код также попал во фреймворк Compass.

	.ir {
	    font: 0/0 a;
	
    text-shadow: none;
	    color: transparent;
	
}

Что делает каждая из деклараций?

  • font:0/0 a — сокращенная запись свойства, обнуляет размер шрифта и высоту строки. Значение a здесь выступает в роли очень короткого font-family (идея, взята из реализации этого метода в БЭМ). Валидатор CSS ругается, что использование 0/0 в сокращенной форме свойства font не соответствует стандарту, но все браузеры принимают такое объявление, и это, по-видимому, баг в самом валидаторе. Использование font:0px/0 a позволяет пройти валидацию, но все равно — в коде декларация отображается как font:0/0 a, который валидатор пропускает.
  • text-shadow:none — гарантированно снимает любую унаследованную тень текста. Это предотвращает появление любых остатков тени от текста поверх фона.
  • color:transparent — декларация для браузеров, которые не уменьшают текст полностью (до состояния невидимости). Safari 4 — пример (чрезвычайно редкий) такого браузера. Также эта декларация может быть нужна мобильным браузерам. IE6-8 не распознаёт такое значение свойства color, но, к счастью, IE7-8 и без него не показывают никаких следов от текста. IE6 отображает бледный след.

Во вспомогательном классе в HTML5 Boilerplate мы также обнуляем всё, что касается свойств border и background-color, которые могут быть заданы у элементов. Это упрощает использование вспомогательных классов для элементов типа <button> или ссылках, у которых по дизайну может быть задан фон или рамка.

Преимущества перед методами с text-indent

Новая техника позволяет избежать различных проблем, присущих методам, основанным на использовании text-indent, включая предложенный Скотом Келумом cпособ избежать проблем с производительностью на iPad 1, связанных с большими отрицательными отступами.

  • Работает в IE6-7 для элементов с inline-block. Техники, основанные на использовании text-indent изначально «сломаны» для inline-block элементах, в этом можно убедиться на этом примере.
  • Не приводит к созданию контейнеров, выходящих за пределы экрана. Методы с text-indent приводят к отрисовке блока (иногда выходящего за экран) для любого текста, у которого есть положительный или отрицательный отступ. Иногда это приводит к проблемам с производительностью, но методы, основанные на размере шрифта, обходят эти проблемы.
  • Не нужно указывать особенный text-align и обрезать контейнер свойством overflow, так как текст сжат и не занимает места.
  • Не нужно скрывать br или задавать всему дополнительному HTML display:inline, чтобы обойти ограничения отступа текста. В новом методе таких проблем нет.
  • В результате этих доработок сократилось количество стилей.

Недостатки

Совершенного метода заметы изображений не существует.

  • Оставляет бледный след от текста в IE6.
  • С этим подходом невозможно использовать единицы em для полей элементов, которые используют эту технику, потому что размер шрифта равен нулю.
  • В Windows-Eyes есть баг, мешающий чтению текста, спрятанного этим методом. Ни в одной другой протестированной программе для чтения с экрана никаких проблем не было. Спасибо @jkiss за предоставленные детальные отчеты и @wilto за подтверждение работоспособности этого метода в JAWS 12 для IE6-8 и для Firefox 4-6.
  • Как и многие другие методы замены изображений, он не работает, когда CSS загружен, а изображения — нет.
  • Текст может оказаться не скрытым, если посетитель сайта использует пользовательские стили, в которых явно объявляется важность font-size для элементов, к которым вы применили стили этого метода замены изображений.

Стоит отметить, что техника замены изображений NIR свободна от этих недостатков, но не работает в IE6/7.

Комментарии в заключение

Я использую эту технику без значительных проблем уже около года, с тех пор как Джонатан Нил и я использовали её в эксперименте с clearfix. Фреймворк БЭМ также использует её для иконок. Основная идея была предложена еще в 2003 году, но браузерные проблемых тех дней не давали возможности для широкого использования.

Если вы встретитесь с любыми проблемами этой техники, пожалуйста, занесите их в багтрекер на гитхабе HTML5 Boilerplate, и приложите, если нужно, тестовый пример.

Перевод оригинальной записи «Another CSS image replacement technique» Николаса Галлахера (Nicolas Gallagher). Переведено и опубликовано с разрешения автора.

Перевод выполнил Максим Усачёв.

Теги: ,

Комментарии +

  1. Владимир Старков 22 октября 2012 в 12:56

    В репозитории «HTML5 Boilerplate» файл стилей main.css по прежнему содержит старый код с 'text-indent'

  2. Вадим Макеев 22 октября 2012 в 13:01

    Владимир, по-видимому, они вернули изменения. Осталось только понять, по какой причине.

  3. snork 22 октября 2012 в 15:04

    В логе находится такое.
    Еще более свежий способ с псевдо-элементом.

  4. Сергей Шошин 22 октября 2012 в 22:47

    "Ниже приведен CSS _недавно обновлённого_ вспомогательного класса ..."
    Совсем уж "недавно" — necolas authored 8 months ago.

    Мне лично больше по душе метод Скотта Келлума (Scott Kellum): http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

  5. tibalt 23 октября 2012 в 6:28

    еще бывают проблемы с text-indent в ячейках таблиц, которые не выпускают содержимое за свои границы

  6. Сергей Смольников 25 октября 2012 в 12:47

    Не знал о проблеме с text-indent на iPad, спасибо.

  7. rassadin 10 января 2013 в 22:17

    Ужасно плохой метод. Абсолютно убивает возможность использовать em единицы для задания размерностей box и background изображений.
    Тем кому не нравится метод text-intent, используйте padding-top за границы высоты.

Перейти к началу