Game Development Reference
In-Depth Information
The previous figure shows an example of a CSS box model. Note that the margin
space is always transparent, while any padding space inherits the background color
or image of its corresponding element.
Inconsistencies like this made the success of CSS limited and slow. When a designer
took on a project, one design would need to be coded with many browsers in mind,
which also meant that it would need to be tested in many different browsers. Not only
that, but the actual set of features that CSS offered were limited. For example, be-
fore Version 3, the only way to create an element with rounded corners through CSS
was by adding a background image to the element, where this image was a box with
rounded corners. This was not very practical, and often involved changing the HTML
structure, which partly defeated the purpose of external stylesheets.
Thanks to the responsive nature of web standards, however, a new version of CSS
was released alongside the new version of HTML. Officially named CSS Level 3, the
new specification builds on CSS Level 2 modules, and includes additional modules.
Given the wide acceptance and usage of CSS, major web browsers have been do-
ing a much better job at implementing features more consistently, meaning that one
code base is more likely to run consistently on different browsers.
Experimental features and vendor prefixes
As new features are added to the spec, and the spec itself progresses, browser
vendors attempt to stay on top of things and provide the latest and greatest features
to designers and end users. As of this topic, however, not all features listed on the
CSS3 specification are fully implemented by all browsers. The way you can tell if a
feature is not yet fully supported by the browser (or that a feature may stop being
supported by a particular browser) is that the CSS rule is prefixed by a dash, fol-
lowed by the code name for the browser. For example,
-webkit-(rule name)
.
Vendor
Prefix
Google Chrome
-webkit-
