HTML and CSS Reference
In-Depth Information
browser can understand them and do its job. A popular SASS compiler is Compass, found at
compass-style.org
.
SASS allows developers and designers to rapidly produce dynamic code and to update and change it easily; since it
accepts the inclusion of variables, mix-ins, and arguments, it's a truly logical and dynamic approach to developing
CSS. For example, you can set a background color as a variable called
$bg-color: #ffffff
; and as your paying client
constantly wants to change the background from white to black, it would be very easy for the developer to go back
into the SASS code base and update that one line to
#000000
and have it proliferate throughout all the content that is
referencing that variable. This is where the true power of SASS comes into play!
LESS
LESS, by Alexis Sellier, is another dynamic style sheet language; it allows designers to leverage features similar to
those of SASS—variables, mix-ins, nested rules, math, and functions with arguments. The main difference with LESS
is that it works in both client-side and server-side environments (“client-side” means in the user's browser, whereas
“server-side” means the hosting server performs the actions). In fact, the W3C is even contemplating including
variables natively in the CSS spec in the coming future (see
dev.w3.org/csswg/css-variables
). That may or may not
pan out, but if you can't wait, these hipster languages will get you started. There are other CSS preprocessors—Stylus
is one—but I hope you get the picture of what they aim to solve by now. If you're building much larger and more
complex ads, ads that mirror rich application development, using a preprocessor may make your life easier in the
long run.
Not
■
HAML
Last of all, since we're on the topic of preprocessors, I'll mention the HTML Abstraction Markup Language (HAML).
HAML is a preprocessor specifically designed for HTML markup; it can help speed up your markup development.
I won't go into more detail, but to see if HAML is right for you, visit
haml-lang.com/try.html
and give it a whirl! The
whole premise of these new coding languages is to do more by writing less. I mean, really, a CSS variable? That's really
awesome!
Advertising with JavaScript
As I've already said, you'll be seeing a lot on JavaScript in the rest of this topic. You may remember that JavaScript not
only handles the behavior of the page; it can also control function and interactivity as well. It's important to note that
with HTML5, we now have more JavaScript APIs than ever before to take advantage of. Also it's important to note that
JavaScript is an interpreted language—not a compiled one like Flash's Actionscript or Objective-C.
In this case, the browser is instructed to run commands as it understands them, written left to right and top to
bottom. This may be a whole different way of thinking if you're coming from a Flash development world, as you will
almost always run into issues where JavaScript commands are being interpreted on elements that haven't even been
created in the markup yet. Because of the common “null object reference”, this will generally result in errors and break
the code in your ad. Again, this is much different than ActionScript, since the compiler packages up to ensure that all
elements exist so properties can be manipulated on them.
Some very popular JavaScript syntax elements are
getElementById();
and
getElementsByTagName();—
these JavaScript commands allow for selecting elements in the DOM tree. In addition, there is now also
getElementsByClassName();
and the new
querySelectorAll();
and
querySelector();
which allow developers
to query the DOM for any element they wish to pass in as an argument as a CSS selector. This is super helpful for
targeting elements directly and can be used instead of a popular JavaScript library like jQuery. Whether you're new to
