<span>/<div> сокращенное значение для css - это законно?

Если я создаю HTML-элемент:

sc {
    font-variant: small-caps;
}

и примените его следующим образом:

I want to display <sc>this text</sc> in small-caps.

работает как и ожидалось (за исключением IE, конечно.) Он становится сокращенным для

.sc {
    font-variant: small-caps;
}

I want to display <span class='sc'>this text</span> in small-caps.

Является ли это предполагаемым/документированным поведением? Есть ли имя для него?

Ответы

Ответ 1

XHTML (и XML, на котором он основан) предназначен для добавления пользовательских элементов аналогичным образом, но вместо этого использует пользовательское пространство имен XML с вашими именами элементов. Затем вы можете использовать CSS для непосредственного стиля этих элементов или использовать XSLT для преобразования их в реальные HTML-элементы. Вот почему (или, по крайней мере, одна причина, почему) совместимые со стандартами браузеры нормально обрабатывают иначе нестандартные элементы в DOM.

В HTML 4 и старше он всегда недействителен, чтобы посыпать ваши собственные нестандартные элементы (не уверен в расширяемости HTML5).

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

Ответ 2

Он также работает в IE, если вы добавите document.createElement('sc');, и это "законно". Это то, что делает HTML5 shiv.

В отличие от большинства функций javascript, это должно быть вызвано до фактическим использованием элемента, а не после загрузки страницы/DOM.

Ответ 3

Пока он будет работать, он недействителен, если вы не используете XHTML (настоящий XHTML, с правой Content-Type и все.. не вредоносный XHTML) и пространство имен:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>&lt;span&gt; shorthand for css - is this legit?</title>
  </head>
  <body>

    <h1>Custom tags in XHTML</h1>

    I want to display
    <sc xmlns="http://le-dorfier.example.com">
      this text
    </sc>
    in small-caps.

  </body>
</html>

Для получения дополнительной информации просмотрите Namespace Crash Course в документах MDN.

Ответ 4

Нераспознанные элементы обрабатываются и будут работать во всех современных браузерах. Однако он должен отображаться как недопустимая разметка.

В более старых версиях, т.е. вы не можете стилизовать непризнанные элементы - вы можете просто сделать document.createElement('sc') в JavaScript.

Ответ 5

Гипотетически, если вы не указали тип документа HTML и обрабатываете документ как XML-документ, вы можете прикрепить к нему таблицу стилей, чтобы определить визуальное поведение любого тега, который вы хотите.

Подробнее см. http://csszengarden.com/.

По существу, у вас может быть пустой XML-документ с прикрепленной к нему таблицей стилей CSS, которая будет выкладываться, как вы сочтете нужным.