html-live

Автор — Николас Галлахер

Недавно в проект 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 или задавать всему дополнительному HTMLdisplay:inline, чтобы обойти ограничения отступа текста. В новом методе таких проблем нет.
• В результате этих доработок сократилось количество стилей.

Недостатки

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

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

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

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

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

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