Браузер так розуміє CSS: це система стилів відображення тегів сторінки. За час свого розвитку правила CSS змінилися, розширилися, наповнилися цікавими і практичними деталями. Правило CSS content – особливе, воно являє собою частину змісту «транслюється на сторінки, які визначив розробник.
Правило трансльованого уточнюючого контенту пов’язано з псевдо-елементами :before :after. Зміст цього правила «не потрапляє в дерево DOM. Це універсально-ювелірний інструмент уточнення змісту сторінки еквівалентно по всім сторінкам, використовують конкретний стиль CSS.
По суті, будь-яке правило CSS – це варіант відображення інформації: колір, розмір, положення, тощо. CSS content – це доповнення тегів HTML-текстом, символами або ресурсами.
Синтаксис правила і застосування
За загальним правилом кожен елемент веб-сторінки містить своє візуальне зміст. Це не текст, графіка або що-небудь інше, тобто не обов’язково саме це. Кожен тег HTML відображається на сторінці. Бачимо чи не бачимо він – це інше питання.
Прозорість тега – це теж складова позиція в дизайні, але не складова сторінки у вікні браузера. Не всі теги видно завжди, а деяким судилося бути видимими при певних обставинах або тільки в конкретний час.
Суть: тег веб-сторінки – це сенс (зміст) і спосіб його відображення у вікні браузера. Зміст і його відображення – не обов’язково одне і те ж, але обов’язково: зміст сторінки браузер використовує для формування дерева об’єктів (DOM), яке відображає як приписано правилами CSS.
У даному прикладі показано, як просто доповнити смисловий елемент «номер телефону» текстом«тел.:” перед символом “»” – після. При цьому застосування стилю scCallWay до будь-якого тегу на будь-якій сторінці призведе до еквівалентного результату.
Досить змінити правило CSS content – і HTML-теги за все сторінок зміняться адекватно. У цьому сенсі розробник отримує унікальний інструмент змінювати одне і те ж смислове зміст відразу по всіх місцях застосування.
Деталі застосування правила уточнення вмісту
Насамперед, це звичайне правило і звичайна логіка. Content type в CSS може бути будь-яким: текст, спеціальний символ або посилання на веб-ресурс. Зміст правила не потрапляє в DOM і діє, як належить іншим правилам, CSS – пропонує стиль оформлення тега HTML.
Не має значення які використовувати лапки. Однаково ефективні подвійні (“) і одинарні (‘), але критично код, який використовувати для позначення спеціальних символів: тільки шістнадцятковий і тільки після зворотного слеша.
Розробник може використовувати ідею доповнення контенту максимально широко. Приклад іграшки з динамічною зміною карт, оформленої в системі стилів garry’s mod CSS content – приклад «глобального» застосування.
Тут не просто деталі одного тега, а спектр безлічі деталей з різних тегам, який динамічно можна змінити.
Кодування – питання сумісності
Не слід забувати: браузер і його JavaScript – ідеальне середовище та інструмент управління при проектуванні HTML-сторінок. Таблиця каскадних стилів (CSS) – це вже давно не просто система правил оформлення тегів сторінки.
Ідеально використовувати кодування UTF-8, але часто доводиться орієнтуватися на windows-1251. На практиці, не настільки суттєво, який варіант обрати, але важливо забезпечити однакове кодування файлів (*.php, *.js, *.css та ін), що використовуються на сторінках сайту.
Єдина система кодування файлів важлива не тільки в контексті правила CSS content і кирилиці. Єдність і стабільність коду сторінки, скриптів і правил оформлення тегів робить надійним, комфортним і безпечним використання та розвиток веб-ресурсу. Це вірна ознака професійної розробки.
Динаміка сенсу на HTML-сторінці
Стилі CSS не мають відношення до дерева об’єктів HTML-сторінки. Але це тільки щодо справедливе твердження. Не всяке правило CSS можна «витягнути» для перевірки та використання в коді JavaScript, але завжди можна встановити нове правило або нове значення.
Динамічні сайти (автори) не надто апелюють до традиційного використання зовнішніх файлів CSS. Розробники воліють створювати потрібні правила оформлення по мірі необхідності.
Правило CSS content не обмежує уяву розробника. Тут може бути не тільки текст, картинка або спеціальний символ, але і посилання на URL. Можна послатися на інший стиль, можна змінити прозорість, застосувати трансформацію або накладення тегів один на одного.
Теги, як і стилі, у сучасному розумінні інтернет-програмування – системи умовностей, які можуть бути застосовані різними програмістами абсолютно непередбачуваним чином.
