Techniques

This collection of styling techniques goes beyond the limits of what CSS can do. This list attempts to expose the most useful ways JavaScript can be used to extendCSS, and to explain the parts required to use each technique.

Most of the code samples used in these pages will require the use of one of the Plugins from the Plugins section, but all of these techniques can also be built from scratch using JavaScript.

Scoped Styles

• Style Scoping
• Element-Based Units
• Clamped Values

Element Queries & Container Queries

• Element Queries
• Container Queries
• Use an Element’s Width
• Use an Element’s Height
• Use an Element’s Text Characters
• Use an Element’s Child Elements
• Use an Element’s Scroll Position
• Use an Element’s Aspect Ratio
• Use an Element’s Orientation

Extending CSS Selectors

• Select the Ancestor of an Element
• Select the Parent of an Element
• Select Elder Siblings of an Element
• Select the Previous Sibling of an Element
• Select the First Element Matching a Selector
• Select Elements by a Partial Tag Name
• Select Elements by a Partial Attribute Name
• Compare Attribute Values as Numbers
• Select an Element by a Child it Contains
• Select an Element by Text Content
• Select Void Tags When Empty
• Use XPath to Select Elements
• Scale any HTML Element

Environment-based Styling

• Use the Cursor Position for Styling