Перечень статей   Цветовые обозначения   Choose language


Стиль атрибута
(виртуального тега)



Сегодня все атрибуты 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>

Тюрин Дмитрий



Перечень статей   Цветовые обозначения   Choose language


Hosted by uCoz