HTML & CSS: The Complete Reference- P14

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
41
lượt xem
5
download

HTML & CSS: The Complete Reference- P14

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'html & css: the complete reference- p14', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:
Lưu

Nội dung Text: HTML & CSS: The Complete Reference- P14

  1. 626 Part II: Core Style FIGURE 6-1 Media queries in action 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;}
  2. Chapter 6: CSS3 Proprietary and Emerging Features Reference 627 Support Media Query Description max/min Allowed Values Example(s) aspect-ratio The ratio of the width Yes Integer/ @media screen to the height of the Integer and (aspect- media. ratio: 640/480) { ... } color Describes the number Yes Integer @media all and of bits of color the (color) { ... } device supports, @media all and or 0 if no color is (min-color: 16) supported. A presence PART II { ... } value can be used to simply see if color is supported. color-index Describes number of Yes Integer @media screen entries in the color and (color- lookup table of the index: 256) output device or 0 if { ... } color is not supported. device- The ratio of the device Yes Integer/ @media screen aspect-ratio width to the device Integer and (device- height of the media. aspect-ratio: 1024/768) { ... } device- Describes the height Yes Typical CSS length units @media screen height of the screen or full like px, em, in, and and (device- height of the output so on height: 768px) page. { ... } device-width Describes the width Yes Typical CSS length units @media screen of the screen or the like px, em, in, and and (device- full width of the output so on width: 1000px) page. { ... } grid Determines if output No 1 or 0 (no value @media screen is grid, like a simple required presence and (grid) {...} terminal or phone, style value) or bitmap, like a standard monitor or printer. height Describes the current Yes Typical CSS length units @media screen supported width of like px, em, in, and and (height: the device’s viewport so on 922px) { ... } or paged media box @media screen in the case of print and (max-height: output. 800px) and (min- height: 400px) { ... } TABLE 6-6 CSS Media Query Values (continued)
  3. 628 Part II: Core Style Support Media Query Description max/min Allowed Values Example(s) monochrome Determines if output is Yes 0 or positive integer @media screen monochrome and how and (monochrome) many bits are used for { ... } gray display. A value of @media screen 0 indicates the output and (min- is not monochrome. monochrome: 4) A presence value or 1 { ... } is used to indicate the device is displaying in monochrome. orientation Output style portrait No portrait | @media print and if height is greater landscape (orientation: than or equal to width, landscape) landscape if the { ... } opposite. resolution Describes the Yes Lengths in dpi (dots @media print and resolution of the per inch) or dpcm (dots (resolution: output device. per centimeter) 300dpi) { ... } scan Describes the No progressive | @media tv scanning method of interlaced and (scan: a TV. progressive) { ... } width Describes the current Yes Typical CSS length units @media screen supported width of like px, em, in, and and (width: the device’s viewport so on 1000px) { ... } or paged media box @media screen in the case of print and (min-width: output. 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
  4. Chapter 6: CSS3 Proprietary and Emerging Features Reference 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 PART II 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.
  5. 630 Part II: Core Style 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; }}
  6. Chapter 6: CSS3 Proprietary and Emerging Features Reference 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. PART II 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 accelerator Test .accelerator {-ms-accelerator: true; accelerator: true; text-decoration: underline;} Username: Password: O NLINE http://htmlref.com/ch6/accelerator.html
  7. 632 Part II: Core Style 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 CSS Animations @-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;} Watch me move! O NLINE http://htmlref.com/ch6/animation.html
  8. Chapter 6: CSS3 Proprietary and Emerging Features Reference 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 PART II 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 CSS Animations - animation-delay @-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;}
  9. 634 Part II: Core Style Watch me move and change size! O NLINE 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 CSS Animations - animation-direction @-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;}
  10. Chapter 6: CSS3 Proprietary and Emerging Features Reference 635 Watch me move and change size! O NLINE http://htmlref.com/ch6/animationdirection.html Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ PART II 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 CSS Animations - animation-duration @-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;}
  11. 636 Part II: Core Style Watch me move and change size! O NLINE http://htmlref.com/ch6/animationduration.html Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ Notes • WebKit supports this property as –webkit-animation-duration. • Be careful with staggering durations, as the shorter animation will revert to its 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-iteration-count This property is used to define the number of times an animation should play. Syntax animation-iteration-count: number | infinite [, number | infinite]* where number is a positive integer and the keyword infinite indicates a continuous animation. Example CSS Animations - animation-iteration-count @-webkit-keyframes resize { from {height: 300px; width: 100px; left: 0; top: 0;} 50% {height: 100px; width: 100px; left: 300px; top: 0;} to {height: 100px; width: 300px; left: 300px; top: 300px;} } @-webkit-keyframes move { from {left: 150px; top: 150px;}
  12. Chapter 6: CSS3 Proprietary and Emerging Features Reference 637 50% {left: 300px; top: 0;} to {left: 400px; top: 200px;} } #anim1 {-webkit-animation-name:resize; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; position:absolute; background-color: purple;} #anim2 {-webkit-animation-name:move; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 2; PART II position:absolute; top: 150px; left: 150px; background-color: orange;} Watch me move and change size forever! Watch me move two times O NLINE http://htmlref.com/ch6/animationiterationcount.html Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ Notes • WebKit supports this property as –webkit-animation-iteration-count. • 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-name This property is used to 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
  13. 638 Part II: Core Style CSS Animations - animation-name @-webkit-keyframes move { from {top: 0; left:0; opacity: 1;} 50% {top: 0; left:500px; opacity: .5;} to {top: 500px; left: 500px; opacity: .1;} } @-webkit-keyframes resize { from {height: 300px; width: 100px;} 50% {height: 100px; width: 100px;} to {height: 100px; width: 300px;} } @-webkit-keyframes fade { from {opacity: 1;} 50% {opacity: .5;} to {opacity: .1;} } #anim1 {-webkit-animation-name: move, resize, fade; -webkit-animation-duration: 10s; position:absolute; background-color: purple;} Watch me move and vanish! O NLINE http://htmlref.com/ch6/animationname.html Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ Notes • WebKit supports this property as –webkit-animation-name. • 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-timing-function This property is used to describe how the animation will play. Syntax animation-timing-function: timingfunction [,timingfunction2,...timingfunctionN]
  14. Chapter 6: CSS3 Proprietary and Emerging Features Reference 639 where timingfunction is one of the following values: cubic-bezier(number,number,number,number) | ease | ease-in | ease-in-out | ease-out | linear The default value is ease. Example PART II CSS Animations - animation-timing-function @-webkit-keyframes move { from {left: 0; top: 0;} 50% {left: 300px;top: 0;} to {left: 600px; top: 0;} } #anim1 {-webkit-animation-name: move; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; position:absolute; background-color: purple; } #controls {position: absolute; top: 100px; left: 10px;} Watch me move! cubic-bezier ease ease-in ease-in-out ease-out linear O NLINE http://htmlref.com/ch6/animationtimingfunction.html
  15. 640 Part II: Core Style Compatibility CSS3 Proposed Chrome 3+, Safari 3.1+ Notes • WebKit supports this property as –webkit-animation-timing-function. • If applicable, the timing function will reverse if animation-direction is set to alternate. • 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. backface-visibility This property is used to indicate whether the backside of an element is visible if the element is rotated to display the back. Syntax backface-visibility: hidden | visible The default value is visible. When it is set to hidden, the element is not visible if it is not facing the screen. When it is set to visible, it is always visible, which may mean you see the reverse of an image. Example Compatibility CSS3 Chrome 3+, Safari 4+ Note • WebKit supports this property as –webkit-backface-visibility, though at the time of this edition’s writing it is only available in the iPhone and the development builds of Safari 4+.
  16. Chapter 6: CSS3 Proprietary and Emerging Features Reference 641 background-clip This property specifies whether or not an element’s background extends all the way to the element’s border. Syntax background-clip: border | padding [, border | padding,..] where the default is border, causing the background to stop at the edge of the border of an element or where padding stops the background at the start of a border. The effect of this property is noticeable when borders with transparent regions are used: PART II Examples Clipped to border (default) Clipped to padding O NLINE http://htmlref.com/ch6/backgroundclip.html Compatibility CSS3 Chrome 3+, Firefox 3.5+, Safari 3+ Notes • Mozilla-based browsers like Firefox support this property as –moz-background- clip and WebKit-based browsers like Safari and Chrome support it as –webkit- background-clip.
  17. 642 Part II: Core Style • WebKit-based browsers also specify a value of content for its –webkit- background-clip property, which clips backgrounds to the content region of a box. • WebKit-based browsers have experimented with a value of text for their –webkit- background-clip property to create a clip outline for text to create an interesting punch-out effect. background-origin This property specifies how the position of a background should be calculated by setting the origin relative to different locations within an element’s box. Syntax 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 where borders with transparent regions are used:
  18. Chapter 6: CSS3 Proprietary and Emerging Features Reference 643 Examples background-origin: border background-origin: padding background-origin: content O NLINE http://htmlref.com/ch6/backgroundorigin.html Compatibility CSS3 Chrome 3+, Firefox 3.5+, Safari 3+ Notes • Mozilla-based browsers such as Firefox support this property as –moz- background-origin and WebKit-based browsers such as Chrome and Safari support it as –webkit-background-origin. • The CSS3 specification currently lists border-box and padding-box. This syntax was changed in other areas of the specification, and browser vendors currently don’t support such values. The supported values are presented instead. background-position-x This property defines the x-coordinate of the background-position property. Syntax background-position-x: length | percentage | left | center | right Example background-position-x Compatibility No spec Chrome 2+, IE 4+, Safari 1.3+
  19. 644 Part II: Core Style Note • Under IE 8 this property is known as –ms-background-position-x to correctly note it as an extension. background-position-y This property defines the y-coordinate of the background-position property. Syntax background-position-y: length | percentage | top | center | bottom Example background-position-y Compatibility No spec Chrome 2+, IE 4+, Safari 1.3+ Note • Under IE 8 this property is known as –ms-background-position-y to correctly note it as an extension. background-size This property allows the background image used to be scaled. Syntax background-size: length | percentage [ length | percentage ] where length or percentage values may have a single or double value. Examples Smaller in pixels Scale differently
  20. Chapter 6: CSS3 Proprietary and Emerging Features Reference 645 Bigger by percentage PART II O NLINE http://htmlref.com/ch6/backgroundsize.html Compatibility CSS3 Chrome 3+, Firefox 3.6+, Opera 9.5+, Safari 3+ Note • Mozilla-based browsers such as Firefox support this property as –moz-background- size, WebKit-based browsers like Chrome or Safari support it as –webkit- background-size, and Opera browsers support it as –o-background-size. behavior This Microsoft-proposed CSS property is used to define the URL for a script providing DHTML behavior. It is similar in purpose and function to the CSS3 binding property. Syntax behavior: url(default behavior name or URL of behavior) Microsoft has implemented a number of default behaviors. These are accessible by specifying the url as #default#behaviorname, such as behavior:url(#default# clientCaps);. Once these behaviors are associated with an element, additional properties will be available to that element based on the default behavior used. Table 6-7 shows a summary of the common default behaviors supported by Internet Explorer browsers.
Đồng bộ tài khoản