Властивість content • про css

властивість content

За допомогою CSS на сторінку можна додати елементи, неіснуючі в розмітці сторінки. Це робиться за допомогою псевдоелементів: before та: after. але не менш важливу роль в цьому відіграє властивість content.

Воно визначає вміст псевдоелементів. І навіть більше, псевдоелементи не відобразяться, якщо у них не задано властивість content. Досить такого рядка:

Сніговики в прикладі додані за допомогою content для псевдоелементів, самі сніговики - символи юникода:

Можливі значення властивості:

normal. none - вміст псевдоелемента не відображається. Корисно, якщо потрібно приховати раніше заданий псевдоелемент.

- текстовий контент. Можна вставляти простий текст і символи юникода, як в прикладі вище. Для практичних цілей дуже знадобляться різні варіанти стрілок. Символи юникода можна знайти, наприклад, тут або тут.

Правда, тут з'являється проблема зайвих запитів до сервера.

  • спрайт, іконки з якого вставляються фоном в саму посилання або в псевдоелемент. Друге краще, тому що тоді псевдоелемент обмежить область видимості спрайту, таким чином іконки в спрайт можуть бути розташовані не тільки вертикально, але й рядами.
    Кількість запитів до сервера зменшується до одного, але при цьому картинка кешируєтся у користувача;
  • закодувати окремі картинки в base-64 і вставляти через content: url ();
  • закодувати весь спрайт в base-64 і використовувати його як фон для псевдоелемента.

У двох останніх варіантах взагалі не буде запитів до сервера, але картинки не кешуються і, крім того, закодоване зображення може важити більше вихідного. Спосіб має сенс використовувати тільки для невеликих зображень.

Закодувати картинку в base64 можна за допомогою онлайн-сервісів, наприклад websemantics.co.uk/online_tools/image_to_data_uri_convertor/. Отриманий код вставляється в url () з інформацією про формат вмісту, наприклад data: image / png; base64.

Ось так буде виглядати код для іконки Instagram:

Подібним же чином можна вставляти SVG.

Це дуже зручно, але поки що працює не у всіх браузерах. Наприклад, Chrome таке зрозуміє і відобразить, а Firefox - немає.

- лічильник. За допомогою цього значення можна пронумерувати не тільки списки, але і будь-які елементи на сторінці. Наприклад, розділи статті.

counter-reset задає ім'я лічильника. counter-increment збільшує значення заданого лічильника. content: counter (ім'я лічильника) виводить значення лічильника в якості вмісту псевдоелемента.

attr () - це значення виводить вміст заданого атрибуту. Зручно використовувати для виведення атрибутів href у версії для друку і для різних цікавих ефектів.

open-quote. close-quote - значення для виведення відкривають і закривають лапок. Символи, які будуть використані, визначаються властивістю quotes. Якщо воно не задано, будуть використані значення за замовчуванням, які залежать від браузера.

no-open-quote. no-close-quote - значення відключає відображення лапок, але при цьому продовжує враховуватися рівень їх вкладеності.

У специфікації є ще багато цікавого на кшталт псевдоелемента, що представляє обгортку для всього елемента або множинні псевдоелементи, але в даний момент це ніде не реалізовано.

Схожі статті