- From: Håkon Wium Lie <howcome@opera.com>
- Date: Fri, 3 Oct 2014 10:01:15 +0200
- To: Alan Stearns <stearns@adobe.com>
- Cc: Christoph Päper <christoph.paeper@crissov.de>, www-style list <www-style@w3.org>
Also sprach Alan Stearns: > >Opt-out: > > > > body { baseline-snap: new } > > h1, h2, img, figure { baseline-snap: clear } > > One problem with an opt-out strategy is how to get a nested element to > participate in a grid once a parent has opted out. Your examples have > usually set the figure element to opt-out. With the styling above, how > would I get the lines in a <figcaption> to align to the body grid? You'd say: body { baseline-snap: root } h1, h2, img, figure { baseline-snap: clear } figcaption { baseline-snap: root } This is why 'root' is there -- to provide a grid which is accessible by all elements. I think 'root' and 'page' are simple elegant and solutions which gives most of the benefits of named grids without having to introduce a complex naming scheme. However, one can quite easily extend the one-property solution with two new keywords to avoid using 'root'/'page'. E.g., an opt-in example would be: body { baseline-snap: define } /* define basline grid, but don't engange it yet */ p { baseline-snap: engage } /* engage baseline grid from youngest defining ancestor */ An opt-out example would be: body { baseline-snap: new } /* define and engage */ img, figure { baseline-snap: clear } And your challenge above would be: body { baseline-snap: new } /* define and engage */ h1, h2, img, figure { baseline-snap: clear } /* clear grid set on <body> */ figcaption { baseline-snap: engage } /* re-engange grid set on <body> */ Cheers, -h&kon Håkon Wium Lie CTO °þe®ª howcome@opera.com http://people.opera.com/howcome
Received on Friday, 3 October 2014 08:01:44 UTC