TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Linting HTML using CSS

326 pointsby basenameabout 8 years ago

15 comments

natesabout 8 years ago
So... this: <a href="https:&#x2F;&#x2F;github.com&#x2F;imbrianj&#x2F;debugCSS" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;imbrianj&#x2F;debugCSS</a> ?
oneeyedpigeonabout 8 years ago
I toyed with something similar a few years ago, although didn&#x27;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&#x27;d go with outline instead.
评论 #13855824 未加载
tannhaeuserabout 8 years ago
Soundly checking HTML, including all kinds of customization and more is possible using SGML.<p>[1]: <a href="http:&#x2F;&#x2F;sgmljs.net&#x2F;blog&#x2F;blog1701.html" rel="nofollow">http:&#x2F;&#x2F;sgmljs.net&#x2F;blog&#x2F;blog1701.html</a>
评论 #13850754 未加载
评论 #13849972 未加载
评论 #13852603 未加载
SpaceManiacabout 8 years ago
This is a good choice of selectors, but I wonder what styles one should apply to &lt;meta&gt;, &lt;script&gt;, or &lt;link&gt; tags that will get them to actually display anything. Some fiddling in Firefox didn&#x27;t reveal the solution.
评论 #13848487 未加载
评论 #13849016 未加载
bennettfeelyabout 8 years 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.
评论 #13850311 未加载
yokohummer7about 8 years ago
<p><pre><code> a:not([href]) a[href=&quot;#&quot;], a[href=&quot;&quot;], a[href*=&quot;javascript:void(0)&quot;] { … } </code></pre> Wait, what should I use instead then?
评论 #13849866 未加载
评论 #13850180 未加载
评论 #13849889 未加载
remy_luisantabout 8 years ago
Reminds me how some video games would use really garish default textures, so that the errors in texturing stand out.<p>I believe Thief 1 and 2 have done this, but I may be wrong.
评论 #13849843 未加载
评论 #13849896 未加载
评论 #13861947 未加载
评论 #13850690 未加载
jwdunneabout 8 years ago
Interesting idea though I think the best choice is a VLI linting tool configured to check these and editor integration.<p>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.<p>I just think the most efficient approach is to log violations to a console with exact line numbers.
lendkabout 8 years ago
Hi guys i already made a github repo as a follow up from this article you can check it here: <a href="https:&#x2F;&#x2F;github.com&#x2F;lendk&#x2F;Lint-HTML-with-SCSS-CSS" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;lendk&#x2F;Lint-HTML-with-SCSS-CSS</a>
nodesocketabout 8 years ago
Very cool trick. If interested, there is a node cli module which tests against W3.<p><pre><code> npm install html-validator-cli -g cd &quot;$HOME&quot;&#x2F;Sites&#x2F;mysite html-validator --verbose --file=index.html</code></pre>
gravabout 8 years ago
Inline styles are what keeps my React code maintainable :-)
jzigabout 8 years ago
Why isn&#x27;t there an HTML linter in the same way there is ESLint for JavaScript?
评论 #13851762 未加载
5_minutesabout 8 years ago
It would be nice if this was all bundled in some easy to include package
adzicgabout 8 years ago
broken XML leading to browsers applying inconsistent closing tags is a much bigger issue than missing attributes or inline CSS<p>this kind of linting can&#x27;t spot broken document structure
评论 #13848358 未加载
评论 #13848731 未加载
评论 #13849008 未加载
combatentropyabout 8 years ago
If you have to apply CSS to find elements with inline styles, I think you have a more serious problem.<p>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&#x27;t convey any more than the paragraph beside it. Often an alt tag is written in a perfunctory way, or even when it isn&#x27;t, it doesn&#x27;t truly make things better for the blind person. I think they should be at the writer&#x27;s discretion.
评论 #13849318 未加载
评论 #13848740 未加载
评论 #13848700 未加载
评论 #13848677 未加载