My CSS Wishlist

Selectors

  • :previous to select the previous element sibling
  • :parent to select the parent element
  • :closest(selector) to select the closest ancestor matching a selector
  • :ancestor(selector) to select all ancestors matching a selector
  • [attribute < number] select if attribute is less than a number
  • [attribute > number] select if attribute is greater than a number
  • [attribute <= number] select if attribute is less or equal to a number
  • [attribute >= number] select is attribute is greater or equal to a number
  • :attribute(partial-name-*) select by partial attribute match
  • :tag(partial-name-*) select by partial tag name match

At-Rules

  • @element selector (condition) { stylesheet }

Units

  • ew 1% of element's width
  • eh 1% of element's height
  • emin equal to min(1ew, 1eh)
  • emax equal to max(1ew, 1eh)

Values

  • auto-expand as a value for width and height properties
  • offsetWidth, offsetHeight, offsetLeft, offsetTop
  • scrollWidth, scrollHeight, scrollTop, scrollLeft
  • innerHTML.length, value.length
  • cursor X position, cursor Y position

Properties

  • aspect-ratio to set height based on the element's width and a ratio

Functions

  • clamp(min, mid, max) to limit scalable values with a minimum and maximum
  • round(number) gives the nearest integer to a given number
  • floor(number) gives the largest integer equal or less than a given number

No Comments Yet