Вот что я не знал о «content»

Вот что я не знал о «content»

От создателя: несколько недель вспять Стефан опубликовал на собственном сайте пост под заглавием Свойство CSS «content» воспринимает другой текст, что поразило меня. Он показал, что свойство content воспринимает 2 значения, а не лишь 1, фактическое содержимое и другой текст.

Обычной пример:

CSS

1234.new-item::before {  /* “Highlighted item” и элемент содержимого */  content: “icon” / “Highlighted item”;}

Я не знал этого, и мне было любопытно, есть ли еще вещи, которых я не знал о свойстве content.

Как я использую атрибут content

До того, как я начал свое исследование, я употреблял это свойство сначала для 3 вещей.

Добавление элемента в иной элемент с внедрением псевдо-элементов

Если я желаю сделать в CSS ординарную фигуру, которая не является прямоугольником либо кругом, я использую :after и ::before, чтоб отдать для себя больше способностей для стилизации.

1<div></div>

CSS

123456789101112131415161718192021222324252627div {  width: 70px;  height: 50px;  margin-top: 15px;    border: 5px solid #123456;  border-radius: 5px;   position: relative;} div::before {  content: “”;    position: absolute;  left: 0; right: 0; top: -16px;    width: 20px; height: 20px;  margin: auto;   border: solid #123456;  border-width: 5px 5px 0 0;  border-radius: 5px;   transform: rotate(-45deg);  background: #fff;}

Поглядите Пример 1 на CodePen.

Для отображения на дисплее псевдо-элементам нужен атрибут content.

Выявление URL-адресов в таблицах стилей для печати

Печатные ссылки никчемны, если вы не понимаете, куда они ведут. Я использую комбинацию content и функции attr() в таблицах стилей печати для отображения URL-адресов рядом со связанным текстом.

READ
Создание в Svelte приложения списка дел

CSS

123456@media print {  a[href^=”http://”]:after,  a[href^=”https://”]:after {    content: ” (” attr(href) “)”;  }}

Пользовательские счетчики

Временами мне необходимо создавать пользовательские счетчики в перечнях. Композиция content и параметров счетчиков обычно совладевает с сиим весьма отлично.

12345<ol>  <li>Element 001</li>  <li>Element 002</li>  <li>Element 003</li></ol>

CSS

123456789101112ol {  list-style-type: none;  counter-reset: mylist;} li {  counter-increment: mylist;} li::before {  content: “icon ” counter(mylist) “: “}

Пример 2 на CodePen.

Поглядите на то, что я не знал о list-style-type, чтоб выяснить о остальных способностях для стилизации частей перечня. Сейчас поглядим, что еще content в состоянии сделать для нас. Вот что я не так давно вызнал.

content воспринимает изображения и градиенты

Я знал, что content воспринимает функции counter и attr, но мне никогда не приходило в голову, что оно может также принимать остальные функции. Каждый раз, когда мне необходимо изображение в псевдо-элементе, я бы употреблял background-image, хотя и content подступает для этого.

CSS

123div::before {  content: url(‘pin.png’);}

Пример 3 на CodePen.

Если это работает с изображениями, то обязано работать и с градиентами, правильно? Но нет. Похоже, что Chrome — единственный браузер, который показывает псевдо-элементы с градиентными значениями content.

CSS

1234567div::before {  content: linear-gradient(blue, red);  height: 50px;  width: 50px;  display: block;  border: 1px solid red;}

Пример 4 на CodePen.

Вы сможете найти другой текст для значений content (… в Chrome)

Какой смысл употреблять content, когда background-image поддерживается лучше? Причина, по которой Стефан написал собственный пост, заключается в том, что content поддерживает другой текст.

CSS

123div::before {  content: url(‘pin.png’) / “You are here.”}

Пример 5 на CodePen.

К огорчению, это работает лишь в Chrome (протестировано на macOS 10.15.4, Chrome 81 с VoiceOver). Firefox и Safari даже не показывают псевдо-элемент, поэтому что значение неприемлимо. К огорчению.

Даже если б это работало в большинстве браузеров, я бы не рекомендовал добавлять текстовый контент в файл CSS. Остальные, работающие над проектом, возможно, не ждут, что текст исходит из файла CSS, на веб-сайтах с несколькими языками могут появиться препядствия, автоматический перевод может не сработать, а содержимое будет доступно лишь в случае удачной загрузки CSS.

READ
Flexbox и абсолютное позиционирование

Вы сможете сочетать текст и изображения

Я также не знал, что вы сможете употреблять в качестве значения функцию url(), я также не знал, что вы сможете сочетать ее с текстом.

CSS

123div::before {  content: url(‘pin.png’) “You are here.”}

Пример 6 на CodePen.

Вы сможете поменять лишь content обыденного элемента на image

Свойство content создано для использования с псевдо-элементами. Вы не сможете употреблять его для подмены строчки в элементе иной строчкой. Это не сработает:

CSS

123div {  content: “You are here”;}

Но вы сможете употреблять его для подмены строчки изображением. Строчка все еще находится в DOM, но программки чтения с экрана объявляют название файла. (Вы сможете создать это, но я бы не рекомендовал.)

1<div>You are here!</div>

CSS

123div {  content: url(‘pin.png’);}

Пример 7 на CodePen.

С кавычками и без кавычек

Отлично, сейчас вправду крутая вещь. Допустим, у нас есть цитата, вложенная в другую цитату.

123456<blockquote>  My mama always said,    <q>    Life was like a box of chocolates. You never know what you’re gonna get  </q>.</blockquote>

Вы видите в приведенном выше примере, что blockquote не имеет кавычек, q имеет двойные кавычки.

Если мы при помощи псевдо-элемента и характеристики content добавим открывающие и закрывающие кавычки к blockquote, то blockquote будет отображаться с двойными кавычками, а q автоматом с одинарными.

CSS

1234567blockquote::before {  content: open-quote} blockquote::after {  content: close-quote}

Непревзойденно! Чтоб окончить все это, мы можем даже получить комбинацию blockquote без кавычек и q с одинарными кавычками.

CSS

1234567blockquote::before {  content: no-open-quote;} blockquote::after {  content: no-close-quote;}

Главные слова no-open-quote и no-close-quote не вставляют ничего, но наращивают глубину цитирования на один.

Вложенные цитаты на различных языках

Просто поэтому, что мне было интересно, вот некие варианты второго примера на остальных языках. Французский:

READ
Стилизация нумерованных списков с помощью CSS-счетчиков

123456<blockquote lang=”fr”>   Maman disait toujours,    <q>     la vie, c’est comme une boîte de chocolats: on ne sait jamais sur quoi on va tomber    </q>.</blockquote>

Российский:

123456<blockquote lang=”ru”>  Моя мать постоянно гласила,    <q>      Жизнь как коробка шоколадных конфет: никогда не знаешь, какая внутренность для тебя попадётся    </q>.</blockquote>

Германский:

123456<blockquote lang=”de”>  Mama hat immer gesagt,   <q>      Das Leben ist wie eine Schachtel Pralinen. Man weiß nie, was man kriegt   </q>.</blockquote>

Испанский:

123456<blockquote lang=”es”>  Mi mamá siempre decía,    <q>      La vida es como una caja de bombones, nunca sabes lo que vas a conseguir    </q>.</blockquote>

Извините, если я облажался с любым из переводов.

Есть counter() и есть counters()

Я вправду не уверен, знал ли я о том, что есть не лишь функция counter(), да и функция counters(). Разница в том, что counters() включает вложенные пользовательские счетчики.

123456789101112<ol>  <li>    Element 001    <ol>      <li>Element 001</li>      <li>Element 002</li>      <li>Element 003</li>    </ol>  </li>  <li>Element 002</li>  <li>Element 003</li></ol>

CSS

123456789101112ol {  list-style-type: none;  counter-reset: mylist;} li {  counter-increment: mylist;} li::before {  content: “icon ” counters(mylist, “.”) “: “}

Пример 8 на CodePen.

Вау, это было многоречиво. Я не ждал настолько не мало напишу и так многому научусь. Я надеюсь, что вы узнали столько же, сколько и я. Спасибо за чтение и спасибо Стефану за вдохновение для этого поста.

Создатель: Manuel Matuzovic

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий