Зміст - CSS-хитрощі

Anonim

contentВластивість в CSS використовується в поєднанні з псевдо-елементами ::beforeі ::after. Він використовується для буквального вставлення вмісту. Існує чотири типи значень.

Рядок

.name::before ( content: "Name: "; )

Тоді такий елемент:

 Chris

Візуалізується так:

Name: Chris

Це також може бути порожній рядок, що часто зустрічається в таких речах, як clearfix.

Лічильник

div::before ( content: counter(my-counter); )

Більше інформації про це.

Зображення

div::before ( content: url(image.jpg.webp); )

Це буквально зображення на сторінці, яке могло б бути. Це також може бути градієнт. Зверніть увагу, що ви не можете змінити розміри зображення, якщо вставити його таким чином. Ви також можете вставити зображення, використовуючи порожній рядок для вмісту, роблячи його display: blockякимось чином, розміром і використовуючи background-image. Таким чином ви могли б змінити його розмір background-size.

Атрибут

Ви можете використовувати значення (рядки, у будь-якому випадку), які беруться безпосередньо з атрибутів у HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

attr()Функція не має «типів» тільки ще, так що ви не можете передати значення як 20px(за виключенням окремих виразів), але коли - небудь!

Альтернативний текст

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

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Можливо, ви можете використати це як ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Більше інформації

Вміст, вставлений таким чином, насправді не є в DOM, тому він має деякі обмеження. Наприклад, ви не можете приєднати подію безпосередньо (лише) до псевдоелементів. Також не узгоджується, чи читається текст, вставлений таким чином, засобами зчитування з екрана (зазвичай це сьогодні), чи ви можете його вибрати (зазвичай це не сьогодні).

  • Класні речі, які можуть робити елементи псевдо
  • Презентація про псевдоелементи
  • Документи MDN

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
4 2 9 12 3.1

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Для Opera, url()підтримується лише у версії 7+.