Supported CSS Properties

The following tables indicates the available properties and selectors that are supported for specific UCI graphic and control elements.

= Supported

Using a supported CSS Property, you can install custom Cascading Style Sheet (.css) files to a design, and then apply a selected style to a user control interface (UCI). Visit Style Reference to learn more.

Graphics

Property Page Textblock Groupbox Header Image Polygon

Flexbox

align-content

            

align-items

            

background

   

background-color

   

background-image4

   

background-position

   

background-size

   

border5

1

   

1

1

border-width

1

   

1

1

border-*

1

   

1

1

border-*-width5

1

   

1

1

border-*-color

1

   

1

1

border-radius

2

     

2

color

  

   

 

content

  

   

 

flex-direction

            

flex-wrap

            

font-family

  

   

 

font-size5

  

   

 

gap

            

justify-content

            

margin

  

     

opacity

  

 

padding

  

       

text-align

  

   

 

text-transform

  

   

 

vertical-align

  

       

 

-qsc-font-style3

  

   

 
1. Only supports single border color and thickness (uses left).
2. Only supports single corner radius (uses top left).
3. Specific to QSC, and uses the same values as the Font Style property drop-down – Bold, Italic, Bold Italic, etc.
4. Only supports url() and linear-gradient() background-images.
5. Supports viewport relative sizes. See Setting viewport relative sizes for example usage.

Controls

Property Button Textbox Knob LED Fader Meter Combobox Listbox

background

1

1

background-color

background-image4

 

 

background-position

 

 

background-size

 

 

border5

 

2

border-width

 

2

border-*

 

2

border-*-width5

 

2

border-*-color

 

2

border-radius

 

3

color

   

content

     

     

font-family

   

 

font-size5

   

 

margin

 

 

opacity

padding

           

text-align

 

 

text-transform

     

 

vertical-align

 

     

-qsc-font-style

   

 

-qsc-icon6

   

       

-qsc-icon-color6

   

       

-qsc-icon-font6

   

       

-qsc-icon-align6

   

       

-qsc-render-style7

    

 

   
1. Only supports color (not images) on the background.
2. Only supports single border color and thickness (uses left).
3. Only supports single corner radius (uses top left).
4. Only supports url() and linear-gradient() background-images.
5. Supports viewport relative sizes. See Setting viewport relative sizes for example usage.
6. See Referencing icon fonts for details and examples.
7. See Rendering Styles for Meters, Knobs, and Faders for details and examples.