'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.