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

Перевод «Another CSS image replacement technique»

Редактировать статью на Гитхабе

Николас Галлахер

Перевод Максим Усачёв

Редактура Вадим Макеев

Недавно в проект 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, включая предложенный Скотом Келумом способ избежать проблем с производительностью на 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, и приложите, если нужно, тестовый пример.

Ещё