Code Inspections in CSS

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:
input/* comma has probably been forgotten */ .button { margin: 1px; }

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.

Reports a non-integer length in pixels.


Example: width: 3.14px

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.

Reports a discrepancy detected by the W3C CSS Validator.

Reports a missing semicolon at the end of a declaration.

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


Example:

Reports an unknown CSS function or an incorrect function parameter.

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

Reports an incorrect CSS property value.

Reports an incorrect CSS pseudo-class pseudo-element.

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

Reports a misplaced @import statement.

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

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

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

Reports an unknown CSS at-rule.

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.

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

Example:

.className {/* ... */} .otherClassName { composes: className; }

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

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

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

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

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).

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

Example: .foo { margin-bottom: 1px; margin-bottom: 1px; /* duplicates margin-bottom */ margin: 0; /* overrides margin-bottom */ }

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.

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.

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

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.