Skip to content

Main content

CSS Declaration Name Value Splitter

Parse one restricted CSS declaration, respecting quoted/parenthesized colons and terminal important; comments and escaped property names are rejected.

Loading tool…

Description

Parse one restricted CSS declaration, respecting quoted/parenthesized colons and terminal important; comments and escaped property names are rejected.

CSS combines token syntax, property-specific value rules and layout/cascade processing. These are separate layers: splitting a declaration does not establish that its value is valid, and arithmetic on resolved lengths does not perform browser layout. Each tool here handles an explicit numeric representation or a stated lexical subset.

Parse one restricted CSS declaration, respecting quoted/parenthesized colons and terminal important; comments and escaped property names are rejected.

When to use this tool

Use this tool to parse one restricted CSS declaration, respecting quoted/parenthesized colons and terminal important; comments and escaped property names are rejected.

How to use the tool and how it works

  1. Enter declaration using the input definitions below.
  2. Run the operation. Resolve malformed-input errors before interpreting the result.
  3. Read result.name, result.value, result.important. Interpret signs, units, ordering and null values using the rules below.

Parse one nonempty declaration using balanced lexical splitting, take the first top-level colon as the separator, normalize the property name, and strip a recognized terminal !important suffix into a boolean flag. Require exactly one declaration.1, 2

Input fieldMeaning and unitsAccepted input
declarationOne complete declaration in the supported comment-free balanced subset.Text, at most 8,192 UTF-16 code units; the stated grammar and narrower limits also apply.
Output fieldInterpretation
resultObject containing the fields below.
result.nameNormalized property name; custom-property casing is preserved.
result.valueParsed or formatted CSS-subset value string.
result.importantWhether a terminal top-level importance annotation was recognized.
json
{
  "input": {
    "declaration": "Color:rgb(1,2,3) !important"
  },
  "output": {
    "result": {
      "name": "color",
      "value": "rgb(1,2,3)",
      "important": true
    }
  }
}

Limitations and assumptions

  • Comments and escaped property identifiers are rejected; successful splitting does not prove that the value is valid for the property.
  • Lengths and times must already be resolved to consistent numeric units. Lexical helpers intentionally support smaller grammars than a full browser CSS parser; malformed supported-subset input causes an error.
  • Every declared top-level input is required and unknown fields are rejected. Ordinary strings are limited to 8,192 UTF-16 code units and lists to 128 entries, with tighter operation-specific bounds where stated. JSON text has bounded nesting and node counts.
  • Numeric outputs must be finite and within the absolute safe-integer magnitude; exact larger integers use decimal text. Source positions are zero-based UTF-16 offsets and span ends are exclusive unless a different convention is explicitly stated.

Alternative or Complementary methods

Use a full CSS parser or browser style/layout APIs when escape handling, error recovery, computed styles or the full cascade matter. These tools expose focused transformations and audits of supplied data.

References

  1. CSS Syntax Level 3 — W3C

  2. Tool behavior and example: CSS Declaration Name Value Splitter — tool.io

Similar or alternative tools

  • CSS Custom Property Name Token Audit

    Audit a deliberately restricted ASCII custom-property token grammar -- followed by letters/digits/underscore/dash; not full CSS identifier validation.

  • CSS Duplicate Property Table

    Audit declaration property duplicates with ordinary ASCII property folding and case-sensitive custom-property names; not a cascade engine.