Why does SVG allow me to use CSS var without closing bracket?-CodePudding

Please see this

NB: When using the var() in the stylesheet, it's not as forgiving (see the example)

    <body>
    <style>
        :root {
            --main-color: #06c;
        }
        /* If you miss the closing parenthesis from var() the styling breaks, which makes sense*/
        h1 {
          color: var(--main-color);
        }
    </style>

    <h1>Here is my coloured heading</h1>

    <!-- the closing parenthesis from var() is missing, but the colour is still applied. That's good for when you make a mistake, but I dont get why -->
    <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="var(--main-color" />
      Sorry, your browser does not support inline SVG.  
    </svg>
    </body>

CodePudding user response：

It does also work in CSS but you need to remove the last } and have nothing after it:

:root {
  --main-color: #06c;
}
h1 {
  color: var(--main-color

<h1>Here is my coloured heading</h1>

Sometimes the browser is clever enough "to understand" some broken stuff but you should never rely on such behavior. People use such trick to shorten the code when doing some online challenges for fun or they simply do it by mistake.