| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>Safari CSS2 :after test</title> |
| <style type="text/css"> |
| /* the following styles are for general layout purposes; |
| they are not required for the purposes of this example */ |
| div.box{ |
| border:1px solid #000; |
| margin:25px 0; |
| padding:25px; |
| } |
| code{ |
| font-weight:bold; |
| } |
| pre{ |
| margin-left:20px; |
| } |
| pre.error{ |
| color:red; |
| } |
| pre.ok{ |
| color:green; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Problem: Safari improperly handles generated content in certain cases when used with multiple class names</h1> |
| <p><em>When referencing an element by two class names simultaneously, Safari won't generate content (using :before or :after) within the element.</em></p> |
| <p>Assume we have a <code>div</code> with two class names: <code>box</code> and <code>one</code>. Within that <code>div</code>, we have a <code>p</code> (paragraph) tag, after which we'd like to insert generated content. One way to do so would be the following:</p> |
| <pre class="error"><code>div.box.one p:after{ content:'generated content here!'; }</code></pre> |
| <p>But that doesn't work in Safari. However, if you drop one of the class names, as shown below, it works as expected:</p> |
| <pre class="ok"><code>div.box p:after{ content:'generated content here!'; }</code></pre> |
| <p>Note also that the bug only applies to content <em>within</em> the classed element — generating content <em>before or after the element itself</em> works fine:</p> |
| <pre class="ok"><code>div.box.one:after{ content:'generated content here!'; }</code></pre> |
| |
| <hr /> |
| |
| <!-- all code necessary for the example, including CSS, is below: --> |
| |
| <h2>Example (view source to see CSS and HTML):</h2> |
| <style type="text/css"> |
| div.box.one p:after{ |
| content:'generated content'; |
| color:green; |
| display:block; |
| } |
| div.two p:after{ |
| content:'generated content'; |
| color:green; |
| display:block; |
| } |
| </style> |
| |
| <p>Both boxes below should contain generated content (<span style="color:green;">in green</span>):</p> |
| |
| <div class="box one"> |
| <h3>Box 1</h3> |
| <p>This box should contain the text "generated content" in CSS2-compliant browsers (but won't in Safari).</p> |
| </div> |
| |
| <div class="box two"> |
| <h3>Box 2</h3> |
| <p>This box should contain the text "generated content" in CSS2-compliant browsers, including Safari.</p> |
| </div> |
| |
| <!-- end example --> |
| |
| </body> |
| </html> |
