Supported Styles

In order to customize the style of your user interface, you can use CSS style rules. For example, you can indicate that a DIV should have a red border with single pixel thickness by applying the style border: 1px solid red;. Styles can be applied in numerous ways.

  • Styles can be applied by using JavaScript by changing properties on the style dictionary.

    someElement.style.backgroundColor="red";
    
  • Styles can be applied using stylesheets. Stylesheets apply rules based on selectors — these are used to control which elements receive which styles. Styles can be imported using various methods (such as webpack), but they can also be added using a STYLE tag.

    When using innerHTML, you can define styles using the STYLE tag:

    <style>
       #button {
           border: 1px solid red;
       }
    </style>
    <div id="button">Hello</div>
    

There are several categories of styles, and each HTML element supports only certain styles. Some styles can be applied to just about every element, while other elements only have limited styling support.

See the available styles for more information on what is supported.

Not every element supports every style — especially interactive elements.

Supported Selectors

XD understands the following CSS selectors:

  • id
      #anId {
          /* style */
      }
    
  • class
      .aClass {
          /* style */
      }
    
  • tag
      div {
          /* style */
      }
    
  • asterisk (universal selector)
      * {
          /* style */
      }
    
  • Descendant selector
      div > p {
          /* style */
      }
    
  • Group of selectors
      .aClass, #anID {
          /* style */
      }
    
  • Child selector
      div p {
          /* style */
      }
    
  • Sibling selector
      div + p {
          /* style */
      }
    
  • Attribute selector
      input[type=text] {
          /* style */
      }
    
  • Pseudo classes
      div:hover {
          /* style */
      }
    

Only hover, focus, and lang pseudo-classes are supported.

Supported Functions

Following CSS functions can be used:

  • var()

      :root {
          –main-bg-color: pink;
      }
    
      body {
          background-color: var(–main-bg-color);
      }
    
  • calc()

      input {
          padding: 2px;
          display: block;
          width: calc(100% - 1em);
      }
    
      #formbox {
          width: calc(100% / 6);
          border: 1px solid black;
          padding: 4px;
      }
    

results matching ""

    No results matching ""