HTML and CSS Reference
In-Depth Information
function checkSize (creativeSize) {
//Check the size to fire off supplementary impression
switch (creativeSize) {
case "300x50" :
break;
case "300x250" :
break;
case "728x90" :
break;
}
}
Since every creative is different, this example does not take into consideration the CSS styling rules to be applied
or all the ad sizes as they are dependent on the publisher's page, but it does showcase how to gather the same rich
metrics for an ad that adapts to its viewer's screen. If the ad were to get a string value from the
publisherSize
variable, the ad server would be able to fire off the correct size impressions to report on.
Selectors
Another interesting part of the CSS specification is selectors. Selectors allow you to target specific elements in your
markup in various ways. You can target them by ID, class, tag name, type, even attributes, along with specific values.
Here are some common examples of CSS selectors.
*
: targets every single element in the document.
•
#ad
: targets elements by ID.
•
.center
: targets elements by class.
•
header
: targets elements by tag type.
•
div + p
: targets elements only preceding div.
•
footer > a
: targets direct children of footer.
•
a[title]
: targets elements by the attribute title.
•
*Note that the elements above are examples only, be sure to update with your own elements.
The above examples are some common cases of how CSS selectors work in the real world. I'll be using them
in examples later in the topic—but note that there are many more than those covered in this chapter. So I'd strongly
suggest taking a look at the W3C's current document on CSS selectors.
■
Note
Pseudo Classes
Another interesting feature of CSS is pseudo classes. Pseudo classes are much like selectors, but they have an
additional layer to react to layout or interaction. Here are some of the CSS pseudo classes.
