Застосування псевдокласів :before :after в CSS
Опубликованно 28.09.2018 02:24
Використання псевдоелемент в CSS значно розширює можливості для інтелектуального вибору конкретних елементів на веб-сторінці і для внесення таких видів змін, які в іншому разі були б неможливі. Застосування їх поєднань дозволяє внести досить складні зміни в код сторінки. З їх допомогою можна вирішувати безліч проблем, для яких зазвичай потрібні або JavaScript, або доступ до PHP-коду сайту. Псевдоелементи для стилізації в CSS
Елементи :before :after у CSS відносяться до так званих псевдоелемент і використовуються для стилізації зазначених частин контейнера. Наприклад, його можна використовувати для завдання стилю першої букви в рядку або вставки вмісту до або після вмісту якогось певного контейнера. Вони використовуються для додавання чого-небудь до або після вмісту елемента. Псевдоелементи :before :after мають безліч застосувань, але вони служать єдиної мети.
Їх використовують для оформлення існуючих HTML-елементів з додатковим текстом або зображенням вмісту. Псевдоелементи :after та "content" в CSS, який є його властивістю, нерозривно пов'язані, і перший не працює окремо від другого. Зміст цієї властивості можна залишити порожнім, якщо додати до нього порожні лапки: content: "". Таким чином, ще один варіант використання цього псевдоэлемента — зробити його контейнером для якого-то вмісту. Якщо вміст і властивість видаляється повністю, :after не буде працювати. Практичне застосування :before :after в CSS
Напевно, саме популярне використання даних псевдоелемент — додавання іконок. У цьому випадку вони будуть розташовуватися до або після якогось тексту, наприклад, назви компанії. Ще один варіант застосування — стилізація заголовків. Але псевдоелементи можна використовувати не тільки для створення різноманітних прикрас на сторінці. Розглянемо дуже поширений приклад: червону зірочку, яка знаходиться в полі форми, обов'язкове для заповнення. Один з простих способів це зробити — розміщувати її кожен раз безпосередньо в HTML-розмітки. Але заради цього доведеться писати дуже багато розмітки для однієї червоної зірочки. Крім того, що якщо ми хочемо змінити всі ці зірочки в точки або в слова або перефарбувати в інший колір? В цьому випадку доведеться зробити одне і те ж зміна в кожному з дублікатів.
Приклад роботи з формою
Кілька більш елегантний спосіб, щоб отримати той же результат — використовувати псевдоэлемент :after у CSS і об'єднати його з розміткою HTML. Для цього потрібно задати в коді елемента поля якийсь клас, а потім додати до нього псевдоэлемент і потрібну властивість:
.some-field:after {content: "*";color: red;}
Тепер в потрібних місцях буде стояти червона зірочка. Крім того, правила для елементів з класом .some-field і псевдоэлементом :after у CSS будуть централізовані в одному місці, так що можна буде легко змінити зовнішній вигляд сторінки, в тому числі колір, розмір, вміст на всьому сайті відразу. З цього прикладу стає зрозуміло, що подібна логіка застосовується до інших повторюваних текстовим прикрасам. Наприклад, використовуючи псевдоэлемент :before разом з деякими шрифтами, можна змінювати значок неупорядкованого списку на інший.
Вставка вмісту без зміни файлів шаблонів для сайту WordPress
Для сайтів WordPress також можна використовувати псевдоелементи. Наприклад, якщо потрібно додати повідомлення про доставку в заголовку на кожній сторінці, але встановлена тема не дозволяє щось додати, крім рядка пошуку і кошика. Це набагато простіше, ніж переробляти шаблон. Додавши псевдоэлемент :after потрібну напис у властивість "content", можна розташувати її на зручному місці, де вона буде виглядати логічно. Головним висновком з цього є те, що використання :before :after настільки широко, що дозволяє по-різному позиціонувати елементи, змушуючи їх знаходитися праворуч або ліворуч від контейнера, використовувати поля і відступи.
Непрозорий текст на напівпрозорому тлі
В CSS дивно складно зробити елемент з повністю непрозорим над текстом напівпрозорим зображенням. Можна пробувати виставляти непрозорість, але при цьому і сам текст розмивається. Найпростіший варіант зробити це правильно використовувати псевдоэлемент :before. З його допомогою основний шар стає повнорозмірним, абсолютно зорієнтований і з напівпрозорим зображенням під головним елементом, в якому міститься текст. Цей шар зображення може мати будь-яку непрозорість, яка необхідна, але при цьому не буде впливати на основний шар. Недоліки використання псевдокласів
Використання сполучень декількох таких елементів є потужним інструментом у руках розробника, але вважається, що його краще усього застосовувати в якості останнього засобу, коли PHP-код сайту з якихось причин не доступний, або його неможливо виправити. Відбувається так тому, що з допомогою інших засобів все може бути зроблено набагато простіше. Наприклад, можна просто додати прості класи CSS, де це необхідно. Варто зазначити, що помилка "connection failed after 4 retries CSS" не відноситься до каскадної таблиці стилів. Вона зустрічається при проблемі з сервером для гри Counter-Strike: Source. Те ж саме відноситься до "CSS v34 connection failed after 4 retries". Тут під "CSS" мається на увазі назва гри.
Конкретні недоліки таких псевдоелемент як :after у CSS включають: Крихкість стильового оформлення. Можливість швидко зіпсувати код при неправильному використанні. Непрозорість. Велика кількість коду з використанням псевдоелемент може бути незрозумілим іншому верстальщику, який почне працювати з сайтом. Псевдоелементи не повністю підтримуються. Браузери стають все краще і досконаліше, але все ж набагато безпечніше користуватися простими класами HTML.
В основному це стосується проектів, де PHP-код знаходиться поза досяжності, і де щось повинно швидко працювати. Автор: Марія Штернберг 18 Вересня, 2018
Категория: Техника