Замена изображения 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]