HTML and CSS Reference
In-Depth Information
Keep in mind you need to declare your own image source for your example and make sure you're testing using a
supported browser, like Webkit.
Scoped Styles
As you're well aware by now, separating ad content from publisher content can be a challenge. Oftentimes, if ads
aren't wrapped in an iframe, they'll share styles and functionality if not properly namespaced. With new support
for the sandbox attribute of the HTML
iframe
element, this will allow publishers to manage the security risk of
embedded content. For instance, you can grant full privileges to an iframe that contains content that the publisher
controls, but much fewer rights to an iframe that a third-party advertising service controls. What's nice is that if the
ad server wraps its ad content within a block of code using the CSS scoped attribute, it can apply styles individually to
that block of code separately from the rest of the publisher's page. These scoped styles are supposed to overwrite any
of the inherited styles from the publisher's page, which should correctly render the ad content. With the CSS scoped
attribute, you can write styles specifically targeted to the elements in your ad, as outlined in Listing 12-6.
Listing 12-6.
CSS Scoped Example
<html>
<head>
<body>
<section>
<style scoped>
iframe {
position: absolute;
border: 1px solid #000;
top:100px;
left: 200px;
-webkit-box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.5);
box-shadow: 0px 15px 20px rgba(50, 50, 50, 0.5);
}
</style>
<iframe id='ad' width='300' height='250' seamless src='sampleAd.html'></iframe>
</section>
</body>
</html>
If you're following along, you'll notice that the CSS styles will be affected only on the
iframe
element, which is in
this case holding your ad unit, as shown in Figure
12-7
.
