Css

The W3C specifications define the valid pseudo-element selectors. Only the official and browser-specific pseudo-element selectors should be used to get the expected impact in the final rendering.

According to the W3C specifications:

A shorthand property defined after a longhand property will completely override the value defined in the longhand property making the longhand one useless. The code should be refactored to consider the longhand property or to remove it completely.

Text should provide enough contrast with its background so that it can be read easily by people with moderately low vision, including colorblind people.

This rule raises an issue when a CSS selector defines both the background-color and color properties with a contrast ratio of less than 4.5:1, which is the contrast required to meet WCAG AA level. It applies only when the selector is not on a heading (h1, h2,…​) or title

To perform calculations when specifying a CSS property `calc() function can be used. This function takes single expression as parameter. When writing this expression some rules must be respected:

Otherwise calc()` function will be invalid and the entire rule using it will be ignored.

The W3C specifications define the valid media features. Only the official and browser-specific media features should be used to get the expected impact in the final rendering.

HTML, SVG, and MathML define the selectors which can be used in a CSS. A selector that is not part of them is likely to be a typo or a misunderstanding of the CSS syntax.

calc is a CSS3 function that provides the possibility to do simple math in CSS (add, subtract, divide, multiply). Without spaces around operators, calc will have no effect.

More precisely, before an operator, there must be a single whitespace or a newline plus indentation. After an operator, there must be a single whitespace or a newline.

The W3C specifications define the units that can be used with lengths. A unit that is not part of the list of supported ones is likely to be a typo and will be seen as a UI bug by the user.

This rule raises an issue each time a unit is not officially supported.

`linear-gradient was standardized with CSS3. Before that, it was possible to use different non-standard values to define the gradient’s direction. Because these values are not standard, they are not supported in all browsers and therefore they should no longer be used in order to get the expected gradient in the latest browser versions that support CSS3.

This rule raises an issue when the first parameter of a linear-gradient is not a valid <side-or-corner> or angle`.

The W3C specifications define the valid at-rules. Only the official and browser-specific at-rules should be used to get the expected impact in the final rendering.

Leftover empty blocks are usually introduced by mistake. They are useless and prevent readability of the code. They should be removed or completed with real code.

Order of instructions in CSS is important: instructions with equal specificity that occur later in the file take the priority. But when a selector with a higher specificity (e.g. p a { color: green;}) comes before the selector it overrides (e.g.: a { color: green;}), the priority is given to the first one. Even if it works properly, this is harder to anticipate the behaviour of the stylesheet while reading as it goes against the principle that the last instruction takes the priority.

An invalid color definition will by default be interpreted as black, which is likely to have unintended impacts on the expected look and feel of the website.

This rule raises an issue when a color definition (color, background-color) is not valid. The color definition is considered valid when it is made of hexadecimal characters:

The W3C specifications define the valid pseudo-class selectors. Only the official and browser-specific pseudo-class selectors should be used to get the expected impact in the final rendering.

The W3C specifications say comments should be defined using /* … */. The use of // is not supported on all browsers and can lead to unexpected results.

In CSS, when selectors are duplicated, the browser applies them in cascade. This means that if two selectors are identical, the second one takes precedence. However, if the declarations within the selectors are not conflicting, they will be combined.

This behavior can lead to unexpected results and make debugging more difficult, especially in larger stylesheets. Therefore, it’s generally recommended to avoid duplicating selectors.

The rule detects the following kinds of duplications:

!important within keyframes declarations is completely ignored in some browsers and therefore it should not be used to be consistent among all browsers.

The font-family (and the shorthand font) CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

If none of the font names defined in a font or font-family declaration are available on the browser of the user, the browser will display the text using its default font. It’s recommended to always define a generic font family for each declaration of font or font-family to get a less degraded situation than relying on the default browser font. This lets the browser select an acceptable fallback font when necessary.

The list of generic font families is as follows:

Having the import of the same file twice, makes one of them useless. Leaving them in reduces the code’s readability, since their presence can be confusing.

Having duplicated font names doesn’t help to read the font declaration and may be an indicator the author of the line was not sure how to configure it. This rule raises an issue when font or font-family properties contain a duplicated font name. This rule ignores $sass, @less, and var(—custom-property) variable syntaxes.

CSS allows duplicate property names but only the last instance of a duplicated name determines the actual value that will be used for it. Therefore, changing values of other occurrences of a duplicated name will have no effect and may cause misunderstandings and bugs.

This rule ignores $sass, @less, and var(—custom-property) variable syntaxes.

The W3C specifications define the valid CSS properties. Only the official and browser-specific properties should be used to get the expected impact in the final rendering.

This rule ignores: