7 ms·

Linting HTML using CSS

326 points by basename 10y ago

SpaceManiac 10y ago
This is a good choice of selectors, but I wonder what styles one should apply to <meta>, <script>, or <link> tags that will get them to actually display anything. Some fiddling in Firefox didn't reveal the solution.
- foo123456 10y ago
  display:block will show them. Those elelemnts are not impossibly visible, they are just display:none by default
- err4nt 10y ago
  If they are inside the <head> you have to display: block that first, try something like: head, meta, style, script, link { display: block; }
adzicg 10y ago
broken XML leading to browsers applying inconsistent closing tags is a much bigger issue than missing attributes or inline CSS this kind of linting can't spot broken document structure
- Xorlev 10y ago
  Sure, but lets say you have well-formed HTML tags. At that point you're looking for things semantically "weird" as opposed to structurally wrong. This helps there.
- stan_rogers 10y ago
  HTML isn't XML. HTML is older.
- recursive 10y ago
  The rules for this are specified in the html5 spec. Also, some tags are not allowed to be closed, and others are only optionally closed. (like li and p)
bennettfeely 10y ago
Is there a reason the * selector is needed on the first example or am I missing something? I believe [style] { } would get the same result.
- tomatsu 10y ago
  The '*' there has no effect whatsoever. It doesn't even change the specificity.
nates 10y ago
So... this: https://github.com/imbrianj/debugCSS https://github.com/imbrianj/debugCSS ?
nodesocket 10y ago
Very cool trick. If interested, there is a node cli module which tests against W3. npm install html-validator-cli -g cd "$HOME"/Sites/mysite html-validator --verbose --file=index.html
deleted 10y ago
[deleted]
combatentropy 10y ago
If you have to apply CSS to find elements with inline styles, I think you have a more serious problem. And telling everyone that every one of their images must have an alt tag is draconian. Sometimes an image is purely decorative. Sometimes an image doesn't convey any more than the paragraph beside it. Often an alt tag is written in a perfunctory way, or even when it isn't, it doesn't truly make things better for the blind person. I think they should be at the writer's discretion.
- cfv 10y ago
  I like using these to diagnose what kind of lemon a client just brought for maintenance, but they can be pretty nice to ensure you got your final product right too.
- pinum 10y ago
  This makes some sense, but it occurs to me that a blind person has no way to distinguish between an image that has no alt tag because it would be meaningless, and an important image that the author simply didn't think to write an alt tag for. alt="(Decoration)" would clear it right up and only takes a few seconds.
  - singlow 10y ago
    alt="" means decoration - screenreaders will ignore it.
- aidenn0 10y ago
  According to TFA, an image with no alt tag will cause some screenreaders to read the src, so a purely decorative image should instead have a null alt tag.
  - alanh 10y ago
    Yep. (And with the fingerprinting / cache-busting most of us do for our assets these days, the result is painful. Listen: https://www.dropbox.com/s/blln31qfzviwf7k/say-0ffe34b4e04c2b282c5-dot-jpg.aiff?dl=0 https://www.dropbox.com/s/blln31qfzviwf7k/say-0ffe34b4e04c2b...)
tannhaeuser 10y ago
Soundly checking HTML, including all kinds of customization and more is possible using SGML. [1]: http://sgmljs.net/blog/blog1701.html http://sgmljs.net/blog/blog1701.html
- tux1968 10y ago
  Your comment sent me down a multi-hour rabbit hole.. thank you. I ended up reading a fair bit about Marcus Reichardt's initiative toward a SGML DTD for HTML5.1. However, i was unable to find a place where a tool or said DTD was available for download. Do you happen to have a link?
  - tannhaeuser 10y ago
    For now the full DTD grammar can be downloaded from the "Restrictive DTD" tab link of the full paper eg. [1] via copy/paste. I intend to be make it accessible on a permanent URL once I get more feedback/review comments. It can be processed using the venerable OpenSP/OpenJade package (install it with "sudo apt-get install opensp" on Debian/Ubuntu or "sudo port install opensp" on Mac/MacPorts; don't know the MacBrew equivalent, though). I'm using my own sgmljs SGML system (public release upcoming/pending). [1]: http://sgmljs.net/docs/w3c-html51-dtd.html http://sgmljs.net/docs/w3c-html51-dtd.html
- oneeyedpigeon 10y ago
  You could probably also do something similar to the article, providing your document is XML-valid, using XSLT. This would keep the advantage that you just load your document in a browser (having added a temporary stylesheet link either manually or dynamically) but would support more powerful validation. It could be made into a browser extension so you're just a one-click away from validation with in-page feedback.
  - tannhaeuser 10y ago
    Of course, you can also validate XHTML using the provided DTDs if you take out the SGML-specific bits, using a (DTD-)validating XML parser (or indeed use XSLT as you say). But SGML has tag omission/inference, empty elements/HTML "void" elements, attribute short forms, unquoted attributes, Wiki syntaxes/markdown, and other features desired or even required for mere parsing mainstream HTML. As to using XHTML, I'm not sure it has a bright future. Last I've worked with it was like ten years ago (xsl-stylesheet processing instruction etc. on IE6; newer browsers don't seem to support it anymore). FYI: SGML is way more powerful than XML, and its grammar formalism is identical to that of XML because XML was designed as a simplified subset of SGML. Though Relax NG, and also XML Schema, can theoretically express richer grammars than SGML, they can't be used for HTML due to lack of tag inference and other short syntax features, and the features that Relax NG has over SGML benefit data-oriented rather than document-oriented use cases (eg. the use cases that JSON and other serialization formats are arguably better suited for than markup in the first place IMO). sgmljs.net can run (also) in the browser, so can also validate HTML5 in the browser. Disclaimer: my project
remy_luisant 10y ago
Reminds me how some video games would use really garish default textures, so that the errors in texturing stand out. I believe Thief 1 and 2 have done this, but I may be wrong.
- deoxxa 10y ago
  It's also similar to what Microsoft does (did?) with Windows during development[0] - text that hasn't been translated yet is shown with a whole bunch of meaningless diacritical marks and replacement characters so it stands out. [0]: https://en.wikipedia.org/wiki/Pseudolocalization#Pseudolocalization_in_Microsoft_Windows https://en.wikipedia.org/wiki/Pseudolocalization#Pseudolocal...
- toomanybeersies 10y ago
  The Source Engine (of Half Life and Counter Strike fame) uses a checkered black and bright pink texture for missing textures. It really is garish, as I discovered when playing Garry's Mod back in the day.
- rangibaby 10y ago
  Doom2 has the classic "AASHITTY"
- tvararu 10y ago
  John Romero learned this in his early days at ID Software: it's crucial that you can still boot the game even when things are missing, but make them very apparent. Source: somewhere in this video https://www.youtube.com/watch?v=E2MIpi8pIvY https://www.youtube.com/watch?v=E2MIpi8pIvY
yokohummer7 10y ago
a:not([href]) a[href="#"], a[href=""], a[href*="javascript:void(0)"] { … } Wait, what should I use instead then?
- jacobr 10y ago
  The button element should be used for interaction that is not navigation to a different url.
  - jontro 10y ago
    What about anchors using name?
    - lexicality 10y ago
      They've been deemed obsolete with HTML5 - you should use the id attribute on the element the <a> would be naming.
- tompazourek 10y ago
  I was thinking the same when I saw that... Not sure if it's viable, but maybe buttons?
- oneeyedpigeon 10y ago
  Always supply an href so JavaScript-less viewers can still activate the link. Attach events via JavaScript rather than HTML attributes.
jwdunne 10y ago
Interesting idea though I think the best choice is a VLI linting tool configured to check these and editor integration. You could also use JS and log the info to console. Last thing you want to do is this making its way into production and it probably will: sods law. I just think the most efficient approach is to log violations to a console with exact line numbers.
oneeyedpigeon 10y ago
I toyed with something similar a few years ago, although didn't pursue it to this depth. One issue, though: border is definitely not the right way to highlight elements in this manner since it affects layout. I'd go with outline instead.
- mercer 10y ago
  Does it affect layout if you use box-sizing: border-box;?
grav 10y ago
Inline styles are what keeps my React code maintainable :-)
5_minutes 10y ago
It would be nice if this was all bundled in some easy to include package
jzig 10y ago
Why isn't there an HTML linter in the same way there is ESLint for JavaScript?
- dredmorbius 10y ago
  There is tidy. I was going to say "but it's not kept up with standards", but find whilst researching this comment that it has been extended to HTML5. https://www.w3.org/People/Raggett/tidy/ https://www.w3.org/People/Raggett/tidy/ Search shows a few other options as well: https://duckduckgo.com/?q=html+linter&t=ftas&ia=web https://duckduckgo.com/?q=html+linter&t=ftas&ia=web Unless I'm misreading your question.
lendk 10y ago
Hi guys i already made a github repo as a follow up from this article you can check it here: https://github.com/lendk/Lint-HTML-with-SCSS-CSS https://github.com/lendk/Lint-HTML-with-SCSS-CSS

326 points by basename 10y ago

This is a good choice of selectors, but I wonder what styles one should apply to <meta>, <script>, or <link> tags that will get them to actually display anything. Some fiddling in Firefox didn't reveal the solution.

foo123456 10y ago
display:block will show them. Those elelemnts are not impossibly visible, they are just display:none by default
err4nt 10y ago
If they are inside the <head> you have to display: block that first, try something like: head, meta, style, script, link { display: block; }

adzicg 10y ago

broken XML leading to browsers applying inconsistent closing tags is a much bigger issue than missing attributes or inline CSS this kind of linting can't spot broken document structure

Xorlev 10y ago
Sure, but lets say you have well-formed HTML tags. At that point you're looking for things semantically "weird" as opposed to structurally wrong. This helps there.
stan_rogers 10y ago
HTML isn't XML. HTML is older.
recursive 10y ago
The rules for this are specified in the html5 spec. Also, some tags are not allowed to be closed, and others are only optionally closed. (like li and p)

bennettfeely 10y ago

Is there a reason the * selector is needed on the first example or am I missing something? I believe [style] { } would get the same result.

tomatsu 10y ago
The '*' there has no effect whatsoever. It doesn't even change the specificity.

nates 10y ago

So... this: https://github.com/imbrianj/debugCSS https://github.com/imbrianj/debugCSS ?

nodesocket 10y ago

Very cool trick. If interested, there is a node cli module which tests against W3. npm install html-validator-cli -g cd "$HOME"/Sites/mysite html-validator --verbose --file=index.html

deleted 10y ago

[deleted]

combatentropy 10y ago

If you have to apply CSS to find elements with inline styles, I think you have a more serious problem. And telling everyone that every one of their images must have an alt tag is draconian. Sometimes an image is purely decorative. Sometimes an image doesn't convey any more than the paragraph beside it. Often an alt tag is written in a perfunctory way, or even when it isn't, it doesn't truly make things better for the blind person. I think they should be at the writer's discretion.

cfv 10y ago
I like using these to diagnose what kind of lemon a client just brought for maintenance, but they can be pretty nice to ensure you got your final product right too.
pinum 10y ago
This makes some sense, but it occurs to me that a blind person has no way to distinguish between an image that has no alt tag because it would be meaningless, and an important image that the author simply didn't think to write an alt tag for. alt="(Decoration)" would clear it right up and only takes a few seconds.
- singlow 10y ago
  alt="" means decoration - screenreaders will ignore it.
aidenn0 10y ago
According to TFA, an image with no alt tag will cause some screenreaders to read the src, so a purely decorative image should instead have a null alt tag.
- alanh 10y ago
  Yep. (And with the fingerprinting / cache-busting most of us do for our assets these days, the result is painful. Listen: https://www.dropbox.com/s/blln31qfzviwf7k/say-0ffe34b4e04c2b282c5-dot-jpg.aiff?dl=0 https://www.dropbox.com/s/blln31qfzviwf7k/say-0ffe34b4e04c2b...)

tannhaeuser 10y ago

Soundly checking HTML, including all kinds of customization and more is possible using SGML. [1]: http://sgmljs.net/blog/blog1701.html http://sgmljs.net/blog/blog1701.html

tux1968 10y ago
Your comment sent me down a multi-hour rabbit hole.. thank you. I ended up reading a fair bit about Marcus Reichardt's initiative toward a SGML DTD for HTML5.1. However, i was unable to find a place where a tool or said DTD was available for download. Do you happen to have a link?
- tannhaeuser 10y ago
  For now the full DTD grammar can be downloaded from the "Restrictive DTD" tab link of the full paper eg. [1] via copy/paste. I intend to be make it accessible on a permanent URL once I get more feedback/review comments. It can be processed using the venerable OpenSP/OpenJade package (install it with "sudo apt-get install opensp" on Debian/Ubuntu or "sudo port install opensp" on Mac/MacPorts; don't know the MacBrew equivalent, though). I'm using my own sgmljs SGML system (public release upcoming/pending). [1]: http://sgmljs.net/docs/w3c-html51-dtd.html http://sgmljs.net/docs/w3c-html51-dtd.html
oneeyedpigeon 10y ago
You could probably also do something similar to the article, providing your document is XML-valid, using XSLT. This would keep the advantage that you just load your document in a browser (having added a temporary stylesheet link either manually or dynamically) but would support more powerful validation. It could be made into a browser extension so you're just a one-click away from validation with in-page feedback.
- tannhaeuser 10y ago
  Of course, you can also validate XHTML using the provided DTDs if you take out the SGML-specific bits, using a (DTD-)validating XML parser (or indeed use XSLT as you say). But SGML has tag omission/inference, empty elements/HTML "void" elements, attribute short forms, unquoted attributes, Wiki syntaxes/markdown, and other features desired or even required for mere parsing mainstream HTML. As to using XHTML, I'm not sure it has a bright future. Last I've worked with it was like ten years ago (xsl-stylesheet processing instruction etc. on IE6; newer browsers don't seem to support it anymore). FYI: SGML is way more powerful than XML, and its grammar formalism is identical to that of XML because XML was designed as a simplified subset of SGML. Though Relax NG, and also XML Schema, can theoretically express richer grammars than SGML, they can't be used for HTML due to lack of tag inference and other short syntax features, and the features that Relax NG has over SGML benefit data-oriented rather than document-oriented use cases (eg. the use cases that JSON and other serialization formats are arguably better suited for than markup in the first place IMO). sgmljs.net can run (also) in the browser, so can also validate HTML5 in the browser. Disclaimer: my project

remy_luisant 10y ago

Reminds me how some video games would use really garish default textures, so that the errors in texturing stand out. I believe Thief 1 and 2 have done this, but I may be wrong.

deoxxa 10y ago
It's also similar to what Microsoft does (did?) with Windows during development[0] - text that hasn't been translated yet is shown with a whole bunch of meaningless diacritical marks and replacement characters so it stands out. [0]: https://en.wikipedia.org/wiki/Pseudolocalization#Pseudolocalization_in_Microsoft_Windows https://en.wikipedia.org/wiki/Pseudolocalization#Pseudolocal...
toomanybeersies 10y ago
The Source Engine (of Half Life and Counter Strike fame) uses a checkered black and bright pink texture for missing textures. It really is garish, as I discovered when playing Garry's Mod back in the day.
rangibaby 10y ago
Doom2 has the classic "AASHITTY"
tvararu 10y ago
John Romero learned this in his early days at ID Software: it's crucial that you can still boot the game even when things are missing, but make them very apparent. Source: somewhere in this video https://www.youtube.com/watch?v=E2MIpi8pIvY https://www.youtube.com/watch?v=E2MIpi8pIvY

yokohummer7 10y ago

a:not([href]) a[href="#"], a[href=""], a[href*="javascript:void(0)"] { … } Wait, what should I use instead then?

jacobr 10y ago
The button element should be used for interaction that is not navigation to a different url.
- jontro 10y ago
  What about anchors using name?
  - lexicality 10y ago
    They've been deemed obsolete with HTML5 - you should use the id attribute on the element the <a> would be naming.
tompazourek 10y ago
I was thinking the same when I saw that... Not sure if it's viable, but maybe buttons?
oneeyedpigeon 10y ago
Always supply an href so JavaScript-less viewers can still activate the link. Attach events via JavaScript rather than HTML attributes.

jwdunne 10y ago

Interesting idea though I think the best choice is a VLI linting tool configured to check these and editor integration. You could also use JS and log the info to console. Last thing you want to do is this making its way into production and it probably will: sods law. I just think the most efficient approach is to log violations to a console with exact line numbers.

oneeyedpigeon 10y ago

I toyed with something similar a few years ago, although didn't pursue it to this depth. One issue, though: border is definitely not the right way to highlight elements in this manner since it affects layout. I'd go with outline instead.

mercer 10y ago
Does it affect layout if you use box-sizing: border-box;?

grav 10y ago

Inline styles are what keeps my React code maintainable :-)

5_minutes 10y ago

It would be nice if this was all bundled in some easy to include package

jzig 10y ago

Why isn't there an HTML linter in the same way there is ESLint for JavaScript?

dredmorbius 10y ago
There is tidy. I was going to say "but it's not kept up with standards", but find whilst researching this comment that it has been extended to HTML5. https://www.w3.org/People/Raggett/tidy/ https://www.w3.org/People/Raggett/tidy/ Search shows a few other options as well: https://duckduckgo.com/?q=html+linter&t=ftas&ia=web https://duckduckgo.com/?q=html+linter&t=ftas&ia=web Unless I'm misreading your question.

lendk 10y ago

Hi guys i already made a github repo as a follow up from this article you can check it here: https://github.com/lendk/Lint-HTML-with-SCSS-CSS https://github.com/lendk/Lint-HTML-with-SCSS-CSS