css-state-vars
Inspired by @propjockey's CSS Media Vars, this was developed to get a feel for what the Space Toggle Hack can do so it's largely an experiment and was created for funsies.
How it works
- The CSS File of css state vars adds several dozen CSS custom properties to the
html *selector. - The JS File of css state vars registers hundreds of properties by looping through all known properties (example:
background-color,border-width) and shorthands (example:background,border) in various states (example:is-hovered,is-checked), making them non-inheritable.
This can be used to make small changes to certain properties when elements enter certain states without needing to write a new CSS Rule.
css state vars Custom Properties
A large number of CSS custom properties are applied to all children of html.
- Hovered State
--is-hovered:
An element is hovered.--is-hovered-from-parent:
A parent element is hovered.--is-hovered-directly-from-parent:
Direct ascendant element is hovered.--is-hovered-from-sibling:
A generally preceding sibling element is hovered.--is-hovered-directly-from-sibling:
The previous sibling element is hovered.
- Focused State
--is-focused:
An element has received focus--is-focused-from-parent:
A parent element has received focus.--is-focused-directly-from-parent:
Direct ascendant element has received focus.--is-focused-from-sibling:
A generally preceding sibling element has received focus.--is-focused-directly-from-sibling:
The previous sibling element has received focus.--is-focused-within:
A child element has received focus.--is-focused-visible
- Active State
--is-active:
An element is in an active state.--is-active-from-parent:
A parent element is in an active state.--is-active-directly-from-parent:
Direct ascendant element is in an active state.--is-active-from-sibling:
A generally preceding sibling element is in an active state.--is-active-directly-from-sibling:
The previous sibling element is in an active state.
- Link
--is-any-link--is-link--is-local-link--is-visited
- Targeted State
--is-targeted:
An element is the currently active target.--is-targeted-from-parent:
A parent element is the currently active target.--is-targeted-directly-from-parent:
Direct ascendant element is the currently active target.--is-targeted-from-sibling:
A generally preceding sibling element is the currently active target.--is-targeted-directly-from-sibling:
The previous sibling element is the currently active target.--is-targeted-within
A child element is the currently active target.
- Form: Checked State
--is-checked:
An element has been selected/checked.--is-checked-from-sibling:
A generally preceding sibling element has been selected/checked.--is-checked-directly-from-sibling:
The previous sibling element has been selected/checked.
- Form: Indeterminate State
--is-indeterminate:
A checkbox element is in an indeterminate state.--is-indeterminate-from-sibling:
A generally preceding sibling checkbox element is in an indeterminate state.--is-indeterminate-directly-from-sibling:
The previous sibling checkbox element is in an indeterminate state.
- Form: General
- Blank Input
--is-blank--is-blank-from-sibling--is-blank-directly-from-sibling
- Disabled Input
--is-disabled--is-disabled-from-sibling--is-disabled-directly-from-sibling
- Enabled Input
--is-enabled--is-enabled-from-sibling--is-enabled-directly-from-sibling
- Input is in range
--is-in-range--is-in-range-from-sibling--is-in-range-directly-from-sibling
- Input is out of range
--is-out-of-range--is-out-of-range-from-sibling--is-out-of-range-directly-from-sibling
- Default option/submission button
--is-default--is-default-from-sibling--is-default-directly-from-sibling
- Optional Input
--is-optional--is-optional-from-sibling--is-optional-directly-from-sibling
- Required Input
--is-required--is-required-from-sibling--is-required-directly-from-sibling
- Read Only Input
--is-read-only--is-read-only-from-sibling--is-read-only-directly-from-sibling
- Readable Writable Input
--is-read-write--is-read-write-from-sibling--is-read-write-directly-from-sibling
- Placeholder
--is-showing-placeholder
- Invalid Form/Input
--is-invalid--is-invalid-from-parent--is-invalid-directly-from-parent--is-invalid-from-sibling--is-invalid-directly-from-sibling
- Valid Form/Input
--is-valid--is-valid-from-parent--is-valid-directly-from-parent--is-valid-from-sibling--is-valid-directly-from-sibling
- Blank Input
- First/Last/Only/Even/Odd Children Elements
--is-first-child--is-last-child--is-only-child--is-even-child--is-odd-child--is-first-of-type--is-last-of-type--is-only-of-type--is-even-of-type--is-odd-of-type--is-empty
- Print
--is-first-page--is-left-page--is-right-page
- Miscellaneous
--is-defined--is-fullscreen