Game Development Reference
In-Depth Information
Of course, repeating the same rule with each vendor prefix in front of it, followed
by the non-prefixed rule, quickly makes your stylesheet files very large, and a night-
mare to maintain. Find an approach that works best for you. There are also various
tools available that help you maintain your CSS files, especially with regards to this
evolving situation with the vendor prefix.
The two most popular such tools (also known as CSS preprocessors) are LESS
(see
http://lesscss.org/
)
and SASS (see
http://sass-lang.com/
). Although each pre-
processor is slightly different, they all accomplish the same thing, namely, taking
plain CSS stylesheets, then adding all the required vendor prefixes where needed.
CSS3 modules
The new CSS Level 3 modules can be divided into several modules, namely,
style
attributes
,
selectors
,
colors
, and
media queries
.
Style attributes tell the browser how an element is to be rendered (or styled). This
could be anything from a string of text being styled with a font size of 23 px, to styl-
ing a list of images rotated 45 degrees about their y-axis and placed above its own
reflection, to styling various HTML nodes to animate every half a second using key-
frame animation.
Selectors are the way you tell the browser what elements are to be styled. That is,
through the special expression language of CSS selectors, you can address one or
more elements whose styling rules follow the selector declaration. The new CSS3
selectors basically extend this expression language, making it possible to target dif-
ferent elements in different, more flexible ways.
Colors, as the name implies, hints to the browser how an element is to be shaded.
Colors can be applied to the actual text on a web page, to the border surrounding text
or other elements, as well as the background of elements, following the box model
scheme.
Finally, media queries allow the stylesheet to target the document (or parts of it)
based on various conditions. What's more, media queries are triggered in real time
by the browser. In other words, if, for example, you specify a media query that
defines CSS rules that should only apply when the browser window is no wider than
a certain width, the browser will update the web page automatically as needed as
