CSSplus
CSSplus is a collection of CSS Reprocessor plugins that dynamically update CSS variables.
The plugins are designed to be used in tandem, though it's possible to pick and choose which plugins you want to include in each project.
Included are the following plugins:
- Aspecty: aspect ratio property
- Cursory: mouse/touch cursor variables
- Scrollery: scroll position variables
- Selectory: a selector resolver
- Varsity: scoped variables
- Xpathy: XPath selectors in CSS
Usage
NPM
If you are using NPM you can include all CSSplus plugins by including the entire package:
const cssplus =
This will import all CSSplus plugins and make them available to be used in your own code as:
cssplus.aspecty
cssplus.cursory
cssplus.scrollery
cssplus.selectory
cssplus.varsity
cssplus.xpathy
But if you want to include the plugins individually, you can use the module/submodule
syntax:
const selectory =
And this means the Selectory plugin is available to be used in your code as:
selectory
Global JavaScript
To include CSSplus plugins globally (outside of a bundler like Webpack or Browserify) you must include a <script>
tag to each plugin you want to use. If you want to include just Selectory
for example you would include just the one file like this:
To include all CSSplus plugins, you'll need to include links to the following files:
Aspecty: an aspect ratio property
Aspecty is a CSS reprocessor that adds support for an aspect-ratio property using JS. This plugin allows you to define a desired aspect-ratio for an element, based on its rendered width on the page.
For any element with an aspect ratio defined, event listeners will be added to reprocess the styles on the following events:
mouseenter
mouseleave
mousedown
mouseup
focus
blur
By default, Aspecty will reprocess aspect ratios by watching the following events:
load
resize
input
click
To run Aspecty whenever you want, use the aspecty.load()
function in JS.
The aspect ratio property can be used in CSS with the property name --aspect-ratio
and a ratio, expressed as width and height as unitless numbers, separated by a slash /
:
--/
You can use it in CSS like this:
Aspecty will look through the document for any element matching the selector (in this case div
) and create a new rule with a height
value calculated based on each matching element's offsetWidth
divided by the aspect ratio defined in CSS. To animate the effect of the --aspect-ratio
property, which is actually applying via height
, it is necessary to set a transition
on the height
property like this:
Test available at: test/aspecty.html
Cursory: mouse/touch cursor variables
Cursory is a CSS reprocessor that makes the following JS values available as CSS variables:
cursorX
cursorY
innerWidth
innerHeight
clicked
These can be used as CSS variables with the following names:
--cursorX
--cursorY
--innerWidth
--innerHeight
--clicked
These variables are updated at the following events:
mousemove
touchmove
In addition, the --clicked
variable is changed from 0
to 1
between the mousedown
and touchstart
events and the corresponding mouseup
or touchend
events. This allows you to use the var(--clicked)
ratio as a 1
or 0
in your CSS calc()
functions, or as a value for opacity:;
fairly easily.
To run Cursory whenever you want, use the cursory.load()
function in JS.
To make an element like div
follow the cursor position when using cursory
, use CSS with variables like this:
Test available at: test/cursory.html
Scrollery: scroll position variables
Scrollery is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:
scrollWidth
scrollHeight
scrollLeft
scrollTop
To have scrollery
watch an element, you need to give that element a unique identifier, as well as add the data-scrollery
attribute. The plugin will use either the value of the data-scrollery
attribute, or else the value of the id
(if defined) for an element.
By default, Scrollery will watch 0 elements. If you add a data-scrollery
attribute to either the <html>
or <body>
element it will attach an event listener for the scroll
event on the window
, otherwise if you add the data-scrollery
attribute to other elements it will add a scroll
listener to that element.
To run Scrollery whenever you want, use the scrollery.load()
function in JS.
And the following example are both equivalent, and resolve to a name of example
:
Once the plugin is aware of an element to watch, and the unique name of that element, it will make the above values available in the following format: --name-value
, for example
:
--example-scrollWidth
--example-scrollHeight
--example-scrollTop
--example-scrollLeft
Test available at: test/scrollery.html
Selectory: a selector resolver
Selectory is a CSS reprocessor that resolves selectors using JS. This plugin will read CSS selectors that end with a [test]
attribute and use JavaScript to determine whether or not to apply that style to elements matching the other part of that selector. For example, the JS test 1 == 1
will always resolve to true
, so a selector written for div[test="1 == 1"] {}
will always apply to each div
element.
By default, Selectory will reprocess selectors by watching the following events:
load
resize
input
click
To run Selectory whenever you want, use the selectory.load()
function in JS.
Other things you can do with Selectory include:
Apply a rule to a div
when it is wider than 300px:
Apply a rule to an input
when its value=""
attribute is greater than 30
:
Apply a rule to an input
when it has a value=""
attribute zero characters long:
Apply a rule to an input
when its value=""
attribute is more than 5 characters long:
Apply a rule to an h3
element when it contains at least one span
element:
It is limited what selectors you can use with Selectory, things like :hover
and pseudo-classes tend not to work as well. As well the parsing only allows for 1 test per selector, and complex selectors may not work as intended. Using selector[test=""] {}
with a simple selector is best.
Test available at: test/selectory.html
Varsity: scoped variables
Varsity is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:
offsetWidth
offsetHeight
offsetLeft
offsetTop
aspect-ratio
characters
children
value
By default, Varsity will reprocess selectors by watching the following events:
load
resize
input
click
To run Varsity whenever you want, use the varsity.load()
function in JS.
To have varsity
watch an element, you need to give that element a unique identifier, as well as add the data-varsity
attribute. The plugin will use either the value of the data-varsity
attribute, or else the value of the id
(if defined) for an element.
And the following example are both equivalent, and resolve to a name of example
:
Once the plugin is aware of an element to watch, and the unique name of that element, it will make the above values available in the following format: --name-value
, for example
:
--example-offsetWidth
--example-offsetHeight
--example-offsetLeft
--example-offsetTop
--example-aspect-ratio
--example-characters
--example-children
--example-value
Test available at: test/varsity.html
XPathy: XPath selectors in CSS
XPathy is a CSS reprocessor that resolves selectors using XPath. This plugin will read CSS selectors that end with a [xpath]
attribute and use JavaScript and XPath to determine whether or not to apply that style to elements matching the other part of that selector. For example, the XPath selector //div
will always resolve to div
, so a selector written for div [xpath="//div"] {}
will always apply to each div div {}
element.
By default, XPathy will reprocess selectors by watching the following events:
load
resize
input
click
To run XPathy whenever you want, use the xpathy.load()
function in JS.
Other things you can do with XPathy include:
Select all span
tags with the XPath //span
:
[//
Select all elements with a class name of demo-class
with the XPath //*[@class='demo-class']
:
[//*[@class='demo-class']"] { color: lime;}
Select an element with a text content of 'Demo Content' with the XPath //*[text()='Demo Content']
:
[//*[text()='Demo Content']"] { color: violet;}
Select the parent element of another element with the XPath /..
:
[//*[@class='child']/.."] { border: 1px solid lime;}
Compare attribute values as numbers with operators like >
and <
:
[//*[@data-price > 3]"] { color: violet;}
Select elements based on the number of children they contain with an XPath like //ul[li[4]]
:
[//
Test available at: test/xpathy.html
Browser support
These plugins are written in ES6, and intended to be used in modern browsers (Chrome, Safari, Firefox, Edge) without transpilation. Many of these plugins make use of CSS Custom Properties (CSS variables) for functionality, so any browser that doesn't support these features will have trouble with.
As far as I am aware, the only browser that supports CSS Custom Properties but not the ES6 features used (where transpiling to ES5 might improve support) is for Mobile Safari (iOS) support.
Currently all of these plugins are under active development and things are shifting around quite a bit so browser support may change with each release.
Demos
For 20+ CSSplus demos, check out the CSSPlus demos collection on Codepen.