CSS Variable Inheritance When Variable is Undefined

Question

I was expecting my paragraph to inherit from the parent style if the css variable was undefined. Instead it inherited from the user agent stylesheet. What am I missing?

.myapp  p {
  color: inherit;
  font-family: var(--BodyFontFamily, var(--BodyTextFontFamily, Arial,Verdana,Helvetica,sans-serif));
  font-size: var(--BodyFontSize, 20px);
  line-height: var(--BodyLineHeight, 24px);
}

.text-overlay p {
  font-size: var(--OverlayBodyFontSize);
  font-weight: var(--OverlayBodyFontWeight);
  font-family: var(--OverlayBodyFontFamily);
  line-height: var(--OverlayBodyLineHeight);
}

The reason I was anticipating inheritance was because the paragraph did inherit from .myapp p when the overriding style block was empty.

.text-overlay p {
  /* inheritance happened :) */
}

i've tried using inherit as a default value

.text-overlay p {
  font-size: var(--OverlayBodyFontSize, inherit); 
}

i've tried adding the parent selector to my overriding style block

.myapp .text-overlay p {
  font-size: var(--OverlayBodyFontSize)
}

i did read this post but their situation was a little different. CSS Variables inheritance and fallback

working example of the actual situation

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
     :root {
      --BodyFontSize: 30px;
      --BodyLineHeight: 20px;
    }
  </style>

  <style>
    .myapp p {
      font-size: var(--BodyFontSize, 20px);
      line-height: var(--BodyLineHeight, 24px);
    }
    
    .text-overlay p {
      /* inheritance happens :)*/
    }
    /* uncomment this to see the user agent style get inherited */
    /*   
         .text-overlay p {
            font-size: var(--OverlayBodyFontSize);
            line-height: var(--OverlayBodyLineHeight);
          } */
  </style>

</head>

<body>
  <div class="myapp">

    <p>Default Font Styling</p>
    <div>
      <div class="text-overlay">
        <p>Expected Style Override To Inherit From .myapp rather than the user agent. Because --OverlayBodyFontSize and --OverlayBodyLineHeight are undefined</p>
      </div>
    </div>
  </div>
</body>

</html>

Could you provide some HTML, and maybe narrow the problem down a bit? — Zach Jensz
– Zach Jensz, Commented Nov 10, 2022 at 22:35
I've read your question a few times now and I feel like there is information missing, if you could turn your examples into snippets that reproduce the problem with minimal code that would really help — Zach Jensz
– Zach Jensz, Commented Nov 10, 2022 at 22:45
Thanks for taking a look at this @ZachJensz I appreciate your efforts. The html is a working example of what i am experiencing. — greg
– greg, Commented Nov 10, 2022 at 23:07
As @TemaniAfif has stated this is the situation: "When the browser encounters an invalid var() substitution, then the initial or inherited value of the property is used." css invalid custom properties — greg
– greg, Commented Nov 11, 2022 at 1:31

greg · Accepted Answer · 2022-11-11 01:40:16Z

2

As @TemaniAfif has stated this is the situation: "When the browser encounters an invalid var() substitution, then the initial or inherited value of the property is used." css invalid custom properties

answered Nov 11, 2022 at 1:40

greg

731 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Variable Inheritance When Variable is Undefined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related