CSS3 Proprietary and Emerging Features Reference in Java

Printing Code 128B in Java CSS3 Proprietary and Emerging Features Reference

Example(s) @media screen and (aspectratio: 640/480) { } @media all and (color) { } @media all and (min-color: 16) { }

Describes the number Yes 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 color-index Describes number of Yes entries in the color lookup table of the output device or 0 if color is not supported deviceThe ratio of the device Yes aspect-ratio width to the device height of the media

@media screen and (colorindex: 256) { }

Describes the height of the screen or full height of the output page device-width Describes the width of the screen or the full width of the output page grid Determines if output is grid, like a simple terminal or phone, or bitmap, like a standard monitor or printer height Describes the current supported width of the device s viewport or paged media box in the case of print output deviceheight

@media screen and (deviceaspect-ratio: 1024/768) { } Typical CSS length units @media screen and (devicelike px, em, in, and height: 768px) so on { } Typical CSS length units @media screen and (devicelike px, em, in, and width: 1000px) so on { } @media screen 1 or 0 (no value and (grid) {} required presence style value)

Typical CSS length units @media screen and (height: like px, em, in, and 922px) { } so on @media screen and (max-height: 800px) and (minheight: 400px) { }

TABLE 6-6 CSS Media Query Values (continued)

Part II:

Description 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 Output style portrait if height is greater than or equal to width, landscape if the opposite Describes the resolution of the output device Describes the scanning method of a TV Describes the current supported width of the device s viewport or paged media box in the case of print output

Example(s) @media screen and (monochrome) { } @media screen and (minmonochrome: 4) { }

@media print and (orientation: landscape) { }

@media print and (resolution: 300dpi) { } @media tv and (scan: progressive) { } Typical CSS length units @media screen and (width: like px, em, in, and 1000px) { } so on @media screen and (min-width: 300px) and (maxwidth: 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(MUFFERAWttf);} @font-face {font-family: "Mufferaw"; src: url(MUFFERAWBOLDttf); 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

6:

that technologies for downloadable fonts vary significantly between browsers Appendix B discusses some approaches to using custom fonts online

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, CSS3compliant browsers should support multiple backgrounds Here, we specify different files for the background, each separated with a comma:

body {background: white url(donkeygif) top left no-repeat, url(elephantgif) bottom right no-repeat;}