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.
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.
Usage limitation of o-arc and o-progress
For optimal functionality, o-arc 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.