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
Trang 1Chapter 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
Trang 2discuss 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; }
Trang 3Selector 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
Trang 4As 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
Trang 5CSS 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
Trang 6Property 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;}
Trang 7Property 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;
Trang 8Example 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
Trang 9them 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:
Trang 10
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
Trang 11Property Description
topright
-moz-
border-colors,
-moz-
border-
colors-bottom,
-moz-
border-
colors-left,
-moz-
border-
colors-right,
-moz-
border-
colors-top
Sets the border colors on the various sides of an element
-moz-
user-Indicates whether the given element can have focus Possible values are normal and ignore
Trang 12Property Description
focus
-moz-
user-select
Indicates whether the given element can be selected Possible values are none and normal
-moz-smiley
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 embarrassed smiley image, and so on
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
-moz-
image-region
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 following CSS style definition specifies the top- and leftmost button in the btn1.gif image sheet used in Figure 4-3 to use
as the default icon for the Back navigation button:
.toolbarbutton-1 { list-style-image:
url("chrome://navigator/skin/icons/btn1.gi
Trang 13Property 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-
box-align
Sets the alignment for a XUL element from CSS Possible values are start, center, end, baseline, and stretch
-moz-
box-directio
n
Sets the direction of a box's child elements Possible values are normal and reverse
-moz-box-flex
Sets the flexibility of an element relative to its siblings The value is an integer
Trang 14Property Description
-moz-
box-flexgrou
p
Specifies that a group of elements have the same flex The value is an integer
-moz-
box-ordinal
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:
<style>
#q { -moz-box-ordinal: 0; }
</style>
<menu>
<menuitem id="e" label="e" />
<menuitem id="v" label="v" />
<menuitem id="q" label="q" />
</menu>
</window>
You can also give elements the same ordinal value in CSS and group them, making sure they are not split by new, overlaid items
Trang 15Property Description
-moz-
box-orient
Sets the orientation of a container element The value can be either horizontal or vertical
-moz-box-pack
Packs the child elements of a container at the start, 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
Trang 16{
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)