Re: inheritance from nonancestor

On Wed, Mar 2, 2016 at 10:10 PM, Nick Levinson <nick_levinson@yahoo.com> wrote:
> It would help if we could inherit nonancestral style. This would improve consistency across browsers. To that end, we apparently need an addition to the CSS specs. Test case: For the sake of a search engine, only one h1 element should appear on a page, but I want a subtitle with a slightly smaller font-size. So writing two h1 elements, even with different classes or id values, is out. And writing the subtitle as h2 immediately after the h1 is also out. Both are forbidden by HTML5, section 4.12.1. But if I write and style a p element then I have to predict the particulars of how various browsers will style h1 in order to have the p element have the same look as the h1 gets except for differences I specify (probably just the fontsize). Instead, I created a hack (as in <h1>Main Title<br /><span>Subtitle</span></h1> (see https://css-tricks.com/forums/topic/how-to-inherit-from-nonparent-element/)) but haven't tested it much (but see https://css-tricks.com/forums/topic/how-to-inherit-from-nonparent-element/ in case of possible responses) and wonder if, even with enough testing, a more semantic way wouldn't be better.

In general, things like this can be addressed with Custom Properties
and variables.

For example:

html {
  --h1-size: 3em;
}

h1 {
  font-size: var(--h1-size);
}

p.subheading {
  font-size: calc(.8 * var(--h1-size));
}

~TJ

Received on Friday, 4 March 2016 19:11:54 UTC