Before css - оригінально, зручно, практично
Псевдоелементи і псевдокласи CSS: before, after, hover, active і т.д. - Ефективна можливість якісно поліпшити і спростити виконання сайту, не включаючи до код javascript-обробники на очевидні, які потребують складної реакції дизайнерські рішення, події елементів, діалоги і дії відвідувача.
Псевдоелементи зручні, багатофункціональні, мають значущими і різноманітними властивостями для виконання простих і складних авторських задумів: як оригінально привернути увагу, непомітно уточнити дії, вивести потрібну підказку в правильному місці.
Великі перспективи відкриваються, коли у вмісті псевдоелемента вказано url (). Дійсно, цей варіант відкриває нові горизонти, як в плані завантаження чого-небудь на сторінку сайту, так і в можливій активації чогось де-небудь
Відмітна особливість псевдоелементів
Псевдоелементи (:: before CSS, :: after) відрізняються від елементів, селектор і псевдокласів тим, що з самого початку не існують в дереві документа. Можливо, на практиці це не дуже важливо, але, якщо розглядати питання розміщення контенту на сторінках сайту, то довіряти властивості content щось значуще для пошуковика не має сенсу.
Псевдоелемент :: before CSS дозволяє додати зміст перед елементом, а :: after - після. Зміст може бути різним, від простого тексту до складного форматування з точки зору властивостей CSS, але не тегів HTML. Псевдоелемент може бути абсолютно позиціонується всередині того елемента, до якого прикріплений, тому сенс before і after відносний і мобільний. Можна не тільки вказати позицію, а й розміри, кольори, фон, шрифти і використовувати інші властивості CSS.
Як і псевдокласи CSS, before і after передує символом ":", Але за стандартом CSS3 рекомендується "::". Протестувати конкретне використання на сторінці ніколи не буде зайвим: деякі браузери або їх версії можуть просто не помітити той чи інший псевдоелемент.
Загальні правила використання
Помістивши, наприклад, div елемент з описом class = `scElement` і змістом "Element" на сторінку, вказавши в таблиці стилів CSS-опис:
.scElement {
POSITION ...-
z-index ...-
...
},
Відео: Валянки. Зручно, практично ... і незвично
можна застосувати до нього псевдоклас ": hover" і псевдоелемент ":: before" CSS:
.scElement: hover :: before {content: `prefix`- color ...- background-color ...-}.
Тоді при наведенні курсору мишки перед словом `Element` з`являтиметься слово `prefix`, в якому зміниться колір букв і фону.
Варіанти змісту псевдоелемента
Якщо не вказувати властивості в псевдоелементи, вони залишаться такими ж, як у основного елемента - scElement. Можна вказати url, і тоді властивість content: url ( `/ scBox / rm-v / sc-rights.jpg`) при наведенні курсору покаже картинку на елементі. У разі content: " 03B1" з`явиться математичний символ "alfa", але використовувати спеціальні символи: " -", "<-", "«-", "»-" та інші не слід - вони відобразяться як є.
Допускається багато варіантів вказівки змісту псевдоелементів: звичайний "текст", Url (), послідовність шістнадцятирічних символів, позначення: open-quote / close-quote або no-open-quote / no-close-quote і ін. Оскільки допускається вказівка абсолютної позиції змісту за допомогою властивостей стилів, то, застосовуючи before, CSS дозволить розмістити псевдоелемент в будь-якому місці елемента, до якого він прив`язаний.
Можна комбінувати одночасне використання before і after. Тому, розміщуючи за допомогою CSS before content символи, можна отримати різні ефекти, а комбінуючи різні псевдокласи і псевдоелементи, здивувати відвідувача, не витративши при цьому жодного байта javascript-коду.
особливості псевдоелементів
Для їх позначення прийнято символ ":", Як і для позначення псевдокласів, але в CSS3 відміну псевдоелементів прийнято позначати "::". Браузери, які розуміють це, сприймають обидва позначення. Прогалини в запису не допускаються, рядок, в якій записано псевдоклас і (або тільки) псевдоелемент, записується разом:
scElement: hover :: before {content: `prefix`- ...}
scElement: active: after {content: `suffix`- ...}
Важливо не забувати: CSS before працює поза контенту сайту. Стилі не мають відношення до змісту сторінки. Псевдоелементи - не виняток. Вони не присутні в дереві DOM і небажано їх використовувати в значущих ділянках сайту - в контент вони не потраплять.
Використання ":" і "::" підтримується мобільними платформами і сучасними браузерами, але перевірити роботу на застарілих версіях часто не буває зайвим.
Відео: ЯК ВІДРІЗНИТИ ПІДРОБКУ? || UGG AUSTRALIA
Зміст псевдоелемента не включається в контент сайту. Його не побачать пошуковики. Як використовувати цю обставину - залежить від конкретної ситуації, але можливості використовувати CSS before, як і after, незалежно чи в комплексі, цікаво, коли content є url (). Пряме використання змісту псевдоелемента, як посилання на сайт, дозволить завантажити з нього файл, наприклад, картинку.
Можливість зміни файлів стилів на сайті (файли таблиць каскадних стилів - не виняток) не заважає формувати і використовувати псевдоелементи так, як зручно в конкретний момент часу, в потрібному місці алгоритму, в залежності від дій користувача.
