Code Inspections in CSS

Missing comma in selector list

Reports a multi-line selector. Most likely this means that several single-line selectors are actually intended but a comma is missing at the end of one or several lines.

Example:

Warning

Missing generic font family name

Verifies that the font-family property contains a generic font family name as a fallback alternative. Generic font family names are: serif, sans-serif, cursive, fantasy, and monospace.

Warning

Non-integer length in pixels

Reports a non-integer length in pixels.


Example: width: 3.14px

Weak warning

Stylelint

Reports a discrepancy detected by the Stylelint linter.

The highlighting is based on the rule severity specified in the Stylelint configuration file for each individual rule.

Disabled

W3C CSS validator

Reports a discrepancy detected by the W3C CSS Validator.

Disabled

Missing semicolon

Reports a missing semicolon at the end of a declaration.

Disabled

Redundant measure unit

Reports a measure unit of a zero value where units are not required by the specification.


Example:

Warning

Invalid function

Reports an unknown CSS function or an incorrect function parameter.

Error

Invalid media feature

Reports an unknown CSS media feature or an incorrect media feature value.

Error

Invalid property value

Reports an incorrect CSS property value.

Error

Invalid pseudo-selector

Reports an incorrect CSS pseudo-class pseudo-element.

Error

Invalid type selector

Reports a CSS type selector that matches an unknown HTML element.

Warning

Misplaced @import

Reports a misplaced @import statement.

According to the specification, @import rules must precede all other types of rules, except @charset rules.

Warning

Misplaced or incorrect @charset

Reports a misplaced @charset at-rule or an incorrect charset value.

Warning

Negative property value

Reports a negative value of a CSS property that is not expected to be less than zero, for example, object width or height.

Error

Unknown at-rule

Reports an unknown CSS at-rule.

Error

Unknown property

Reports an unknown CSS property or a property used in a wrong context.

Add the unknown property to the 'Custom CSS properties' list to skip validation.

Warning

Unresolved class in 'composes' rule

Reports a CSS class reference in the 'composes' rule that cannot be resolved to any valid target.

Example:

Error

Unresolved custom property

Reports an unresolved reference to a custom property among the arguments of the var() function.

Error

Unresolved file reference

Reports an unresolved file reference, for example, an incorrect path in an @import statement.

Error

Color could be replaced with #-hex

Reports an rgb(), hsl(), or other color function. Suggests replacing a color function with an equivalent hexadecimal notation.

Example:
rgb(12, 15, 255) → #0c0fff.

Disabled

Color could be replaced with rgb()

Reports an hsl() or hwb() color function or a hexadecimal color notation. Suggests replacing such color value with an equivalent rgb() or rgba() color function.

Example:
#0c0fff → rgb(12, 15, 255).

Disabled

Overwritten property

Reports a duplicated CSS property within a ruleset. Respects shorthand properties.

Example:

Warning

Properties may be safely replaced with a shorthand

Reports a set of longhand properties. Suggests replacing a complete set of longhand CSS properties with an equivalent shorthand form.

For example, 4 properties: padding-top, padding-right, padding-bottom, and padding-left may be safely replaced with a single padding property.

Note that this inspection doesn't show up if the set of longhand properties is incomplete (e.g. only 3 padding-xxx properties in a ruleset) because switching to a shorthand may change the result. For such cases consider the 'Properties may probably be replaced with a shorthand' inspection.

Weak warning

Properties may probably be replaced with a shorthand

Reports a set of longhand CSS properties. Suggests replacing an incomplete set of longhand CSS properties with a shorthand form, which is however not 100% equivalent in this case.

For example, 2 properties: outline-color and outline-style may be replaced with a single outline one. Such replacement is not 100% equivalent because shorthands reset all omitted sub-values to their initial states. In this example, switching to the outline shorthand means that outline-width is also set to its initial value, which is medium.

This inspection doesn't handle full sets of longhand properties (when switching to shorthand is 100% safe). For such cases see the 'Properties may be safely replaced with a shorthand' inspection instead.

No highlighting, only fix

Property is incompatible with selected browsers

Reports a CSS property that is not supported by the specified browsers. Based on the MDN Compatibility Data.

Disabled

Unused selector

Reports a CSS class or an element IDs that appears in selectors but is not used in HTML.

Note that complete inspection results are available only when running it via 'Analyze | Inspect Code...' or 'Analyze | Run Inspection by Name...'. Due to performance reasons, style sheet files are not inspected on the fly.

Warning