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

Tham khảo tài liệu creating applications with mozilla-chapter 4. css in mozilla applications-p3, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P3Chapter 4. CSS in Mozilla Applications-P3Figure 4-4. Composite styles for the reload button4.2.5. Menu SkinningAs an example of using CSS in applications, Example 4-5 combines manycommon selectors described in this chapter in a set of rules for defining thelook and basic behavior of menus. The CSS handles the basic look of themenus, their color and style, the look of the menu items when they arehovered over, and the look when they are selected.Example 4-5. Mixing CSS and XUL .m { background-color: lightgray; font-size: 9pt; }.m:hover { border: 1px; }.m:active { background-color: gray; color: white; }#q:active { background-color: black }When you hover over any of the items in the menu generated by the code inExample 4-5, they display a border. When you select the item, it appearsmomentarily with a dark gray background and white lettering, like reversevideo. The Quit menu item, unlike others, appears with a black background.Note that it also picks up the same white lettering as the other items of the mclass, since this style information is inherited.4.3. Mozilla SkinsAt an earlier point in Mozillas history, all interface files -- the XUL, theCSS, and the images -- were stored in directories named after the mainMozilla packages in the application chrome directory. The best way to lookat a skin was just to poke around in those directories, change things in theCSS files you found, and reload to see what had changed in the browser. TheCSS files are no longer stored in regular directories.To organize things better and make a smaller footprint for Mozilla, allchrome is stored in special compressed archives in the chrome directory.These archives are Java Archive (JAR) files, whose subdirectory structurereflects the structure of Mozillas major components, to some extent. Thereis one JAR archive for every theme. By default, Mozilla is distributed withthe Classic and Modern themes, represented in the chrome asclassic.jar and modern.jar. Figure 4-5 shows some of the contentsof the modern.jar file in a zip utility.Figure 4-5. The contents of the modern.jar file4.3.1. CSS and Skin HierarchiesYou have already seen some of the structure inherent to CSS in the previousexamples. When an element has both a class-based and an id-based rule, forexample (as well as a basic element look and feel defined in the globalskin), the element style is applied. Then, the more specific class-based rule isapplied and overwrites the properties of the general rule if they conflict.Finally, the ID-based rule is applied and overwrites whatever conflictingstyle values are in the more general selectors. In this way, the most specificstyle rules inherit from the most basic. This is the cascade in CascadingStyle Sheets. In addition to this definition, the syntax of CSS allows you tospecify selector relationships -- such as when you create a parent-childselector and apply a style rule to only the selectors that have some otherparticular element as a parent in the XUL content model. However, there isalso a strong inheritance mechanism in the way that the Mozilla browseruses CSS -- in the way skin files are organized in the chrome and applied tothe XUL. The strong hierarchical structure present in Mozillas CSS and theXUL allow the chrome registry to maintain the skin and the variouscomponents that get skinned as different modules, but find and apply theright resources whenever they are called for. This structure is described inthe Section 4.3.2 section later in this chapter.4.3.1.1. Skin inheritance and skin modularizationFor the sake of discussion, this book describes two kinds of inheritance: themore basic form, in which a specific skin like navigator.css inherits allstyle rules from global.css, and modularization, in which navigator skinrules specific to the toolbar are distributed into widget-specific CSS files(e.g., toolbar.css is part of the global skin). The global skin -- once alarge, unmodular set of style rules contained in global.css -- is nowspread out over several modularized CSS files, as Figure 4-6 shows.Figure 4-6. XUL file and skin loadingThis modularization makes it possible for a XUL file to load theglobal.css file in a single statement and use any of the style rulesdefined in these skins. We will discuss the global skin in more detail in thesection Section 4.3.4.2 later in this chapter. Skin inheritance and skinmodularization work together to give skins their structure and make itpossible to create new skins or apply CSS only to particular parts of theapplication.Figure 4-6 shows a very specific skin, new.css, inheriting the styleinformation from communicator.css and then being loaded into theXUL file. In a situation like this, ex.xul can use any style rule defined inthe communicator.css file (or in any CSS file that it imports).4.3.2. Basic Skin StructureThough they look very different, the Modern and Classic themes that areinstalled with Mozilla have similar structures. This is because the structureof a theme reflects, in many ways, the structure of the components to whichit applies. So, for example, both themes have subdirectories (in the JAR filesin which they are stored) where the CSS and image resources for each of themain components are stored. Modern, for example, has a communicatorcomponent subdirectory, and that subdirectory has subdirectoriesrepresenting the various parts of the communicator interface: bookmarks,help, search, sidebar, and so on. Example 4-7 shows the Modern andClassically themed Navigation bars side by side.Figure 4-7. Classic and Modern Navigation toolbarsBoth themes are complete. They each contain all skin resources for themajor components of the application.[1] The resources themselves vary, buttheir structur ...