Skip to content

Property does not exist error on container queries #474

@abbott567

Description

@abbott567

The validator throws false positives for properties relating to container queries.

As an example, I get these errors for the following markup example:

  1. Error: CSS: container-name: Property container-name doesn't exist.
    From line 10, column 25; to line 10, column 38
    ner-name: test-container;↩

  2. Error: CSS: container-type: Property container-type doesn't exist.
    From line 11, column 25; to line 11, column 35
    ner-type: inline-size;↩

  3. Error: CSS: Unrecognized at-rule @container
    From line 16, column 7; to line 16, column 16
    }↩ @container test-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Container Queries</title>
    <style>
      .container {
        container-name: test-container;
        container-type: inline-size;
      }
      p {
        font-size: 1rem;
      }
      @container test-container (max-width: 300px) {
        p {
          font-size: .5rem;
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>
        Test if this is valid.
      </p>
    </div>
  </body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions