- From: Thomas Broyer <t.broyer@gmail.com>
- Date: Mon, 23 Jun 2008 00:10:17 +0200
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
Received on Sunday, 22 June 2008 15:10:17 UTC