CSS Media Query Extractor

Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions.

Description

Media-query conditions select when stylesheet rules apply.

Media-query conditions select when stylesheet rules apply. Extracting their text differs from evaluating the conditions.^[1]

Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions.

When to use CSS Media Query Extractor

Use this tool to extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions.

Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.

How to use CSS Media Query Extractor and understand its results

Paste the selector list, stylesheet source or property value requested. Use the supported lexical syntax explained below.
Enter css using the field table and calculation rules, then run the tool.
Read queries. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
css	CSS stylesheet source.	string; maximum length: 1000000	Required

Paste CSS. Strip comments, ignore quoted strings/escaped characters and detect case-insensitive @media at an identifier boundary. Read each prelude through balanced parentheses to its opening brace; return trimmed query strings in source order.^[2]

queries=ordered @media preludes before opening braces

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
queries	Media query preludes in source order.	list of string; maximum length: 1000000; minimum entries: 0; maximum entries: 100000

json

{
  "input": {
    "css": "/* @media fake{} */ @media screen and (min-width: 40em) {a{color:red}} @media print {b{color:black}}"
  },
  "output": {
    "queries": [
      "screen and (min-width: 40em)",
      "print"
    ]
  }
}

Limitations and assumptions

Unclosed comments/strings or incomplete detected preludes fail. Full stylesheet structure and condition validity are not validated; nested media rules are returned without combining conditions.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use CSS Selector Specificity: Calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected. For a complementary task, use CSS Color Function Parser: Parse rgb, rgba, hsl, and hsla function channel tokens and alpha without converting color spaces or evaluating CSS expressions.

References

CSS Media Query Extractor — tool.io
CSS Custom Property Parser — tool.io

Similar or alternative tools

CSS Selector Specificity
Calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected.
CSS Color Function Parser
Parse rgb, rgba, hsl, and hsla function channel tokens and alpha without converting color spaces or evaluating CSS expressions.