Limited usability of Cascading Style Sheets (CSS) in Confluence User Macros - any workarounds?

[Ulrik Schoth]

A CSS attribute selector using a string value match (e. g. a[href="https://dummy2.org"]) or a CSS child combinator (e. g. div.my-box > p) cannot be used in a Confluence User Macro.

This is because Confluence erroneously replaces the symbols used here (double quotes and greater than symbol) by their HTML entities (" and >). As a result, the CSS code does not work.

Does anyone know a workaround for this, especially for the child combinator?

---

Below are a few details.

Example: From this code in a User Macro ...

<style>
.wiki-content div.my-box > p { font-weight: bold; }
.wiki-content a[href="https://dummy2.org"] { color: red; }
.my-box {border: 2pt solid black; }
</style>

... Confluence generates the following HTML code:

<style>
.wiki-content div.my-box &gt; p { font-weight: bold; }
.wiki-content a[href=&quot;https://dummy2.org&quot;] { color: red; }
.my-box {border: 2pt solid black; }
</style>

I found out that this bug has already been discussed several times in the Atlassian Community (e. g. 2015, 2017, 2018, 2020) or in Atlassian JAC (2016), unfortunately without success: At least in version 8.4.5 it is still present.

I haven't given up hope that this bug will actually be fixed one day. But until then, the question is whether there are any workarounds. These are the results I found on the sites mentioned above:

• Using the HTML macro. But the use of this macro is sometimes disabled for security reasons.
• A solution using jQuery or vanilla JavaScript also seems to be available. But for a flexible solution, you need the HTML macro. Then you can better use it directly (see above).
• You can save the CSS code in a stylesheet file and include this in the user macro.

My own tests have shown the following:

• I have found out that in the example above the double quotes can be replaced by single quotes. So this CSS code is a solution: a[href='https://dummy2.org']
• I had hoped that there was a possibility for the > symbol to avoid the erroneous substitution by a kind of preceding escape character. Something like
  div.my-box \> p Unfortunately, this does not work. A simple solution for the CSS child combinator is therefore still missing.

[Ulrik Schoth · Accepted solution]

In the meantime, I have found a solution myself by adding a CDATA section to the CSS code.

Example: From this code in a User Macro ...

<style>
/* <![CDATA[ */
.wiki-content div.my-box > p { font-weight: bold; }
.wiki-content a[href="https://dummy2.org"] { color: red; }
.my-box {border: 2pt solid black; }
/* ]]> */
</style>

... Confluence generates the following HTML code ...

<style>
/* <![CDATA[ */
.wiki-content div.my-box > p { font-weight: bold; }
.wiki-content a[href="https://dummy2.org"] { color: red; }
.my-box {border: 2pt solid black; }
/* ]]> */
</style>

... which is exactly what we wanted to achieve. 

Explanation

• The CDATA section prevents the CSS code it contains from being (erroneously) processed by Confluence.
• However, the CDATA section has no effect on the CSS code itself, as both the start sequence <![CDATA[ and the end sequence ]]> are treated as CSS comments.

Summary

The error in Confluence described above can be circumvented by an additional CDATA section shown below and thus enables the use of any CSS instructions in a Confluence user macro (tested in Confluence Data Center 8.4.5). 😃

<style>
/* <![CDATA[ */

/* Your CSS code goes here. */

/* ]]> */
</style>