Історія заміни зображень в CSS

19

Від автора: історія заміни зображень в 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 піксель. Основне завдання даного зображення показувати альтернативний текст, якщо основне не завантажилося. Розмітка:

Історія заміни зображень в CSS
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

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 за використання методів заміни зображень. Я вніс зміни в статтю, дякую пильне око читачів за те, що показали мені цей коментар.