Замена изображения CSS

Замена изображений CSS — это метод веб-дизайна, в котором используются каскадные таблицы стилей для замены текста на веб-странице изображением, содержащим этот текст. Он предназначен для того, чтобы страница была доступна пользователям программ чтения с экрана , текстовых веб-браузеров или других браузеров, в которых поддержка изображений или таблиц стилей либо отключена, либо отсутствует, при этом позволяя изображению различаться в разных стилях. Также названа заменой изображения Фарнера в честь Тодда Фарнера, одного из тех, кому первоначально приписывалась идея замены изображения в 2003 году. ^{[ 1 ]}

С появлением поддержки веб-шрифтов CSS во всех основных веб-браузерах замена изображений CSS теперь мало используется.

Мотивация

Типичный метод вставки изображения в HTML- документ — через <img> ярлык. Однако этот метод имеет свои недостатки с точки зрения доступности и гибкости:

В то время как alt Атрибут предназначен для предоставления текстового представления содержимого изображения, это исключает использование HTML-разметки в текстовом представлении и вызывает проблемы. ^{[ нужен пример ]} с некоторыми поисковыми роботами.
Используя <img> тег для отображения текста является презентационным; Многие веб-дизайнеры утверждают, что элементы представления следует отделять от содержимого HTML, помещая их в таблицу стилей CSS.
Изображения, на которые ссылаются с помощью <img> тег невозможно легко изменить с помощью CSS, что вызывает проблемы с альтернативными таблицами стилей.

Замена изображения Фарнера была разработана, чтобы исправить эти проблемы.

Реализации

Исходная реализация замены изображения ^{[ 1 ]} описанный Дугласом Боуменом, использовал заголовок, внутри которого находился <span> элемент, содержащий текст заголовка:

<h3 id="firHeader"><span>Sample Headline</span></h3>

Затем с помощью таблиц стилей заголовку был присвоен фон, содержащий желаемое изображение, и <span> скрыт, установив его display CSS-свойство для none:

#firHeader
{
  width: 300px;
  height: 50px;
  background: #fff url(firHeader.gif) top left no-repeat;
}

#firHeader span
{
  display: none;
}

Однако вскоре было обнаружено, что этот метод приводит к тому, что некоторые программы чтения с экрана полностью пропускают заголовок, поскольку они не читают текст, содержащий display собственность none. Более поздний метод Фарка , разработанный Майком Рандлом в 2003 году, вместо этого использовал text-indent свойство, позволяющее выталкивать текст из области изображения, решая эту проблему:

#firHeader
{
  width: 300px;
  height: 50px;
  text-indent: -5000px; /* ← Phark */
}

Однако у метода Фарка были свои проблемы; в визуальных браузерах, где CSS был включен, но изображения отключены, ничего не отображалось.

Также в 2003 году Дэйва Ши одноименный метод решает обе ранее упомянутые проблемы за счет дополнительных затрат. <span>:

<h3 id="header"><span></span>Revised Image Replacement</h3>

Абсолютно позиционируя пустой <span> текст над текстовым элементом фактически скрыт. Если изображение не загружается, текст за ним все равно отображается. По этой причине изображения с прозрачностью нельзя использовать с методом Ши.

#header
{
  width: 329px;
  height: 25px;
  position: relative;
}

#header span
{
  background: url(firHeader.gif) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}

С тех пор было разработано более дюжины различных методов с различной степенью совместимости и сложности. ^{[ 2 ]}

Ссылки

^ Перейти обратно: ^а ^б Боуман, Дуглас (7 марта 2003 г.). «Использование фонового изображения для замены текста» . Стопдизайн . Проверено 5 апреля 2011 г.
^ Мосли, Мари (3 ноября 2015 г.). «Музей замены изображений» . CSS-трюки . Проверено 30 марта 2019 г.

Внешние ссылки

Пересмотренная замена изображения - обзор различных методов FIR Дэйва Ши.
Ultimate Image replace — комплексная методика замены изображений Джесси Шоберга.

[stopdesign-1] Перейти обратно: ^а ^б Боуман, Дуглас (7 марта 2003 г.). «Использование фонового изображения для замены текста» . Стопдизайн . Проверено 5 апреля 2011 г.

[2] Мосли, Мари (3 ноября 2015 г.). «Музей замены изображений» . CSS-трюки . Проверено 30 марта 2019 г.

[ 1 ]

[ 2 ]