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.
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
.
.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
.
.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.