How compatible is CSS with UI Toolkit

Unity Engine
, , , , ,
1

How compatible is CSS with UI Toolkit? Is it using CSS under the hood or do the USS files just “look” like CSS?

I only ask as I had some CSS videos appear on my YouTube feed recently (for some reason) and there was a lot of really interesting things there that would really help with my project that aren’t currently available in UI Toolkit (such as the typewriter effect), and I’m just wondering how compatible UI Toolkit is with the CSS spec or if it’s just a case of USS is styled similar to CSS (pun intended)

2

uss is for the most part a subset of css. So there’s a bunch of css things (especially newer ones) that won’t work, but the major things you’re going to run into like flexbox is supported. The basic principles and keywords should be the same between uss and css.

You can try to grab the .css from any major website (like this one), paste it into a .uss file, and see what works and not.

3

For supported properties, we are maintaining this page : Unity - Manual: USS properties reference

Every property name is clickable link, if there is an arrow icon next to it, it will lead to the Mozilla CSS reference, which indicates that the property behaves like CSS.

Other properties have the same name as their CSS counterpart, but is either a subset (example: display) or implemented differently (example: opacity), and thus is documented by Unity directly.

Documentation pages for each property usually mention the differences with CSS, if any.

1 Like