Wiki source code of Use CSS Properties
Last modified by Eleni Cojocariu on 2026/03/02 15:18
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | == 1. Find the property you want to use. == | ||
| 2 | |||
| 3 | XWiki standard CSS properties are declared in the file ##cssVariablesInit.css## . This CSS sheet is generated using the information contained in ##variablelist.vm## . This velocity template is a common source of truth between CSS and LESS. | ||
| 4 | |||
| 5 | {{warning}} | ||
| 6 | Those properties are still unstable and not documented here. Starting in XWiki 18, those properties should become stable and be documented with detail in this part of the documentation. | ||
| 7 | {{/warning}} | ||
| 8 | |||
| 9 | {{info}} | ||
| 10 | CSS properties can also be declared pretty much anywhere in your custom stylesheets using standard CSS syntax :) | ||
| 11 | When developing for XS, try to still declare them in ##variablelist.vm## so that we have a consistent source. | ||
| 12 | {{/info}} | ||
| 13 | |||
| 14 | (% class="wikigeneratedid" %) | ||
| 15 | In addition, as long as LESS is operating as normal, in ##variablesInit.vm## the values from LESS override the defaults set in ##cssVariablesInit.css## . This should improve the consistency between both variable systems because this takes into account customizations. The common source of truth in ##variablelist.vm## only contain default values. | ||
| 16 | |||
| 17 | {{info}} | ||
| 18 | Using the macro defined in the page shared on [[this snippet>>doc:snippets:Extension.View all declared CSS Variables.WebHome]], you can easily view all the CSS properties available in your context: | ||
| 19 | {{image reference="css-properties.png" size="extra" alt="The page displaying the CSS properties"/}} | ||
| 20 | Note that this is purely a development aide and the quality is not on par with XWiki Standard's quality. | ||
| 21 | {{/info}} | ||
| 22 | |||
| 23 | == 2. Evaluate the context in which you want to use it == | ||
| 24 | |||
| 25 | (% class="wikigeneratedid" %) | ||
| 26 | When you're extending an existing stylesheet, continue: | ||
| 27 | |||
| 28 | * 3.a. if you're developing stylerules in a CSS file or a CSS StyleSheet Extension. | ||
| 29 | * 3.b. if you're developing stylerules in a LESS file or a LESS StyleSheet Extension. | ||
| 30 | |||
| 31 | {{info}} | ||
| 32 | When you have a choice, it's recommended to use CSS properties in CSS stylesheets. LESS stylesheets are less versatile and more computationally costly. | ||
| 33 | {{/info}} | ||
| 34 | |||
| 35 | == 3.a. Use this syntax in a native CSS stylesheet == | ||
| 36 | |||
| 37 | {{code language="css"}} | ||
| 38 | .box.box-custom { | ||
| 39 | color: var(--brand-color); | ||
| 40 | } | ||
| 41 | {{/code}} | ||
| 42 | |||
| 43 | {{error}} | ||
| 44 | CSS properties cannot currently be used in media queries. See [[this W3C draft about supporting CSS properties in media queries>>https://drafts.csswg.org/css-env-1/]] to get up-to-date information on this topic. | ||
| 45 | {{/error}} | ||
| 46 | |||
| 47 | == 3.b. Use this syntax in a LESS stylesheet == | ||
| 48 | |||
| 49 | {{code language="css"}} | ||
| 50 | .box.box-custom { | ||
| 51 | color: ~"var(--brand-color)"; | ||
| 52 | } | ||
| 53 | {{/code}} |
