CSS visual aids
Add dev-orbit to a .bigbang container to enable visual warnings for invalid structure. Diagnostics are opt-in and use CSS; they do not replace the JavaScript layout runtime.
Checking browser support
Section titled “Checking browser support”has() CSS Rule
Section titled “has() CSS Rule”The CSS-only fallback and visual diagnostics use :has(). Missing support does not block the JavaScript layout runtime.
cos() and sin() trigonometric CSS functions
Section titled “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
Section titled “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
Section titled “Invalid Child elements within .gravity-spot”Orbit detects and notifies developers if .gravity-spot contains invalid direct child elements. Only .gravity-spot, .orbit, and explicit nonnegative integer ring classes such as .orbit-4 are permissible within .gravity-spot.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Invalid Child elements within .satellite
Section titled “Invalid Child elements within .satellite”Similarly, Orbit checks for and alerts developers if .satellite includes invalid direct child elements. Only .capsule and .gravity-spot elements are permitted within .satellite.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Usage limitation of o-arc and o-progress
Section titled “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.