73 lines
2.6 KiB
HTML
73 lines
2.6 KiB
HTML
<!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>
|