• The original linting – HTML – using CSS

When writing HTML, syntax errors are hard to detect. It’s easy to have invalid, spooky zombie code in your code, and it’s not obvious.

There are many ways to examine our HTML code to find and resolve errors, such as using W3C tags to validate services. There is also a simple way to incorporate this into our workflow: use slightly more advanced CSS selectors to highlight potential problem areas. There are some simple errors that we can catch using CSS selectors.

Inline style

*[style] { 
    border: 5px solid red; /* Style to make the elements noticeable */
}
Copy the code

This selector marks all tags on the page that have inline styles written. Inline styles are difficult to override because of their high weight, and in general we need to avoid inline styles. Although we sometimes have to use inline styles, this method can also highlight them as criteria for evaluating individual cases.

Once the elements in question have been selected in this way we can write any style we want to make them more obvious.

The link in the A tag is invalid

A: not (/ href), a href = "#"], a [href = ""], a [* href =" javascript: void (0) "] {...Copy the code


The image Img tag is not accessible

img:not([alt]) { ... }
Copy the code

As a general rule, all images should have an Alt attribute. Without this attribute, most screen readers will read the SRC attribute of img, which is useless and confusing to the user.

It should also be noted that the above selector will not pick Alt attributes with null values, such as <img SRC =”photo.png” Alt =””>. Because the null value could be a deliberate attempt by the developer to make the screen reader skip the IMG tag, for example if the image is purely cosmetic. But it is sometimes necessary to flag null values.


img[alt=""] { ... }
Copy the code

Missing document language


html:not([lang]),  
html[lang=""] { ... }
Copy the code


The attribute that all HTML tags should specify is the [lang] attribute. This property will tell the screen reader which language the page is in, so that the reader can choose which language to read in.

What would have happened without that tag? Here’s a video:

Share from @hteumeuleu’s Why setting (eg. lang= “en”) is so important. 😂 t.Co /tjn8GvPVKM

Wrong coding

meta[charset]:not([charset="UTF-8"]) { ... }
Copy the code

This selector will select any meta encoded tag that does not have utF-8 attributes set. This tag is encoded using UTF-8 for high-speed browsers. Utf-8 is currently the recommended ENCODING format for HTML documents. The VALID HTML format must be specified by the W3C. Ideally this tag should be placed first inside the . We can also detect it.


meta[charset="UTF-8"]:not(:first-child) { ... }
Copy the code

Viewport properties that cannot be read

meta[name="viewport"][content*="user-scalable=no"],  
meta[name="viewport"][content*="maximum-scale"],  
meta[name="viewport"][content*="minimum-scale"] { ... }
Copy the code

This selector marks viewport properties at unreadable locations.

A form without a label surrounding it

input:not([id]),  
select:not([id]),  
textarea:not([id]) { ... }

label:not([for]) { ... }
Copy the code

Form elements should be the most important element when it comes to adding annotations. Although there are many ways to annotate a form element, the most common way is to add an ID to the label element that refers to the form element. The selector above checks that no ID is added to the label and that the label element does not explicitly refer to the form element with an ID.

Another way is to tag form elements with names. The ID attribute is used to indicate the context of the element in the HTML document, and the name attribute is used to indicate the element to be submitted by form Data.


input:not([name]),  
select:not([name]),  
textarea:not([name]) { ... }
Copy the code

We can also request that a name or ID be added to the form element.


form:not([name]):not([id]) { ... }
Copy the code

An empty interactive element

button:empty,  
a:empty { ... }
Copy the code

Interactive elements such as links and buttons are typically marked by their content. Although there are other ways to label this element, such as the aria-label attribute, it is a bad signal if the element content is empty.

No necessary/deprecated attributes

script[type="text/javascript"],  
link[rel="stylesheet"][type="text/css"] { ... 
Copy the code


The last

I have been reading foreign blog posts these days. I found a website Bitsofcode very interesting and wrote many interesting front-end articles. Translated. I don’t know how many of you remember what the front end was like when it was all so complicated. I hope that “front-end Grocery Store” can accept more, simple, pay attention to the front-end itself some good articles, calm down, unchanged impetuous, talk.

Thank k you for your generosity and care, bow, I will make some summary in the near future, please continue to pay attention to.

Did this article help you? Welcome to join the front End learning Group wechat group: