HTML and CSS Reference
In-Depth Information
A few things will always be necessary with CSS, since each manufacturer has its own interpretation and adoption
rate for the latest CSS3 spec. First, vendors often have variability within their environments. This inconsistency comes
at a cost for designers in the form of CSS resets, which are required to reset rendering elements across browsers. A
very useful tool for emerging browsers is Nicolas Gallagher's
Normalize.css
(
necolas.github.com/normalize.css
)
,
which makes all browsers, both old and up to date, render elements consistently without applying unwanted styling.
A good tip is to reset from your ad's top level element down. What this means is that if you have your entire ad
wrapped in a div element acting as the ad's container, you can apply a class to that div called “adContainer”. Now in
the CSS document, you can add specific resets or styling simply by writing:
#adContainer .adBanner {
}
This way only the elements within the ad markup are targeted and this keeps a clear separation between
publisher page content and ad content.
In addition to resets, if browsers you're deploying toward happen not to be HTML5-compatible, you'll need
graceful failovers to style the page correctly. A really great example of this is on the site
CSS-Tricks.com
. The site
actually degrades very nicely in an older browser like IE6 but takes advantage of emerging CSS3 features when a user's
browser supports and is capable of the enhanced experience. This technique, known as progressive enhancement,
can be applied in your advertising creatives as well. If you're running a campaign that needs to target any and all users
and isn't specified to a browser version, HTML5-compliant or not, always build the ad experience with the older user
in mind. Maintain the core functionality and messaging and build richer features that newer browsers can handle on
top of them.
At-Rules
The CSS spec also has what is known as an at-rule index. At-rules are used for handing CSS documents in various
ways and instructing the CSS parser. Here are a few popular at-rules.
•
@charset
: This specifies the character set of an external style sheet.
•
@import
: This imports an external style sheet file to the current style sheet.
•
@media
: This specifies the media to which the style should be applied.
•
@page
: This specifies margin values for the page box in style sheets for paged media.
@font-face
: This defines custom font properties.
All the rules above allow designers to create specific visual experiences based on the machine or device
requesting the stylized content.
As you've seen in brief, CSS media profiles are used for the different displays that will request web content to be
rendered. Screen, Print, Handheld, and TV (to name a few modes) allow visually based content to dynamically update
on the device requesting the content. This characteristic can be tremendously useful if you're deploying a cross-device
campaign as it allows a designer to take into consideration many different displays during the design phase. Also,
CSS can be used as an external link via the
@import
rule set (see above) or added to the HTML document as a linked
file. But it can also be used as inline styles on the HTML elements. There are debatable pros and cons for uses in both
techniques, too many to list here. You should weigh your options accordingly when starting development.
My personal way of development is to externalize style from form and function. Doing so allows for easy layout
updates without touching markup or JavaScript. On the other hand, some ad platforms require that your CSS remain
inline and bundled with the inline HTML markup. This situation, obviously much harder to scale, is sometimes a
requirement; so be sure to keep your styling formatted nicely, since you may need to go back to the code and perform
updates and revisions. However, if you are allowed to externalize your CSS files (and I really hope you can), one of
•
