List of articles   Colour designations   Choose language


Style of attribute
(of virtual element)



Today all attributes of an html-element is service's (applied information is between its openning and closing tags). At the same time, data are saved in database as records, which is extracted as xml-elements, attributes of which contains applied information. Traditional way of visualization of these tags

<style>
   record::before { content: attr(name) attr(surname) }
</style>
<body>
  <record name="a" surname="b">
  <record name="c" surname="d">
</body>
is bad, because it does not allow to specify styles for visualization of these attributes. I offer to specify attributes in css-file with sign "§" before their names, that withdraw attribute from tag and transform it into enclosed tag. Let's name these tags as virtual tags. Thus the following construction

<style>
  §name    {color: red  }
  §surname {color: gray }
</style>
<body>
  <record name="a" surname="b">
  <record name="c" surname="d">
</body>
will means the same, as
<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>

So we see, that michanism, based on property content, is essentially narrower, than michanism of virtual tags.

I don't want to reduce importance of property content: it is necessary to change already existing content of html-element, or to specify content of pseudo-element. But when we try to reduce all cases to this property, it acts as limiter, and thus data are subdivided into two groups depending on their forms: if data is between an open and close tags, then it is data of full value (it may has style); if data is in an attribute, it is inferior.


Other example: next construction

<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>
will be understanded as
<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>

Dmitry Turin



List of articles   Colour designations   Choose language


Hosted by uCoz