Issues aplenty with HTML and CSS syntax checking

Posted by florentv on 2009-08-31 06:45

This is a bit long; please bear with me if you're interested in the subject and/or are a Komodo developer. :)

Background syntax checking can't be turned off for a language

As a default, Komodo has HTML syntax checking and (some) WAI conformance checking using Tidy, and CSS syntax checking using… hum, something else/a generic mechanism.

One problem is that those syntax checking implementations have some false positives, which makes it hard to distinguish real errors from the rest. More on that later.

The other problem is that syntax checking is enabled by default, can't be disabled for a specific language, and can only be disabled completely or on a per-file basis. That means that if your files contain a few not-really-errors, you get a host of red/green lines whenever you open them, all the time. You have to go to the current file settings, and disable background syntax checking for that file. And do it for every file.

I wonder if other users feel that there is a need for an option to disable background syntax checking on a per-language basis. Your thoughts on that?

Final note: Dafizilla's Klint extension allows you to disable background syntax checking for whatever file patterns you want (like "*.html" or "*.tmpl" for instance). It's a nice feature (too bad it's a bit hard to find) and a good match for an extension, but i still think the core features should/could allow you to disable background syntax checking for specific languages.

HTML Tidy and HTML 5

One interesting problem with HTML Tidy (used for HTML syntax checking) is that it doesn't cope with elements or attributes that don't exist in HTML 4.01. If you're starting to use HTML 5, you're better off not using HTML syntax checking in Komodo. For instance, these are valid in HTML 5 (and elegant) but will trigger errors or warnings:

<meta charset="utf-8">
<!-- The above is well understood by browsers, valid in HTML 5,
    but not valid in HTML 4. -->
<style>
    /* Note that the "type" attribute is optional in HTML 5 */
</style>

Then, if you start using new elements such as SECTION, HGROUP, NAV, etc., you get errors as well.

Core problems here are:
1. Tidy (or Komodo) doesn't distinguish well-formedness from element/attributes requirements. You cannot have Komodo report only well-formedness issues, discarding or hiding validation issues.
2. Tidy, or the version of Tidy used in current Komodo releases, was not updated for HTML 5 syntax checking (this is understandable, as HTML 5 won't reach Last Call until October 2009).

Files that contain fragments of HTML

Chances are users will be working with files with .html extensions, that contain HTML code, but are not complete HTML pages. This is the case if you edit standalone HTML content, or template files, that are used by other files or a template system to generate complete files.

For files recognized as HTML, and for some template languages (Django templates come to mind), Komodo will try to validate the page's HTML. Unless you go to the file's preferences, for each file, blah blah blah.

For instance, the following Django template code (file names base.html for instance) will trigger multiple errors:

{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="{{ LANGUAGE_CODE }}">
...

The text before the doctype is not recognized, Tidy outputs a warning, then whatever HTML comes next is not recognized correctly. Complete nightmare. Solution: go to the current file's settings, disable background syntax checking, repeat for every template file you're working on, create, etc.

Pages with fragments of HTML are the same. No Doctype, no BODY element… every other HTML element will be seen as an error by Tidy.

CSS false positives: CSS 3, proprietary properties

CSS is another mix-up of syntax and validity. Background syntax checking for CSS also checks that your properties or value types exist. Except there is A LOT that the rules in Komodo don't know about, or report as errors when they are conscious choices to use proprietary properties or CSS3 properties.

First, a word about CSS properties:
- Some belong to the CSS 2.1 spec, that is currently a candidate recommendation is a pretty much stable (and fully implemented in IE8, yay!).
- Some belong to the CSS3 modules (including CSS2 properties that were not kept in revision 2.1, and bumped to the next major CSS Level). Among those, some are quite final (their modules are Candidate Recommendations or a Last Calls), other have an uncertain future (their CSS3 modules are Working Drafts).
- Some are vendor-specific properties that are not valid in any version of CSS. Like the filter or zoom properties of Internet Explorer.
- Some are vendor-specific test properties that use a specified scheme: they start with a vendor-specific prefix. My take is that those should be reported as warnings, not errors.Thus, "filter" is outright invalid but "-webkit-transition", "-moz-box-shadow" and "-ms-filter", though still invalid, should not be reported or should be reported as warnings.

I'm glad that the background syntax checking catches issues like gross syntax errors (missing ";" for instance), or typos in property names ("witdh: 400px"). But i tend to use "-moz-*", "-o-*" and "-webkit-*" properties quite a lot for some progressive enhancement, and the occasional "zoom: 1" declaration to give HasLayout to IE 6-7. I then have to overlook most error squiggles, and sometimes when i've had enough i disable background syntax checking for CSS files… doing it again and again for every file, blah blah, you know the drill.

Summary and suggestions

1. Komodo could allow users to disable background syntax checking for specific languages. (In the existing Preferences dialog, you can disable background syntax checking as a whole, and for some languages you have options to disable part of the syntax checking. These two kind of tweaking happen in wholly different parts of the Preferences.)
2. HTML syntax checking is broken for incomplete HTML documents and HTML fragments. No idea how this can be fixed.
3. HTML syntax checking is broken for HTML5. Not sure if the HTML syntax checking can be extended to accept HTML5.
4. Syntax checking rules for CSS should be extended/improved. I can help on that with some information/research (patches are out of my league).

trectenw | Fri, 2009-09-18 10:56

I use Django and am running into the same issue with partial HTML files with the template language syntax. Thanks for the suggestion to use Klint. Disabling syntax for a file extension was indeed hard to find; may not be a bad idea to update this dicussion with the steps. I.e.:

1. Select View | Tabs | Syntax Checking
2. Click the 'Disable syntax checking by file pattern' icon on the right side.

Doing that has made things look a lot better for me, but that is a bit of a workaround. For your Summary and suggestions, I really think Option 1 should be implemented in a future release.

Thanks again for the suggestion and discussion,
Thomas

dafi | Fri, 2009-09-18 12:00

I admit the 'Disable syntax checking by file pattern' is a bit hidden mainly because user feedback is very low.

Any idea how to simplify access to Klint features is welcomed
--
dafi
Enhance KomodoEdit with MoreKomodo

dash_aitch | Wed, 2009-12-09 00:38

A great deal of these issues relate to Komodo just not supporting HTML5 and CSS3 yet... this definitely needs to be done.

The proprietary/incoming properties like -moz-whatever should definitely only be warnings; they're actually the recommended method for browser vendors to try new things so they're kind of valid in some senses.

gmtfn | Wed, 2009-12-09 12:46

florentv has brought up important issues. I hope Komodo's devs will address them.

toddw
ActiveState Staff
Wed, 2011-02-16 16:15

Thanks for the feedback and the suggestions. We've got a couple of bugs focused on this work now:

CSS linting problems logged here:
http://bugs.activestate.com/show_bug.cgi?id=85396

HTML5 syntax checking problem is logged here:
http://bugs.activestate.com/show_bug.cgi?id=89306

Cheers,
Todd

baikis | Thu, 2011-03-17 00:04

using komodo edit 6.1 . How to disable warnings for "Files that contain fragments of HTML" ?

not sure if this is the same problem - but why I receive "Info: table previously mentioned" or "Info: body previously mentioned" warnings for html pages?

mth | Fri, 2012-07-13 03:50

I agree with the inconvenient incorrect syntax checking errors of komodo edit, and would like to suggest a button to remove the error warnings from the list in the 'Syntax Checking Status' tab. So when Komodo edit makes a mistake it is possible to tell it to ignore that error.

I have experienced this problem when writing CSS code in plain HTML, when injecting PHP code into CSS code, when I'm editing remote perl files all included libraries makes errors and in python when opening several files using the 'with' statement.

I would like the possibilities to turn off these errors individually, when they occur, so the checker can continue and check the rest of the document.

Thank you,
Martin

toddw
ActiveState Staff
Fri, 2012-07-13 16:34

You can disable all warnings/errors, but I know that sometimes you just want to ignore specific ones. I think filtering/ignoring specific syntax errors/warnings is a good idea. Could you please log this as an enhancement request here:
http://bugs.activestate.com/enter_bug.cgi?product=Komodo

Thanks,
Todd

proton | Sat, 2013-01-12 03:26

Here's my two cents contribution.

I had the "body already mentioned" message and it turned out to be that I was using the HTML tag dd without the corresponding dl tags surrounding it. Adding these got rid of the error message.