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.