Re: Two CSS challenges

I kinda like the proposal. It has however some drawbacks (it forces 
browsers to create virtual elements around text nodes...). Is it really 
worth the pain? (it's a question, not an affirmation).

Maybe would it simply better to ask the developer to add an external span if 
he really need it. As for the "button" problem, you may want to achieve the 
same effect even if it's an image and not text in the button. Maybe the 
::inner proposal better fulfill the need.

Regards,
Francois

-----Message d'origine----- 
From: Andrew Fedoniouk
Sent: Saturday, December 25, 2010 9:31 PM
To: www-style@w3.org
Subject: Two CSS challenges

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.

Received on Saturday, 25 December 2010 20:57:48 UTC