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