This page is filled with JavaScript-based tests that are useful for styling, whether it's trying to target selectors CSS can't normally reach, or trying to use element queries or container queries check out the list below for tests that can be used with the CSS reprocessors like EQCSS, Selectory, reproCSS, and more!

Width-based tests

  el => el.offsetWidth < 500  // less than 500px wide
el => el.offsetWidth <= 500 // less or equal to 500px wide
el => el.offsetWidth == 500 // 500px wide
el => el.offsetWidth >= 500 // greater or equal to 500px wide
el => el.offsetWidth > 500  // greater than 500px wide

Height-based tests

  el => el.offsetHeight < 500  // less than 500px tall
el => el.offsetHeight <= 500 // less or equal to 500px tall
el => el.offsetHeight == 500 // 500px tall
el => el.offsetHeight >= 500 // greater or equal to 500px tall
el => el.offsetHeight > 500  // greater than 500px tall

Text Length tests

  el => el.value.length < 5  // less than 5 characters
el => el.value.length <= 5 // less or equal to 5 characters
el => el.value.length == 5 // 5 characters
el => el.value.length >= 5 // greater or equal to 5 characters
el => el.value.length > 5  // greater than 5 characters

el => el.textContent.length < 5  // less than 5 characters
el => el.textContent.length <= 5 // less or equal to 5 characters
el => el.textContent.length == 5 // 5 characters
el => el.textContent.length >= 5 // greater or equal to 5 characters
el => el.textContent.length > 5  // greater than 5 characters

Children-based tests

  el => el.children.length < 5  // less than 5 children
el => el.children.length <= 5 // less or equal to 5 children
el => el.children.length == 5 // 5 children
el => el.children.length >= 5 // greater or equal to 5 children
el => el.children.length > 5  // greater than 5 children

Scroll-based tests

  el => el.scrollLeft < 50  // less than 50px scrolled right
el => el.scrollLeft <= 50 // less or equal to 50px scrolled right
el => el.scrollLeft == 50 // 50px scrolled right
el => el.scrollLeft >= 50 // greater or equal to 50px scrolled right
el => el.scrollLeft > 50  // greater than 50px scrolled right

el => el.scrollTop < 50  // less than 50px scrolled down
el => el.scrollTop <= 50 // less or equal to 50px scrolled down
el => el.scrollTop == 50 // 50px scrolled down
el => el.scrollTop >= 50 // greater or equal to 50px scrolled down
el => el.scrollTop > 50  // greater than 50px scrolled down

Aspect-ratio-based tests

  el => el.offsetWidth/el.offsetHeight < 16/9  // less than 16/9
el => el.offsetWidth/el.offsetHeight <= 16/9 // less or equal to 16/9
el => el.offsetWidth/el.offsetHeight == 16/9 // 16/9
el => el.offsetWidth/el.offsetHeight >= 16/9 // greater or equal to 16/9
el => el.offsetWidth/el.offsetHeight < 16/9  // greater than 16/9

Orientation-based tests

  el => el.offsetWidth < el.offsetHeight  // portrait orientation
el => el.offsetWidth == el.offsetHeight // square orientation
el => el.offsetWidth > el.offsetHeight  // landscape orientation

Selectors

Parent of el

  el.parentNode

Closest Matching Ancestor of el

  el.closest('selector')

Previous Sibling of el

  el.previousElementSibling

el Contains Selector

  el.querySelector('selector')

Demos

Using EQCSS

Using Selectory

Using reproCSS

Using JS-in-CSS

More info at responsive.style


1,818 0 31