Kozea/tinycss2

'counters' element support?

Closed this issue · 4 comments

CSS counters are a CSS 2.1 feature. I'm finding I cannot use them on reddit which has recently implemented tinycss2:
http://www.reddit.com/r/cssnews/comments/24anzb/css_change_the_filter_has_been_rewritten/

Description:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters?redirectlocale=en-US&redirectslug=CSS%2FCounters

Sample implementation:

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section,".") " ";    /* Adds the value of all instances
                                            of the section counter separated
                                            by a ".". */
                                         /* if you need to support < IE8 then
                                            make sure there is no space after
                                            the ','
}

I'm trying to apply the following style on my subreddit's stylesheet:

ol {
  counter-reset: listNum;
  list-style-type: none;
}

ol > li:before {
  counter-increment: listNum;
  content: counters(listNum,".") " ";
}

Though reddit's stylesheet editor I get the error: unknown function "counters"

I'm not sure if this is tinycss2 or reddit, but if y'all could check that the syntax is accepted by tinycss2, and if it isn't, add it, I'd appreciate it.

The counters function just needs to be added to reddit's whitelist that's something on top of tinycss2. Please report this stuff through /r/bugs in the future rather than spamming up poor tinycss2's issue tracker. :(

Confirmed. Thanks, @spladug.

Perhaps the docs could clarify that tinycss2 not a full CSS parser (2.1 or otherwise) but only handles the low-level concepts defines in the CSS Syntax module. In particular, property values are represented as a list of component values (including functions, as a name and a nested list of component values of the arguments) that need to be parsed according to the grammar specific to a given property.

Good idea, @SimonSapin. I've updated the /r/cssnews post.