Skip to Content
Technical Articles

CSS Variables: My experiment with UI5

This blog post is to share my findings about CSS variables (i.e. custom css properties).

CSS Variables? What is that?

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).

courtesy https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Are they new?

No. They originated by W3C around 2012 and slowly gathered support over different browsers around 2016. Find out more here.

Why bring it now then?

Ahem.. I was ignorant (and lazy too) and did not know about it.

What!!!

Well, you see…I came to know about this while attending the session “UX102 – Benefits of the Evolution of SAPUI5 and UI5 Web Components” in SAP Teched 2019, Bangalore. You can also watch it online.

Come to the point.

You mean, see it in action? Alright, I will show two cases in this blog post.

First one is use of CSS variable in a SAPUI5 freestyle app and the next one will be understanding the usage of CSS variables in UI5 web component sample app.

See the demo for the first use case below.

Well, you might have noticed that I used ‘Code Editor’ control in the app. It is the same copy of the sample app available in SAPUI5 SDK documentations. See the working code repository here.

Note: It does not make sense to use custom logic for the dark theme when using ‘Code Editor’ control because the control provides ‘theme’ property out-of-the-box. But I chose this control just for the sake of illustrating the concept (and of course, fun).

So essentially it works just like the program variables in procedural language and in javascript, we can change the custom css property value as and when needed. The most important advantage is the maintainability and readability of repetitive css styles are improved.

Now for the second case, the cool ‘UI5 Web Components‘ uses CSS variables quite extensively. Just a small example I want to share here.

Being as lazy as I am, did not create a new app but just started with the ‘React’ sample app using UI5 web component. I opened the app and observed the CSS applied to the elements in developer’s tool in Chrome browser.

Key observations:

  1. Chased after the checkbox in the line items of ‘Completed Tasks’ section.
  2. The applied CSS class is .ui5-checkbox-inner which uses variable

          –-ui5_checkbox_checkmark_color for color property.

.ui5-checkbox-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--_ui5_checkbox_inner_width_height);
    max-width: var(--_ui5_checkbox_inner_width_height);
    height: var(--_ui5_checkbox_inner_width_height);
    max-height: var(--_ui5_checkbox_inner_width_height);
    color: var(--_ui5_checkbox_checkmark_color);
    box-sizing: border-box;
    position: relative;
    cursor: default;
    pointer-events: none;
}​

3. Further investigations reveals that it is inherited from another CSS variable ‘–sapUiSelected’.

:root {
...
--_ui5_checkbox_checkmark_color: var(--sapUiSelected);
...
}

4. So changing the value of  in developer’s tool ‘–sapUiSelected’ changes the color in the app.

This is just to show that the reuse and cascading of css variables works just like other style properties.

Conclusion

As browsers has started support for CSS variables, we saw that how CSS variables can be used in UI5 freestyle and also in UI5 Web Components app. They can improve reuse, maintainability (readability) of CSS in web apps.

5 Comments
You must be Logged on to comment or reply to a post.
  • Yes, in standard css library of ui5, did not find much of css variable usage. But since UI5 web component started later (I guess well after browser started supported) and open-source, it has used it extensively.

  • Very nice and informative blog!

     

    One thing I’m still wondering – even though not related to this particular blog – is, whether or not (and if so, how) one could use IDs within UI5s CSS files.

    With all this dynamic ID creation at runtime. I know that it isn’t best practice though.

     

    Anyway, great blog! Keep it up!

    • Thanks Marco Beier ! Glad you liked it.

      To your question, technically speaking, you can use the generated id of an HTML element (found in developer’s tool of the browser) in css file in UI5 app as it is HTML5 after all, but as you have already said, it is not the best practice. As UI5 is more driven by predefined rich set of controls/elements (which, in fact, is one of the key features of UI5), the ids generated out of SAP library controls can change over time/versions of SAP libraries, it is never recommended to style UI based on those ids. The same idea goes behind the API available for any UI5 control object that you can only apply your own class (‘class selector’ in css terms) by .addStyleClass() method but not ‘id selector’ for that matter.

      However, if native html is used, in an XML view for example, id selector can be used as usual.