11 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:

11.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 Working with Server-Side At-Rules and Working with Client-Side At-Rules.

You can use the selectors editor in JDeveloper to create at-rules in your ADF skin, as described in 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 11-5.

Figure 11-1 At-Rules in the Selector Tree

This image is described in the surrounding text

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 Importing One or More ADF Skins Into the Current ADF Skin.

11.2 Working with Server-Side At-Rules

Table 11-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 What Happens at Runtime: How the ADF Skinning Framework Applies At-Rules.

Table 11-1 Server-Side At-Rules Supported by the ADF Skinning Framework

Name Description


Defines styles for high-contrast and large-fonts accessibility profile settings when enabled in the trinidad-config.xml file.

For more information about the @accessibility-profile rule, see Configuring an ADF Skin for Accessibility.


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 :lang pseudo class.


Defines styles for when a page renders in a particular mode. This at-rule supports the following values:

  • quirks

  • standards


Define platform styles. Supported values are:

  • android

  • blackberry

  • genericpda

  • iphone

  • linux

  • macos

  • nokia_s60

  • ppc (Pocket PC)

  • solaris

  • unix

  • windows

Apart from the rules listed in Table 11-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. The following list specifies the supported values to set an agent-specific style using the @agent at-rule.

  • blackberry

  • email

  • gecko

  • genericDesktop

  • genericpda

  • googlebot

  • ie

  • konqueror

  • mozilla

  • msnbot

  • nokia_s60

  • opera

  • oracle_ses

  • unknown

  • webkit (maps to Safari and Google Chrome)

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 and keyword. 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 9.x:

    @agent mozilla and (version: 15.*), mozilla and (version: 17.*), ie and (version: 9.*)

  • Note that the following two syntax examples specify the same rule:

    @agent ie and (version: 9.*)

    @agent ie and (version: 9)

    To specify a rule for styles to apply only to Internet Explorer 9.0.x, write the following:

    @agent ie and (version: 9.0.*)

  • Use the max-version and min-version keywords to specify a range of versions. For example, you can rewrite the following rule:

    @agent ie and (version: 9), ie and (version: 10)


    @agent ie and (min-version: 9) and (max-version: 10)

    to apply styles that you define to all versions of Internet Explorer 9 and 10.

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 Alta skin 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){

.AFBrandingBar af|link:hover,

.AFBrandingBar af|goLink:hover,

.AFBrandingBar af|commandLink:hover,


Figure 11-2 shows how the Selector Tree displays selectors to which the @agent (touchScreen:none) at-rule is applied.

Figure 11-2 @agent (touchScreen:none) at-rule in the Selector Tree

This image is described in the surrounding text

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 information about how to create an at-rule in an ADF skin, see Creating At-Rules in an ADF Skin.

11.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 11-1 demonstrates a number of valid usages of client-side at-rules in an ADF skin. In Example 11-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.


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 Properties in the ADF Skinning Framework and About Global Selector Aliases.

Figure 11-3 shows instances of the af:button component that render using the appropriate style properties defined in Example 11-1 based on the maximum width of the screen where the components display.

Figure 11-3 Client-Side At-Rule Applied to a Button Component

This image is described in the surrounding text

Client-side at-rules can nest within server-side at-rules. Server-side at-rules can nest within client-side at-rules. Example 11-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 11-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;

Example 11-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%; }

11.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.

11.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.

To create an at-rule:

  1. In the Selector Tree of the selectors editor, select New Selector with At-Rule from the dropdown list, as illustrated in Figure 11-4.


    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.

    Figure 11-4 New Selector with At-Rule Menu in the Selector Tree

    This image is described in the surrounding text
  2. 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 Working with Server-Side At-Rules and Working with Client-Side At-Rules.

  3. Click OK.
  4. 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.

11.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 11-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 11-5.

Figure 11-5 At-Rule in the Selector Tree and Source Editor

This image is described in the surrounding text

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 11-6.

Figure 11-6 Properties Window with an At-Rule set on a Property

This image is described in the surrounding text

11.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 11-3 shows several selectors in the source file of an ADF skin that will be merged together to provide the final style.

Example 11-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 9 and 10, we also need some margins.*/
@agent ie( version:9)and( version:10){
  af|panelFormLayout {margin: 5px;}
/** For Firefox 10 (Gecko 10) use a smaller margin.*/
@agent gecko( version:10){
  af|panelFormLayout {margin: 4px;}