CSS visual aids

Orbit provides a comprehensive set of rules and visual aids in CSS to assist developers in enhancing user experience. These guidelines ensure adherence to best practices and optimize the utilization of Orbit’s features.

Note

Support and checks are performed with CSS only! Using advance CSS feartures such as @support, :has() and @container

Checking browser support

has() CSS Rule

Before implementing features reliant on the has() CSS rule, it’s essential to confirm browser compatibility. Orbit includes checks to verify support for this rule, alerting users if it’s unavailable in the targeted browser environment.

cos() and sin() trigonometric CSS functions

Orbit includes checks to verify support for these functions, alerting users if there are unavailable in the targeted browser environment.

Visual Warning for Invalid Nested Elements

Orbit incorporates visual cues to identify and warn developers of invalid nested elements within orbit structures:

Invalid Child elements within .gravity-spot

Orbit detects and notifies developers if .gravity-spot contains invalid direct child elements. Only .orbit-zoee, and .orbit or .orbit-* elements are permissible within .gravity-spot.

<div class="bigbang"> <div class="gravity-spot"> <!-- Orbit detects that gravity-spot > satellite is not valid --> <div class="satellite"> </div> </div>

.gravity-spot {
--o-force: 200px
}
.satellite {
border: 1px solid black
}

HTML

  <div class="bigbang">
    <div class="gravity-spot">
        <!-- Orbit detects that gravity-spot > satellite is not valid -->
        <div class="satellite">
        </div>
  </div>

CSS

.gravity-spot {
--o-force: 200px
}
.satellite {
border: 1px solid black
}

Invalid Child elements within .satellite

Similarly, Orbit checks for and alerts developers if .satellite includes invalid direct child elements. Only .gravity-spot elements are permitted within .satellite.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <div class="satellite at-center"> <!-- Orbit detects that satellite > orbit is not valid --> <div class="orbit-10"></div> </div> </div> </div>

.gravity-spot {
--o-force: 200px
}
.satellite {
border: 1px solid black
}

HTML

  <div class="bigbang">
    <div class="gravity-spot">
        <div class="orbit-5">
          <div class="satellite at-center">
              <!-- Orbit detects that satellite > orbit is not valid -->
             <div class="orbit-10"></div>
          </div>
        </div>
  </div>

CSS

.gravity-spot {
--o-force: 200px
}
.satellite {
border: 1px solid black
}

Usage Limitation of o-slice, o-text, and o-progress

For optimal functionality, o-slice, o-text, and o-progress should only be applied within circular orbits. As Orbit currently doesn’t support elliptical shapes for these web-components, they will be hidden if detected within incompatible orbit shapes.