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

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

Мотивация [ править ]

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

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

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

Реализации [ править ]

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

< h3  id = "firHeader" > < span > Образец заголовка </ span > </ h3 >

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

# firHeader {  width :  300 пикселей ;  высота :  50 пикселей ;  фон :  #fff  url ( firHeader.gif )  вверху  слева  без повтора ; }# firHeader  span {  display :  none ; }

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

# firHeader {  width :  300 пикселей ;  высота :  50 пикселей ;  отступ текста :  -5000 пикселей ;  / * ← Phark * / }

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

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

< h3  id = "header" > < span > </ span > Замена исправленного изображения </ h3 >

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

# header {  width :  329 px ;  высота :  25 пикселей ;  положение :  относительное ; }# диапазон заголовка  { фон : url ( firHeader.gif ) no-repeat ; позиция : абсолютная ; ширина : 100 % ; высота : 100 % ; }         

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

Ссылки [ править ]

Внешние ссылки [ править ]

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