Свойство content

浏览器兼容性

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.


Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1.5 Notes IE Full support 9 Opera Full support 7 Safari Full support 4 WebView Android Full support ≤37 Chrome Android Full support 18 Firefox Android Full support 4 Notes Opera Android Full support 10.1 Safari iOS Full support 5.1 Samsung Internet Android Full support 1.0
Animation and transition support Chrome Full support 26 Edge Full support 12 Firefox Full support 4 IE No support No Opera Full support 15 Safari No support No WebView Android Full support ≤37 Chrome Android Full support 26 Firefox Android Full support 4 Opera Android Full support 14 Safari iOS No support No Samsung Internet Android Full support 1.5

All CSS Pseudo Classes

Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with «it»
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no «required» attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a «readonly» attribute specified
:read-write input:read-write Selects <input> elements with no «readonly» attribute
:required input:required Selects <input> elements with a «required» attribute specified
:root root Selects the document’s root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links

Exemplos

Adicionando aspas

Um exemplo simples do uso de pseudo-elementos pseudo-elementos é a exibição de aspas. Aqui usamos para inserir caracteres de aspas.

Conteúdo HTML

<q>Algumas citações</q>, ele disse, <q>são melhor do que nenhuma.</q>

Conteúdo CSS

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

Exemplo decorativo

Podemos estilizar textos e imagens na propriedade praticamente da forma que desejarmos.

Conteúdo HTML

<span class="ribbon">Observe onde a caixa laranja está.</span>

Conteúdo CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Olhe para esta caixa laranja.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Lista To-do

Neste exemplo vamos criar uma simples lista de tarefas, usando pseudo-elementos. Este método pode frequentemente ser utilizado para dar pequenos toques à UI (User Interface) e melhorar a experiência do usuário.

Conteúdo HTML

<ul>
  <li>Comprar Leite</li>
  <li>Levar o cachorro para passear</li>
  <li>Exercitar-se</li>
  <li>Escrever codigo</li>
  <li>Tocar musica</li>
  <li>Relaxar</li>
</ul>

Conteúdo CSS

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

Conteúdo JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Aqui está rodando o código acima. Perceba que nenhum ícone é utilizado e o check-mark é o que foi estilizado no CSS.

Примеры

Добавление кавычек

Этот простой пример использования псевдоэлементов  позволяет добавлять кавычки. Здесь используется как псевдоэлемент , так и .

HTML

<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Пример оформления

Можно стилизовать текст или изображения в свойстве практически любым способом.

HTML

<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Список дел

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

HTML

<ul>
  <li>Купить молока</li>
  <li>Сходить на прогулку с собакой</li>
  <li>Тренироваться</li>
  <li>Написать код</li>
  <li>Слушать музыку</li>
  <li>Отдыхать</li>
</ul>

CSS

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом , стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.

:before и :after CSS

:before и :after позволяют добавить содержание с помощью стиля content до и после любого тега. При этом занимаемое тегом поле растягивается.

Около элемента

Около <span>элемента</span>

Около элемента

<style type="text/css">
  span:before {content: ":before";} 
  span:after {content: ":after";} 
</style>

Около <span>элемента</span>

position: absolute; Около элемента

<style type="text/css">
  span {position: relative; margin-left: 80px;}
  span:before, span:after {position: absolute;} 
  span:before {content: ":before"; left: -80px;} 
  span:after {content: ":after"; right: -60px;}  /* при отрицательных значениях, применять свойство left-right к ближней стороне */ 
</style>

Около <span>элемента</span>

content может принимать следующие значения:

«текст» <style type=»text/css»>   b:after { content: » тут»; } </style> <b>Я</b> Я
attr(параметр) <style type=»text/css»>   b:after { content: attr(title); } </style> <b title=» тут»>Я</b> Я
url() <style type=»text/css»>   b:before { content: url(http://www.blogger.com/img/icon_28_followers.png); } </style> <b> и Я</b> и Я
counter выводит значение счётчика и тип маркера — дополнительная информация
open-quote no-open-quote close-quote no-close-quote <style type=»text/css»>   b { quotes: «\ab» «\bb»; } /* определяем */   b:before { content: open-quote; }   b:hover:before { content: no-open-quote; } /* отменяет открывающуюся кавычку */   b:after { content: close-quote; }   b:hover:after { content: no-close-quote; } /* отменяет закрывающуюся кавычку */ </style> <b>навести</b> навести
none <style type=»text/css»>   b:after { content: » тут»; }   b:hover:after { content: none; } </style> <b>навести</b> навести

В качестве значения content могут выступать специальные символы, но в HEX кодировке, то есть вместо « должно быть \ab. Можно воспользоваться конвертером ниже, только вместо % указывайте \ ().

Сделаем разрыв строки (аналог тега br) средствами CSS (пример использования).

<style type="text/css">
a.comment-link1:after {
  content: '\A';
  white-space: pre;}
</style>

<a href="#" class="comment-link1">после содержимого тега a следует разрыв строки</a>

Довольно часто в качестве значения content совсем не используют символы, оставляя кавычки пустыми.

<style type=»text/css»> .b {   position: relative;   padding: 5px;   border-radius: 5px;   border: 1px solid #666;   background-color: #f7f7f7; } .b:before, .b:after {   content: «»;   position: absolute;   left: 15px;   border-style: solid;   border-width: 20px 7px; } .b:before {   border-color: transparent transparent #666 transparent;   top: -40px; } .b:after {   border-color: transparent transparent #f7f7f7 transparent;   top: -38px; } </style> <p class=»b»>сказал</p> position: absoluteдругой пример

<style type="text/css">
a.comment-link1 {
  position: relative; 
  padding: 2px 10px;
  border-radius: 5px;
  background-color: #666;
  text-decoration: none;
  color: #fff;}

a.comment-link1:after {
  content: "";
  position: absolute;
  left: 7px; 
  border-style: solid;
  border-width: 5px; 
  border-color:  #666 transparent transparent #666;
  bottom: -5px;}

a.comment-link1:hover {
  background-color: #ff3200;
}

a.comment-link1:hover:after {
  border-color: #ff3200 transparent transparent #ff3200;
}
</style>

<a href="#" class="comment-link1">4</a>

автор

Для встроенных элементов при использовании CSS спрайтов, для after и before будем задавать display: inline-block;.

Интересная реакция

#raz:after {
  content: "red";
  background: red;
}
#raz:active:after {
  content: "green";
  background: green;
}

Примеры

Простое использование

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

HTML

<p class="boring-text">Вот простой скучный текст.</p>
<p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p>
<p class="exciting-text">Помогать MDN легко и весело.
Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры.</p>

CSS

.exciting-text::after {
  content: "<- теперь это *просто* потрясающе!"; 
  color: green;
}

.boring-text::after {
   content: "<- СКУЧНО!";
   color: red;
}

Пример оформления

Можно стилизовать текст или изображения в свойстве  практически любым способом.

HTML

<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>

CSS

.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Подсказки

Следующий пример показывает использование псевдоэлемента  в сочетании с CSS-выражением  и   для создания подсказки на чистом CSS.

HTML

<p>Здесь находится живой пример вышеприведённого кода.<br />
  У нас есть некоторый <span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с несколькими
  <span data-descr="маленькие всплывающие окошки, которые снова исчезают">подсказками</span>.<br />
  Не стесняйтесь, наводите мышку чтобы <span data-descr="не понимать буквально">взглянуть</span>.
</p>

CSS

span {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

예제

인용 표시 추가

One simple example of using pseudo-elements is to provide quotation marks. Here we use both and to insert quotation characters.

HTML

<q>Some quotes,</q> he said, <q>are better than none.</q>
q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

장식 예제

We can style text or images in the property almost any way we want.

HTML

<span class="ribbon">Notice where the orange box is.</span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

할 일 목록


In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

HTML

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done'); 
  }
}, false);

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the that has been styled in CSS. Go ahead and get some stuff done.

특수문자

As this is CSS; not HTML, you can not use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicodeescape sequence, consistingof a backslash followed by the hexadecimal unicode value.

HTML

<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

Характеристики вставляемого контента

Как упоминалось раньше, контент, который вставляется невидим на html странице. Он видим только в CSS.

Также, вставляемый контент, по умолчанию будет строчным элементом. Чтобы сделать его блочным достаточно указать display:block;, указать ширину и высоту блока. Это очень удобно при создании вкладок, кнопок и т.д.

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

Вставляем не только текстовый контент

В свойстве content, не обязательно должен быть текст, также может быть картинка. Вы можете прописать URL картинки, как это делается в background.

p:before {
   content: url(image.jpg);
}

Важно помнить, что нельзя URL брать в кавычки, это будет значить что контент является текстом

Расширенный синтаксис

Вы можете оставить свойство content пустым, и создать блок.

#example:before {
   content: "";
   display: block;
   width: 100px;
   height: 100px;
}

Если вы удалите свойство content, псевдоэлемент работать не будет. По крайней мере, это совойство должно оставаться пустым.

Вы должны знать, что некоторые используют эти элементы в виде ::before и ::after. Разницы никакой нет, браузеры поддерживают такой синтаксис также.

Еще один момент использования. Вы можете применить псевдоэлемент к каждому из html элементов.

:before {
   content: "#";
}

Но это используется в личных целях. Этот код вставляет # перед контентом в каждом DOM элементе. Даже если вы удалите все теги на странице, вы сможете видеть два символа ## на странице. Это используется, сам не знаю для чего, но такое есть.

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

CSS псевдоэлемент first-letter

Псевдоэлемент предназначен для задания стилей первому символу в тексте блочного элемента, но только в том случае если перед этим символом нет другого контента (изображения, inline таблицы).

К этому псевдоэлементу могут применяться только ограниченный набор CSS свойств. К ним относятся свойства, имеющие отношения к цвету, фону, границам, свойствам шрифта, полям padding и margin.

CSS3 синтаксис :

selector::first-letter {
  /* стили для оформления первого символа */
}

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

Примеры использования псевдоэлемента .

/* пример 1 */
.text::first-letter {   
  font-size: 1.5em;
  background-color: #000;
  color: #fff;
  margin-right: 0.2em;
  padding: 0 0.2em 0.1em 0.2em;
  border-radius: 0.1em;
}

/* пример 2 (с использование float) */
.text::first-letter {
  float: left;      
  font-size: 1.5em;
  background-color: #000;
  color: #fff;
  margin: 0.3em 0.2em 0 0;
  padding: 0 0.2em 0.1em 0.2em;
  border-radius: 0.1em;
}

/* пример 3 (оформление первого символа с помощью рамки) */
.text::first-letter {
  font-size: 1.5em;
  border: 1px dashed #999;
  margin-right: 0.2em;
  padding: 0 0.2em 0.1em 0.2em;
  border-radius: 0.1em;
}

Особенности псевдоэлементов before и after

  1. 1.Псевдоэлементы должны указываться сразу после селектора через двойное двоеточие без пробела, как показано в примерах выше. Однако допускается и использование одинарного двоеточия.

    PHP

    .block-class:before

    1 .block-classbefore
  2. 2.Псевдоэлемет является строчным элементом, поэтому если в CSS свойстве content ничего не указано то его ширина по умолчанию будет равна нулю. Так же для строчных элементов не применяется вертикальные отступы margin. Чтобы они начали работать и элемент стал на всю ширину ему нужно дописать CSS свойство display:block;
  3. 3.Вы можете использовать только один псевдоэлемент на селектор. То есть нельзя использовать сразу 2 псевдоэлемента для одного блока. Запись .block-class::before::after или #content::first-line::after будет неправильной.
  4. 4.Кроме псевдоэлементов ::before и ::after существуют и другие, такие как ::selection, ::first-line, ::first-letter, о которых я расскажу в одной из следующих статей.

Надеюсь что помогла вам разобраться с before и after если у вас возникнут вопросы или вам есть что сказать – оставляйте комментарии!

Спасибо что посетили мой сайт!

С уважением Юлия Гусарь

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

A collection of possible methods to set images from CSS

CSS2’s pseudo-element or the syntax from CSS3 along with the property:

First W3C Recommendation: Cascading Style Sheets, level 2 CSS2 Specification 12 May 1998Latest W3C Recommendation: Selectors Level 3 W3C Recommendation 29 September 2011


This method appends content just after an element’s document tree content.

Note: some browsers experimentally render the property directly over some element selectors disregarding even the latest W3C recommendation that defines:

CSS2 syntax (forward-compatible):

CSS3 Selector:

Default rendering: Original Size (does not depend on explicit size declaration)

but even at the time of this writing, behaviour with a tag is still not defined and although it can be used in a hacked and non standards compliant way, usage with is not recommended!

Great candidate method, see conclusions…

CSS1

First W3C Recommendation: Cascading Style Sheets, level 1 17 Dec 1996

This property has been around from the beginning of CSS and nevertheless it deserve a glorious mention.

Default rendering: Original Size (cannot be scaled, only positioned)

However,

CSS3’s property improved on it by allowing multiple scaling options:

Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014

But even with this property, it depends on container size.

Still a good candidate method, see conclusions…

CSS2’s property along with :

First W3C Recommendation: Cascading Style Sheets, level 2 CSS2 Specification 12 May 1998

property sets the image that will be used as the list item marker (bullet)

— This value causes an element (e.g., in HTML) to generate a principal block box and a marker box.

Shorthand CSS: ()

Default rendering: Original Size (does not depend on explicit size declaration)

Restrictions:

This method is also not suitable for the tag as the conversion cannot be made between element types, and here’s the limited, non compliant hack that doesn’t work on Chrome.

Good candidate method, see conclusions…

CSS3’s property recommendation:


Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014

A background-type method that relies on specifying sizes in a rather peculiar manner (not defined for this use case) and fallback border properties so far (eg. ):

This example illustrates the image being composed only as a bottom-right corner decoration:

Still it can’t change an ‘s tag (but here’s a hack), instead we can decorate it:

Good candidate method to be considered after standards propagate.

CSS3’s notation working draft is worth a mention also:

We’ll use the rendered contents of one of the two hidden images to change the image background in based on the ID Selector via CSS:

Notes: It’s experimental and only works with the prefix in Firefox and only over or properties, also needs sizes specified.

element() Live Demo

Conclusions

  1. Any semantic content or structural information goes in HTML.
  2. Styling and presentational information goes in CSS.
  3. For SEO purposes, don’t hide meaningful images in CSS.
  4. Background graphics are usually disabled when printing.
  5. Custom tags could be used and styled from CSS, but primitive versions of Internet Explorer do not understand](IE not styling HTML5 tags (with shiv)) without Javascript or CSS guidance.
  6. SPA’s (Single Page Applications), by design, usually incorporate images in the background

Having said that, let’s explore HTML tags fit for image display:

The element

Perfect usecase of the with method.

The element, can be empty, allows and it’s even permitted to omit the end tag.

Limitations: hard to style ( or might help)

The element

The element is valid with no content, but is recommended to contain a .

Default rendering: the element is right aligned, with both left and right padding!

FIGURE Live Demo

The element

The attribute is required and can have a valid as a value!

Note: a trick to make use of the tag from CSS would be to set a custom valid MimeType followed by no data (value has no data after the required comma )

Default rendering: 300 x 150px, but size can be specified either in HTML or CSS.

OBJECT Live Demo

The tag

Needs a SVG and has a element for raster images

SVG Live Demo

The element .

The element with

Limitations:

which Chrome follows and renders a 4x4px empty square when no text

Partial solution, set :

INPUT type=image Live Demo


С этим читают