Tài liệu HTML & CSS: The Complete Reference- P14 ppt

626 P a r t I I : C o r e S t y l e

Web Fonts

An exciting change that some incorrectly think was introduced by CSS3 is the inclusion of

Web fonts. In reality, downloadable fonts using CSS and even HTML have been available in

browsers since the 4.x generation, though with the demise of Netscape, only Internet

Explorer continued to support them until their later reintroduction in more modern

browsers. Regardless of their origin, the syntax is fairly consistent. An “at” (@) rule is used

to associate a font name to be used in a style sheet with some downloadable font. A font￾family property is used within the rule to name the font, and an src is associated with an

external font name:

@font-face {font-family: fontname; src: url(fontfile);}

Later, the font can be used as a name within properties like font-family and font.

Make sure to specify other font names as a fallback in case downloadable font technology is

not supported or the font fails to load for some reason. As an example:

@font-face {font-family: "handwriting"; src: url(handwriting.ttf);}

body {font-family: "handwriting", cursive; font-size: 5em;}

FIGURE 6-1 Media queries in action

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 627

PART II

Media Query Description

Support

max/min Allowed Values Example(s)

aspect-ratio The ratio of the width

to the height of the

media.

Yes Integer/

Integer

@media screen

and (aspect￾ratio: 640/480)

{ ... }

color Describes the number

of bits of color the

device supports,

or 0 if no color is

supported. A presence

value can be used to

simply see if color is

supported.

Yes Integer @media all and

(color) { ... }

@media all and

(min-color: 16)

{ ... }

color-index Describes number of

entries in the color

lookup table of the

output device or 0 if

color is not supported.

Yes Integer @media screen

and (color￾index: 256)

{ ... }

device￾aspect-ratio

The ratio of the device

width to the device

height of the media.

Yes Integer/

Integer

@media screen

and (device￾aspect-ratio:

1024/768)

{ ... }

device￾height

Describes the height

of the screen or full

height of the output

page.

Yes Typical CSS length units

like px, em, in, and

so on

@media screen

and (device￾height: 768px)

{ ... }

device-width Describes the width

of the screen or the

full width of the output

page.

Yes Typical CSS length units

like px, em, in, and

so on

@media screen

and (device￾width: 1000px)

{ ... }

grid Determines if output

is grid, like a simple

terminal or phone,

or bitmap, like a

standard monitor or

printer.

No 1 or 0 (no value

required presence

style value)

@media screen

and (grid) {...}

height Describes the current

supported width of

the device’s viewport

or paged media box

in the case of print

output.

Yes Typical CSS length units

like px, em, in, and

so on

@media screen

and (height:

922px) { ... }

@media screen

and (max-height:

800px) and (min￾height: 400px)

{ ... }

TABLE 6-6 CSS Media Query Values (continued)

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

628 P a r t I I : C o r e S t y l e

Media Query Description

Support

max/min Allowed Values Example(s)

monochrome Determines if output is

monochrome and how

many bits are used for

gray display. A value of

0 indicates the output

is not monochrome.

A presence value or 1

is used to indicate the

device is displaying in

monochrome.

Yes 0 or positive integer @media screen

and (monochrome)

{ ... }

@media screen

and (min￾monochrome: 4)

{ ... }

orientation Output style portrait

if height is greater

than or equal to width,

landscape if the

opposite.

No portrait |

landscape

@media print and

(orientation:

landscape)

{ ... }

resolution Describes the

resolution of the

output device.

Yes Lengths in dpi (dots

per inch) or dpcm (dots

per centimeter)

@media print and

(resolution:

300dpi) { ... }

scan Describes the

scanning method of

a TV.

No progressive |

interlaced

@media tv

and (scan:

progressive)

{ ... }

width Describes the current

supported width of

the device’s viewport

or paged media box

in the case of print

output.

Yes Typical CSS length units

like px, em, in, and

so on

@media screen

and (width:

1000px) { ... }

@media screen

and (min-width:

300px) and (max￾width: 480px)

{ ... }

TABLE 6-6 CSS Media Query Values (continued)

It is also possible to set selection of a particular downloadable font when a particular font

characteristic like bold or italic is set by adding the corresponding rule to the @font-face rule:

@font-face {font-family: "Mufferaw"; src: url(MUFFERAW.ttf);}

@font-face {font-family: "Mufferaw"; src: url(MUFFERAWBOLD.ttf);

font-weight: bold;}

p {font-family: "Mufferaw", serif; font-size: 5em;}

em {font-weight: bold;} /* would specify the mufferawbold font */

There are even more characteristics that can be set, including what character sets are

supported, but so far quirks abound even in basic syntax. Readers are particularly warned

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

C h a p t e r 6 : C S S 3 P r o p r i e t a r y a n d E m e r g i n g F e a t u r e s R e f e r e n c e 629

PART II

that technologies for downloadable fonts vary significantly between browsers. Appendix B

discusses some approaches to using custom fonts online.

Miscellaneous CSS3 Changes

One of the things about CSS3 that may surprise developers is that it makes subtle changes

in a number of places rather than introducing all new properties. We see many new list-type

values like arabic, binary, lower hexadecimal, mongolian, thai, ethiopic, hangul,

norwegian, somali, and many more. Many more cursor values are introduced for more

application-style Web development like alias, context-menu, and not-allowed. A full

list can be found in the cursor property entry in the previous chapter.

Where possible, we alluded to these more subtle changes in the previous chapter’s

reference when they were supported by browsers. Though, without looking at all entries

globally, you might not see how some CSS3 changes have wide effect. For example, CSS3-

compliant browsers should support multiple backgrounds. Here, we specify different files

for the background, each separated with a comma:

body {background: white url(donkey.gif) top left no-repeat,

url(elephant.gif) bottom right no-repeat;}

This would also work on the background-image property, of course, given

background is just a shorthand for all background characteristics. So we see that once you

can specify multiple background images, this ripples through numerous properties like

background-position. For example, when using background-position on different

backgrounds, we apply the position to each background in order, so

background-position: 50px 100px, 200px 200px;

would position the first background at 50px, 100px and the second background at 200px,

200px. Similarly, other background properties like background-repeat would change in

a similar manner, so

background-repeat: no-repeat, repeat-x;

would apply no-repeat to the first background and repeat-x to the second.

The CSS3 background changes are supported at the time of this edition’s writing at least

in WebKit-based browsers. We focus in this chapter mostly on those areas of CSS3 where we

have a close-to-final specification (for example, Selectors) or have some implementation to

reference. While we have some good sense about what CSS3 features are likely to be

supported by browsers, it makes little sense to speculate too much until it is something

implemented and actually used by a Web developer or designer.

Implemented CSS3 and Browser-Specific Features

The CSS3 specification is far from complete, numerous aspects of the various proposed

modules that make up the specification have not been worked on for years, and there are

clearly many holes. However, browser vendors have implemented a number of properties

already. Further, many browser vendors have introduced proprietary extensions to CSS,

some of which have then been added to the CSS specification and some of which haven’t.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

630 P a r t I I : C o r e S t y l e

This section details the properties that are supported in some major browsers shipping

circa late 2009. Each entry will present the following items:

• Brief summary

• Syntax summary

• Example(s) of use

• Compatibility information

• Notes and special considerations

The aim here is for completeness, but given the moving nature of emerging and

proprietary CSS features, readers are warned that this content may change or never be

widely adopted. Awareness of intent and presentation of basic syntax is the primary goal

here, as testing likely will be required to safely use these properties.

NOTE To provide for the best long-term accuracy, where possible and when clear, CSS3 syntax is

presented first. If a browser supports a property extension to emulate the CSS3 syntax, that will

be presented in the notes and examples. Not every possible browser extension is presented,

particularly those properties only implemented in a minor-market-share browser that have not

been defined at least partially in any known CSS3 module.

@keyframes

This CSS “at” rule is used to define the properties that will be animated in an animation rule.

Syntax

@keyframes: keyframe-name

{percentage | from | to {cssrules}}*

where each block starts with the percentage into the animation at which the rules apply,

from is a keyword for 0%, and to is a keyword for 100%.

Example

@-webkit-keyframes move {

from {

left: 0;

top: 0;

opacity: 1;

}

50% {

left: 500px;

top: 0;

opacity: 1;

}

to {

left: 500px;

top: 500px;

opacity: 1;

}}

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.