10 Working with At-Rules
This chapter describes how to work with at-rules. Information on how to create, modify, and apply an at-rule is provided in addition to describing the various types of at-rule that the ADF skinning framework supports.
This chapter includes the following sections:
10.1 About At-Rules in the ADF Skinning Framework
CSS at-rules (at-rules) are a way to define style properties for when an application's page renders in a particular environment such as, for example, a browser, platform, locale or device. The ADF skinning framework supports a number of at-rules that allow you to define properties for selectors that you want to apply to a particular environment. For example, you may need to add some padding in Internet Explorer that you do not need on any other browser or perhaps you want to increase the size of icons if a page renders on a touch device. To style a selector for these scenarios, put the style properties inside an at-rule.
The ADF skinning framework divides the at-rules that it supports into two categories. It categorizes any at-rules that it passes directly to the user agent to interpret as a client-side at-rule and any at-rules that the ADF skinning framework itself interprets as a server-side at-rule. For more information about these categories, see Section 10.2, "Working with Server-Side At-Rules" and Section 10.3, "Working with Client-Side At-Rules."
You can use the selectors editor in the ADF Skin Editor and in JDeveloper to create at-rules in your ADF skin, as described in Section 10.4, "Creating At-Rules in an ADF Skin." At-rules that your ADF skin inherits or at-rules that you define in your ADF skin appear in the Selector Tree under the At-Rules node, as illustrated in Figure 10-5.
Apart from the at-rules described in this chapter, you can also use the @import at-rule to import another ADF skin into your ADF skin. For more information, see Section 4.4, "Importing One or More ADF Skins Into the Current ADF Skin."
10.2 Working with Server-Side At-Rules
Table 10-1 lists a number of the server-side at-rules that the ADF skinning framework supports. The ADF skinning framework interprets these rules and determines the style properties to render, as described in Section 10.4.3, "What Happens at Runtime: How the ADF Skinning Framework Applies At-Rules."
Table 10-1 Server-Side At-Rules Supported by the ADF Skinning Framework
| Name | Description |
|---|---|
|
|
Defines styles for For more information about the |
|
|
Specify a locale to define styles only for a particular language and country. You can specify either only the language or both the language and the country. Note that the ADF skinning framework does not support the |
|
|
Defines styles for when a page renders in a particular mode. This at-rule supports the following values:
|
|
|
Define platform styles. Supported values are:
|
Apart from the rules listed in Table 10-1, one of the most frequently used server-side at-rules is @agent. The @agent at-rule enables you to define styles to apply to one or more user agents. Table 10-2 describes the supported values to set an agent-specific style using the @agent at-rule.
Table 10-2 Supported Values for the @agent At-Rule
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Using the @agent at-rule, you can:
-
Specify styles for any version of Internet Explorer:
@agent ie -
Optionally, specify a specific version of the agent using the
andkeyword. For example, to specify version 9 of Internet Explorer:@agent ie and (version: 9) -
Use comma-separated rules to specify styles for a number of agents. For example, use the following rule to specify styles for Versions 15 and 17 of Mozilla Firefox and for Internet Explorer 8.x:
@agent mozilla and (version: 15.*), mozilla and (version: 17.*), ie and (version: 8.*) -
Note that the following two syntax examples specify the same rule:
@agent ie and (version: 8.*)@agent ie and (version: 8)To specify a rule for styles to apply only to Internet Explorer 8.0.x, write the following:
@agent ie and (version: 8.0.*) -
Use the
max-versionandmin-versionkeywords to specify a range of versions. For example, you can rewrite the following rule:@agent ie and (version: 8), ie and (version: 9)as:
@agent ie and (min-version: 8) and (max-version: 9)to apply styles that you define to all versions of Internet Explorer 8 and 9.
You can also use the @agent rule to determine styles to apply to agents that are touch devices. The following examples show the syntax that you write in an ADF skin file to configure this capability.
@agent (touchScreen) {
/* Touchscreen specific styles for all touch devices: both single and multiple touch. */
}
@agent (touchScreen:single) {
/* Styles specific for a touch device with single touch. */
}
@agent (touchScreen:multiple) {
/* Styles specific for a touch device with multiple touch. */
}
Use the @agent (touchScreen:none) at-rule to specify styles that you do not want to render on a touch device. For example, the Fusion Simple family of ADF skin (fusionFx-simple-v1.2 and later) applies this at-rule to selectors configured to use the :hover pseudo class. This is because the :hover pseudo-class is not appropriate for use on a touch device. The @agent (touchScreen:none) at-rule wraps selectors that use the :hover pseudo-class, as in the following example:
@agent (touchScreen:none){
af|breadCrumbs:step:hover{
text-decoration:underline;
}
}
Figure 10-2 shows how the Selector Tree displays selectors to which the @agent (touchScreen:none) at-rule is applied.
For more information about creating applications to render in touch devices, see the "Creating Web Applications for Touch Devices Using ADF Faces" appendix in Developing Web User Interfaces with Oracle ADF Faces (for the release that pertains to the application you are skinning).
For information about how to create an at-rule in an ADF skin, see Section 10.4, "Creating At-Rules in an ADF Skin."
10.3 Working with Client-Side At-Rules
The ADF skinning framework does not evaluate the following list of at-rules:
-
@charset -
@document -
@font-face -
@import -
@keyframes -
@media -
@page -
@supports
Instead, it passes the at-rule, and the style properties within the at-rule, directly to the user agent. The user agent evaluates the at-rule and applies the style properties within the at-rule if the condition that the at-rule specifies is satisfied.
Because the style properties inside client-side at-rules get passed directly to the user agent, you cannot use ADF skin properties or global selector aliases inside client-side at-rules. The ADF skinning framework needs to evaluate these items to determine their runtime values. Example 10-1 demonstrates a number of valid usages of client-side at-rules in an ADF skin. In Example 10-1, the @media at-rule specifies the style properties to render for an af:button component when a screen has a maximum width of 1680px. The example also specifies style properties to apply for the af:button component when this condition is not met.
Note:
Do not insert ADF skin properties or global selector aliases inside a client-side at-rule. Unexpected behavior may result when you render a page using the ADF skin. The name of an ADF skin property is prefaced by -tr- and a global selector alias appends :alias. For more information, see Section 2.3, "Properties in the ADF Skinning Framework" and Section 8.1, "About Global Selector Aliases."
Example 10-1 Client-Side At-Rules in an ADF Skin
...
.myStyleClass {
background-color: Yellow;
}
af|button {
-tr-inhibit: background-image;
color: Red;
}
af|button::access-key {
background-color: Blue;
color: Yellow;
}
@media screen and (max-width:1680px) {
.myStyleClass {
background-color: Red;
}
af|button {
color: Lime;
}
af|button::access-key {
background-color: White;
color: Purple;
}
}
...
Figure 10-3 shows instances of the af:button component that render using the appropriate style properties defined in Example 10-1 based on the maximum width of the screen where the components display.
Client-side at-rules can nest within server-side at-rules. Server-side at-rules can nest within client-side at-rules. Example 10-2 demonstrates instances where client-side and server-side at-rules nest within each other.
The @page and @font-face client-side at-rules are exceptions. These client-side at-rules cannot contain a server-side at-rule because they contain CSS properties whereas other client-side at-rules contain complete styles.
Example 10-2 Nested Client-Side and Server-Side At-Rules
@agent gecko {
@page :first {
margin: 2in ;
}
}
@keyframes mymove {
@agent gecko {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
@agent ie {
0% { top: 1; left: 1; }
30% { top: 100px; }
100% { top: 200px; left: 100%; }
}
}
10.4 Creating At-Rules in an ADF Skin
You can create a new at-rule in your ADF skin or override an at-rule that your ADF skin inherits from the ADF skin that it extends. After you create an at-rule, you modify it to define the style properties that you want it to contain.
10.4.1 How to Create an At-Rule
You can create an at-rule to specify that style properties for one or more selectors render in a particular way when a condition specified by the at-rule is met.
-
In the Selector Tree of the selectors editor, select New Selector with At-Rule from the dropdown list, as illustrated in Figure 10-4.
Tip:
If you know the name of the selector for which you want to configure an at-rule, right-click it in the Selector Tree and, from the context menu, choose New Selector with At-Rule. This populates the Selector field in the Create At-Rule Declaration dialog with the name of the selector that you right-clicked.
-
In the Create At-Rule Declaration dialog, select the at-rule that you want to configure from the Rule dropdown list.
For more information about the at-rules that the ADF skinning framework supports, see Section 10.2, "Working with Server-Side At-Rules" and Section 10.3, "Working with Client-Side At-Rules."
-
Click OK.
-
In the Selector Tree, select the newly-created at-rule and, in the Properties window, configure the properties that you want this at-rule to apply.
10.4.2 What Happens When You Create an At-Rule
The at-rule appears under the At-Rules node in the Selector Tree and a visual representation as it applies to a component appears in the Preview Pane, as shown in Figure 10-5. CSS syntax for the at-rule that you create and any properties that you modified also appear in the source file of the ADF skin, as shown in Figure 10-5.
In the Properties window for the selector property on which you set an at-rule, an icon appears to indicate that an at-rule is set, as illustrated in Figure 10-6.
10.4.3 What Happens at Runtime: How the ADF Skinning Framework Applies At-Rules
At runtime, the ADF skinning framework picks the styles with at-rules based on the HTTP request information, such as agent and platform, and merges them with the styles without rules. Those style properties that match the rules get merged with those outside of any rules. The most specific rules that match a user's environment take precedence.
Example 10-3 shows several selectors in the source file of an ADF skin that will be merged together to provide the final style.
Example 10-3 Merging of Style Selectors in an ADF Skin
/** For IE and Gecko on Windows, Linux and Solaris, make the color pink. **/
@platform windows,linux,solaris{
@agent ie, gecko
{
af|inputText::content {background-color:pink}
}
}
/** Define default properties for the af|panelFormLayout selector. **/
af|panelFormLayout {
color: red;
width: 10px;
padding: 4px
}
/** Define at-rule for af|panelFormLayout on Internet Explorer (IE). We need
to increase the width, so we override the width. We still want the color
and padding; this gets merged in. We want to add height in IE. */
@agent ie{
af|panelFormLayout {width: 25px; height: 10px}
}
/** For IE 8 and 9, we also need some margins.*/
@agent ie( version:8)and( version:9){
af|panelFormLayout {margin: 5px;}
}
/** For Firefox 3 (Gecko 1.9) use a smaller margin.*/
@agent gecko( version:1.9){
af|panelFormLayout {margin: 4px;}
}