New CSS parser/validator
I've been working to augment csspool so that I can use it to validate and parse styles. This will help increase the quality of styles and fix some long-broken things.
I think I've got it mostly working - some less-common valid things aren't yet supported, but most of the things it catches are legitimate errors.
Here's all the styles it thinks have errors. Check it over and see if you're in the list, and let me know of anything that it's flagging as invalid that is valid. Things I know of:
I think I've got it mostly working - some less-common valid things aren't yet supported, but most of the things it catches are legitimate errors.
Here's all the styles it thinks have errors. Check it over and see if you're in the list, and let me know of anything that it's flagging as invalid that is valid. Things I know of:
- A number of -moz- functions
- @charset
- @keyframes
- calc()
- any()/matches()(
- nth-last-of-type()
- Line breaks in data URIs
- @supports
- @media
- box-shadow
This discussion has been closed.
Comments
Also, 2 styles by foxxyn8 listed but only one seems to need an update for this line: -moz-border-radius: 5px !important;
Can you edit it and change it to: border-radius: 5px !important; ('cause foxxyn8 seems to be still occupying something)? If not, i will have to post something there (he asked me to watch after his styles but if he's not coming back, i suppose it's no longer important
- parse error on value "'data:image/svg+xml," (error) [1], [2]. Chrome, Firefox, and the W3C all accept it. Maybe it's the line continuation.
- Note that the W3C validator throws on calc(), with and without a vendor prefix, in those stylesheets. Your validator may too, but the SVG precedes the first instance of -vnd-calc() so I can't confirm or disconfirm.
- parse error on value "@" (error) [3]. Maybe @-vnd-keyframes; @-moz-document is well-formed.
- parse error on value "0% " (PERCENTAGE) [4]. A selector interior to @keyframes
- parse error on value "1" (NUMBER) [5]. Either z-index:1 or :nth-last-of-type(1). W3C doesn't flag either of them, but it does throw on the well-formed pointer-events property. (CSS4, yes, but shipped unprefixed per W3C policy. Booo, W3C!)
What do you plan to do with your syntactical engine, anyway? Will it get us comments in Chrome?a3cAnton - Firefox DarkBlue Theme - parse error on value "," (COMMA) - Validate
a3cAnton - Firefox 4 Graphite-Theme - parse error on value "," (COMMA) - Validate
a3cAnton - Firefox 14 soft dark - parse error on value "," (COMMA) - Validate
a3cAnton - Firefox DarkBlue for Nightly 21 test version - parse error on value "," (COMMA) - Validate
What am i suppose to do with this?
I found a couple of things (still, the editor doesn't show them as errors, go figure) but one i can't find. Is there another validator somewhere that will actually highlight errors? I see nothing wrong with this style, yet this validator says: 'parse error on value ";" (SEMI)' ?
Is this correct?
@namespace url(http://www.w3.org/1999/xhtml);
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://global/content/commonDialog.xul"),
@-moz-document url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://global/content/commonDialog.xul"),
@-moz-document url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {
/*CORRECT*/
@namespace url(http://www.w3.org/1999/xhtml);
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://global/content/commonDialog.xul"),
url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {
/*semi-colon that it thinks is missing*/
@namespace url(http://www.w3.org/1999/xhtml);
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url("chrome://global/content/commonDialog.xul"); ↵
@-moz-document url("chrome://mozapps/content/xpinstall/xpinstallConfirm.xul") {
TIA.
No one mentioned you're a pretty cool dude.
So I say.
OK, thanks for nothing, people.
In a clean profile, i discovered that the page pops a notification. I allowed popups for us.o and a tab opened with the validator which told me i have 19 errors! in a style. Lovely. It still doesn't explain errors, i don't understand a thing there and the whole thing is useless to me. How come i successfully post those styles presumably with errors, i use them, too, w/out problems?
Apparently, i was blocking popups in Fx options and had to whitelist us.o
- When you click "Validate", the @document wrappers are removed from the style, and the unwrapped style should be submitted to the W3C CSS Validator. (Because the W3C validator doesn't understand @document, and simply ignores everything inside of it.) I believe the intent was that you'd identify errors made by csspool to help Jason debug it, not that you'd go mad trying to troubleshoot your working style sheets.
- The W3C validator flags "weird" URLs that aren't enclosed in quotation marks, even though it shouldn't [1] [2]. You don't use quotation marks in url() expressions - that accounts for most of the "errors" you've seen.
- The W3C validator only warns about vendor-prefixed property names, but vendor-prefixed property values, pseudo-classes, and pseudo-elements are flagged as errors. (They're not, of course.) All of your ::-moz-tree-something pseudo-elements are flagged as "errors", for example.
- @Jason: Line 317 of this unwrapped style is truncated halfway through the data URL. (No harm done, the W3C validator would have flagged the complete line anyway.)
Barbie was right about the @document rule, of course, but only the last default @namespace rule counts:I was trying to point the coolness to Jason.
Ohne,
i know, was kiddin' thus
"The pseudo-element :hover can't appear here in the context CSS level 3".
"Unknown pseudo-element or pseudo-class :start"
Ditto for :decrement or :end or :increment or :horizontal or :vertical
Lies, all lies. :p It works fine because it was intended for webkit, not for W3C. Maybe you could cook up some flexible mechanism for GUI styles. :/ It's not so strict. All of the following are merely warnings, not errors:
pseudo-element: ::-webkit-input-placeholder is an unknown vendor extended pseudo-element
pseudo-class: :-moz-lwtheme is an unknown vendor extended pseudo-class
property value: Property -moz-initial is an unknown vendor extension
It's important to note the difference between a parser and a validator - the parser will say things like "what the hell is up with this comma?", while a validator can say that and also say "I don't know what property 'foo' is". So the parser just needs to understand the syntax of a stylesheet - the errors in my document are the cases where it doesn't.
The (syntactical) parser accepts :-moz-tree-cell-text, :-moz-tree-cell-text(selected), and even :-moz-tree-cell-text(selected hover) as valid vendor pseudo-classes, accepts ::-moz-tree-cell-text as a valid vendor pseudo-element, but throws on ::-moz-tree-cell-text(selected). Which is strictly conforming - c.f. [1], [2]. (Booo, Mozilla!)
The (semantic) validator though throws on :-moz-tree-cell-text(selected). This, for example,
treechildren:before { }yields this Which of course is non-conforming, like requiring quotation marks around all but http:, ftp:, and file: URLs. (Booo, W3C!)treechildren:-moz-tree-cell-text { }
treechildren:-moz-tree-cell-text(hover) { }
treechildren:-moz-tree-cell-text(selected hover) { }
treechildren::-moz-tree-cell-text { }
treechildren::-moz-tree-cell-text(hover) { }
"45deg is not a color value"... well, that's true. *delete ellipse radiants*
E:not(F>G) isn't a valid syntax? Damn... ^^ Fixed, compressed and validatet.
*waiting for the next run's results*
and MS Word says it has 63166 characters (with emtpy spaces).