eqcss-syntax.md

EQCSS Element Query Syntax

This describes a syntax for scoped styles and element queries in a container query style. This document is based on the Extended Backus-Naur Form for specifying language structure.

element_query = @element selector_list [ condition_list ] { css_code }

selector_list = " css_selector [ "," css_selector ]* "

condition_list = and ( query_condition : value ) [ "and (" query_condition ":" value ")" ]*

value = number [ css_unit ]

query_condition = min-height | max-height | min-width| max-width | min-characters | max-characters | min-lines | max-lines | min-children | max-children | min-scroll-y | max-scroll-y | min-scroll-x | max-scroll-x | orientation | min-aspect-ratio | max-aspect-ratio

css_unit = % | px | pt | em | cm | mm | rem | ex | ch | pc | vw | vh | vmin | vmax | square | portrait | landscape | width/height

An EQCSS element query is a container query that begins with "@element", followed by one or more CSS selectors (comma-separated) in quotes (either single or double quotes), followed by one or more optional responsive conditions comprised of a query condition and a value separated by a colon, followed by one or more optional CSS rules wrapped in curly brackets.

Examples of Valid EQCSS Syntax

Scoped Style

@element 'html' {}

Scoped Style with multiple CSS Selectors

@element 'button, input[type=button], .button' {}

Element Query

@element 'body' and (min-children: 3) {
  body {
    background: blue;
  }
}

Element Query with multiple Query Conditions

@element 'html,body' and (min-children: 3) and (min-scroll-y: 100vh) {
  header {
    display: none;
  }
}

Smallest Possible Valid Example

@element'i'{}

Fully-loaded Example

@element 'nav label, nav .label' and (max-width: 150px) and (min-characters: 25) {
  $this {
    padding-right: 0;
  }
  $this span  {
    font-size: 8pt;
  }
  @media print {
    $this span {
      color: black;
    }
  }
}

---

☛ Read more about EQCSS at elementqueries.com, or read more about Extended Backus-Naur Form on Wikipedia.