Part II - Styling Application
In this tutorial we will go through a series of techniques and technologies used when styling a User Interface.
Overview
Introduction to CSS
The CSS or Cascading Style Sheets technology is designed to take UI presentation details (presentation styles) away from UI markup. The technology proved its use in the world of web-browsers although its support has been limited for quite a while in some user agents. In Ample SDK you can use more CSS selectors than available in browsers, due to a more comprehensive approach to the UI and component styling.
It is common in the HTML world to specify element styles inline with a style attribute. Although this is possible in Ample SDK as well, we recommend avoiding such practice and using the class attribute with a corresponding style declared in a separate stylesheet.
Embedding CSS stylesheets in a web page
CSS stylesheets created to be applied to the Ample SDK UI fragments can be embedded in a web page in following ways:
Inline, using a style tag with type="text/ample+css"
<style type="text/ample+css">
/* Ample SDK inline stylesheet */
</style>
Referencing a resource, using a link tag with href attribute
<link type="text/ample+css" rel="stylesheet" href="stylesheet.css"/>
Using CSS for styling UI
Namespaced selectors for styling component
Along with XML, CSS also added a module that allows selectors to be written and matched for elements found in certain namespaces.
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
xul|menulist {
width: 200px;
}
In the example above, we declared a prefix xul to be bound to the http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul namespace, thus only matching the element selector to those menulist elements that are found in the xul namespace.
It is important to remember that even XHTML stylesheet which typically doesn't use prefixes needs a namespace declaration.
@namespace "http://www.w3.org/1999/xhtml";
input {
font-family: Courier;
}
Pseudo-class selectors for styling component state
Pseudo-class selectors are usually used to style content in a dynamic state. Some of the pseudo-class selectors you might be familar with are hover and focus.
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
xul|datepicker:focus {
background-color: pink;
}
In the CSS code above we added a pink background-color to the datepicker component, to be applied when the component has focus.
Pseudo-element selectors for styling component content
Pseudo-element selectors are used to style component substructures. An example of a pseudo-element selector that you may be familiar with is first-letter.
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
xul|colorpicker::input {
border: solid 1px blue;
}
In the CSS code above we added a border to the input field of the XUL colorpicker component.
Loading...