Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P2

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

Thêm vào BST

Báo xấu

90
lượt xem 7
download

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

Tham khảo tài liệu 'creating applications with mozilla-chapter 4. css in mozilla applications-p2', 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ủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P2

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 element or a 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 ancestor toolbar.primary descendent { menutitem#F { Descendent attribute: border: 1px; value; } }
Selector Syntax Example menu#file > parent > child { menuitem { attribute: Parent-Child font-weight: value; bold; } } elBefore + menuitem#file + elAfter { menuitem#edit { Precedence attribute: background- value; 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 Defines the space between the element's border and the content in the element. padding td {padding- left: .25in;} td {padding- left: .0125in;} Defines the space around elements. margin td {margin-left: .25in;} Defines the border itself; it can control the thickness, color, style, and other aspects of an border 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 #abdiv { position: absolute; top: 20px; left: 70px; background-color: lightblue;
Example Display } #regdiv { background-color: lightblue; } other div abdiv 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- Specifies that the element should appear, as much as possible, appearan as an operating-system native. ce 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: -moz- opacity .op-butt { -moz-opacity: 50%; } The property for binding XBL to XUL. The value of -moz- binding is a URL pointing to the section in an XML -moz- bindings file where the XBL is defined: binding new-widget { -moz-binding:
Property Description chrome://xfly/bindings/extras.xml#super- button; } -moz- border- radius, -moz- border- radius- bottomle ft, Puts rounded corners on regular borders. The degree of -moz- rounding depends on the number of pixels you assign. For border- example, if you set this property to 2px, you get a slightly radius- rounded border, but if you set it to 8px, you get a very round bottomri border. ght, -moz- border- radius- topleft, -moz- border- radius-
Property Description topright -moz- border- colors, -moz- border- colors- bottom, -moz- border- colors- Sets the border colors on the various sides of an element. left, -moz- border- colors- right, -moz- border- colors- top -moz- Indicates whether the given element can have focus. Possible user- values are normal and ignore.
Property Description focus -moz- Indicates whether the given element can be selected. Possible user- values are none and normal. select 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, to s6 to pick up the -moz- embarrassed smiley image, and so on. smiley See 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. The -moz- following CSS style definition specifies the top- and leftmost image- 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 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. -moz- box- Sets the direction of a box's child elements. Possible values are directio normal and reverse. n -moz- Sets the flexibility of an element relative to its siblings. The box-flex value is an integer.
Property Description -moz- box- 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 "View Source" menu item to the top of the menu by demoting the other two: #q { -moz-box-ordinal: 0; } -moz- box- ordinal 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 -moz- Sets the orientation of a container element. The value can be box- either horizontal or vertical. orient -moz- Packs 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 an image to reflect different states -- as when a second image is used to give a button a pushed-down look as it is clicked -- to create dynamism and provide feedback to the user. Example 4-4 shows the 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 from the first, so it implicitly includes the arrow.gif as a foreground image. The second style definition says that when the XUL button of class regular is active, the image button_pushed.gif is used in place of regbutton.gif for the background. Example 4-4 also illustrates the two common stylesheet properties that reference images: list-style-image and background-image. The list-style-image property specifies an image to go in the foreground of the selector; the background-image property specifies a separate image for the background. The availability of these two properties 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 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).