Re: [css-lists] Allow counter() to be used where numeric values are expected

On 4 March 2016 at 20:11, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Wed, Mar 2, 2016 at 5:32 AM, Mark Crutch <mark.crutch@gmail.com> wrote:
> > I would like to put forward a suggestion to the WG to extend the scope of
> > the counter() function to allow it to be used in a CSS property wherever
> a
> > numeric value is allowed. This would only apply to counters of the
> "decimal"
> > type.
> > ...
>
>
> But a counter-value() function that resolved to the numeric value
> would work.  One issue is that counters are, in at least some
> browsers, *terribly* slow and hacky, so exposing counters for more
> things might not go over well.
>
> ~TJ
>

counter-value() sounds good to me. It's a shame about the speed in some
browsers, but even with that limitation I still think this would be a
worthwhile addition to the spec. In particular:

* More use of counter values within CSS might encourage browser vendors to
improve the performance of their implementations.

* Without something like this authors can end up having to manually specify
values that could otherwise be automatically generated - as in the flexbox
order example in my original post. That not only places more of a burden on
the author, but leads to less maintainable code as any changes to the DOM
order would require a corresponding manual update to the CSS.

* Alternatively authors might automate the process with JS - typically by
using querySelectorAll() then looping over the resultant collection to set
a value via the style property. This is harder to write, fails when JS is
inactive, and must surely be slower than even the worst of the browsers'
native counter implementations. It's also likely to lead to FOUC and reflow
issues as calculating elements' final positions isn't possible until the JS
has run.


In my specific case there are potentially several dozen flexbox children
(the amount varies, as it's data driven), and I only want to explicitly
change the order of one or two of them. By necessity I'll be using a JS
solution for now, but it does feel like using a hammer to crack a nut and I
would definitely prefer a declarative solution that's kept entirely in the
CSS.


Mark


-- 
*The Greys*, *Elvie* and *Monsters, Inked* webcomics

Website      http://www.peppertop.com/
Facebook   http://facebook.com/PeppertopComics
Twitter        https://twitter.com/PeppertopComics