HTML5Boilerplate и класс замены изображения text-indent -999em - PullRequest
7 голосов
/ 29 августа 2011

Я использовал HTML5Boilerplate для большинства своих проектов, так как это отличная среда, но я и другой разработчик обсуждали класс замены изображений и использование text-indent: -999em. *

Он прислал мне две ссылки:

http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

http://www.youtube.com/watch?v=fBLvn_WkDJ4

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

Спасибо!

1 Ответ

4 голосов
/ 29 августа 2011

Обе эти ссылки относятся конкретно к логотипам, где наиболее семантическим путем является добавление логотипа в качестве тега изображения с атрибутом alt:

<img src="/path/to/logo.png" alt="Foo bar baz! The best way to fizz buzz" />

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

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

Если возможно, используйте встроенное изображение с атрибутом alt, так как это наиболее семантический способ его отображения. Суть в том, что вы можете иметь или не иметь прямой доступ к разметке, если вы используете CMS, поэтому во многих случаях выходом является использование замены изображений CSS или JS.

Если вы должны использовать CSS, не беспокойтесь о text-indent: -9999px;. Законная замена не приведет вас в черный список от Google, просто не пытайтесь играть в систему, пытаясь скрыть контент от пользователей, видимых только для Google.

...