Rule details

Enforce Baseline Browser Support

What type of rule is this?

Warns about a potential problem

Example code

{
  "baselineWidelyAvailable": true,
  "baselineNewlyAvailable": false,
  "rules": {
    "css/no-invalid-properties": [
      "error",
      {
        "allowed-properties": [
          "text-wrap: pretty",
          "::view-transition"
        ]
      }
    ]
  }
}

Additional comments

I’m not entirely sure how ESLint works under the hood, and while I’d love to contribute, I don’t feel quite ready to tackle that just yet. I hope this issue doesn’t overcomplicate your vision, and if it’s not quite right, feel free to disregard it. I just thought it would be worth sharing because it’s exactly what I need in a CSS linter.

Scenario: Maintainers Setting Boundaries

User Story

As a maintainer, I want contributors to use a consistent subset of CSS features supported across major browsers. This helps keep the project manageable, onboard new contributors efficiently, and maintain evolving CSS best practices.

Background/Description

Maintainers want to ensure their CSS only uses features supported by "Baseline Widely Available" (web.dev/baseline)—a concept for consistent browser support across major platforms. While browsersl.ist doesn’t yet support this natively, the following configuration can define an approximate range:

{
  "browserslist": [
    "Chrome > 0 and last 2.5 years",
    "Edge > 0 and last 2.5 years",
    "Firefox > 0 and last 2.5 years",
    "Safari > 0 and last 2.5 years"
  ]
}

This range ensures features work consistently across all four core browsers while considering features widely available over the past 2.5 years.

Baseline Widely Available

With baselineWidelyAvailable set to true, the linter will flag unsupported CSS. For example, if a developer uses a property like -ms-high-contrast-adjust or a new feature only supported in Chrome, the linter will identify it as out of scope. This ensures that contributors stick to CSS features widely supported across major browsers.

“baselineWidelyAvailable”: true

Baseline Newly Available

If a maintainer trusts their contributors to use progressive enhancements—CSS features that gracefully degrade in unsupported browsers—they can set baselineNewlyAvailable to true. This allows contributors to use newer CSS properties as long as they are supported by all four major browsers, even if not yet "widely available."

“baselineNewlyAvailable”: true

Allowed Properties

For maintainers who need some flexibility, rules can be defined. The "allowed-properties" list allows specific CSS properties to be used, even if they are not widely supported.

{
  "baselineWidelyAvailable": true,
  "baselineNewlyAvailable": false,
  "rules": {
    "css/no-invalid-properties": [
      "error",
      {
        "allowed-properties": [
          "text-wrap: pretty",
          "::view-transition"
        ]
      }
    ]
  }
}

Conclusion

What I like about using Baseline, or at least browsersl.ist, is that it helps contributors understand the target audience better, know where to focus cross-browser troubleshooting, and automate parts of development to reduce manual work.