Re: [css-line-grid][css-books] one property or more?

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