626 P a r t I I : C o r e S t y l e 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 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 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 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 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 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 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. 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 631 PART II 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 631 Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ Notes • WebKit supports this property as @-webkit-keyframes. accelerator This property specifies whether an element is an accelerator indicator or not. Syntax accelerator: true | false When the standard underline style is applied and accelerator is set to true, the style should be toggled when the ALT key is depressed, revealing the various access keys in play. Example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>accelerator Test</title> <style type="text/css" media="screen"> .accelerator {-ms-accelerator: true; accelerator: true; text-decoration: underline;} </style> </head> <body> <form action="login.php" method="post"> <div> <label>U<span class="accelerator">s</span>ername: <input type="text" name="username" id="username" accesskey="s"> </label> </div> <div> <label><span class="accelerator">P</span>assword: <input type="password" name="userpass" id="userpass" accesskey="p"> </label> </div> <div> <input type="submit" value="login"> </div> </form> </body> </html> ONLINE http://htmlref.com/ch6/accelerator.html Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 632 P a r t I I : C o r e S t y l e 632 P a r t I I : C o r e S t y l e Compatibility No specification IE 5.5+ Notes • Under Internet Explorer 8 this property should be represented as –ms- accelerator . • At the time of this writing, this was not working in IE 8 unless in compatibility mode, despite documentation statements to the contrary. animation This shorthand property is used to set all of the animation properties at once. Syntax animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction where each value is defined by its named property. Like other shorthand properties, values may be omitted. There may be other shorthand animation rules that follow the first, separated by commas. Example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Animations</title> <style type="text/css"> @-webkit-keyframes move { from {left: 0; top: 0;} 50% {left: 500px; top: 0;} to {left: 500px; top: 500px;} } #anim1 {-webkit-animation:move 5s ease-out 0 infinite alternate; position:absolute; height: 100px; width: 100px; background-color: purple;} </style> </head> <body> <div id="anim1">Watch me move!</div> </body> </html> ONLINE http://htmlref.com/ch6/animation.html 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 633 PART II 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 633 Compatibility CSS3 Proposed Chrome 3, Safari 3.1+ Notes • WebKit supports this property as –webkit-animation. • Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation. It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this. animation-delay This property is used to define a delay before an animation starts. Syntax animation-delay: time1 [, timeN] where time is a standard CSS time value like 2s or 4700ms. The default value is 0, meaning the animation starts immediately. Example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Animations - animation-delay</title> <style type="text/css"> @-webkit-keyframes move { from {width: 100px; height: 300px; left: 0; top: 0;} 50% {width: 100px; height: 300px; left: 300px; top: 0;} to {width: 100px; height: 300px; left: 300px; top: 300px;} } @-webkit-keyframes resize { from {width: 100px; height: 300px; left: 300px; top: 300px;} 50% {width: 100px; height: 100px; left: 300px; top: 300px;} to {width: 300px; height: 100px; left: 300px; top: 300px;} } #anim1 {-webkit-animation-name:move, resize; -webkit-animation-duration: 4s, 4s; -webkit-animation-delay: 0s, 4s; position:absolute; background-color: purple;} </style> </head> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 634 P a r t I I : C o r e S t y l e 634 P a r t I I : C o r e S t y l e <body> <div id="anim1">Watch me move and change size!</div> </body> </html> ONLINE http://htmlref.com/ch6/animationdelay.html Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ Notes • WebKit supports this property as –webkit-animation-delay. • Be careful staggering animations, as properties will revert to their nonanimation values once the animation completes. • Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation. It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this. animation-direction This property is used to indicate if an animation plays in reverse or repeats itself every other iteration. Syntax animation-direction: normal | alternate [,normal | alternate]* The default value is normal. Example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Animations - animation-direction</title> <style type="text/css"> @-webkit-keyframes resize { from {width: 100px; height: 300px; left: 0; top: 0;} 50% {width: 100px; height: 100px; left: 300px; top: 0;} to {width: 300px;height: 100px; left: 300px; top: 300px;} } #anim1 {-webkit-animation-name:resize; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 5; -webkit-animation-direction: alternate; position:absolute; background-color: purple;} 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 635 PART II 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 635 </style> </head> <body> <div id="anim1">Watch me move and change size!</div> </body> </html> ONLINE http://htmlref.com/ch6/animationdirection.html Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ Notes • WebKit supports this property as –webkit-animation-direction. • If the animation-direction is alternate, the timing function will also alternate if appropriate. • Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation. It is quite likely that a form of this property using the –moz prefix may be supported in a Firefox browser by the time you read this. animation-duration This property is used to define the time it takes one iteration of an animation to play. Syntax animation-duration: time [,time]* where time is a valid time value like 5s or 3500ms. The initial value of time is 0, meaning no animation plays. Example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Animations - animation-duration</title> <style type="text/css"> @-webkit-keyframes move { from {left: 0;top: 0;} 50% {left: 300px;top: 0;} to {left: 300px;top: 300px;} } @-webkit-keyframes resize { from {width: 100px;height: 300px;} 50% {width: 100px;height: 100px;} to {width: 300px;height: 100px;} } #anim1 {-webkit-animation-name:move, resize; -webkit-animation-duration: 4s, 10s; position:absolute; background-color: purple;} Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... color is the color of the shadow When unspecified, color may be set by the user agent or inherited from the current color The x-offset and y-offset define the shadow position relative to the element, where positive numbers are to the right and down and negative numbers are to the left and up, respectively Setting these values to 0 puts the shadow directly behind the element The blur-radius defines the degree... Slice 1 Slice 3 Slice 2 PART II Syntax 652 Part II: Core Style The first cutline is across the top and defines the height of the top-left and top-right corners; the second cutline defines the width of the top-right and bottom-right corners; the third cutline defines the height of the bottom corners; and the fourth cutline defines the width of the left corners, top and bottom For example, given url(background-image)... background-origin: border | padding | content [, border | padding | content, ] where the default is padding, causing the position of the background to be relative to the outside of the padding or, more obviously, the start of the border It also can be set relative to the outside of the border or the start of the content The effect of this property is quite noticeable when looking at a positioned background... The blur-radius defines the degree of blur, with larger numbers making the shadow more blurry The spread-radius defines the size of the shadow A positive value makes the shadow bigger than the object and a negative value makes it smaller than the element When unspecified, the spread-radius is 0, making the shadow the same size as the element Chapter 6: CSS3 Proprietary and Emerging Features Reference... define the animations that should be run The @keyframe directive specified defines the properties to animate The keyword none can be used to override a cascade Syntax animation-name: @keyframe-name | none [,@keyframe-name | none]* where @keyframe-name is the name of the animation defined by an @keyframe directive Example . </style> </head> <body> <div id="anim1">Watch me move!</div> </body> < /html& gt; ONLINE http://htmlref.com/ch6/animation .html Please. </style> </head> <body> <form action="login.php" method="post"> <div> <label>U<span class="accelerator">s</span>ername: