Here are two challenges that have no solutions in modern CSS.
1. Consider this simple markup:
<p> Something <span>Like a Button</span></p>
I would like to define the span above to behave (visually) as a button - on
span:active I would like to shift/offset its text from its normal position
by 1px. Here is its style:
span {
display:inline-block;
border:1px solid;
padding:3px;
vertical-align:baseline;
}
span:active { ???? }
Straightforward solution of using something like padding:4px 2px 2px 4px;
will not work here because of vertical-align:baseline ...
2. Consider another markup:
<div>
text 1
<p>text 2</p>
</div>
By definition [1] "text 1" is wrapped into so called anonymous box -
block element of appropriate type. If I want to draw 1px solid red;
border around that box how would I do so?
...
I suspect that both cases above can be solved if CSS would have ::text
pseudo-element that will match such anonymous text boxes.
In this case solution for case #1 will look like:
span:active::text { position:relative; top:1px; left:1px; }
The ::text is a direct analogy of other pseudo-elements like
::first-letter and ::first-line and matches any
anonymous (synthetic) children of the element.
Happy Holidays.
[1] http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level
--
Andrew Fedoniouk
Terra Informatica Software, Inc.