HTML and CSS Reference
In-Depth Information
Figure 4-12
Browser-specifi c extensions to CSS
Vendor Prefix
Rendering Engine
Browsers
-khtml-
KHTML
Konqueror
-moz-
Mozilla
Firefox, Camino
-ms-
Trident
Internet Explorer
-o-
Presto
Opera, Nintendo Wii browser
-webkit-
WebKit
Android browser, Chrome, Safari
Older browser versions might not support the current CSS specifi cations, but might
support one of the browser extensions. In order to support the widest range of brows-
ers and browser versions, you should employ progressive enhancement with the most
widely supported CSS2 property—if one exists—listed fi rst, followed by the browser
extensions, and then the latest CSS3 property. As you encounter this situation in this and
future tutorials, you'll use the following structure:
selector
{
css2_property
:
value
;
-khtml-
property
:
value
;
-o-property
:
value
;
-moz-property
:
value
;
-webkit-property
:
value
;
-ms-property
:
value
;
css3_property
:
value;
}
As always, the last property listed and recognized by the browser will be the one
applied to the Web page; thus, you always should start with the oldest and most basic
standard and fi nish with the most current. For example, several browsers have their own
extensions to specify the origin of a background image and to ensure the widest possible
support for this feature, you would apply the following style properties to the selector:
-o-background-origin: padding-box;
-moz-background-origin: padding;
-webkit-background-origin: padding-box;
background-origin: padding-box;
Notice that the background origin values differ among browser extensions. With the
Mozilla rendering engine, you set the origin of the background image to the padding
box by using the keyword
padding
; while the Presto and WebKit extensions employ the
same
padding-box
keyword that was later adopted into the CSS3 specifi cations.
WebKit, Mozilla, and Presto support similar extensions that mirror the CSS3
background-size
and
background-clip
properties. At this point you don't have a
need for these browser extensions, but you will use them later in the tutorial.
Exploring Layout Designs
One challenge of Web page layout is that your document will be viewed on many differ-
ent devices with different screen resolutions. As shown in Figure 4-13, the most common
screen resolution at the time of this writing is 1024 × 768, though the majority of user
devices are displaying the Web at even higher resolutions than that.
