[whatwg] Pre, code and semantics in HTML5: Wishful thinking?

[Thomas Broyer]

On Sun, Jun 22, 2008 at 11:36 PM, Edward Z. Yang wrote:
>
> Smylers wrote:
>> Why would you need to -- surely you could just put the styling on the
>> <code> instead (using pre + code to select only <code> elements inside
>> <pre>-s)?
>
> Lets say I want to place a background image of a computer behind spanses
> of computer code, but a background image of a console for emulated
> console data using samp and kbd.
>
> With HTML 4, I would have done <pre class="code"> (or more likely, just
> omitted it and assumed it was computer code by default unless otherwise)
> and <pre class="console">.

Which you can do with HTML 5 too...

> With <pre><code>, you can't do that.

<pre class="code"><code>print "Hello world!"</code></pre>
<pre class="console"><samp>root at localhost></samp> <kbd>rm -Rf /</kbd></pre>

> <code> is an inline element, and
> the background image doesn't get applied to it in any meaningful way.

Wouldn't display:block fix this problem? (theoretically, using
margin:0 would too, IIRC)

> I suppose one of the primary distinctions is that if you use
> <pre><code>, it's usually because all of it's computer code.

Yep, so you'd use a class=console for your console samples and the
following CSS rule for <pre><code> (untested):

pre + code:only-child {
  display: block;
  background-image: url(computer.png);
}

-- 
Thomas Broyer