Thông tin tài liệu
Chapter 4. CSS in Mozilla Applications-P2 4.2.2.6. Pseudoclass selectors Another feature of CSS-2 that Mozilla makes extensive use of is the pseudoclass. In CSS, pseudoclasses are used to represent different states for elements that are manipulated by the user, such as buttons. The states -- represented by pseudoclasses such as active, focus, and hover -- change when the user interacts with an element. The pseudoclasses actually correspond to events on the interface elements. The : character is used to add these pseudoclasses in the CSS notation: #forwardButton:hover { list-style-image : url("chrome://navigator/skin/forward-hover.gif"); } The pseudoclass is often appended to another style. Since specific CSS style rules inherit from more general rules (see the section Section 4.3.1 later in this chapter for more information about this inheritance), the example above picks up any styles defined for the button with the id of forwardButton (and any class-based information, as well as the basic CSS for a button), but substitutes whatever image is used with this special GIF that represents a button being moused or hovered over. In Mozilla's Modern skin, the pseudoclasses work collectively to give buttons their appearance and behavior. Each of the following button images in Figure 4-3 is associated with a different pseudoclass (or attribute, as we discuss in the next section). As soon as the pseudoclass is changed by user interaction (e.g., the user hovers the mouse over the button), the state changes and the effect is one of seamless transition. Figure 4-3. The different states for buttons in the Modern theme 4.2.2.7. Element relation selectors Contextual subgroups -- elements appearing within other elements, such as italicized text within a <p> element or a <body> in HTML -- can be grouped in CSS, but this is an extremely inefficient way to style XUL. CSS2 also provides ways to group elements for styling based on their relationship in the object model. Table 4-1 lists these relational selectors. Table 4-1. Relational selectors Selector Syntax Example Descendent ancestor descendent { attribute: value; } toolbar.primary menutitem#F { border: 1px; } Selector Syntax Example Parent-Child parent > child { attribute: value; } menu#file > menuitem { font-weight: bold; } Precedence elBefore + elAfter { attribute: value; } menuitem#file + menuitem#edit { background- color: black; } In the descendent example in Table 4-1, the "F" menuitem has a border only when it appears within the toolbar whose class is given as "primary." In the parent-child example, all menu items in a menu with the id "file" are made bold. Using +, the precedence selector says that the "edit" menu should have a black background only when it comes after the "file" menu. You can use these element relation selectors to create longer descensions (e.g., toolbar.primary > menu#file > menuitem#new), but remember that the processing gets more expensive with each new level, and that the descendent operation is particularly processor-intensive. 4.2.2.8. The !important keyword As you might imagine, when you have a technology with such strong notions of precedence as Cascading Style Sheets (the ID-based style trumps the class-based style, inline style attributes trump those loaded from an external stylesheet, etc.), you may need to identify and set aside certain styles as the most important, regardless of where they are found in the cascade. This is the role played by the !important keyword. Sitting to the right of a style value, it specifies that style rule should take precedence over all of its competitors and that it should be applied all the time. Example 4-3 demonstrates how no borders are rendered on treecells of the class treecell-editor because of the !important keyword. Example 4-3. !important keyword in CSS .treecell-editor, .treecell-editor > box { margin: 0px !important; padding: 0px !important; } .treecell-editor { border: 0px !important; } You can search for the !important keyword in the LXR Mozilla source code tool and see its use in the Mozilla CSS. 4.2.2.9. The inherits value CSS uses inheritance all over the place. Inheritance is implicit in the way style rules are applied, stylesheets are organized in the chrome, and skins borrow from one another in Mozilla. However, a special CSS value indicates that the selector explicitly inherits its value from the parent element. When a CSS property has a value of inherit, that property's real value is pulled from the parent element: .child { color: darkblue; height: inherit; background-color: inherit; } This block specifies a dark blue color for the font, but the values of the other two properties are inherited from the parent. In many cases, this has the same effect as not specifying any value at all for the child and letting the style rules above the current one in the document inheritance chain cascade down. However, not all style rules are inherited. Properties such as !important, left, and height are not inherited automatically by child elements, so you must use the inherit keyword to pick them up. 4.2.2.10. Box layout properties in CSS People sometimes get confused about the various element spacing properties in CSS, such as border, padding, and margin. Though they work together a lot and often affect or overlap one another, these properties specify different things, as Table 4-2 shows. Table 4-2. CSS spacing and layout properties Property group Description Display padding Defines the space between the element's border and the content in the element. td {padding- left: .25in;} td {padding- left: .0125in;} margin Defines the space around elements. td {margin-left: .25in;} border Defines the border itself; it can control the thickness, color, style, and other aspects of an element's border. td {border- style: inset;} td {border- color: blue;} Property group Description Display td {border-left- width: 15px;} 4.2.2.11. The position property position is a special CSS property that specifies whether the given selector uses absolute or relative positioning. Unless you set the position property to absolute, you cannot use the related top and left properties to set the position of the current selector within its parent, as the example in Table 4-3 demonstrates. The top and left properties, when activated by the absolute position, specify the amount of distance from the top and left of the document, respectively. You can also set position to fixed to make it stay in one place as other content or UI is scrolled or moved. Table 4-3. The position property Example Display <style> #abdiv { position: absolute; top: 20px; left: 70px; background-color: lightblue; Example Display } #regdiv { background-color: lightblue; } </style> <div id="regdiv">other div</div> <div id="abdiv">abdiv</div> 4.2.3. Special Mozilla Extensions Mozilla skins extend upon the CSS standards in just a few notable ways. These Mozilla CSS extensions take the form of special selectors and properties with the special -moz- prefix, indicating that they are not part of the actual CSS specifications. You can find a complete list of these CSS keywords by searching for the file nsCSSKeyWordList.h in LXR. Generally, these extensions are used to define CSS style and color values that are hardcoded into the C++ code and available for reuse in particular places in the Mozilla themes. You can use a few -moz- extensions, such as properties or special values or even, in some cases, style-related attributes in the XUL (e.g., span[-moz-smiley="s1"], which grabs span elements in the HTML editor whose -moz-smiley attribute is set to s1 and styles them accordingly). Actually, you can use any value in that CSS keyword list. Trial and error or a look in the C++ code will reveal what these values are. The values, like -moz-fieldtext and -moz-mac-menushadow, usually refer to actual color values. A list of some Mozilla CSS extensions appears in Table 4-4 . Table 4-4. Mozilla CSS extensions Property Description -moz- appearan ce Specifies that the element should appear, as much as possible, as an operating-system native. -moz- opacity Controls the opacity of any styleable element with a percentage value. The following example style rule creates a class of buttons that are only half visible above their backgrounds: .op-butt { -moz-opacity: 50%; } -moz- binding The property for binding XBL to XUL. The value of -moz- binding is a URL pointing to the section in an XML bindings file where the XBL is defined: new-widget { -moz-binding: Property Description chrome://xfly/bindings/extras.xml#super- button; } -moz- border- radius, -moz- border- radius- bottomle ft, -moz- border- radius- bottomri ght, -moz- border- radius- topleft, -moz- border- radius- Puts rounded corners on regular borders. The degree of rounding depends on the number of pixels you assign. For example, if you set this property to 2px, you get a slightly rounded border, but if you set it to 8px, you get a very round border. [...]... the child elements of a container at the start, box-pack center, or end 4.2 .4 Referencing Images in CSS Another basic function of the CSS in any Mozilla skin is to incorporate images into the user interface A Mozilla skin can contain literally thousands of images, which are all referenced from particular style statements in the CSS It's common for a single element to point to different versions of... allows you to fine-tuning the images used to style the UI, as in this example, where the arrow icon is preserved and the wider, underlying button is swapped out In fact, the navigation buttons in the Modern skin are created by using both properties In this case, the background is the basic round disk as seen in Figure 4-4, defined in the toolbarbutton-1 class in communicator\skin\button .css, and the... skins, these image sheets are found only in the Modern skin They are gradually making their way into the skins; as of this writing, there are three or four image sheets in the Modern skin each corresponding to an area, toolbar, or set of buttons in the browser -moz- Sets the alignment for a XUL element from CSS Possible box- values are start, center, end, baseline, and align stretch -mozbox- Sets the... following source file for the values that can be set for this special property: http://lxr .mozilla. org/seamonkey/source/editor/ui/composer/co ntent/EditorContent .css# 77 This was added to optimize the way image resources are used in the Mozilla skins The value of the -moz-image region is a set of coordinates that designate an area within an "image sheet" that should be used as an icon in the user interface... following two style statements handle the regular and active or depressed states, respectively Example 4-4 Image in CSS button.regular { list-style-image: url(chrome://global/skin/arrow.gif); background-image: url(chrome://global/skin/regbutton.gif); } button.regular:active { background-image: url(chrome://global/skin/button_pushed.gif); } In Example 4-4, the second of the two definitions inherits... menu by demoting the other two: #q { -moz-box-ordinal: 0; } -mozboxordinal You can also give elements the same ordinal value in CSS and group them, making sure they are not split by new, overlaid items Property Description -mozSets the orientation of a container element... -mozimage- following CSS style definition specifies the top- and leftmost button in the btn1.gif image sheet used in Figure 4-3 to use region as the default icon for the Back navigation button: toolbarbutton-1 { list-style-image: url("chrome://navigator/skin/icons/btn1.gi Property Description f"); min-width: 0px; } #back-button { -moz-image-region: rect(0 41px 38px 0); } Of the two default skins, these image... -mozbordercolorstop -moz- Indicates whether the given element can have focus Possible user- values are normal and ignore Property Description focus -mozIndicates whether the given element can be selected Possible userselect values are none and normal This is typically given as an attribute to the span element in the HTML in a composer window and can be set to a value such as s5 to pick up the laughing smiley image,... of an element relative to its siblings The box-flex value is an integer Property Description -mozbox- Specifies that a group of elements have the same flex The flexgrou value is an integer p Specifies the order of an element relative to its peers in a container By default, the value of this property is set to 1 When you set a new value, you can change the order, as in this example, which promotes the... 4-4, defined in the toolbarbutton-1 class in communicator\skin\button .css, and the list-style-image is the arrow portion of the button, defined in the button ID and sliced out of a button image sheet with the special -moz-image-region property (see Section 4.2 .3 later in this chapter for a description of image sheets) . 4. 2 .4. Referencing Images in CSS Another basic function of the CSS in any Mozilla skin is to incorporate images into the user interface. A Mozilla skin. binding The property for binding XBL to XUL. The value of -moz- binding is a URL pointing to the section in an XML bindings file where the XBL is defined:
Ngày đăng: 28/10/2013, 15:15
Xem thêm: Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P2, Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P2
