Від автора: історія заміни зображень в CSS досить насичена і різноманітна. Якщо ви зацікавлені даною тематикою, то в мережі можна знайти безліч сучасних технік по заміні зображень. Важливо відзначити той факт, що в недалекому майбутньому Google буде карати власників сайтів за використання окремих технік, якщо вже не робить цього. Так що до цього питання слід підходити з обережністю. Однак ви ніколи не зможете передбачити, коли ваша CMS або проект змусять вас скористатися даними інструментарієм! У цій статті ми зібрали всі відомі методики по заміні зображень, які вам можуть ще стати в нагоді, поки інтернет не пішов далеко вперед.
Від’ємне значення властивості text-indent – Метод Фарко
Найпоширеніший метод, який так чи інакше використовували майже всі веб-розробники. Ідея полягає в тому, щоб зрушити текст далеко за межі вікна браузера за допомогою від’ємного значення властивості text-indent:
.replace-indent {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
text-indent: -9999px;
}
У CodePen демо показано, як буде виглядати заголовок із захованим текстом за допомогою властивості text-indent:
У даному методі текст залишається доступним для скрін рідерів, але при вирівнювання тексту по правому краю дане рішення не працює. З-за значення властивості text-indent браузеру доводиться перетворювати занадто великий блок під заголовок, що викликає купу проблем на дуже старих пристроях.
Метод Скотта Келлума
Замість великого від’ємного значення властивості text-indent можна задати значення 100%. У такому разі браузеру не потрібно буде створювати величезний блок, що підвищить продуктивність. Даний метод не вимагає додаткової розмітки. Необхідно прописати в CSS:
.replace-scott {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Властивість overflow: hidden приховує текст, а whitespace: nowrap забороняє перехід тексту на наступний рядок. У даному методі текст залишається доступним для скрін рідерів. Демо:
Властивість margin – Техніка Раду Дарваса
Ця техніка також виштовхує текст за межі видимої частини вікна браузера, але тут використовується властивість margin. Необхідно вказати дуже велике негативне значення лівого відступу margin і відповідно велике значення ширини заголовка.
.replace-margin {
width: 2264px;
height: 106px;
background: url(“content-3/images/logo.png”) top right no-repeat;
margin: 0 0 0 -2000px;
}
Як і в попередніх прикладах, в якості фонового малюнка до заголовка використовується логотип сайту SitePoint. Нижче представлено демо даної техніки – спершу без margin, потім з них:
Якщо прокрутити вікно вправо, ви побачите фон першого заголовка. В реальності ж вам не потрібно буде турбуватися про смузі прокрутки, так як великий негативний margin компенсується шириною заголовка (як у другому заголовку). Даний метод не найкращий, оскільки він змушує браузер малювати дуже великі блоки.
Властивість padding – Метод Лэнгриджа
В цей раз ми будемо виштовхувати текст за межі блоку заголовка за допомогою властивості padding-top. Властивості необхідно вказати значення, що дорівнює висоті логотипу. Одного властивості буде недостатньо, нам доведеться сховати текст за допомогою властивості overflow: hidden.
.replace-padding {
width: 264px;
height: 0;
background: url(“content-3/images/logo.png”);
padding: 106px 0 0 0;
overflow: hidden;
}
Порівняно з двома попередніми прикладами даний метод дуже хороший з точки зору продуктивності. У цьому методі досягається той же рівень доступності тексту, що і в попередніх двох. Нижче продемонстровано демо – у першому заголовку відсутня padding фон, а в другому є:
Маленьке значення властивості font-size – Метод Ліндсі
Ще один спосіб приховати текст це зробити його дуже маленьким і пофарбувати його в колір логотипу. Даний метод ніяк не впливає на доступність тексту, але з іншого боку, можуть виникнути проблеми з SEO через дуже дрібного тексту і маскування кольором.
.replace-font {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
font-size: 1px;
color: white;
}
Демо даного методу – перше зображення без властивості font-size, друга з даними властивістю:
Якщо у вашого логотипу не плоскі кольору, то можуть виникнути проблеми. В такому випадку можна встановити прозорий колір transparent.
Властивість display – Заміна зображення Фарнеру
На відміну від інших методів тут вам потрібна додаткова розмітка. Текст необхідно обернути за допомогою тега span і задати йому значення display: none. Власне, розмітка:
SitePoint
CSS:
.replace-display {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
}
.replace-display span{
display: none;
}
Демо з тегом span і властивість display: none:
Дуже простий метод, але дуже сильно страждає доступність. Через властивості display: none елементи ігноруються скрін рідерами. З властивістю visibility: hidden та ж проблема, що воно теж не підійде. Можна встановити opacity: 0. Так елемент буде приховано, але залишиться видимим для скрін рідерів.
Властивість overflow – Метод Леона Дуайера
Ми вже використовували властивість overflow для того, щоб ховати текст в парі з властивість padding. В цей раз ми будемо ховати текст, використовуючи тільки це властивість. Як і в попередньому прикладі, тут нам потрібно обернути текст в тег span. CSS код:
.replace-overflow {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
}
.replace-overflow span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
Висота і ширини span’а задаються в нуль, що змушує текст всередині виїхати за межі блоку. Потім текст ховається за допомогою властивості overflow: hidden. На CodePen продемонстрована дана техніка:
Текст залишається доступним для скрін рідерів, проблем з доступністю не виникне.
Абсолютне позиціонування – Техніка Левіна
Тут нам теж потрібно тег span, але тепер ми не обертаємо в нього текст, а використовуємо його для позиціонування зображення. Розмітка методу:
SitePoint
CSS
.replace-position {
width: 264px;
height: 106px;
position: relative;
}
.replace-position span {
background: url(“content-3/images/logo.png”);
width: 100%;
height: 100%;
position: absolute;
}
Демо методу по заміні зображень за допомогою абсолютного позиціонування:
Зверніть увагу, що ширина і висота задані в 100%, щоб повністю закривати наш заголовок. Єдина проблема в тому, що зображення повинні бути повністю непрозорими. Якщо у вас заголовок зі ступенем прозорості користувач буде бачити текст через зображення.
Підроблене зображення – Метод Раду Дарваса
Для роботи методу нам потрібно крім тега span ще і підроблене зображення – прозоре GIF зображення розміром 1х1 піксель. Основне завдання даного зображення показувати альтернативний текст, якщо основне не завантажилося. Розмітка:
SitePoint
CSS
.replace-image-span {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
}
.replace-image-span span{
display: none;
}
Демо нижче роз’яснить принцип роботи методу:
Текст прихований, але скрін рідери можуть читати тег alt. Проблем з доступністю не виникає. Єдина проблема в тому, що тег img не семантичний. Якщо не завантажиться зображення і CSS-стилі, то перед вами буде вже два тексти.
Зображення – Метод Фарко і инлайновое зображення
На цей раз для заміни зображення ми візьмемо справжнє зображення. Зображення заданий атрибут alt, який буде відображатися, якщо зображення вимкнено. Розмітка:
CSS-код, що здійснює заміну:
.replace-image-link {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
text-indent: -9999px;
}
Демо нижче показує принцип роботи техніки:
Ви не бачите зображення з тега img, а властивості background. Крім наявних проблем з-за великого відступу тексту, про яких ми говорили раніше, ця техніка не підходить для SEO. Один плюс – зображення залишиться видимим навіть, якщо відключити CSS. Але тоді виникає питання, а чому просто не вставити зображення…
Властивість clip-path
Властивість clip-path приховує все, що виходить за межі заданого вам дороги. Цю властивість можна використовувати для приховування нашого тексту. Текст сховається візуально, але залишиться бачимо для скрін рідерів. Розмітка:
SitePoint
.replace-clip-path {
width: 264px;
height: 106px;
background: url(“content-3/images/logo.png”);
}
.replace-clip-path span{
clip-path: polygon(0px 0px 0px 0px 0px 0px 0px 0px);
}
Щоб зрозуміти, за яким принципом обрізається текст, ви можете змінювати значення властивості clip-path:
У даного методу є один недолік – дуже погана підтримка. На сайті SitePoint нещодавно публікувалася стаття по властивості clip-path, де дана властивість було детально розібрано. Коли підтримка даного властивості виросте, цей метод виявиться непотрібним через недосконалість самої техніки заміни зображень.
Псевдоелементи – Заміна зображень по Нешу
Для переміщення тексту у сторону в даному методі використовуються псевдоелементи. Розмітка:
SitePoint
.replace-pseudo {
width: 264px;
height: 106px;
overflow: hidden;
}
.replace-pseudo:before{
content: url(“content-3/images/logo.png”);
}
Демо з технікою в дії:
Псевдоэлемент зсуває текст. Текст, виходячи за межі блоку, ховається за допомогою властивості overflow: hidden. Одна проблема – техніка працює лише в IE8 і вище.
Висновок
Всі описані техніки маю як плюси, так і мінуси. За фактом, в найближчому майбутньому всі ці методики негативно вплинуть на SEO, і якщо є можливість повністю від них відмовитися, то краще відмовтеся! У наступній статті на сайті SitePoint ми розповімо про те, куди рухається індустрія сьогодні, а також обговоримо найкращі практики. Якщо ви згадали які-небудь інші техніки або вам є, що додати, пишіть про це в коментарях.
Оновлення від PatCat (30/06/2016): У статті стверджується, що зображення в заголовках сайтів негативно впливають на SEO та доступність, що зовсім не так. Насправді, вірний зворотний теза, якщо враховувати штрафні санкції Google за використання методів заміни зображень. Я вніс зміни в статтю, дякую пильне око читачів за те, що показали мені цей коментар.
