Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Bug report: New CSS color formats/syntax unknown #297

@brandonmcconnell

Description

@brandonmcconnell

I am getting this error when using a very common (newer) CSS color syntax.

The errors

  • rgb(255 0 0) throws Uncaught Error: unknown format: rgb(255 0 0)
  • rgb(255 0 0 / .5) throws Uncaught Error: unknown format: rgb(255 0 0 / .5)
  • hsl(240deg 100% 50%) throws Uncaught Error: unknown format: hsl(240deg 100% 50%)
  • hsl(240deg 100% 50% / 25%) throws Uncaught Error: unknown format: hsl(240deg 100% 50% / 25%)

These would be their older equivalents

  • rgb(255, 0, 0) → * rgb(255 0 0)
  • rgba(255, 0, 0, .5) → * rgb(255 0 0 / .5)
  • hsl(240, 100%, 50%) → * hsl(240deg 100% 50%)
  • hsla(240, 100%, 50%, .25) → * hsl(240deg 100% 50% / 25%)

This new syntax and its different nuances should be supported. In many browsers, this new color syntax is already the default.

Gotchas

  • The final & fourth value in this new syntax (alpha channel) is a percent which can be represented either as a decimal or as a full percent, so both .25 and 25% are accepted values and are treated the same.
  • All modern browsers appear to support this new syntax even when used with the old color function keywords (e.g. rgb vs. rgba), so these would also work and be treated the same:
    • hsla(240, 100%, 50%, .25) === hsla(240deg 100% 50% / .25) === hsl(240deg 100% 50% / .25)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions