Annotation of books/www/chapters/ch04.html, revision 1.19

1.9       petejc      1:     <link rel="prev" href="http://books.mozdev.org/chapters/ch03.html" />
                      2:     <link rel="next" href="http://books.mozdev.org/chapters/ch05.html" />
                      3: 
1.8       petejc      4:     <style type="text/css">
                      5:       div.c13 {font-weight: bold; text-align: center}
                      6:       div.c12 {text-align: center}
                      7:     </style>
                      8: 
                      9:     <h2>Chapter 4</h2>
                     10:     <h1><a name="77060"></a> CSS in Mozilla Applications</h1>
                     11:     <p>This chapter describes how Cascading Style Sheets (CSS) are
                     12:     used to create the look and feel of a Mozilla application's
                     13:     interface. Although XUL has a central role in creating a
                     14:     structure for an application's interface, defining widgets and
                     15:     their functionality, and creating the basic application code,
                     16:     it is CSS that creates the visible portion of an application.
                     17:     XUL and CSS often work so closely together that they seem
                     18:     inseparable, but XUL is generally responsible for the structure
                     19:     of an application's interface and CSS is responsible for the
                     20:     application's presentation. As described in the next sections,
                     21:     it is not until an XPFE application has been "skinned," or
                     22:     styled with stylesheets, that it has a usable interface.</p>
                     23:     <p>The first few sections in this chapter provide basic
                     24:     information about using CSS and some examples of how the
                     25:     Mozilla interface is created. They include reference material
                     26:     you can refer back to as you learn more. Starting with the
                     27:     "Creating New Skins" section, you can dive in, have some fun
                     28:     with CSS, and begin to create your own skins. The xFly package
                     29:     example created earlier in the book shows how to add custom
                     30:     styles to the XUL files you created in Chapters <a href=
                     31:     "ch02.html#68959">2</a> and <a href=
                     32:     "ch03.html#32764">3</a>.</p>
                     33:     <h2><a name="77061"></a> Interface Basics</h2>
                     34:     <p>Before describing the 
                     35:     <!--INDEX interfaces:(see also user interface)[interfaces:zz(see also user interface)] -->
                     36:     <!--INDEX user interface:overview;UI (see user interface) -->
                     37:     practice of using 
                     38:     <!--INDEX CSS (Cascading Style Sheets):user interfaces --> CSS,
                     39:     let's get some basic theory out of the way. When we talk about
                     40:     the interface of an application, we mean all of the parts of
                     41:     the application that are displayed and allow the user to
                     42:     interact. Buttons, windows, pages, menus, sliders, and
                     43:     descriptive text are all parts of the interface. In Mozilla,
                     44:     XUL usually defines the basic structure of the interface and
                     45:     CSS defines its presentation. These two aspects of the
                     46:     interface-the way it's organized and the way it's presented-are
                     47:     kept as distinct from one another as possible in Mozilla and in
                     48:     many good programming environments. Indeed, this separation is
                     49:     what gives rise to the concept of <!--INDEX skins --> 
                     50:     <!--INDEX user interface:skins --> skins-coherent, separate,
                     51:     and typically swappable "looks" for the same underlying
                     52:     structure. Mozilla uses Cascading Style Sheets, a quickly
                     53:     evolving series of standards already common in HTML web page
                     54:     presentation, to define the skin of XUL application
                     55:     interfaces.</p>
                     56:     <h3><a name="77062"></a> Skins Versus Themes</h3>
                     57:     <p>When we <!--INDEX skins:compared to themes --> 
                     58:     <!--INDEX themes:compared to skins --> 
                     59:     <!--INDEX user interface:skins:compared to themes --> say
                     60:     <i>skin</i> in this 
                     61:     <!--INDEX CSS (Cascading Style Sheets):skins:themes and -->
                     62:     chapter, we refer to the look of the interface-to the CSS
                     63:     styles and its relationship to the XUL structure underneath.
                     64:     The term <i>theme</i> is also used often in conjunction with
                     65:     interfaces and skins. These words are used interchangeably,
                     66:     although there are some differences in their meaning.</p>
                     67:     <p>A single, overall theme is made up of many skins. The
                     68:     Navigator component's skin described in <i>
                     69:     <!--INDEX navigator.css --> navigator.css</i>, for example, is
                     70:     part of the overall Modern theme of Mozilla. Following this
                     71:     definition, the Modern theme may be made up of as many as 20 or
                     72:     30 different skins corresponding to the major components and
                     73:     major UI features within those components. In addition to
                     74:     <i>navigator.css</i>, for example, there are stylesheets for
                     75:     <i>toolbar.css</i>, <i>linkToolbar.css</i>, and others, which
                     76:     collectively make up the Navigator skin. The CSS files may also
                     77:     be described as skins, as when this book instructs you to "open
                     78:     the <i>messenger.css</i> skin in a text editor." All skins of a
                     79:     particular kind or look organized together comprise a single
                     80:     theme.</p>
                     81:     <p>Themes are also often used to refer to the different looks
                     82:     that you can download and install for Mozilla and Netscape 6.x
                     83:     and 7.x. (To get new themes for the Mozilla browser go to View
                     84:     &gt; Apply Themes &gt; Get New Themes.) Any application created
                     85:     with Mozilla, though, can have different themes that users can
                     86:     install and select to customize the look of that
                     87:     application.</p>
                     88:     <p>This distinction between a skin and a theme is not
                     89:     enforced-or even acknowledged-by many people in the Mozilla
                     90:     community, so you will see a profligate use of these terms in
                     91:     practice. Try to remain calm. The terminology differences
                     92:     aren't important. What is important is that you can create one
                     93:     (or many) looks for your application using CSS. This chapter
                     94:     will show you how.</p>
                     95:     <h3><a name="77063"></a> Limitations of a Skin</h3>
                     96:     <p>Skins are used <!--INDEX skins:limitations of --> 
                     97:     <!--INDEX user interface:skins:limitations of --> to style the
                     98:     structure of an interface that has been created with XUL. Once
                     99:     the interface has been defined in XUL, that structure is set
                    100:     and CSS can be used to change how that structure will look, but
                    101:     can't be used to change the structure itself. In practice, this
                    102:     means that you can use CSS to change the way a button
                    103:     looks--but to move a button from one toolbar to another within
                    104:     the interface, you need to edit your XUL code. Skins generally
                    105:     affect the usability or appearance, but not the functionality
                    106:     of an interface, though the use of XBL in CSS is an exciting
                    107:     exception to this rule, as you will see.</p>
                    108:     <p>This separation of the style and the content of an
                    109:     application means that there are a number of things you can't
                    110:     change in an application using CSS. Here are some examples of
                    111:     the kinds of interface elements that cannot be manipulated with
                    112:     a skin.</p>
                    113:     <ul>
                    114:       <li>The position and contents of menus and menu items and the
                    115:       functionality they trigger.</li>
                    116:       <li>The overall layout and functionality of buttons.</li>
                    117:       <li>The general layout of the application (although you can
                    118:       use CSS to hide sections of an interface).</li>
                    119:     </ul>
                    120:     <p>While the underlying structure of menus and buttons cannot
                    121:     be changed in the process of editing a theme, you can, of
                    122:     course, change the appearance of things quite radically. In
                    123:     fact, you can change whether an element-say, an item in a
                    124:     menu-has any visibility using the <tt>visibility</tt> or
                    125:     <tt>display</tt> CSS properties. One of the Mozilla extensions
                    126:     to CSS, <tt>-moz-box-ordinal</tt>, lets you set the order in
                    127:     which the elements in a container are displayed. We describe
                    128:     these extensions and others later in this chapter in the
                    129:     section <a href="#77083">"Special Mozilla Extensions</a>."</p>
                    130:     <h3><a name="77064"></a> Theme Abstraction (or Building Good
                    131:     Skins)</h3>
                    132:     <p>One of the most 
                    133:     <!--INDEX themes:creating, design considerations --> 
                    134:     <!--INDEX skins:creating:design considerations --> important 
                    135:     <!--INDEX design issues, user interfaces:themes and skins -->
                    136:     parts of a well-written theme is that it be as separate as
                    137:     possible from the actual structure of the interface-that it be
                    138:     abstracted as a layer so it can be switched or updated without
                    139:     affecting or forcing you to edit the underlying XUL. Keeping an
                    140:     application's style separate is not mandatory, however, and you
                    141:     can have all presentation code in your XUL files, although we
                    142:     explain why this isn't a good idea.</p>
                    143:     <p>As we have tried to stress, at the most basic level,
                    144:     abstraction means that the XUL should describe the structure
                    145:     and the CSS should describe the presentation, or look, of the
                    146:     interface. In reality, of course, the presentation layer is
                    147:     itself divided into different layers, where lower, more basic
                    148:     files like <i>xul.css</i> describe the look and feel of common
                    149:     UI elements such as buttons and menus, and higher-level CSS
                    150:     files consistently describe the layout and stylistic details of
                    151:     a component. When working on a theme or skin for your
                    152:     application, you should use as few inline style attributes as
                    153:     you can, as well as ensure that your themes are organized into
                    154:     component subdirectories and that one skin does not depend on
                    155:     another that is farther down in the "skin hierarchy." (This is
                    156:     discussed later in this chapter in the <a href="#77087">"CSS
                    157:     and Skin Hierarchies</a>" section.).</p>
                    158:     <blockquote>
                    159:       <hr>
                    160:       <b>Planning Your Interface</b> 
                    161:       <p>Before you begin 
                    162:       <!--INDEX user interface:planning considerations --> using
                    163:       CSS and images to style your XUL application code, it's
                    164:       important to have a sense of where your interface is heading.
                    165:       Begin by asking yourself some questions. What should the
                    166:       buttons look like? Do you want to give users the ability to
                    167:       switch skins in your application, as they can in the Mozilla
                    168:       browser? How will your application be affected when the user
                    169:       switches skins in Mozilla? What, if any, are the differences
                    170:       on the different platforms on which you expect users to run
                    171:       your application?</p>
                    172:       <p>Although creating interfaces using XUL and CSS is fun and
                    173:       fast, it's best to do a mockup of your interface before you
                    174:       begin so you know where you are heading (both Adobe Photoshop
                    175:       and the GIMP are excellent tools for creating sophisticated
                    176:       images and mock-ups). The creators of the Modern and Classic
                    177:       themes do lots of visualization of the themes in image
                    178:       editing software and go through several iterations of testing
                    179:       and feedback.</p>
                    180:       <p>One of the great advantages of using such an approach is
                    181:       that you will undoubtedly develop images and icons for your
                    182:       interface anyway, and you can slice and dice your mockup to
                    183:       get, for example, the icons for your buttons, the background
                    184:       images, and other real parts of the interface. You may find
                    185:       that you can actually use most of the mockup in your actual
                    186:       interface! See <a href="#77084">"Referencing Images in
                    187:       CSS</a>" later in this chapter for an explanation of how this
                    188:       image slicing can work in an advanced way when you have
                    189:       XBL-based widgets that use GIF images that are stitched
                    190:       together.</p>
                    191:       <p>Because the overall theme of an application will most
                    192:       likely consist of a large number of individual graphic
                    193:       elements and widgets, pay special attention to considerations
                    194:       of color palette, web-optimized file formats such as
                    195:       <i>.gif</i> and <i>.png</i>, and file size to make sure your
                    196:       interface looks good and loads quickly.</p>
                    197:       <hr>
                    198:     </blockquote>
                    199:     <h3><a name="77065"></a> Cross-Platform 
                    200:     <!--INDEX STARTRANGE==Cross-Platform:interface considerations -->
                    201:     Interface Considerations</h3>
                    202:     <p>Often in 
                    203:     <!--INDEX STARTRANGE==user interface:design issues, cross-platform considerations -->
                    204:     <!--INDEX STARTRANGE==design issues, user interfaces:cross-platform considerations -->
                    205:     traditional interface development, you try to make things look
                    206:     and work right on a single platform. Using something like MFC
                    207:     on Windows, for example, you can drop in the widget it provides
                    208:     and be reasonably assured that the interface will look like a
                    209:     Windows application interface whenever and wherever your
                    210:     application is run.</p>
                    211:     <p>When you do cross-platform 
                    212:     <!--INDEX Cross-Platform:user interface development --> user
                    213:     interface development, you need to be aware of how your
                    214:     application will look on the platforms on which it will be
                    215:     used. One common difference, for example, is the layout of
                    216:     scrollbars in Windows applications and in Macintosh
                    217:     applications. On Windows, scrollbars typically have buttons at
                    218:     either end that advance the scrollbar button itself. On the
                    219:     classic Macintosh, the scrollbars are configured so that the
                    220:     buttons are clustered together. The difference is subtle, but
                    221:     it is a source of huge contention in the Mozilla world. <a
                    222:     href="#77002">Figure 4-1</a> shows the difference between the
                    223:     scrollbars on the two platforms. (This figure also shows a
                    224:     small notch in the lower righthand corner that is part of all
                    225:     classic Macintosh application windows and that shifts part of
                    226:     the Mozilla interface over to the left.)</p>
                    227:     <div class="c12">
                    228:       <img src="foo.gif">
                    229:     </div>
                    230:     <p><i>Figure 4-1: <a name="77002"></a></i> <i>Scrollbars on
                    231:     Windows and on the Macintosh</i></p>
                    232:     <p>When you use the <!--INDEX Cross-Platform:XPFE --> 
                    233:     <!--INDEX XPFE:user interface cross-platform considerations -->
                    234:     XPFE, you use a single code base to deploy on any number of
                    235:     different platforms. In the Mozilla code, there are some tricks
                    236:     for making things work differently on different platforms. Like
                    237:     scrollbars, the layout of buttons in dialogs is another
                    238:     important area of platform difference. The layout code for the
                    239:     Open Web Location dialog, for example, is defined in
                    240:     platform-specific files, and slightly different dialog layouts
                    241:     are deployed transparently to users (depending on their
                    242:     platform). <a href="#77004">Figure 4-2</a> illustrates the
                    243:     differing layouts of this dialog on different platforms (note
                    244:     the different positions of the Open and Cancel buttons in the
                    245:     two images).</p>
                    246:     <div class="c12">
                    247:       <img src="foo.gif">
                    248:     </div>
                    249:     <p><i>Figure 4-2: <a name="77004"></a></i> <i>The Open Web
                    250:     Location dialog in Windows and the Macintosh</i></p>
                    251:     <p>If you look in the global resources area of the <i>xpfe</i>
                    252:     in the source code (using a tool like Mozilla's LXR), you can
                    253:     see the platform subdirectories where the buttons in the
                    254:     dialogs are arranged with <tt>&lt;spacer /&gt;</tt> 
                    255:     <!--INDEX spacer element, XUL:user interface cross-platform considerations -->
                    256:     elements and different alignments:</p>
                    257: <pre>
                    258: mozilla/xpfe/global/resources/content/
1.1       david     259: mac/
                    260: platformDialogOverlay.xul
                    261: os2/
                    262: platformDialogOverlay.xul
                    263: unix
                    264: platformDialogOverlay.xul
                    265: win
1.8       petejc    266: platformDialogOverlay.xul
                    267: </pre>
                    268:     <p>These platform-specific files allow the application
                    269:     developer to write XUL that works the same way on every
                    270:     platform, but preserves subtler aspects of an interface that
                    271:     users expect from their 
                    272:     <!--INDEX ENDRANGE==user interface:design issues, cross-platform considerations -->
                    273:     <!--INDEX ENDRANGE==design issues, user interfaces:cross-platform considerations -->
                    274:     <!--INDEX ENDRANGE==Cross-Platform:interface considerations -->
                    275:     platform.</p>
                    276:     <h2><a name="77066"></a> Introduction to CSS in Mozilla</h2>
                    277:     <p>Now that you have absorbed some of the most important basic
                    278:     aspects of interface design, we can begin to discuss how
                    279:     Mozilla uses CSS and images to make actual interfaces out of
                    280:     the structure defined in the XUL files. Though XUL contains the
                    281:     widgets and structure upon which the interface rests, it is not
                    282:     until at least some basic skin information has been loaded into
                    283:     the XUL that the interface becomes visible and editable by the
                    284:     user. In addition to this, CSS binds XBL widgets to the basic
                    285:     structure of the XUL code, allowing extended content to appear
                    286:     in your document. For more information about XBL, see <a href=
                    287:     "ch07.html#70326">Chapter 7</a>.</p>
                    288:     <h3><a name="77067"></a> Basic XUL + CSS Interaction</h3>
                    289:     <p>XUL and CSS interact at two basic levels in Mozilla. At the
                    290:     file level, XUL picks up CSS information by explicitly loading
                    291:     CSS stylesheets at runtime. At the element level, selectors
                    292:     bind CSS rules to specific XUL elements or groups of elements.
                    293:     For an XUL element to pick up a style defined in a CSS file,
                    294:     the XUL file must load the CSS file, and an element or group of
                    295:     elements in the XUL must match a selector in the CSS rule. We
                    296:     discuss these basic levels of interaction in the following two
                    297:     sections.</p>
                    298:     <h4><a name="77068"></a> CSS and XUL file interaction</h4>
                    299:     <p>Like HTML, 
                    300:     <!--INDEX CSS (Cascading Style Sheets):XUL:file interaction -->
                    301:     <!--INDEX XUL (XML-based User-interface Language):CSS:file interaction -->
                    302:     XUL loads style information by including a specific processing
                    303:     instruction somewhere at the top of the file. There are various
                    304:     ways to apply style to HTML pages, including the common example
                    305:     below, in which a 
                    306:     <!--INDEX link element, loading stylesheets --> <tt>&lt;link
                    307:     /&gt;</tt> element with a URI loads an external stylesheet that
                    308:     holds the style information for the web page.</p>
                    309: <pre>
                    310: &lt;link rel="stylesheet" href="../style.css" type="text/css"&gt;
                    311: </pre>
                    312:     <p>In XUL, however, you must use one or more special processing
                    313:     instructions at the top of the XUL file to load the 
                    314:     <!--INDEX stylesheets:loading --> 
                    315:     <!--INDEX CSS (Cascading Style Sheets):(see also stylesheets)[CSS (Cascading Style Sheets):zz(see also style sheets)] -->
                    316:     CSS stylesheet information, or skin, into the XUL.</p>
                    317: <pre>
                    318: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css"?&gt;
                    319: </pre>
                    320:     <p>Note that the XUL 
                    321:     <!--INDEX URLs (Universal Resource Locators):stylesheet loading -->
                    322:     stylesheet loading supports the use of <tt>http://</tt> and
                    323:     <tt>file://</tt> type URLs, but most often, the 
                    324:     <!--INDEX chrome:URLs, stylesheet loading -->
                    325:     <tt>chrome://</tt> type URL is used, which points to files that
                    326:     are available in the application's chrome subdirectory and that
                    327:     are registered with the chrome registry. The example above uses
                    328:     a special feature of this chrome type URL, which resolves
                    329:     directory pointers to files within those directories that have
                    330:     the same name as the directory itself (thus serving as a
                    331:     shorthand for main theme stylesheets). The chrome URL
                    332:     <tt>chrome://global/skin</tt>, in other words, loads a
                    333:     stylesheet found at
                    334:     <tt>chrome://modern.jar:/global/skin/global.css</tt>.</p>
                    335:     <blockquote>
                    336:       <div class="c13">
                    337:         NOTE
                    338:       </div>
                    339:       <p>XUL also supports the <!--INDEX inline styles --> 
                    340:       <!--INDEX stylesheets:inline styles --> use of <i>inline
                    341:       styles</i>, which is style information that is applied to
                    342:       individual elements with a style attribute. However, this
                    343:       practice is generally frowned upon, since it overrides the
                    344:       skin information and makes it very difficult for new skins to
                    345:       be applied correctly.</p>
                    346:     </blockquote>
                    347:     <p>Actually, the chrome URL in the example does more than this.
                    348:     Another important function of the chrome registry is that it
                    349:     keeps track of which packages you have installed, which skin
                    350:     you have applied to your application, and resolves URLs like
                    351:     <tt>chrome://global/skin</tt> into the global skin information
                    352:     for the currently selected skin. If you apply the modern skin,
                    353:     for example, then this URL loads the global skin file from the
                    354:     <i>modern.jar</i>; if you apply the Classic skin, then the
                    355:     chrome URL actually resolves to
                    356:     <tt>chrome://classic.jar:/global/skin/global.css</tt> instead.
                    357:     This flexibility in the chrome registry abstracts the structure
                    358:     in the XUL files from the skin information and allows you to
                    359:     create and apply different skins.</p>
                    360:     <h4><a name="77069"></a> Applying style rules to XUL</h4>
                    361:     <p>In CSS, <!--INDEX CSS (Cascading Style Sheets):selectors -->
                    362:     <!--INDEX selectors, CSS --> <i>selector</i> 
                    363:     <!--INDEX CSS (Cascading Style Sheets):XUL:applying style rules -->
                    364:     <!--INDEX XUL (XML-based User-interface Language):CSS:applying style rules -->
                    365:     refers to the element or group of elements to which a style
                    366:     rule is bound-to the thing that is selected for styling. In
                    367:     some cases, the selector is an actual XUL element. The
                    368:     following style rule, for example, says that all XUL
                    369:     <tt>&lt;menu/&gt;</tt> elements in the XUL file(s) into which
                    370:     this CSS is loaded will have a red background color:</p>
                    371: <pre>
                    372: menu {
1.1       david     373: background-color: red;
1.8       petejc    374: }
                    375: </pre>
                    376:     <p>In this case, the element selector names an element (menu)
                    377:     directly: all elements of that type match and are styled with
                    378:     the rule. In the next few sections, we describe the main types
                    379:     of selectors and the style rules that can be applied to them.
                    380:     With a couple of notable exceptions (see <a href=
                    381:     "#77083">"Special Mozilla Extensions</a>" later in this
                    382:     chapter), the CSS you use with XUL is the same one you use for
                    383:     HTML elements.</p>
                    384:     <h4><a name="77070"></a> Inline styles</h4>
                    385:     <p>Another way to 
                    386:     <!--INDEX CSS (Cascading Style Sheets):XUL:inline styles --> 
                    387:     <!--INDEX XUL (XML-based User-interface Language):CSS:inline styles -->
                    388:     apply style to XUL elements is to use inline style rules. Use
                    389:     inline styles with caution. All XUL elements have a
                    390:     <tt>style</tt> attribute that can be used to define styles
                    391:     directly for that element. In the following example, the
                    392:     <tt>style</tt> attribute is used (in a common but somewhat
                    393:     deprecated manner) to hide the XUL element-to apply a style
                    394:     that suppresses rendering of the element (though it still takes
                    395:     up space in the UI):</p>
                    396: <pre>
                    397: &lt;menuitem id="e_src"
1.1       david     398: label="&amp;editsrc.label;"
1.8       petejc    399: style="visibility: none;" /&gt;
                    400: </pre>
                    401:     <p>When you use inline styles, the syntax does not include the
                    402:     brackets, but you can still add multiple style rules by using
                    403:     the semicolon. The item before the colon is the property, and
                    404:     the item after it is its value. The format of inline styles is
                    405:     as follows:</p>
                    406: <pre>
                    407: style="style attribute1: value[; style attribute2: value; etc...]"
                    408: </pre>
                    409:     <p>The reason why inline styles are frowned upon in XUL and
                    410:     skin development is that they can be extremely difficult to
                    411:     locate and work around when you design a new skin and want to
                    412:     change the appearance of an element that has an inline style.
                    413:     The style attribute takes precedence over styles applied from
                    414:     other sources-inline styles are the last rule in the cascade of
                    415:     style rules-so they cascade over styles defined in a skin and
                    416:     may "break" the overall look of that skin.</p>
                    417:     <p>Besides this problem, many tricks for which application
                    418:     developers use the inline style can be done using XUL
                    419:     attributes. It's very common to use the CSS attribute-value
                    420:     pairs display: <tt>none;</tt> or visibility: <tt>none;</tt> to
                    421:     hide elements in order to change what's available from the
                    422:     interface. However, smart XUL developers use the <tt>hidden or
                    423:     thecollapse</tt> attribute instead, thereby keeping structural
                    424:     matters as separate from style matters as possible.</p>
                    425:     <h3><a name="77071"></a> Stylesheet Syntax</h3>
                    426:     <p>Cascading Style Sheets 
                    427:     <!--INDEX STARTRANGE==style definitions --> 
                    428:     <!--INDEX STARTRANGE==CSS (Cascading Style Sheets):style definitions -->
                    429:     are the blueprints for Mozilla skins. In Cascading Style
                    430:     Sheets, style definitions take the following basic form:</p>
                    431: <pre>
                    432: element {
1.1       david     433: style attribute1: value;
                    434: style attribute2: value;
                    435: style attribute3: value;
1.8       petejc    436: }
                    437: </pre>
                    438:     <p>For example, the following definition makes all XUL menus
                    439:     appear with a one-pixel border, a light-blue background, and
                    440:     ten-point fonts:</p>
                    441: <pre>
                    442: menu {
1.1       david     443: border: 1px;
                    444: background-color: lightblue;
                    445: font-size: 10pt;
1.8       petejc    446: }
                    447: </pre>
                    448:     <p>This is an example of using the element itself-in this case,
                    449:     a "menu"-as a selector (the item to which the style definition
                    450:     is applied). In addition to the basic element selector and
                    451:     style rules, CSS provides the application of style information
                    452:     to classes of elements, element IDs, and elements with
                    453:     particular attributes or states. The following three sections
                    454:     demonstrate the basic format for these three common style
                    455:     selectors.</p>
                    456:     <h4><a name="77072"></a> The element selector</h4>
                    457:     <p>The <i>element</i> <i>selector</i> is 
                    458:     <!--INDEX element selectors, CSS --> 
                    459:     <!--INDEX CSS (Cascading Style Sheets):selectors:element --> 
                    460:     <!--INDEX selectors, CSS:element --> the most basic kind of
                    461:     selector. It is just the name of the element to be styled at
                    462:     the front of the style rule. In the previous example, the
                    463:     <tt>&lt;menuitem /&gt;</tt> element, defined in a XUL file that
                    464:     loads this style rule, will have a light blue background
                    465:     color:</p>
                    466: <pre>
                    467: element { attribute: value; }
                    468: menuitem  { background-color: lightblue; }
                    469: </pre>
                    470:     <h4><a name="77073"></a> The pseudoelement selector</h4>
                    471:     <p>The <i>pseudoelement</i> <i>selector</i> 
                    472:     <!--INDEX pseudoelement selectors, CSS --> 
                    473:     <!--INDEX CSS (Cascading Style Sheets):selectors:pseudoelement -->
                    474:     <!--INDEX selectors, CSS:pseudoelement --> selects a piece of
                    475:     an element for styling. While a selector like <tt>menuitem</tt>
                    476:     picks up all menu items in a given XUL document, a
                    477:     pseudoelement selector like <tt>menuitem:first-letter</tt>
                    478:     binds the rule's styles to only the first letter in a
                    479:     <tt>menuitem</tt> value.</p>
                    480: <pre>
                    481: menuitem:first-letter { text-decoration: underline; }
                    482: description:first-line { margin-left: .25in; }
                    483: </pre>
                    484:     <p>The first style rule above gives all menu items to which it
                    485:     applies the look of being <tt>accesskey</tt> enabled. The
                    486:     second creates an indentation in the first line of a XUL
                    487:     <tt>description</tt> element's text. Menu access keys let you
                    488:     open and choose items from a menu by using the underlined
                    489:     letters and modifiers (e.g., "F" and <tt>&lt;alt&gt;</tt> to
                    490:     open the File menu).</p>
                    491:     <h4><a name="77074"></a> The class selector</h4>
                    492:     <p>The <i>class selector</i> <!--INDEX class selectors, CSS -->
                    493:     <!--INDEX CSS (Cascading Style Sheets):selectors:class --> 
                    494:     <!--INDEX selectors, CSS:class --> applies the style rule to
                    495:     all XUL widgets of a given class. In the XUL files that define
                    496:     the structure of Netscape 7, the class is specified with the
                    497:     <tt>class</tt> attribute (e.g., <tt>&lt;menu
                    498:     class="baseline"&gt;</tt>) and in CSS with the dot
                    499:     notation:</p>
                    500: <pre>
                    501: element.class { attribute: value;}
                    502: menu.baseline {   border: 0px;   font-size: 9pt; }
                    503: </pre>
                    504:     <p>In this example, all menus with a XUL baseline class have no
                    505:     borders and a nine-point font size. Note that you can use the
                    506:     class without the preceding XUL element to skin all XUL
                    507:     elements with a given class. In <a href="#77030">Example
                    508:     4-1</a>, both the XUL box and the XUL menu pick up the style
                    509:     given in the "redbox" class style definition.</p>
                    510:     <p><i>Example 4-1: <a name="77030"></a></i> <i>Class selector
                    511:     in CSS</i></p>
                    512: <pre>
                    513:  .redbox {
1.1       david     514:    border: 2px solid red;
                    515:    font-size: 9pt;
                    516:  }
                    517:  &lt;box class="redbox"&gt;
                    518:      &lt;menu class="redbox"&gt;
                    519:      &lt;menu class="bluebox"&gt;
1.8       petejc    520:  &lt;/box&gt;
                    521: </pre>
                    522:     <h4><a name="77075"></a> The ID selector</h4>
                    523:     <p>The CSS <i>ID selector</i> 
                    524:     <!--INDEX CSS (Cascading Style Sheets):selectors:ID --> 
                    525:     <!--INDEX selectors, CSS:ID --> applies the style rule to a
                    526:     unique XUL element. As with <tt>class</tt>, the <tt>ID</tt> is
                    527:     specified in the XUL with an attribute (e.g., <tt>&lt;menu
                    528:     id="file_menu"&gt;</tt>) and in the CSS with the pound sign
                    529:     preceding the <tt>ID</tt> itself. In this example, the menu
                    530:     with an ID of <tt>edit</tt> has a red color:</p>
                    531: <pre>
                    532: element#id { attribute: value;}
                    533: menu#edit { color: red;}
                    534: </pre>
                    535:     <p>In the example above, both the element type and the element
                    536:     ID are given. You can also identify elements anonymously
                    537:     (though still uniquely) by using just the selector:</p>
                    538: <pre>
                    539: #whitey {
1.1       david     540: background-color: white;
                    541: margin: .25in;
1.8       petejc    542: }
                    543: </pre>
1.11      ian       544:     <p>In the case of IDs, these selectors are identical, since
1.8       petejc    545:     IDs need to be unique across the whole XUL file. When you use
                    546:     classes, however, the typeless style rule is a good way to
                    547:     apply your style information to a range of elements.</p>
                    548:     <h4><a name="77076"></a> The attribute selector</h4>
                    549:     <p>The <i>attribute selector</i> 
                    550:     <!--INDEX attribute selectors, CSS --> 
                    551:     <!--INDEX CSS (Cascading Style Sheets):selectors:attrribute -->
                    552:     <!--INDEX selectors, CSS:attribute --> allows you to style XUL
                    553:     elements with particular attributes or with attributes of a
                    554:     particular value. In <a href="#77032">Example 4-2</a>, all
                    555:     elements with a disabled attribute set to <tt>true</tt> will
                    556:     have a light-grey color.</p>
                    557:     <p><i>Example 4-2: <a name="77032"></a></i> <i>Attribute
                    558:     selector in CSS</i></p>
                    559: <pre>
1.14      ian       560:  element [attribute=value] { attribute: value; }
                    561:  element [attribute~=value] { attribute: value; }
                    562:  *[disabled="true"]
1.1       david     563:  {
                    564:    color: lightgrey;
                    565:  }
1.14      ian       566:  menu[value="File"] {
1.1       david     567:    font-weight: bold;
                    568:  }
1.8       petejc    569:  [id~="my"] { color: red; }
                    570: </pre>
                    571:     <p>Note that <a href="#77032">Example 4-2</a> uses the
                    572:     <tt>*</tt> character for selecting all elements. This
                    573:     "wildcard" selector can be combined with attribute and other
                    574:     selectors to make a powerful filter in your CSS stylesheets-but
                    575:     of course, in an example like <a href="#77032">Example 4-2</a>,
                    576:     it could be omitted and [disabled=true] would still apply to
                    577:     all elements with that attribute set to that value.</p>
                    578:     <p><a href="#77032">Example 4-2</a> also uses <tt>~=</tt> to
                    579:     match attributes that contain the given fragment. In this case,
                    580:     any elements that have an ID with the fragment "my" have text
                    581:     colored red, as when you want to see all your customized
                    582:     elements for debugging purposes.</p>
                    583:     <h4><a name="77077"></a> Pseudoclass selectors</h4>
                    584:     <p>Another <!--INDEX pseudoclass selectors, CSS --> 
                    585:     <!--INDEX CSS (Cascading Style Sheets):selectors:pseudoclass -->
                    586:     <!--INDEX selectors, CSS:pseudoclass --> feature of CSS-2 that
                    587:     Mozilla makes extensive use of is the <i>pseudoclass</i>. In
                    588:     CSS, pseudoclasses are used to represent different states for
                    589:     elements that are manipulated by the user, such as buttons. The
                    590:     states-represented by pseudoclasses such as <tt>active</tt>,
                    591:     <tt>focus</tt>, and <tt>hover-</tt>change when the user
                    592:     interacts with an element. The pseudoclasses actually
                    593:     correspond to events on the interface elements.</p>
                    594:     <p>The : character is used to add these <tt>pseudoclasses</tt>
                    595:     in the CSS notation:</p>
                    596: <pre>
                    597: #forwardButton:hover
1.1       david     598: {
                    599: list-style-image      : url("chrome://navigator/skin/forward-hover.gif");
1.8       petejc    600: }
                    601: </pre>
                    602:     <p>The pseudoclass is often appended to another style. Since
                    603:     specific CSS style rules inherit from more general rules (see
                    604:     the section <a href="#77087">"CSS and Skin Hierarchies</a>"
                    605:     later in this chapter for more information about this
                    606:     inheritance), the example above picks up any styles defined for
                    607:     the button with the <tt>id</tt> of <tt>forwardButton</tt> (and
                    608:     any class-based information, as well as the basic CSS for a
                    609:     button), but substitutes whatever image is used with this
                    610:     special GIF that represents a button being moused or hovered
                    611:     over.</p>
                    612:     <p>In Mozilla's Modern skin, the pseudoclasses work
                    613:     collectively to give buttons their appearance and behavior.
                    614:     Each of the following button images in <a href="#77006">Figure
                    615:     4-3</a> is associated with a different pseudoclass (or
                    616:     attribute, as we discuss in the next section). As soon as the
                    617:     pseudoclass is changed by user interaction (e.g., the user
                    618:     hovers the mouse over the button), the state changes and the
                    619:     effect is one of seamless transition.</p>
                    620:     <div class="c12">
                    621:       <img src="foo.gif">
                    622:     </div>
                    623:     <p><i>Figure 4-3: <a name="77006"></a></i> <i>The different
                    624:     states for buttons in the Modern theme</i></p>
                    625:     <h4><a name="77078"></a> Element relation selectors</h4>
                    626:     <p>Contextual <!--INDEX relational selectors, CSS --> 
                    627:     <!--INDEX CSS (Cascading Style Sheets):selectors:relational -->
                    628:     <!--INDEX selectors, CSS:relational --> subgroups-elements
                    629:     appearing within other elements, such as italicized text within
                    630:     a <tt>&lt;p&gt;</tt> element or a <tt>&lt;body&gt;</tt> in
                    631:     HTML-can be grouped in CSS, but this is an extremely
                    632:     inefficient way to style XUL. CSS2 also provides ways to group
                    633:     elements for styling based on their relationship in the object
                    634:     model. <a href="#77022">Table 4-1</a> lists these relational
                    635:     selectors.</p>
                    636:     <p><i>Table 4-1: <a name="77022"></a></i> <i>Relational
                    637:     selectors</i></p>
1.10      ian       638: <table width="100%" border="1">
                    639:   <tbody>
                    640: 
                    641:     <tr>
                    642:       <td><b>  Selector</b></td>
                    643:     <td><b>  Syntax</b></td>
                    644:     <td><b>  Example</b></td>
                    645: 
                    646:     </tr>
                    647:     <tr>
                    648: 
                    649:       <td>  Descendent</td>
                    650:     <td> ancestor descendent {                attribute: value;      }</td>
                    651:     <td> toolbar.primary menuitem#F {                border: 1px; }</td>
                    652: 
                    653:     </tr>
                    654:     <tr>
                    655:       <td>  Parent-Child</td>
                    656: 
                    657:     <td> parent &gt; child {      attribute: value;}</td>
                    658:     <td> menu#file &gt; menuitem {      font-weight: bold; }</td>
                    659: 
                    660:     </tr>
                    661:     <tr>
                    662:       <td>  Precedence</td>
                    663: 
                    664:     <td> elBefore + elAfter { attribute: value;}</td>
                    665:     <td> menuitem#file + menuitem#edit { background-color: black; }</td>
                    666: 
                    667:     </tr>
                    668:      
                    669:   </tbody>
                    670: </table>
1.8       petejc    671:     <p>In the descendent example in <a href="#77022">Table 4-1</a>,
                    672:     the "F" <tt>menuitem</tt> has a border only when it appears
                    673:     within the <tt>toolbar</tt> whose class is given as "primary."
                    674:     In the parent-child example, all menu items in a menu with the
                    675:     <tt>id</tt> "file" are made bold. Using +, the precedence
                    676:     selector says that the "edit" menu should have a black
                    677:     background only when it comes after the "file" menu. You can
                    678:     use these element relation selectors to create longer
                    679:     descensions (e.g., <tt>toolbar.primary &gt; menu#file &gt;
                    680:     menuitem#new</tt>), but remember that the processing gets more
                    681:     expensive with each new level, and that the descendent
                    682:     operation is particularly processor-intensive.</p>
                    683:     <h4><a name="77079"></a> The !important keyword</h4>
                    684:     <p>As you might <!--INDEX !important keyword (CSS) --> 
                    685:     <!--INDEX keywords, CSS --> 
                    686:     <!--INDEX CSS (Cascading Style Sheets):!important keyword -->
                    687:     imagine, when you have a technology with such strong notions of
                    688:     precedence as Cascading Style Sheets (the ID-based style trumps
                    689:     the class-based style, inline style attributes trump those
                    690:     loaded from an external stylesheet, etc.), you may need to
                    691:     identify and set aside certain styles as the most important,
                    692:     regardless of where they are found in the cascade.</p>
                    693:     <p>This is the role played by the <tt>!important</tt> keyword.
                    694:     Sitting to the right of a style value, it specifies that style
                    695:     rule should take precedence over all of its competitors and
                    696:     that it should be applied all the time. <a href=
                    697:     "#77034">Example 4-3</a> demonstrates how no borders are
                    698:     rendered on <i>treecells</i> of the class
                    699:     <i>treecell-editor</i> because of the <tt>!important</tt>
                    700:     keyword.</p>
                    701:     <p><i>Example 4-3: <a name="77034"></a></i> <i>!important
                    702:     keyword in CSS</i></p>
                    703: <pre>
                    704:  .treecell-editor,
1.1       david     705:  .treecell-editor &gt; box {
                    706:    margin: 0px !important;
                    707:    padding: 0px !important;
                    708:  }
                    709:  .treecell-editor {
                    710:    border: 0px !important;
1.8       petejc    711:  }
                    712: </pre>
                    713:     <p>You can search for the <tt>!important</tt> keyword in the
                    714:     LXR Mozilla source code tool and see its use in the Mozilla
                    715:     CSS.</p>
                    716:     <h4><a name="77080"></a> The inherits value</h4>
                    717:     <p>CSS uses <!--INDEX inherits value (CSS) --> 
                    718:     <!--INDEX CSS (Cascading Style Sheets):inherits value -->
                    719:     inheritance all over the place. Inheritance is implicit in the
                    720:     way style rules are applied, stylesheets are organized in the
                    721:     chrome, and skins borrow from one another in Mozilla. However,
                    722:     a special CSS value indicates that the selector explicitly
                    723:     inherits its value from the parent element.</p>
                    724:     <p>When a CSS property has a value of <tt>inherit</tt>, that
                    725:     property's real value is pulled from the parent element:</p>
                    726: <pre>
                    727: .child {
1.1       david     728: color: darkblue;
                    729: height: inherit;
                    730: background-color: inherit;
1.8       petejc    731: }
                    732: </pre>
                    733:     <p>This block specifies a dark blue color for the font, but the
                    734:     values of the other two properties are inherited from the
                    735:     parent. In many cases, this has the same effect as not
                    736:     specifying any value at all for the child and letting the style
                    737:     rules above the current one in the document inheritance chain
                    738:     cascade down. However, not all style rules are inherited.
                    739:     Properties such as <tt>!important</tt>, <tt>left</tt>, and
                    740:     <tt>height</tt> are not inherited automatically by child
                    741:     elements, so you must use the <tt>inherit</tt> keyword to pick
                    742:     them up.</p>
                    743:     <h4><a name="77081"></a> Box layout properties in CSS</h4>
                    744:     <p>People sometimes <!--INDEX properties:CSS:box layout --> 
                    745:     <!--INDEX layout, CSS box layout properties --> 
                    746:     <!--INDEX box layout properties (CSS) --> 
                    747:     <!--INDEX CSS (Cascading Style Sheets):properties, box layout -->
                    748:     get confused about the various element spacing properties in
                    749:     CSS, such as <tt>border</tt>, <tt>padding</tt>, and
                    750:     <tt>margin</tt>. Though they work together a lot and often
                    751:     affect or overlap one another, these properties specify
                    752:     different things, as <a href="#77024">Table 4-2</a> shows.</p>
                    753:     <p><i>Table 4-2: <a name="77024"></a></i> <i>CSS spacing and
                    754:     layout properties</i></p>
                    755:     <table width="100%" border="1">
                    756:       <tr>
                    757:         <td><b>Property group</b></td>
                    758:         <td><b>Description</b></td>
                    759:         <td><b>Display</b></td>
                    760:       </tr>
                    761:       <tr>
                    762:         <td>padding</td>
                    763:         <td>Defines the space between the element's border and the
                    764:         content in the element.</td>
                    765:       </tr>
                    766:       <tr>
                    767:         <td>td {padding-left: .25in;}</td>
                    768:       </tr>
                    769:       <tr>
                    770:         <td>td {padding-left: .0125in;}</td>
                    771:         <td>
                    772:         </td>
                    773:       </tr>
                    774:     </table>
                    775:     <div class="c12">
                    776:       <img src="foo.gif">
                    777:     </div>
                    778:     <table width="100%" border="1">
                    779:       <tr>
                    780:         <td>margin</td>
                    781:         <td>Defines the space around elements.</td>
                    782:       </tr>
                    783:       <tr>
                    784:         <td>td {margin-left: .25in;}</td>
                    785:         <td>
                    786:         </td>
                    787:       </tr>
                    788:     </table>
                    789:     <div class="c12">
                    790:       <img src="foo.gif">
                    791:     </div>
                    792:     <table width="100%" border="1">
                    793:       <tr>
                    794:         <td>border</td>
                    795:         <td>Defines the border itself; it can control the
                    796:         thickness, color, style, and other aspects of an element's
                    797:         border.</td>
                    798:       </tr>
                    799:       <tr>
                    800:         <td>td {border-style: inset;}</td>
                    801:       </tr>
                    802:       <tr>
                    803:         <td>td {border-color: blue;}</td>
                    804:       </tr>
                    805:       <tr>
                    806:         <td>td {border-left-width: 15px;}</td>
                    807:         <td>
                    808:         </td>
                    809:       </tr>
                    810:     </table>
                    811:     <div class="c12">
                    812:       <img src="foo.gif">
                    813:     </div>
                    814:     <h4><a name="77082"></a> The position property</h4>
                    815:     <p><tt>position</tt> is a <!--INDEX position property (CSS) -->
                    816:     <!--INDEX properties:CSS:position --> 
                    817:     <!--INDEX CSS (Cascading Style Sheets):position property -->
                    818:     special CSS property 
                    819:     <!--INDEX alignment, CSS position property --> that specifies
                    820:     whether the given selector uses absolute or relative
                    821:     positioning. Unless you set the <tt>position</tt> property to
                    822:     absolute, you cannot use the related <tt>top</tt> and
                    823:     <tt>left</tt> properties to set the position of the current
                    824:     selector within its parent, as the example in <a href=
                    825:     "#77026">Table 4-3</a> demonstrates. The <tt>top</tt> and
                    826:     <tt>left</tt> properties, when activated by the absolute
                    827:     position, specify the amount of distance from the top and left
                    828:     of the document, respectively. You can also set
                    829:     <tt>position</tt> to <tt>fixed</tt> to make it stay in one
                    830:     place as other content or UI is scrolled or 
                    831:     <!--INDEX ENDRANGE==style definitions --> 
                    832:     <!--INDEX ENDRANGE==CSS (Cascading Style Sheets):style definitions -->
                    833:     moved.</p>
                    834:     <p><i>Table 4-3: <a name="77026"></a></i> <i>The position
                    835:     property</i></p>
                    836:     <table width="100%" border="1">
                    837:       <tr>
                    838:         <td><b>Example</b></td>
                    839:         <td><b>Display</b></td>
                    840:       </tr>
                    841:       <tr>
                    842:         <td>&lt;style&gt;</td>
                    843:       </tr>
                    844:       <tr>
                    845:         <td>#abdiv {</td>
                    846:       </tr>
                    847:       <tr>
                    848:         <td>position: absolute;</td>
                    849:       </tr>
                    850:       <tr>
                    851:         <td>top: 20px;</td>
                    852:       </tr>
                    853:       <tr>
                    854:         <td>left: 70px;</td>
                    855:       </tr>
                    856:       <tr>
                    857:         <td>background-color: lightblue;</td>
                    858:       </tr>
                    859:       <tr>
                    860:         <td>}</td>
                    861:       </tr>
                    862:       <tr>
                    863:         <td>#regdiv {</td>
                    864:       </tr>
                    865:       <tr>
                    866:         <td>background-color: lightblue;</td>
                    867:       </tr>
                    868:       <tr>
                    869:         <td>}</td>
                    870:       </tr>
                    871:       <tr>
                    872:         <td>&lt;/style&gt;</td>
                    873:       </tr>
                    874:       <tr>
                    875:         <td>&lt;div id="regdiv"&gt;other div&lt;/div&gt;</td>
                    876:       </tr>
                    877:       <tr>
                    878:         <td>&lt;div id="abdiv"&gt;abdiv&lt;/div&gt;</td>
                    879:         <td>
                    880:         </td>
                    881:       </tr>
                    882:     </table>
                    883:     <div class="c12">
                    884:       <img src="foo.gif">
                    885:     </div>
                    886:     <h3><a name="77083"></a> Special Mozilla Extensions</h3>
                    887:     <p>Mozilla skins <!--INDEX selectors, CSS:extensions --> 
                    888:     <!--INDEX Mozilla:CSS extensions --> 
                    889:     <!--INDEX CSS (Cascading Style Sheets):extensions --> 
                    890:     <!--INDEX properties:CSS:Mozilla extensions --> 
                    891:     <!--INDEX extensions, CSS selectors and properties --> extend 
                    892:     <!--INDEX skins:Mozilla CSS extensions --> upon the CSS
                    893:     standards in just a few notable ways. These Mozilla CSS
                    894:     extensions take the form of special selectors and properties
                    895:     with the special <tt>-moz-</tt> prefix, indicating that they
                    896:     are not part of the actual CSS specifications. You can find a
                    897:     complete list of these CSS keywords by searching for the file
                    898:     <i>nsCSSKeyWordList.h</i> in LXR.</p>
                    899:     <p>Generally, these extensions are used to define CSS style and
                    900:     color values that are hardcoded into the C++ code and available
                    901:     for reuse in particular places in the Mozilla themes. You can
                    902:     use a few <i>-moz-</i> extensions, such as properties or
                    903:     special values or even, in some cases, style-related attributes
                    904:     in the XUL (e.g., span[-moz-smiley="s1"], which grabs span
                    905:     elements in the HTML editor whose -<tt>moz-smiley</tt>
                    906:     attribute is set to <tt>s1</tt> and styles them accordingly).
                    907:     Actually, you can use any value in that CSS keyword list. Trial
                    908:     and error or a look in the C++ code will reveal what these
                    909:     values are. The values, like <tt>-moz-fieldtext</tt> and
                    910:     <tt>-moz-mac-menushadow</tt>, usually refer to actual color
                    911:     values. A list of some Mozilla CSS extensions appears in <a
                    912:     href="#77028">Table 4-4</a>.</p>
                    913:     <p><i>Table 4-4: <a name="77028"></a></i> <i>Mozilla CSS
                    914:     extensions</i></p>
                    915:     <tt>-moz-binding</tt>is a URL pointing to the section in an XML
                    916:     bindings file where the XBL is defined:<tt>2px</tt>, you get a
                    917:     slightly rounded border, but if you set it to <tt>8px</tt>, you
                    918:     get a very round border.<tt>normal</tt>and
                    919:     <tt>ignore</tt>.<tt>none</tt>and <tt>normal</tt>.<tt>s5</tt>to
                    920:     pick up the laughing smiley image, to <tt>s6</tt>to pick up the
                    921:     embarrassed smiley image, and so on.<a href=
1.13      ian       922:     "http://lxr.mozilla.org/seamonkey/source/editor/ui/composer/content/EditorContent.css#77">
                    923:     http://lxr.mozilla.org/seamonkey/source/editor/ui/composer/content/EditorContent.css#77</a>.<tt>
1.8       petejc    924:     -moz-image</tt>region is a set of coordinates that designate an
                    925:     area within an "image sheet" that should be used as an icon in
                    926:     the user interface. The following CSS style definition
                    927:     specifies the top- and leftmost button in the
                    928:     <i>btn1.gif</i>image sheet used in <a href="#77006">Figure
                    929:     4-3</a>to use as the default icon for the Back navigation
                    930:     button:<tt>start</tt>, <tt>center</tt>, <tt>end</tt>,
                    931:     <tt>baseline</tt>, and <tt>stretch</tt>.<tt>normal</tt>and
                    932:     <tt>reverse</tt>.<tt>horizontal</tt>or
                    933:     <tt>vertical</tt>.<tt>start</tt>, <tt>center</tt>, or
                    934:     <tt>end</tt>.
1.10      ian       935: 
                    936: <table width="100%" border="1">
                    937:   <tbody>
                    938:     <tr>
                    939:       <td><b>  Property</b></td>
                    940:       <td><b>  Description</b></td>
                    941:     </tr>
                    942:     <tr>
                    943: 
                    944:       <td> -moz-appearance</td>
                    945:     <td>  Specifies that the element should appear, as much as possible, as
                    946: an operating-system native.</td>
                    947:     </tr>
                    948:     <tr>
                    949:       <td> -moz-opacity</td>
                    950:     <td>  Controls the opacity of any styleable element with a percentage value.
                    951: The following example style rule creates a class of buttons that are only
                    952: half visible above their backgrounds:                                   
                    953: 
                    954:       <pre>.op-butt {  -moz-opacity: 50%;}</pre>
                    955: 
                    956:       </td>
                    957:     </tr>
                    958:     <tr>
                    959:       <td> -moz-binding</td>
                    960:     <td>  The property for binding XBL to XUL. The value of        <tt>-moz-binding</tt>
                    961: is a URL pointing to the section in an XML bindings file where the XBL is
                    962: defined:                                                                 
                    963: 
                    964:       <pre>new-widget {<br> -moz-binding:  chrome://xfly/bindings/extras.xml#super-button;<br>}</pre>
                    965: 
                    966:       </td>
                    967:     </tr>
                    968:          <tr>
                    969:       <td> -moz-border-radius,<br>
                    970:      -moz-border-radius-bottomleft,<br>
                    971:    -moz-border-radius-bottomright,<br>
                    972:    -moz-border-radius-topleft,<br>
                    973: 
                    974:    -moz-border-radius-topright</td>
                    975:     <td>  Puts rounded corners on regular borders. The degree of rounding depends
                    976: on the number of pixels you assign. For example, if you set this property
                    977: to        <tt>2px</tt>, you get a slightly rounded border, but if you set
                    978: it to       <tt>8px</tt>, you get a very round border.</td>
                    979:     </tr>
                    980:     <tr>
                    981:       <td> -moz-border-colors,<br>
                    982: 
                    983: -moz-border-colors-bottom,<br>
                    984: -moz-border-colors-left,<br>
                    985: -moz-border-colors-right,<br>
                    986: -moz-border-colors-top</td>
                    987:     <td>  Sets the border colors on the various sides of an element.</td>
                    988:     </tr>
                    989:     <tr>
                    990:       <td> -moz-user-focus</td>
                    991: 
                    992:     <td>  Indicates whether the given element can have focus. Possible values
                    993: are <tt>normal</tt> and <tt>ignore</tt>.</td>
                    994:     </tr>
                    995:     <tr>
                    996:       <td> -moz-user-select</td>
                    997: 
                    998:     <td>  Indicates whether the given element can be selected. Possible values
                    999: are <tt>none</tt> and <tt>normal</tt>.</td>
                   1000:     </tr>
                   1001:     <tr>
                   1002:       <td> -moz-smiley</td>
                   1003: 
                   1004:     <td>  This is typically given as an attribute to the span element in the
                   1005: HTML in a composer window and can be set to a value such as        <tt>s5</tt>
                   1006: to pick up the laughing smiley image, to <tt>s6</tt> to pick up the embarrassed
                   1007: smiley image, and so on.                                                 
                   1008:       <p>See the following source file for the values that can be set for
                   1009: this special property: </p>
                   1010:       <p><a
                   1011:  href="http://lxr.mozilla.org/seamonkey/source/editor/ui/composer/content/EditorContent.css#77">http://lxr.mozilla.org/seamonkey/source/editor/ui/composer/content/EditorContent.css#77</a>.
                   1012:       </p>
                   1013:       </td>
                   1014: 
                   1015:     </tr>
                   1016:     <tr>
                   1017:       <td> -moz-image-region</td>
                   1018:     <td>  This was added to optimize the way image resources are used in the
                   1019: Mozilla skins. The value of the        <tt>-moz-image</tt> region is a set
                   1020: of coordinates that designate an area within an "image sheet" that should
                   1021: be used as an icon in the user interface. The following CSS style definition
                   1022: specifies the top- and leftmost button in the <i>btn1.gif</i> image sheet
                   1023: used in <a href="#77006">Figure 4-3</a>to use as the default icon for the
                   1024: Back navigation button:                                                  
                   1025:  
                   1026:       <pre>.toolbarbutton-1 {<br>  list-style-image: url("chrome://navigator/skin/icons/btn1.gif");<br>  min-width: 0px;<br>}<br>#back-button {<br>  -moz-image-region: rect(0 41px 38px 0);<br>}</pre>
                   1027: 
                   1028:                                                                         
                   1029:                                           
                   1030:       <p> Of the two default skins, these image sheets are found only in
                   1031: the Modern skin. They are gradually making their way into the skins; as of
                   1032: this writing, there are three or four image sheets in the Modern skin-each
                   1033: corresponding to an area, toolbar, or set of buttons in the browser.</p>
                   1034:       </td>
                   1035:     </tr>
                   1036:     <tr>
                   1037:       <td> -moz-box-align</td>
                   1038:     <td>  Sets the alignment for a XUL element from CSS. Possible values are
                   1039:       <tt>start</tt>, <tt>center</tt>, <tt>end</tt>, <tt>baseline</tt>, and
                   1040:       <tt>stretch</tt>.</td>
                   1041: 
                   1042:     </tr>
                   1043:     <tr>
                   1044:       <td> -moz-box-direction</td>
                   1045:     <td>  Sets the direction of a box's child elements. Possible values are
                   1046:   <tt>normal</tt> and <tt>reverse</tt>.</td>
                   1047: 
                   1048:     </tr>
                   1049:     <tr>
                   1050:       <td> -moz-box-flex</td>
                   1051:     <td>  Sets the flexibility of an element relative to its siblings. The value
                   1052: is an integer.</td>
                   1053:     </tr>
                   1054:     <tr>
                   1055:       <td> -moz-box-flexgroup</td>
                   1056: 
                   1057:     <td>  Specifies that a group of elements have the same flex. The value is
                   1058: an integer.</td>
                   1059:     </tr>
                   1060:     <tr>
                   1061:       <td> -moz-box-ordinal</td>
                   1062:     <td>  Specifies the order of an element relative to its peers in a container.
                   1063: By default, the value of this property is set to 1. When you set a new value,
                   1064: you can change the order, as in this example, which promotes the "View Source"
                   1065: menu item to the top of the menu by demoting the other two:              
                   1066:                                       
                   1067:       <pre>&lt;style&gt;<br>  #q { -moz-box-ordinal: 0; } <br>&lt;/style&gt;<br>&lt;menu&gt; <br>  &lt;menuitem id="e" label="e" /&gt; <br>  &lt;menuitem id="v" label="v" /&gt; <br>  &lt;menuitem id="q" label="q" /&gt; <br>&lt;/menu&gt; <br>&lt;/window&gt; </pre>
                   1068: 
                   1069:                                   
                   1070:       <p>You can also give elements the same ordinal value in CSS and group<br>
                   1071: them, making sure they are  not split by new, overlaid items.</p>
                   1072:       </td>
                   1073:     </tr>
                   1074:     <tr>
                   1075:       <td> -moz-box-orient</td>
                   1076:     <td>  Sets the orientation of a container element. The value can be either
                   1077:       <tt>horizontal</tt> or <tt>vertical</tt>.</td>
                   1078: 
                   1079:     </tr>
                   1080:     <tr>
                   1081:       <td> -moz-box-pack</td>
                   1082:     <td>  Packs the child elements of a container at the        <tt>start</tt>,
                   1083:       <tt>center</tt>, or <tt>end</tt>.</td>
                   1084: 
                   1085:     </tr>
                   1086:        
                   1087:   </tbody>
                   1088: </table>
                   1089: 
1.8       petejc   1090:     <h3><a name="77084"></a> Referencing Images in CSS</h3>
                   1091:     <p>Another basic <!--INDEX skins:images, referencing --> 
                   1092:     <!--INDEX images:skins, referencing --> 
                   1093:     <!--INDEX CSS (Cascading Style Sheets):images, referencing --> 
                   1094:     <!--INDEX referencing:images, CSS --> function of the CSS in
                   1095:     any Mozilla skin is to incorporate images into the user
                   1096:     interface. A Mozilla skin can contain literally thousands of
                   1097:     images, which are all referenced from particular style
                   1098:     statements in the CSS. It's common for a single element to
                   1099:     point to different versions of an image to reflect different
                   1100:     states-as when a second image is used to give a button a
                   1101:     pushed-down look as it is clicked-to create dynamism and
                   1102:     provide feedback to the user. <a href="#77036">Example 4-4</a>
                   1103:     shows the following two style statements handle the regular and
                   1104:     active-or depressed-states, respectively.</p>
                   1105:     <p><i>Example 4-4: <a name="77036"></a></i> <i>Image in
                   1106:     CSS</i></p>
                   1107: <pre>
                   1108:  button.regular {
1.1       david    1109:      list-style-image: url(chrome://global/skin/arrow.gif);
                   1110:      background-image: url(chrome://global/skin/regbutton.gif);
                   1111:  }
                   1112:  button.regular:active
                   1113:  {
                   1114:      background-image: url(chrome://global/skin/button_pushed.gif);
1.8       petejc   1115:  }
                   1116: </pre>
                   1117:     <p>In <a href="#77036">Example 4-4</a>, the second of the two
                   1118:     definitions inherits from the first, so it implicitly includes
                   1119:     the <i>arrow.gif</i> as a foreground image. The second style
                   1120:     definition says that when the XUL button of class
                   1121:     <tt>regular</tt> is active, the image <i>button_pushed.gif</i>
                   1122:     is used in place of <i>regbutton.gif</i> for the
                   1123:     background.</p>
                   1124:     <p><a href="#77036">Example 4-4</a> also illustrates 
                   1125:     <!--INDEX properties:CSS:referencing images --> the two common
                   1126:     stylesheet properties that reference images:
                   1127:     <tt>list-style-image</tt> and <tt>background-image</tt>. The
                   1128:     <tt><!--INDEX list-style-image property (CSS) -->
                   1129:     list-style-image</tt> property specifies an image to go in the
                   1130:     foreground of the selector; the <tt>background-image</tt>
                   1131:     property specifies a separate image for the background. The
                   1132:     availability of these two properties allows you to fine-tuning
                   1133:     the images used to style the UI, as in this example, where the
                   1134:     arrow icon is preserved and the wider, underlying button is
                   1135:     swapped out.</p>
                   1136:     <p>In fact, the navigation buttons in the Modern skin are
                   1137:     created by using both properties. In this case, the background
                   1138:     is the basic round disk as seen in <a href="#77008">Figure
                   1139:     4-4</a>, defined in the <tt>toolbarbutton-1</tt> class in
                   1140:     <i>communicator\skin\button.css</i>, and the
                   1141:     <tt>list-style-image</tt> is the arrow portion of the button,
                   1142:     defined in the button ID and sliced out of a button image sheet
                   1143:     with the special <tt>-moz-image-region</tt> property (see <a
                   1144:     href="#77083">"Special Mozilla Extensions</a>" later in this
                   1145:     chapter for a description of image sheets).</p>
                   1146:     <div class="c12">
                   1147:       <img src="foo.gif">
                   1148:     </div>
                   1149:     <p><i>Figure 4-4: <a name="77008"></a></i> <i>Composite styles
                   1150:     for the reload button</i></p>
                   1151:     <h3><a name="77085"></a> Menu Skinning</h3>
                   1152:     <p>As an example <!--INDEX menus:CSS, skinning --> 
                   1153:     <!--INDEX skins:menus --> 
                   1154:     <!--INDEX CSS (Cascading Style Sheets):menus, skins --> of
                   1155:     using CSS in applications, <a href="#77038">Example 4-5</a>
                   1156:     combines many common selectors described in this chapter in a
                   1157:     set of rules for defining the look and basic behavior of menus.
                   1158:     The CSS handles the basic look of the menus, their color and
                   1159:     style, the look of the menu items when they are hovered over,
                   1160:     and the look when they are selected.</p>
                   1161:     <p><i>Example 4-5: <a name="77038"></a></i> <i>Mixing CSS and
                   1162:     XUL</i></p>
                   1163: <pre>
                   1164:  &lt;menu id="sample"&gt;
1.1       david    1165:    &lt;menupopup&gt;
                   1166:      &lt;menuitem class="m" label="File" /&gt;
                   1167:      &lt;menuitem class="m" label="Edit" /&gt;
                   1168:      &lt;menuitem class="m" id="q" label="Quit" /&gt;
                   1169:    &lt;/menupopup&gt;
                   1170:  &lt;/menu&gt;
                   1171:  .m { background-color: lightgray; font-size: 9pt; }
                   1172:  .m:hover  { border: 1px; }
                   1173:  .m:active { background-color: gray; color: white; }
1.8       petejc   1174:  #q:active { background-color: black }
                   1175: </pre>
                   1176:     <p>When you hover over any of the items in the menu generated
                   1177:     by the code in <a href="#77038">Example 4-5</a>, they display a
                   1178:     border. When you select the item, it appears momentarily with a
                   1179:     dark gray background and white lettering, like reverse video.
                   1180:     The Quit menu item, unlike others, appears with a black
                   1181:     background. Note that it also picks up the same white lettering
                   1182:     as the other items of the <tt>m</tt> class, since this style
                   1183:     information is inherited.</p>
                   1184:     <h2><a name="77086"></a> Mozilla Skins</h2>
                   1185:     <p>At an earlier <!--INDEX chrome:skins, file locations --> 
                   1186:     <!--INDEX skins:file locations --> 
                   1187:     <!--INDEX files:skins, locations --> point in Mozilla's
                   1188:     history, all interface files-the XUL, the CSS, and the
                   1189:     images-were stored in directories named after the main Mozilla
                   1190:     packages in the application chrome directory. The best way to
                   1191:     look at a skin was just to poke around in those directories,
                   1192:     change things in the CSS files you found, and reload to see
                   1193:     what had changed in the browser. The CSS files are no longer
                   1194:     stored in regular directories.</p>
                   1195:     <p>To organize things better and make a smaller footprint for
                   1196:     Mozilla, all chrome is stored in special compressed archives in
                   1197:     the <i>chrome</i> directory. These archives are Java Archive
                   1198:     (JAR) files, whose subdirectory structure reflects the
                   1199:     structure of Mozilla's major components, to some extent. There
                   1200:     is one JAR archive for every theme. By default, Mozilla is
                   1201:     distributed with the Classic and Modern themes, represented in
                   1202:     the chrome as <tt>classic.jar</tt> and <tt>modern.jar</tt>. <a
                   1203:     href="#77010">Figure 4-5</a> shows some of the contents of the
                   1204:     <tt>modern.jar</tt> file in a zip utility.</p>
                   1205:     <div class="c12">
                   1206:       <img src="foo.gif">
                   1207:     </div>
                   1208:     <p><i>Figure 4-5: <a name="77010"></a></i> <i>The contents of
                   1209:     the modern.jar file</i></p>
                   1210:     <h3><a name="77087"></a> CSS and Skin Hierarchies</h3>
                   1211:     <p>You have 
                   1212:     <!--INDEX CSS (Cascading Style Sheets):skins:hierarchy --> 
                   1213:     <!--INDEX skins:hierarchy --> <!--INDEX hierarchy:skins --> 
                   1214:     <!--INDEX inheritance:skin hierarchies --> already seen some of
                   1215:     the structure inherent to CSS in the previous examples. When an
                   1216:     element has both a class-based and an id-based rule, for
                   1217:     example (as well as a basic element "look and feel" defined in
                   1218:     the global skin), the element style is applied. Then, the more
                   1219:     specific class-based rule is applied and overwrites the
                   1220:     properties of the general rule if they conflict. Finally, the
                   1221:     ID-based rule is applied and overwrites whatever conflicting
                   1222:     style values are in the more general selectors. In this way,
                   1223:     the most specific style rules inherit from the most basic. This
                   1224:     is the "cascade" in Cascading Style Sheets. In addition to this
                   1225:     definition, the syntax of CSS allows you to specify selector
                   1226:     relationships-such as when you create a parent-child selector
                   1227:     and apply a style rule to only the selectors that have some
                   1228:     other particular element as a parent in the XUL content model.
                   1229:     However, there is also a strong inheritance mechanism in the
                   1230:     way that the Mozilla browser uses CSS-in the way skin files are
                   1231:     organized in the chrome and applied to the XUL. The strong
                   1232:     hierarchical structure present in Mozilla's CSS and the XUL
                   1233:     allow the chrome registry to maintain the skin and the various
                   1234:     components that get skinned as different modules, but find and
                   1235:     apply the right resources whenever they are called for. This
                   1236:     structure is described in the <a href="#77089">"Basic Skin
                   1237:     Structure</a>" section later in this chapter.</p>
                   1238:     <h4><a name="77088"></a> Skin inheritance and skin
                   1239:     modularization</h4>
                   1240:     <p>For the sake of <!--INDEX skins:inheritance --> 
                   1241:     <!--INDEX skins:modularization --> 
                   1242:     <!--INDEX modularization, skins --> discussion, this book
                   1243:     describes two kinds of inheritance: the more basic form, in
                   1244:     which a specific skin like <i>navigator.css</i> inherits all
                   1245:     style rules from <i>global.css</i>, and modularization, in
                   1246:     which navigator skin rules specific to the toolbar are
                   1247:     distributed into widget-specific CSS files (e.g.,
                   1248:     <i>toolbar.css</i> is part of the global skin). The global
                   1249:     skin-once a large, unmodular set of style rules contained in
                   1250:     <i>global.css-</i>is now spread out over several modularized
                   1251:     CSS files, as <a href="#77012">Figure 4-6</a> shows.</p>
                   1252:     <div class="c12">
                   1253:       <img src="foo.gif">
                   1254:     </div>
                   1255:     <p><i>Figure 4-6: <a name="77012"></a></i> <i>XUL file and skin
                   1256:     loading</i></p>
                   1257:     <p>This modularization makes it possible for a 
                   1258:     <!--INDEX XUL (XML-based User-interface Language):skin modularization -->
                   1259:     XUL file to load the <i>global.css</i> file in a single
                   1260:     statement and use any of the style rules defined in these
                   1261:     skins. We will discuss the global skin in more detail in the
                   1262:     section <a href="#77093">"Global skin</a>" later in this
                   1263:     chapter. Skin inheritance and skin modularization work together
                   1264:     to give skins their structure and make it possible to create
                   1265:     new skins or apply CSS only to particular parts of the
                   1266:     application.</p>
                   1267:     <p><a href="#77012">Figure 4-6</a> shows a very specific skin,
                   1268:     <i>new.css</i>, inheriting the style information from
                   1269:     <i>communicator.css</i> and then being loaded into the XUL
                   1270:     file. In a situation like this, <i>ex.xul</i> can use any style
                   1271:     rule defined in the <i>communicator.css</i> file (or in any CSS
                   1272:     file that it imports).</p>
                   1273:     <h3><a name="77089"></a> Basic Skin Structure</h3>
                   1274:     <p>Though they look <!--INDEX themes:structure --> 
                   1275:     <!--INDEX skins:structure --> very different, the Modern and
                   1276:     Classic themes that are installed with Mozilla have similar
                   1277:     structures. This is because the structure of a theme reflects,
                   1278:     in many ways, the structure of the components to which it
                   1279:     applies. So, for example, both themes have subdirectories (in
                   1280:     the JAR files in which they are stored) where the CSS and image
                   1281:     resources for each of the main components are stored. Modern,
                   1282:     for example, has a <i>communicator</i> component subdirectory,
                   1283:     and that subdirectory has subdirectories representing the
                   1284:     various parts of the communicator interface: bookmarks, help,
                   1285:     search, sidebar, and so on. <a href="#77042">Example 4-7</a>
                   1286:     shows the Modern and Classically themed Navigation bars side by
                   1287:     side.</p>
                   1288:     <div class="c12">
                   1289:       <img src="foo.gif">
                   1290:     </div>
                   1291:     <p><i>Figure 4-7: <a name="77014"></a></i> <i>Classic and
                   1292:     Modern Navigation toolbars</i></p>
                   1293:     <p>Both themes are complete. They each contain all skin
                   1294:     resources for the major components of the application.<a name=
                   1295:     "b290"></a><a href="#290">[*]</a> The resources themselves
                   1296:     vary, but their structures are almost identical. This ability
                   1297:     is what makes the skins dynamically changeable.</p>
                   1298:     <p>Skin developers can, for example, create a skin for a single
                   1299:     component in Mozilla (e.g., messenger) and let the Modern theme
                   1300:     continue to take care of the other components for which they
                   1301:     have not created any new CSS information. Which components are
                   1302:     skinned by which themes is specified in the
                   1303:     <i>installed-chrome.txt</i> file, where a single entry
                   1304:     represents the application of the appropriate theme resources
                   1305:     to a single component, such as navigator. (See <a href=
                   1306:     "ch06.html#15291">Chapter 6</a> for more information about this
                   1307:     file and about how themes and other packages are registered and
                   1308:     applied in Mozilla.) This situation does not apply to new
                   1309:     applications like xFly, however, for which the XUL is typically
                   1310:     a single package and the CSS that applies to it is another
                   1311:     single package. Unlike the Mozilla browser, your application
                   1312:     will probably have a single manifest and <i>content</i>
                   1313:     subdirectory and a single manifest and <i>skin</i>
                   1314:     subdirectory:</p>
                   1315: <pre>
                   1316: xfly.jar:
1.1       david    1317: content/
                   1318: contents.rdf
                   1319: &lt;xul content here&gt;
                   1320: skin/
                   1321: contents.rdf
1.8       petejc   1322: &lt;css content here&gt;
                   1323: </pre>
                   1324:     <p>An important difference here is that your skin requires a
                   1325:     single manifest whereas the Mozilla themes use as many
                   1326:     manifests as they have major components to skin. When the
                   1327:     application that needs to be skinned is as large as the Mozilla
                   1328:     browser, modularity is almost imperative-particularly if that
                   1329:     application supports add-on applications (like xFly itself,
                   1330:     which will be accessible from the Mozilla Tasks menu when you
                   1331:     are done).</p>
                   1332:     <h3><a name="77090"></a> The Modern and Classic Themes</h3>
                   1333:     <p>If you haven't 
                   1334:     <!--INDEX skins:Modern compared to Classic --> 
                   1335:     <!--INDEX Modern theme:compared to Classic --> 
                   1336:     <!--INDEX Classic theme compared to Modern --> 
                   1337:     <!--INDEX themes:Modern:compared to Classic --> already looked
                   1338:     at it, using the skin-switching UI (View Menu &gt; Apply Theme
                   1339:     &gt; Modern) in Mozilla will give you an idea about the
                   1340:     differences between the two skins that come preinstalled with
                   1341:     the browser. The Classic skin is modeled after earlier versions
                   1342:     of the Mozilla UI and of the Netscape 4.x Communicator product.
                   1343:     It has the familiar light grey box look, with the larger,
                   1344:     primary-colored navigation button and a squared-off geometry.
                   1345:     The Modern theme is a newer take on the browser interface. It
                   1346:     has a smoother overall look, with rounded edges on many of the
                   1347:     widgets, subtle color differentiations, gradients, and 3D
                   1348:     icons.</p>
                   1349:     <p>However, both skins sit on top of the same XUL. With one
                   1350:     notable exception-a powerful feature of CSS in Mozilla
                   1351:     discussed later in this chapter in the <a href=
                   1352:     "#77101">"Binding New Widgets to the Interface Using XBL</a>"
                   1353:     section-the applications themselves are identical, and themes
                   1354:     themselves provide all the differences in the browser's look
                   1355:     and behavior.</p>
                   1356:     <h3><a name="77091"></a> Skin Files</h3>
                   1357:     <p>Obviously, we cannot describe even a fraction of the CSS
                   1358:     files that go into making up a single, overall theme. There
                   1359:     are, however, some CSS files that help determine how the
                   1360:     Mozilla browser looks. In this section, we will go over some of
                   1361:     those files so you can see how they relate to one another,
                   1362:     where the browser gets its look, and what strategies you might
                   1363:     use to create your own complete skin.</p>
                   1364:     <p>The following sections provide a brief, representative
                   1365:     sampling of the Modern theme. The global skin, the navigator
                   1366:     skin, and the communicator skin are discussed as they pertain
                   1367:     to the Modern theme in the Mozilla browser.</p>
                   1368:     <h4><a name="77092"></a> Navigator skin</h4>
                   1369:     <p>One of the <!--INDEX Modern theme:navigator skin --> 
                   1370:     <!--INDEX skins:navigator --> <!--INDEX navigator skin --> 
                   1371:     <!--INDEX themes:Modern:navigator skin --> most specific and
                   1372:     complex skin files in the Modern theme hierarchy is the
                   1373:     <i>navigator.css</i> file, which contains style information for
                   1374:     the browser itself. When you look through this skin, you will
                   1375:     see rules for such things as the Print button. In <a href=
                   1376:     "#77040">Example 4-6</a>, note how several selectors are
                   1377:     grouped with a single style rule, and how the parent-child
                   1378:     relationship between elements (see the earlier section <a href=
                   1379:     "#77078">"Element relation selectors</a>" for an explanation of
                   1380:     this selector) is used to style print buttons appearing in
                   1381:     different places (i.e., under different element parents) in the
                   1382:     UI.</p>
                   1383:     <p><i>Example 4-6: <a name="77040"></a></i> <i>CSS for print
                   1384:     button in navigator skin</i></p>
                   1385: <pre>
                   1386:  #print-button
1.1       david    1387:    {
                   1388:      -moz-binding :
                   1389:        url("chrome://communicator/skin/menubuttonBindings.xml#menubutton-dual-foo");
                   1390:      list-style-image : url("chrome://global/skin/print.gif");
                   1391:      margin           : 6px 6px 0px 6px;
                   1392:    }
1.8       petejc   1393:  #print-button&lt;/td&gt;[disabled="true"],
                   1394:  #print-button&lt;/td&gt;[disabled="true"]:hover,
                   1395:  #print-button&lt;/td&gt;[disabled="true"]:hover:active,
                   1396:  #print-button&lt;/td&gt;[disabled="true"] &gt; .menubutton-dual-stack &gt; .menubutton-dual-button,
                   1397:  #print-button&lt;/td&gt;[disabled="true"] &gt; .menubutton-dual-stack &gt;
1.1       david    1398:      .menubutton-dual-button:hover,
1.8       petejc   1399:  #print-button&lt;/td&gt;[disabled="true"] &gt; .menubutton-dual-stack &gt;
1.1       david    1400:      .menubutton-dual-button:hover:active
                   1401:    {
                   1402:      list-style-image      : url("chrome://global/skin/print-disabled.gif");
                   1403:    }
                   1404:  #print-button &gt; .menubutton-dual-stack &gt; .menubutton-dual-button:hover
                   1405:    {
                   1406:      list-style-image      : url("chrome://global/skin/print-hover.gif");
                   1407:    }
                   1408:  #print-button &gt; .menubutton-dual-stack &gt; .menubutton-dual-button:hover:active
                   1409:    {
                   1410:      list-style-image      : url("chrome://global/skin/print-clicked.gif");
                   1411:    }
                   1412:  #print-button &gt; .menubutton-dual-stack &gt; .menubutton-dual-dropmarker-box
                   1413:    {
                   1414:      margin-left       : 19px;
                   1415:      margin-top        : 22px;
1.8       petejc   1416:    }
                   1417: </pre>
                   1418:     <h4><a name="77093"></a> Global skin</h4>
                   1419:     <p>Almost all <!--INDEX Modern theme:global skin --> 
                   1420:     <!--INDEX skins:global --> <!--INDEX global skin --> 
                   1421:     <!--INDEX themes:Modern:global skin --> of the most specific
                   1422:     skin files (e.g., <i>navigator.css</i>) inherit from the global
                   1423:     skin, which includes but is not limited to the
                   1424:     <i>global.css</i> file located in
                   1425:     <i>chrome://modern.jar!/skin/global/skin/</i>.</p>
                   1426:     <p>The global skin includes other stylesheets that define
                   1427:     localizable settings and general global formatting, which the
                   1428:     <i>global.css</i> file loads at runtime. If you look at the top
                   1429:     of the <i>global.css</i> file as shown in <a href=
                   1430:     "#77042">Example 4-7</a>, you can see the stylesheet import
                   1431:     statements that collect these skins into a single global
                   1432:     skin:</p>
                   1433:     <p><i>Example 4-7: <a name="77042"></a></i> <i>CSS Import
                   1434:     statements in global skin</i></p>
                   1435: <pre>
                   1436:  /* ===== global.css ======================================================
1.1       david    1437:     == Styles that apply everywhere.
                   1438:     ======================================================================= */
                   1439:  /* all localizable skin settings shall live here */
                   1440:  @import url("chrome://global/locale/intl.css");
                   1441:  @import url("chrome://global/skin/formatting.css");
1.8       petejc   1442:  @namespace url("<a href=
                   1443: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a>");
1.1       david    1444:  /* ::::: XBL bindings ::::: */
1.8       petejc   1445:  toolbarbutton&lt;/td&gt;[type="menu-button"] {
1.1       david    1446:     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menu-button");
                   1447:  }
                   1448:  .menulist-compact {
                   1449:     -moz-binding:
                   1450:        url("chrome://global/content/bindings/menulist.xml#menulist-compact");
                   1451:  }
1.8       petejc   1452:  ...
                   1453: </pre>
                   1454:     <p>The <i>global.css</i> serves as a base into which these
                   1455:     other skins can be loaded. When you load <i>global.css</i> into
                   1456:     your XUL file by means of a <tt>xul-stylesheet</tt> processing
                   1457:     instruction, you in effect load these skins.</p>
                   1458:     <p>Also included in <a href="#77042">Example 4-7</a> are a
                   1459:     couple of binding attachments, which attach content to elements
                   1460:     that match certain style rules. On a related note, most global
                   1461:     skins on a widget-per-widget basis are now included in the
                   1462:     binding themselves, as opposed to being imported in a global
                   1463:     skin, which used to be the case. Take this button stylesheet
                   1464:     inclusion from the XBL file <tt>button.xml</tt> as a case in
                   1465:     point:</p>
                   1466: <pre>
                   1467: &lt;resources&gt;
1.1       david    1468: &lt;stylesheet src="chrome://global/skin/button.css"/&gt;
1.8       petejc   1469: &lt;/resources&gt;
                   1470: </pre>
                   1471:     <p>Here the XBL specific <tt>&lt;stylesheet&gt;</tt> element
                   1472:     includes the stylesheet, which can be included in a binding and
                   1473:     then inherited by other button bindings.</p>
                   1474:     <h4><a name="77094"></a> The communicator skin</h4>
                   1475:     <p>Like <i>global.css</i>, 
                   1476:     <!--INDEX Modern theme:communicator skin --> 
                   1477:     <!--INDEX skins:communicator --> 
                   1478:     <!--INDEX communicator skin --> 
                   1479:     <!--INDEX themes:Modern:communicator skin --> the
                   1480:     <i>communicator.css</i> file (<a href="#77044">Example 4-8</a>)
                   1481:     is another CSS file that does imports to build up the
                   1482:     communicator skin. The CSS style rules in the file itself are
                   1483:     minimal, but if you look at the top, you can see that many
                   1484:     styles that the communicator component uses come from the CSS
                   1485:     files also located in the <i>communicator</i> subdirectory of
                   1486:     the current skin.</p>
                   1487:     <p><i>Example 4-8: <a name="77044"></a></i> <i>CSS information
                   1488:     from communicator.css</i></p>
                   1489: <pre>
                   1490:  /* ==== communicator.css ====================================================
1.1       david    1491:     == Styles shared everywhere throughout the Communicator suite.
                   1492:     ========================================================================== */
                   1493:  @import url("chrome://global/skin/");
                   1494:  @import url("chrome://communicator/content/communicator.css");
                   1495:  @import url("chrome://communicator/skin/brand.css");
                   1496:  @import url("chrome://communicator/skin/button.css");
                   1497:  @import url("chrome://communicator/skin/formatting.css");
1.8       petejc   1498:  @namespace url("<a href=
                   1499: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a>");
1.1       david    1500:  /* ::::: online/offline icons ::::: */
1.8       petejc   1501:  #offline-status&lt;/td&gt;[offline="true"] {
1.1       david    1502:    list-style-image: url("chrome://communicator/skin/icons/offline.gif");
                   1503:  }
                   1504:  #offline-status {
                   1505:    list-style-image: url("chrome://communicator/skin/icons/online.gif");
                   1506:  }
                   1507:  /* ::::: directional button icons ::::: */
                   1508:  .up {
                   1509:    min-width: 0px;
                   1510:    list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
                   1511:  }
1.8       petejc   1512:  .up&lt;/td&gt;[disabled="true"] {
1.1       david    1513:    list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
                   1514:  }
                   1515:  .down {
                   1516:    min-width: 0px;
                   1517:    list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
                   1518:  }
1.8       petejc   1519:  .down&lt;/td&gt;[disabled="true"] {
1.1       david    1520:    list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
                   1521:  }
                   1522:  .up {
                   1523:    list-style-image:url("chrome://global/skin/scroll-up.gif");
                   1524:    min-width: 0px;
                   1525:  }
1.8       petejc   1526:  .up&lt;/td&gt;[disabled="true"] {
1.1       david    1527:    list-style-image:url("chrome://global/skin/scroll-up-disabled.gif");
                   1528:  }
                   1529:  .down {
                   1530:    min-width: 0px;
                   1531:    list-style-image:url("chrome://global/skin/scroll-down.gif");
                   1532:  }
1.8       petejc   1533:  .down&lt;/td&gt;[disabled="true"] {
1.1       david    1534:    list-style-image:url("chrome://global/skin/scroll-down-disabled.gif");
                   1535:  }
                   1536:  .sidebarTree {
                   1537:    border: none;
                   1538:    margin: 0px !important;
                   1539:  }
                   1540:  /* ::::: download manager ::::: */
                   1541:  #downloadView &gt; treechildren:-moz-tree-image(Name) {
                   1542:    margin-right: 2px;
1.8       petejc   1543:  }
                   1544: </pre>
                   1545:     <h2><a name="77095"></a> Creating New Skins</h2>
                   1546:     <p>You have <!--INDEX skins:creating --> already created the
                   1547:     highest level of the directory structure you will need to
                   1548:     create a skin for the xFly application (See "Creating the Hello
                   1549:     xFly Package" in <a href="ch02.html#77048">Chapter 2</a>). So
                   1550:     far, you have created three subdirectories corresponding to
                   1551:     different parts of the package and you have added XUL to the
                   1552:     <i>xfly/content</i> subdirectory. In the <i>xfly/skin</i>
                   1553:     subdirectory, you will tell the xFly content where to expect to
                   1554:     find its skin resources. As just mentioned, Mozilla
                   1555:     applications outside of the browser itself typically restrict
                   1556:     their skin to a single subdirectory and their skin manifest to
                   1557:     a single RDF/XML file.</p>
                   1558:     <p>Since the <i>skin</i> subdirectory in your xFly package is
                   1559:     already registered, you can create a new CSS file called
                   1560:     <i>xfly.css</i>, save it in the <i>skins</i> subdirectory, and
                   1561:     load it from your <i>xfly.xul</i> file by adding the following
                   1562:     stylesheet loading instruction at the top:</p>
                   1563: <pre>
                   1564: &lt;?xml-stylesheet href="chrome://xfly/skin" type="text/css" ?&gt;
                   1565: </pre>
                   1566:     <p>You will recall that the chrome pointer in the <i>href</i>
                   1567:     resolves to a file named <i>xfly.css</i> (named after the
                   1568:     directory) in the following <i>registered</i> directory in the
                   1569:     chrome:</p>
                   1570: <pre>
                   1571: chrome/xfly/skin/
                   1572: </pre>
                   1573:     <p>This CSS file will be the worksheet for all CSS for the xFly
                   1574:     application. Any style rules you add here and associated with
                   1575:     XUL elements in the xFly XUL code will affect the layout and
                   1576:     presentation of that code on restart.</p>
                   1577:     <h3><a name="77096"></a> Importing the Global Skin</h3>
                   1578:     <p>As you <!--INDEX skins:creating:importing global skin --> 
                   1579:     <!--INDEX global skin:importing, creating new skins --> 
                   1580:     <!--INDEX importing:global skin, creating new skins --> create
                   1581:     a new skin for your application, the first step is to make sure
                   1582:     that the application imports the global skin in which the most
                   1583:     basic look and feel of the XUL widgets is defined. Even if you
                   1584:     create a skin that looks completely different than the skins
                   1585:     installed with Mozilla, you should import the global skin to
                   1586:     avoid having to recreate so much of the basic presentation and
                   1587:     behavior of the XUL widgets.</p>
                   1588:     <p>As much as possible, the global skin avoids providing
                   1589:     theme-specific styles, and instead provides just enough
                   1590:     information to make buttons, for example, look like buttons and
                   1591:     menu items look like menu items. Increasingly, basic styles are
                   1592:     also being defined in the XBL bindings for widgets. For
                   1593:     instance, when you use a <tt>toolbar</tt> widget, you use a
                   1594:     binding in which certain intrinsic looks and behaviors are
                   1595:     defined in a way that's transparent to you and to the user of
                   1596:     the application. The style for these bindings is located in the
                   1597:     content subdirectories with the binding XML files. In this way,
                   1598:     they "stay with" the widget and not with the selected skin. You
                   1599:     can easily extend or overwrite any of the style information you
                   1600:     pick up from the global skin, but loading the skin is a good
                   1601:     place to start.</p>
                   1602:     <p>To do this, verify that you have the following line at the
                   1603:     top of the <i>xfly.xul</i> file:</p>
                   1604: <pre>
                   1605: &lt;?xml-stylesheet href="chrome://global/skin" type="text/css" ?&gt;
                   1606: </pre>
                   1607:     <p>If you do not have this line, add it now to the
                   1608:     <i>xfly.xul</i> file and restart Mozilla. You ought to see a
                   1609:     plain, UI-like collection of widgets in the XUL window. In the
                   1610:     screenshots in <a href="#77016">Figure 4-8</a>, you can see how
                   1611:     loading the global skin affects the XUL file.</p>
                   1612:     <div class="c12">
                   1613:       <img src="foo.gif">
                   1614:     </div>
                   1615:     <p><i>Figure 4-8: <a name="77016"></a></i> <i>Stylesheet
                   1616:     additions to a XUL file</i></p>
                   1617:     <p>The first screenshot in <a href="#77016">Figure 4-8</a>
                   1618:     shows a XUL file loaded in Mozilla with no skin information.
                   1619:     The second is the same XUL file with the global skin loading
                   1620:     instruction at the top. The third is a screenshot of that XUL
                   1621:     file with an instruction for loading your own stylesheet, which
                   1622:     in turn imports the global skin:</p>
                   1623: <pre>
                   1624: &lt;?xml-stylesheet href="chrome://xfly/skin/sample.css" type="text/css" ?&gt;
                   1625: </pre>
                   1626:     <p>The CSS information in the skin file <i>sample.css</i>
                   1627:     loaded above looks like this:</p>
                   1628: <pre>
                   1629: @import url(chrome://global/skin/)
1.1       david    1630: box#bbox { background-color: lightgrey; }
1.8       petejc   1631: button#rd { background-color: red; color: white; }
                   1632: </pre>
                   1633:     <p>Taking advantage of the modularity of Mozilla skins, you can
                   1634:     design a decent interface (if the last screenshot above can
                   1635:     count as that) with just a few lines of code.</p>
                   1636:     <p>Once you import the global skin and see what it buys you in
                   1637:     terms of look and feel, you can begin to create your own skin
                   1638:     for the xFly, overriding global styles where appropriate,
                   1639:     extending them by "cascading" new, more specific style rules
                   1640:     for your widgets, or adding new styles.</p>
                   1641:     <p>Before you begin to add styles to the <i>xfly.css</i> file,
                   1642:     import it (as a blank skin) into <i>xfly.xul</i> so you can see
                   1643:     your progress as you go. Add the following line to the top of
                   1644:     the <i>xfly.xul</i> file to import the xFly skin from the
                   1645:     proper subdirectory of the xFly package:</p>
                   1646: <pre>
                   1647: &lt;?xml-stylesheet href="chrome://xfly/skin" type="text/css" ?&gt;
                   1648: </pre>
                   1649:     <p>You won't see anything extra when you quit and restart the
                   1650:     application, but you now have the skin structure in place so
                   1651:     you can see your work progress.</p>
                   1652:     <h3><a name="77097"></a> Getting Started with Custom
                   1653:     Styles</h3>
                   1654:     <p>When you <!--INDEX skins:creating:general custom styles --> 
                   1655:     <!--INDEX CSS (Cascading Style Sheets):skins:defining general custom styles -->
                   1656:     make a new skin, it's a good idea to define the most general
                   1657:     styles for your application first. As we described above, more
                   1658:     specific CSS rules tend to inherit from more general ones. For
                   1659:     the xFly application, the most general aspects of the style are
                   1660:     the rules that apply to the xFly windows themselves. You can
                   1661:     create styles for all windows using the element name,
                   1662:     <i>window</i>, or you can define different classes for windows
                   1663:     if your application supports them. In the <i>xfly.xul</i> file,
                   1664:     for example, the root <tt>&lt;window&gt;</tt> element has the
                   1665:     attribute <tt>class="main"</tt>, so it will pick up style rules
                   1666:     given for <i>window.main</i>, as shown in <a href=
                   1667:     "#77046">Example 4-9</a>.</p>
                   1668:     <p>The xFly application has both a main window and pop-up
                   1669:     windows, so you might create style rules like the ones that
                   1670:     follow to establish the basic look of the xFly application.</p>
                   1671:     <p><i>Example 4-9: <a name="77046"></a></i> <i>CSS rules for
                   1672:     xFly window</i></p>
                   1673: <pre>
                   1674:  window.main {
1.1       david    1675:     background-color:            #cccccc;
                   1676:      display:                    block;
                   1677:      overflow:                   hidden;
                   1678:      font:                       small arial,helvetica,sans-serif,tahoma;
                   1679:      padding:                    0px;
                   1680:  }
                   1681:  window.popup{
                   1682:      background-color:           #cccccc;
                   1683:      display:                    block;
                   1684:      overflow:                   hidden;
                   1685:      font:                       small arial,helvetica,sans-serif,tahoma;
                   1686:      padding:                    2px;
                   1687:      width:                      auto;
                   1688:      height:                     auto;
1.8       petejc   1689:  }
                   1690: </pre>
                   1691:     <p>Now, with the two stylesheets (<i>global.css</i> and the
                   1692:     <i>xfly.css</i>) referenced at the top, you already have a
                   1693:     window that is starting to look like an application.</p>
                   1694:     <h3><a name="77098"></a> Creating Styles for the xFly
                   1695:     Buttons</h3>
                   1696:     <p>Now that <!--INDEX skins:creating:button styles --> 
                   1697:     <!--INDEX buttons:styles, creating for custom skins --> you
                   1698:     have created a single custom style for the xFly application,
                   1699:     you can see how easy it is to associate cascading style rules
                   1700:     with any element in your interface. The next logical step is to
                   1701:     style the buttons in the xFly sample application, since they
                   1702:     make up such a large portion of the interface itself.</p>
                   1703:     <p>When you use the button widget without any extra style
                   1704:     information, you already get a lot of the button-like
                   1705:     presentation and behavior. The button has different looks, for
                   1706:     example, when you hover over it and when you click it, and it
                   1707:     has a basic three-dimensional shape as seen in <a href=
                   1708:     "#77018">Figure 4-9</a>.</p>
                   1709:     <div class="c12">
                   1710:       <img src="foo.gif">
                   1711:     </div>
                   1712:     <p><i>Figure 4-9: <a name="77018"></a></i> <i>XUL button with
                   1713:     no style</i></p>
                   1714:     <p>A common update to regular XUL buttons is to give them
                   1715:     images, like the navigation buttons in the main Mozilla browser
                   1716:     window. Adding the class-based style rule in <a href=
                   1717:     "#77048">Example 4-10</a> to the xFly stylesheet (and, of
                   1718:     course, the GIF image itself to the <i>skin</i> subdirectory)
                   1719:     will give all the "fly" buttons background images with flies in
                   1720:     them. Example 4-10<a name="77048"></a> <i>Custom styles for
                   1721:     buttons</i></p>
                   1722: <pre>
                   1723:  button.fly {
1.1       david    1724:    list-style-image: url("chrome://xfly/skin/btnfly.gif");
                   1725:  }
1.8       petejc   1726:  button.fly&lt;/td&gt;[disabled="true"] {
1.1       david    1727:    list-style-image: url("chrome://xfly/skin/btnfly-dis.gif ");
                   1728:  }
                   1729:  button.fly#hover {
                   1730:    list-style-image: url("chrome://xfly/skin/btnfly-hov.gif ");
1.8       petejc   1731:  }
                   1732: </pre>
                   1733:     <h3><a name="77099"></a> Describing the Skin in RDF</h3>
                   1734:     <p>As described <!--INDEX skins:creating:RDF manifest files -->
                   1735:     <!--INDEX RDF (Resource Description Framework):files:creating skins -->
                   1736:     <!--INDEX manifests:creating skins --> 
                   1737:     <!--INDEX files:mainfest, creating skins --> in <a href=
                   1738:     "ch06.html#15291">Chapter 6</a>, a manifest must accompany and
                   1739:     describe the skin so it can be found and registered. The
                   1740:     manifest is an RDF file called <i>contents.rdf</i> that sits at
                   1741:     the highest level of the skin (i.e., at the top of the JAR or
                   1742:     immediately under the <i>modern</i> directory when extracted to
                   1743:     disk). Since the content, skin, and locale of an application
                   1744:     are considered different packages, each must have its own
                   1745:     manifest.</p>
                   1746:     <p>The listing in <a href="#77050">Example 4-11</a> shows the
                   1747:     <i>contents.rdf</i> manifest that accompanies the xFly skin
                   1748:     resources in the <i>xfly.jar!/skin/</i> directory. Example
                   1749:     4-11<a name="77050"></a> <i>Skin manifest for the xFly
                   1750:     sample</i></p>
                   1751: <pre>
                   1752:  &lt;?xml version="1.0"?&gt;
                   1753:  &lt;RDF:RDF xmlns:RDF="<a href=
                   1754: "http://www.w3.org/1999/02/22-rdf-syntax-ns">http://www.w3.org/1999/02/22-rdf-syntax-ns</a>#
                   1755:     xmlns:chrome="<a href=
                   1756: "http://www.mozilla.org/rdf/chrome">http://www.mozilla.org/rdf/chrome</a>#"&gt;
1.1       david    1757:    &lt;RDF:Seq about="urn:mozilla:skin:root"&gt;
                   1758:      &lt;RDF:li resource="urn:mozilla:skin:classic/1.0" /&gt;
                   1759:    &lt;/RDF:Seq&gt;
                   1760:    &lt;RDF:Description about="urn:mozilla:skin:classic/1.0"&gt;
                   1761:      &lt;chrome:packages&gt;
                   1762:        &lt;RDF:Seq about="urn:mozilla:skin:classic/1.0:packages"&gt;
                   1763:          &lt;RDF:li resource="urn:mozilla:skin:classic/1.0:xfly"/&gt;
                   1764:        &lt;/RDF:Seq&gt;
                   1765:      &lt;/chrome:packages&gt;
                   1766:    &lt;/RDF:Description&gt;
1.8       petejc   1767:  &lt;/RDF:RDF&gt;
                   1768: </pre>
                   1769:     <p>As you can see, the basic form of the manifest is something
                   1770:     like, "This is the classic skin we have (given as a direct
                   1771:     child of the RDF root element), which applies to the following
                   1772:     packages: <i>xfly</i>." The second group of RDF in this
                   1773:     manifest provides a list of packages to which the skin should
                   1774:     apply. In the case of the xFly application, all XUL code is a
                   1775:     single package. In Mozilla, a <i>contents.rdf</i> file in a
                   1776:     package subdirectory of the <i>modern.jar</i>, for example,
                   1777:     would describe the communicator package in a similar way, but
                   1778:     it would be a composite of other package manifests in the theme
                   1779:     to create a single, overarching manifest for the whole theme.
                   1780:     <a href="#77052">Example 4-12</a> shows the manifest for just
                   1781:     the Mozilla communicator package. Example 4-12<a name=
                   1782:     "77052"></a> <i>Manifest for the communicator package of the
                   1783:     modern skin in Mozilla</i></p>
                   1784: <pre>
                   1785:  &lt;?xml version="1.0"?&gt;
                   1786:  &lt;RDF:RDF xmlns:RDF="<a href=
                   1787: "http://www.w3.org/1999/02/22-rdf-syntax-ns">http://www.w3.org/1999/02/22-rdf-syntax-ns</a>#"
                   1788:           xmlns:chrome="<a href=
                   1789: "http://www.mozilla.org/rdf/chrome">http://www.mozilla.org/rdf/chrome</a>#"&gt;
1.1       david    1790:    &lt;!-- List all the skins being supplied by this theme --&gt;
                   1791:    &lt;RDF:Seq about="urn:mozilla:skin:root"&gt;
                   1792:      &lt;RDF:li resource="urn:mozilla:skin:modern/1.0" /&gt;
                   1793:    &lt;/RDF:Seq&gt;
                   1794:    &lt;!-- Modern Information --&gt;
                   1795:    &lt;RDF:Description about="urn:mozilla:skin:modern/1.0"&gt;
                   1796:      &lt;chrome:packages&gt;
                   1797:        &lt;RDF:Seq about="urn:mozilla:skin:modern/1.0:packages"&gt;
                   1798:          &lt;RDF:li resource="urn:mozilla:skin:modern/1.0:communicator"/&gt;
                   1799:        &lt;/RDF:Seq&gt;
                   1800:      &lt;/chrome:packages&gt;
                   1801:    &lt;/RDF:Description&gt;
1.8       petejc   1802:  &lt;/RDF:RDF&gt;
                   1803: </pre>
                   1804:     <p>This RDF/XML file describes a skin to the chrome registry so
                   1805:     it can be registered properly. All new packages must be
                   1806:     accompanied by these sorts of RDF-based descriptions if they
                   1807:     will be made available to users.</p>
                   1808:     <h2><a name="77100"></a> What Is Possible in a Skin?</h2>
                   1809:     <p>In this final section, we describe a few things that make
                   1810:     CSS in Mozilla particularly powerful and cases when this power
                   1811:     is curtailed because of the security restrictions.</p>
                   1812:     <h3><a name="77101"></a> Binding New Widgets to the Interface
                   1813:     Using XBL</h3>
                   1814:     <p>A 
                   1815:     <!--INDEX CSS (Cascading Style Sheets):widgets, binding with XBL -->
                   1816:     <!--INDEX widgets:binding with XBL --> 
                   1817:     <!--INDEX skins:widgets, 
                   1818:     binding with XBL --> <!--INDEX bindings:XBL:widgets --> 
                   1819:     <!--INDEX XBL (eXtensible Binding Language):widgets -->
                   1820:     description of skins wouldn't be complete without a mention of
                   1821:     binding widgets by using XBL, a very powerful feature of CSS in
                   1822:     Mozilla. The <tt>-moz-binding</tt> keyword described in <a
                   1823:     href="#77028">Table 4-4</a> is the key to binding special,
                   1824:     prefabricated widgets to your XUL. The language in which these
                   1825:     widgets are defined is another XML-based language called the
                   1826:     Extensible Bindings Language. <a href="ch07.html#77027">Chapter
                   1827:     7</a> describes this language in more detail.</p>
                   1828:     <p>To see how XBL works, go back and look at the first style
                   1829:     rule for "print-button" in <a href="#77040">Example 4-6</a>.
                   1830:     The first style statement in that block has a property called
                   1831:     <tt>-moz-</tt> <tt>binding</tt>. This property defines a
                   1832:     <i>binding</i> for the XUL element styled by this style rule.
1.12      ian      1833:     The <i>chrome URL</i> that the <tt>-moz-binding</tt> property
1.8       petejc   1834:     points to is where an XBL-based definition of a print button is
                   1835:     located.</p>
                   1836:     <p>Creating a style rule in which your XUL element (in this
                   1837:     case, a button in which the ID is "print-button") and the use
                   1838:     of the <tt>-moz-binding</tt> to point to the XBL defines new
                   1839:     properties, behavior, or content for that XUL element, you can
                   1840:     add to or totally recreate any widget in your interface. The
                   1841:     binding itself is described in XBL, but XBL also provides
                   1842:     structures (such as the <tt>&lt;content&gt;</tt> and
                   1843:     <tt>&lt;handlers&gt;</tt> child elements) in which you can
                   1844:     define new XUL content, new JavaScript, and new XPConnected
                   1845:     interfaces. CSS glues the XUL together with the XBL.</p>
                   1846:     <p>In the first part of the snippet in <a href="#77054">Example
                   1847:     4-13</a>, for example, the CSS rule binds the toolbar button to
                   1848:     an XBL binding called <i>menu-button</i>, which adds a button
                   1849:     and an image. Example 4-13<a name="77054"></a> <i>CSS and XBL
                   1850:     example</i></p>
                   1851: <pre>
                   1852:  // In the CSS:
                   1853:  toolbarbutton&lt;/td&gt;[type="menu-button"] {
1.1       david    1854:     -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu-button");
                   1855:  }
                   1856:  // In the XBL file toolbarbutton.xml:
                   1857:  &lt;binding id="menu-button" display="xul:menu"
                   1858:      extends="chrome://global/content/bindings/button.xml#menu-button-base"&gt;
                   1859:    &lt;resources&gt;
                   1860:      &lt;stylesheet src="chrome://global/skin/toolbarbutton.css"/&gt;
                   1861:    &lt;/resources&gt;
                   1862:    &lt;content&gt;
                   1863:      &lt;children includes="observes|template|menupopup|tooltip"/&gt;
                   1864:      &lt;xul:toolbarbutton class="box-inherit toolbarbutton-menubutton-button"
                   1865:                         anonid="button" flex="1" allowevents="true"
                   1866:                         xbl:inherits="disabled,crop,image,label,accessKey,command,
                   1867:                                       align,dir,pack,orient"/&gt;
                   1868:      &lt;xul:dropmarker type="menu-button" class="toolbarbutton-menubutton-dropmarker"
                   1869:                          xbl:inherits="align,dir,pack,orient,disabled"/&gt;
                   1870:    &lt;/content&gt;
1.8       petejc   1871:  &lt;/binding&gt;
                   1872: </pre>
                   1873:     <p>When you use the Modern skin, you can see in <a href=
                   1874:     "#77020">Figure 4-10</a> that the menu button is a composite of
                   1875:     the toolbar button, a dropmarker image resource, and a
                   1876:     <tt>menupopup</tt> making the drop-down history available.</p>
                   1877:     <div class="c12">
                   1878:       <img src="foo.gif">
                   1879:     </div>
                   1880:     Figure 4-10<a name="77020"></a> <i>Modern menu button</i> 
                   1881:     <p>You might also notice in <a href="#77054">Example 4-13</a>
                   1882:     that this binding pulls in an external stylesheet
                   1883:     (<tt>toolbarbutton.css</tt>), which is contained in the
                   1884:     <tt>&lt;resources&gt;</tt> section of the binding. This
                   1885:     stylesheet provides all the styles and theme information for a
                   1886:     toolbar button, including the type of <tt>menu-button</tt>.
                   1887:     More information on stylesheets in XBL can be found in <a href=
                   1888:     "ch07.html#70326">Chapter 7</a>.</p>
                   1889:     <h3><a name="77102"></a> User Stylesheets</h3>
                   1890:     <p>In <!--INDEX user stylesheets --> 
                   1891:     <!--INDEX stylesheets:user --> 
                   1892:     <!--INDEX CSS (Cascading Style Sheets):user stylesheets --> 
                   1893:     <!--INDEX userChrome.css --> <!--INDEX userContent.css -->
                   1894:     addition to the many CSS stylesheets that give the user
                   1895:     interface its look, Mozilla also lets you create personal
                   1896:     stylesheets that apply to all of the chrome and content you
                   1897:     view in the browser. Two CSS files, <i>userChrome.css</i> and
                   1898:     <i>userContent.css</i>, located in the <i>chrome</i>
                   1899:     subdirectory of your user profile, can define rules that apply
                   1900:     to all of the Mozilla application interfaces and all web pages
                   1901:     you view, respectively. When these two files are
                   1902:     present-sometimes they are installed in the user profile and
                   1903:     sometimes you create them yourself-they come with example rules
                   1904:     that are commented out. However, you can uncomment them and add
                   1905:     your own rules to personalize the look of the browser and its
                   1906:     content.</p>
                   1907:     <p><a href="#77056">Example 4-14</a> shows the default
                   1908:     commented rules in <i>userChrome.css</i>. Note the use of the
                   1909:     <tt>!important</tt> keyword to specify that these rules should
                   1910:     take precedence over rules that come from stylesheets in the
                   1911:     current theme. Example 4-14<a name="77056"></a>
                   1912:     <i>userChrome.css style rules</i></p>
                   1913: <pre>
                   1914:  /*
1.1       david    1915:   * This file can be used to customize the look of Mozilla's user interface
                   1916:   * You should consider using !important on rules which you want to
                   1917:   * override default settings.
                   1918:   */
                   1919:  /*
                   1920:   * example: make the UI look a little more like Irix (nice readable
                   1921:   *          slanted-helvetical menus, funny pink color on text fields)
                   1922:   *
                   1923:   * input {
                   1924:   *   color: black !important;
                   1925:   *   background-color: rgb(255, 225, 175) !important;
                   1926:   * }
                   1927:   *
                   1928:   * menubar {
                   1929:   *   font-family: helvetica !important;
                   1930:   *   font-style: italic !important;
                   1931:   *   font-weight: bold !important;
                   1932:   *   font-size: 4mm !important;
                   1933:   * }
                   1934:   */
                   1935:  /*
1.8       petejc   1936:   * For more examples see <a href=
                   1937: "http://www.mozilla.org/unix/customizing.html">http://www.mozilla.org/unix/customizing.html</a>
                   1938:   */
                   1939: </pre>
                   1940:     <p>If you want to make the content in all your <tt>menu</tt>
                   1941:     widgets white so you can read them better, get rid of these
                   1942:     defaults and do something like this:</p>
                   1943: <pre>
                   1944: menu {
1.1       david    1945: background-color: white !important;
                   1946: color: darkblue !important;
                   1947: padding: 5px !important;
1.8       petejc   1948: }
                   1949: </pre>
                   1950:     <p>You can also use these stylesheets to change or do away with
                   1951:     aspects of the user interface you don't like. The following
                   1952:     rule, for example, shrinks the navigation buttons in the Modern
                   1953:     theme:</p>
                   1954: <pre>
                   1955: .toolbarbutton-menubutton-button &gt; .toolbarbutton-box,
1.1       david    1956: .toolbarbutton-1 &gt; .toolbarbutton-box
                   1957: {
                   1958: max-width: 40px !important;
                   1959: text-align: center !important;
1.8       petejc   1960: }
                   1961: </pre>
                   1962:     <p>Or, if you can think of the appropriate selectors, you can
                   1963:     use <i>userContent.css</i> to change the way banner images are
                   1964:     displayed (or not displayed), how basic text is presented, or
                   1965:     where certain elements of a web page are positioned.</p>
                   1966:     <h3><a name="77103"></a> Theme Security Restrictions</h3>
                   1967:     <p>To prevent <!--INDEX themes:security considerations --> 
                   1968:     <!--INDEX security:themes --> the wholesale overriding of the
                   1969:     basic XUL application, various restrictions are placed on
                   1970:     themes. In other words, you can do some things in XUL that you
                   1971:     cannot do in CSS. The two preinstalled themes in Mozilla,
                   1972:     Modern, and Classic use technologies like XBL, JavaScript, and
                   1973:     XPConnect to provide additional behavior to the application.
                   1974:     They are considered full-blown packages, like entirely separate
                   1975:     interfaces (see <a href="ch06.html#15291">Chapter 6</a> for a
                   1976:     description the various types of packages and installations).
                   1977:     When you install new themes, however, those themes do not have
                   1978:     "script access" and have limited access to XBL bindings.</p>
                   1979:     <p>Code in the <tt>&lt;implementation&gt;</tt> and
                   1980:     <tt>&lt;handler&gt;</tt> structures of an XBL binding are
                   1981:     ignored, as are event handlers written in the
                   1982:     <tt>&lt;content&gt;</tt> structures.</p>
                   1983:     <p>You can write these XBL goodies into your theme if you want
                   1984:     (or develop a theme out of the Modern theme, where there is
                   1985:     plenty of XBL, and see them disabled in your theme when they
                   1986:     were working in that preinstalled version), but Mozilla will
                   1987:     not read or execute them. You can use XBL to define new XUL
                   1988:     content for a widget by way of CSS, but unless you create an
                   1989:     "evil skin," that content has to be simple XUL to show up in
                   1990:     your theme at all.</p>
                   1991:     <blockquote>
                   1992:       <hr>
                   1993:       <a name="62192"></a> Evil Skins 
                   1994:       <p>In the <!--INDEX evil skins --> 
                   1995:       <!--INDEX skins:evil skins --> Mozilla community, the term
                   1996:       "evil skins" is sometimes used to describe skins with
                   1997:       unlimited script access. An evil skin is a skin for which the
                   1998:       security restrictions above do not apply. They can access the
                   1999:       DOM of the web page and XUL content, use XPConnect to connect
                   2000:       to the Mozilla services in XPCOM, or implement new
                   2001:       application code in XBL widgets.</p>
                   2002:       <p>Remember that when you develop skins for Mozilla and
                   2003:       package them for installation as skins, the script part of
                   2004:       your skins will be disabled. However, if you create a skin
                   2005:       and then install it as a new package, your skin will not be
                   2006:       as limited, and you will have full access to XBL, XPConnect,
                   2007:       and the script. To see how to install an evil skin and other
                   2008:       new packages in Mozilla, see <a href=
                   2009:       "ch06.html#15291">Chapter 6</a>.</p>
                   2010:       <hr>
                   2011:     </blockquote>
                   2012:     <hr>
                   2013:     <hr>
                   2014:     <a name="290"></a><a href="#b290">[Back]</a> <a name=
                   2015:     "77059"></a> There are just a couple of exceptions to this
                   2016:     rule. The <i>content</i> directory of a package (typically the
                   2017:     place where just the XUL and JS are stored) sometimes holds a
                   2018:     file called <i>xul.css</i> . This file defines style
                   2019:     information that is so fundamental to the way widgets are
                   2020:     rendered more fundamental, even, then <i>global.css</i> and its
                   2021:     siblings that it is set apart from the regular skin and put in
                   2022:     with the content, where it is loaded automatically. It's not a
                   2023:     good idea to edit this file. 
                   2024:     <hr>
                   2025:     <br>
                   2026:     <br>
                   2027:     File a <a href=
                   2028:     "http://mozdev.org/bugs/enter_bug.cgi?product=books">Bug</a>
1.18      brian    2029:     for chapter 4. 
1.19    ! cdn      2030:     <?php $hide_text_control=1; $post_to_list=NO; $author='reviewers@mozdev.org'; // require(NOTES); ?>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>