Pseudo-class support in ADF

Question

In my skin file (which is distributed by Skyros), I defined the rule as

.arrow_box:after { /*some css rules */ } .arrow_box:before { /*some css rules */ } 

The main goal is to create an arrow at the top of the window, as shown in CSSArrowPlease .

Problem

When I launch the page, the pseudo-classes are not applied because they change to:

 .arrow_box.p_AFAfter, .x1z2.p_AFAfter { /*some css rules */ } .arrow_box.p_AFBefore, .x1z2.p_AFBefore { /*some css rules */ } 

Note how : converts to .p_AFAfter and .p_AFBefore . How can I avoid this?

I also tried to exit the selector:

 .arrow_box\:after { /*some css rules */ } 

But it was translated into

 .arrow_box\.p_AFAfter, .x1z2.p_AFAfter { /*some css rules */ } 

Any workaround for this? My jDeveloper version is 11.1.1.9.0

PS

DISABLE_CONTENT_COMPRESSION not an option, since I have no control over the web.xml on the server.

Answer 1

You must understand that the skin file is not really a css file. This is a skin file processed by the skinning engine. And you should use it when referring to component styles.
However, if all you need is just custom css, you can create a simple css file and include it on your page. You can still save it in the project to create skins or create it in your web project.

This file will not be changed by the skin engine, and you will get all your styles as is. But you cannot reference component styles and must explicitly provide css class names for components in the styleClass property.

Answer 2

Disable CSS compression by adding it to web.xml

 <context-param> <description>Set to true to disable compression of CSS class names for skinning keys and have more human readable class names</description> <param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name> <param-value>true</param-value> </context-param> 

This will prevent CSS classes from getting confused.