Сьогодні ми розглянемо доволі цікавий псевдоелемент під назвою ::selection, який дозволяє застосовувати стилі до виділеного тексту на сторінці HTML. Досить не часто використовується цей псевдоелемент і це може викликати до нього певну увагу з боку веб розробників.
Сучасний світ веб-дизайну знаходиться у постійній еволюції, яка передбачає постійне прагнення до створення стильних та естетичних веб-сторінок, щоб залучити увагу користувачів та забезпечити їм найвищій рівень зручності. У цьому контексті псевдоелемент ::selection є одним зі засобів, який може бути використаний для досягнення цих цілей.
Чимало користувачів інтернету, які відвідують той чи інший сайт практикують операції з виділення тексту для подальшого копіювання і можна з впевненістю сказати, що така маніпуляція з текстом на сайті дуже поширена. Також при демонстрації певної ділянки тексту сайту на екрані за допомогою проектора може виникати потреба забезпечити певну інтерактивність для привертання та концентрації уваги аудиторії.
Ось тут нам на допомогу і приходить Псевдоелемент ::selection.
Псевдоелемент ::selection.
Псевдоелемент ::selection визначає стилізацію виділеного тексту на веб-сторінках.
Коли користувач виділяє текст на сторінці, застосовуються властивості, які були задані для псевдоелемента ::selection. Наприклад, колір фону, колір тексту, шрифт, розмір шрифту та інші.
І хоча псевдоелемент ::selection був вилучений зі специфікації CSS Selectors Level 4 та не підтримується всіма браузерами, він все ще залишається корисним інструментом для веб-розробників.
Хочу звернути Вашу увагу на те, що псевдоелемент ::selection, який дозволяє стилізувати виділений текст на веб-сторінках, був доданий до чернеток стандарту CSS Selectors Level 3. Однак, під час фази Candidate Recommendation, його було прибрано через недостатньо опрацьовану поведінку (зокрема, з вкладеними елементами) та недосягнену узгодженість (засновану на обговоренні у списку розсилки W3C Style).Проте, варто зазначити, що псевдоелемент ::selection повернувся у Pseudo-Elements Level 4. Таким чином, розробники зможуть знову використовувати його для поліпшення візуальної привабливості та функціональності веб-сторінок.Давайте розглянемо на конкретному прикладі, як використовуючи псевдоелемент ::selection можна створити естетичний та інтерактивний дизайн на сторінці HTML.
Подробиці про синтаксис псевдоелемента ::selection.
Його синтаксис складається з двох знаків двокрапки та слова "selection".
Наприклад, щоб задати колір фону для виділеного тексту, можна використати такий синтаксис:
::selection {
background-color: blue;
}Допустимі властивості.
Лише обмежений перелік властивостей CSS можна використовувати з селектором ::selection. Зокрема, до таких властивостей належать колір тексту, фоновий колір, оформлення тексту, тінь тексту, а також -webkit-text-stroke-color (колір контуру тексту), -webkit-text-fill-color ( колір заповнення тексту) та -webkit-text-stroke-width (товщина контуру тексту). Зазначена множина властивостей буде чудово працювати з селектором ::selection.
Доступні властивості, які можна застосувати до псевдоелемента ::selection, включають фон, колір тексту, шрифт, розмір шрифту, межі та інші. Важливо зазначити, що не всі властивості підтримуються всіма браузерами. Тому перед застосуванням будь-яких стилів до псевдоелемента ::selection, необхідно перевірити їх підтримку на різних браузерах.
Властивості, які можуть ігноруватися.
Фонове значення, вказане за допомогою background-image, буде ігноруватись.
Попередження: Зауважимо, що, зокрема, властивість background-image ігнорується.
При використанні властивості -webkit-text-fill-color зі значенням кольору, властивість color ігнорується, тому що -webkit-text-fill-color встановлює колір заповнення тексту, який перекриває будь-який колір, попередньо встановлений через властивість color.
Зверніть увагу, що властивість -webkit-text-fill-color підтримується тільки в деяких браузерах, таких як Google Chrome, Edge, Firefox, Safari, Opera, але не є частиною специфікації CSS. Тому рекомендується використовувати стандартну властивість color, яка підтримується всіма браузерами.
Нижче на малюнку наведено приклад застосування кольорів та інших властивостей до виділеного тексту на веб-сторінці: |
| Приклад застосування кольорів та інших властивостей до виділеного тексту на веб-сторінці. |
Особливості використання на мобільних пристроях.
На мобільних пристроях використання псевдоелемента ::selection може мати деякі особливості, про які важливо знати, щоб забезпечити правильну роботу на сторінці.
Одна з особливостей полягає в тому, що виділений текст може бути зміщений відносно курсору, оскільки мобільні пристрої мають можливість змінювати положення курсору на екрані. Також на деяких пристроях можуть бути проблеми зі збереженням стилів виділеного тексту після копіювання.
Для забезпечення оптимальної роботи псевдоелемента ::selection на мобільних пристроях рекомендується використовувати невеликі розміри текстових блоків та шрифтів, щоб забезпечити читабельність виділеного тексту. Також варто перевірити, чи правильно відображається виділений текст на різних пристроях та в різних браузерах.
У підсумку.
Ми розглянули псевдоелемент ::selection, який дозволяє застосовувати стилі до виділеного тексту на сторінці HTML. Ми дізналися, що синтаксис цього псевдоелемента досить простий, а доступні властивості дозволяють змінювати кольори, фон, межі, тіні виділеного тексту.
Висновок очевидний - псевдоелемент ::selection - може бути використаний у якості потужного інструменту для покращення дизайну сторінок та інтерактивної взаємодії з користувачами під час демонстрації певних ділянок текстової інформації сторінки. Його можна з успіхом застосовувати при зйомці навчальних відео з екрану комп'ютера, створюючи унікальний ефект для виділеног тексту.
Якщо ви зацікавлені в детальнішій інформації про псевдоелемент ::selection, я рекомендуєю переглянути наступні посилання:
https://www.w3schools.com/cssref/sel_selection.php
https://drafts.csswg.org/css-pseudo-4/#selectordef-selection
З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.
0 Коментарів Підписатися на цей блог