CSS properties can be misspelled.

[jenstroeger]

I noticed that there are several closely related CSS issues that are currently filed here:

1. General CSS validation and syntax checking (issue CSS Validation #149).
2. Missing semicolons are not reported, i.e. syntax error (issue Missing semicolon in .css ignored #243).
3. Incorrect media-types are not detected (issue Better identify the category of error messages (e.g. "CSS parsing error") #302).
4. Does not recognize custom properties (issue CSS custom properties error #790).

I’d argue that these are all token and syntax errors, and I would like to add yet another one that I noticed today:

  p {
    font-size: 1em;
    margin-top: 1.5em;
    margin-bottm: 0.2em;  /* misspelled! */
    text-align: left;
  } 

The margin-bottm is misspelled which technically is a syntax error (invalid token). I would vote that this should be reported as an error by epubcheck.

[rdeltour]

The margin-bottm is misspelled which technically is a syntax error

I don't think it's a syntax error, as it conforms to the rules of CSS Syntax. Browsers will ignore such a rule, so it's rather harmless.

I believe doing more than syntactic validation is out of scope for EPUBCheck, at least beyond the EPUB-specific requirements (see w3c/publ-cg#69).

I'll close this as invalid (out of scope), feel free to keep on discussing here, or contribute to w3c/publ-cg#69 if you think EPUBCheck should really check this.

[jenstroeger]

Hm, @rdeltour, I guess this can be debated… 🤔

According to the Mozilla docs there are about 300 CSS properties defined which I would consider syntactical keywords in a CSS file. If a keyword is misspelled then that would constitute a syntax error.

The documentation also says that,

If a property is unknown or if a value is not valid for a given property, the declaration is deemed invalid and is wholly ignored by the browser's CSS engine.

but I think that is to cater to the early days of HTML soup and lazy programming, where a browser had to tolerate invalid HTML & CSS and still render something.

However, with epubcheck being a validation tool, it would make much sense to point out invalid syntax in a CSS file because the programmer should fix that—whether the e-reader would render the property or not. If you run the above example through W3C’s CSS validator, you get this:

[rdeltour]

The declaration itself conform to the CSS Syntax Module (currently at Level 3), so by CSS terminology it's syntactically correct (the same way the sentence "This CSS file is perfectly cromulent." is syntactically correct, even if the word "cromulent" doesn't exist 🙂).

That said, it's absolutely right that the property doesn't exist and that could be reported as an error by a validator (as it is by the W3C validation service). I'm just thinking that doing it is probably a bit out of scope for EPUBCheck, as there are other better CSS validation services out there 😊.