Стиль атрибута
(виртуального элемента)
Сегодня все атрибуты html-элемента служебные
(прикладная информация находится между его открывающим и закрывающим тегами).
В то же время данные в базах данных хранятся записями, которые
выводятся
как xml-элементы, атрибуты которых содержат прикладную информацию.
Традиционный путь визуализации таких тегов
<style>
record::before { content: attr(name) attr(surname) }
</style>
<body>
<record name="a" surname="b">
<record name="c" surname="d">
</body>
плох тем, что не позволяет определить стили для отображения таких атрибутов.
Я предлагаю указывать атрибуты в css-файле, предварив их имя знаком "§",
что изымало бы атрибут из тега и превращало бы его во вложенный тег.
Такие теги будем называть виртуальными.
Таким образом конструкция
<style>
§name {color: red }
§surname {color: gray }
</style>
<body>
<record name="a" surname="b">
<record name="c" surname="d">
</body>
будет означать то же самое, что и конструкция
<style>
name {color: red }
surname {color: gray }
</style>
<body>
<record>
<name> a</name>
<surname>b</surname>
</record>
<record>
<name> c</name>
<surname>d</surname>
</record>
</body>
Итак мы видим, что механизм, основанный на свойстве content,
существенно уже, чем механизм виртуальных тегов.
Я не хочу умалять значение свойства content:
оно необходимо для смены уже существующего содержимого html-элемента
или для того, чтобы задать содержимое псевдо-элемента.
Но когда мы пытаемся сводить все случаи к этому свойству,
оно выступает как ограничитель,
и таким образом данные подразделяются в зависимости от их формы на две группы:
если данные находятся между открывающим и закрывающим тегами,
то они полноценные (могут иметь стиль);
если данные находятся в атрибуте,
то они неполноценные.
Другой пример: нижеследующая конструкция
<style>
tab { display: table }
a { display: table-row }
§a1,§a2,§a3 { display: table-cell }
</style>
<body>
<tab>
<a a1="v11" a2="v12" a3="v13">
<a a1="v21" a2="v22" a3="v23">
<a a1="v31" a2="v32" a3="v33">
</tab>
</body>
будет понята как
<style>
tab { display: table }
a { display: table-row }
a1,a2,a3 { display: table-cell }
</style>
<body>
<tab>
<a>
<a1>v11</a1>
<a2>v12</a1>
<a3>v13</a1>
</a>
<a>
<a1>v21</a1>
<a2>v22</a1>
<a3>v23</a1>
</a>
<a>
<a1>v31</a1>
<a2>v32</a1>
<a3>v33</a1>
</a>
</tab>
</body>
Тюрин Дмитрий