HTML Guide for CSS
Invalid values have been used in the mask CSS property.
The mask property in CSS defines a graphical mask to display parts of an element, often using images, gradients, or SVG, and only accepts certain syntaxes and values. If the value provided is not supported or misspelled, validators and browsers will reject it. Valid values include none, a URL to an image resource, or supported mask functions like linear-gradient(), among others.
For example, the following usage is incorrect and will cause the validator error:
<div style="mask: star-shape;">
Masked Content
</div>Valid mask usages include:
<div style="mask: url(star.svg);">
Masked Content
</div>Or using none:
<div style="mask: none;">
No Mask Applied
</div>When using mask, ensure you provide a valid value per the CSS Masking standard, such as a URL to an SVG or image, or the keyword none. Avoid using arbitrary or unsupported keywords.
The CSS property padding-right is used to set the padding space on the right side of an element. According to the CSS specification, padding values must be non-negative, meaning that negative values are not allowed for any of the padding properties.
To resolve the issue, remove the negative value. If you are trying to adjust the layout or spacing, consider using other CSS properties that allow negative values, such as margin. Here’s how you can fix this:
Example Before Fix
.example {
padding-right: -9px; /* This is incorrect */
}Example After Fix
.example {
padding-right: 0; /* Set to zero or a positive value */
/* If adjustment is needed, consider using margin */
margin-right: -9px;
}Explanation:
- Padding: The padding-right property specifies the space between the content of the element and its border on the right side. This space cannot be negative.
- Margin: If you’re trying to create an overlapping effect or reduce space externally, using margin-right with a negative value is permissible.
Evaluate the layout requirements and adjust the values appropriately, ensuring you respect the non-negative rule of padding properties.
The text-align property in CSS only accepts specific keywords such as left, right, center, justify, start, or end.
W3C validation errors like this occur when an unsupported value is used for the text-align property. Valid values for text-align are standard keywords or certain global values. Custom or invalid values (like middle, or arbitrary text) are not permitted and will trigger validation errors.
Valid examples of text-align:
<p style="text-align: left;">This text is left-aligned.</p>
<p style="text-align: right;">This text is right-aligned.</p>
<p style="text-align: center;">This text is centered.</p>
<p style="text-align: justify;">This text is justified.</p>Invalid example:
<p style="text-align: middle;">This will fail validation.</p>To resolve the issue, always use a valid keyword for text-align.
Change the transition-delay value from 0 to 0s to specify a time unit.
CSS properties dealing with time, like transition-delay, require a time unit to be compliant with standards. The transition-delay property specifies when the transition effect will start after being triggered. Valid values for transition-delay include time values such as 100ms (milliseconds) or 0s (seconds). Specifying just 0 is not compliant because it lacks a time unit, which is why the validator flags this as an error.
Here is an example of how to correctly define transition-delay using proper time units in your CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Delay Example</title>
<style>
.example {
transition-delay: 0s; /* Correctly includes time unit */
transition-property: opacity;
transition-duration: 1s;
opacity: 0;
}
.example:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="example">Hover over me!</div>
</body>
</html>In this corrected example, the transition-delay is set to 0s, ensuring compliance with CSS standards by including the necessary time unit.
::hover is not a valid pseudo-element; :hover is the correct pseudo-class for styling elements on mouse hover.
CSS selectors use pseudo-classes and pseudo-elements with different syntax. The :hover pseudo-class selects elements when they are being hovered over by a mouse pointer, while pseudo-elements use double colons (e.g., ::before, ::after) for selecting parts of an element. Using ::hover will cause a validation error because there is no such pseudo-element in CSS.
Incorrect CSS example:
a::hover {
color: red;
}Correct CSS example:
a:hover {
color: red;
}Minimal valid HTML document using :hover:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover Example</title>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">Hover over this link</a>
</body>
</html>Use :hover instead of ::hover for correct, standards-compliant CSS.
@font-feature-values is a CSS at-rule that is not widely supported and may cause validation errors in W3C HTML or CSS validators.
Many CSS at-rules must be used carefully, as not all are recognized by validators or supported in all browsers. The @font-feature-values at-rule is intended for advanced font feature control in OpenType, but is not part of the CSS standards supported by most browsers, and thus triggers validator warnings or errors.
To fix the validation issue, remove or comment out any usage of @font-feature-values from your CSS. If you require specialized font features, consider using alternatives such as the font-variant or font-feature-settings CSS properties, which have broader support.
Example of problematic CSS causing validation error:
@font-feature-values MyFamily {
@swash {
fancy: 1;
}
}Recommended alternative using font-feature-settings:
p {
font-family: 'MyFamily', serif;
font-feature-settings: "swsh" 1; /* Enables swash glyphs if supported */
}Sample HTML usage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Feature Example</title>
<style>
p {
font-family: 'MyFamily', serif;
font-feature-settings: "swsh" 1;
}
</style>
</head>
<body>
<p>This is an example with OpenType features enabled.</p>
</body>
</html>For maximum compatibility, stick to widely supported CSS features and consult the MDN Web Docs for font-feature-settings.
The value none is not a valid value for the vertical-align CSS property.
The vertical-align property in CSS is used to specify the vertical alignment of an inline or table-cell element. This property affects the alignment of elements that are placed next to each other in a line. Valid values for vertical-align include keywords like baseline, sub, super, text-top, text-bottom, middle, top, bottom, as well as length values (such as px, em) and percentage values. The value none is not recognized as a valid option for vertical-align, which is why the validator reports an issue.
Below are examples using valid values for the vertical-align property:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Vertical Align</title>
<style>
.aligned-text {
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td style="vertical-align: top;">Top</td>
<td class="aligned-text">Middle</td>
<td style="vertical-align: bottom;">Bottom</td>
</tr>
</table>
</body>
</html>In the above example, each table cell is using a valid vertical-align value (top, middle, and bottom) to control vertical alignment. If you replace vertical-align: none; with one of these values according to your design requirements, your code will validate correctly.
Invalid values have been assigned to the white-space CSS property.
The white-space property in CSS controls how whitespace and line breaks inside an element are handled. Only specific values are valid for this property. According to the CSS specification, valid values for white-space include:
/* Single keyword values */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
/* white-space-collapse and text-wrap-mode shorthand values */
white-space: wrap;
white-space: collapse;
white-space: preserve nowrap;
/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;Using the width attribute with an invalid value or on an element where it’s not allowed causes a “types are incompatible” error.
The width attribute must only be used on certain elements, like img, canvas, input (of type image), or video. Its value should be a valid integer, representing the number of CSS pixels, without units. Using CSS units like px or % directly in the attribute, or placing the attribute on unsupported elements, will trigger this validation message.
Correct usage:
<img src="photo.jpg" width="400" alt="Sample photo">Incorrect usage (with units):
<img src="photo.jpg" width="400px" alt="Sample photo">Incorrect usage (on unsupported element):
<div width="400">Content</div>To set width via CSS instead, use the style attribute or an external stylesheet:
<div style="width: 400px;">Content</div>For styling, always use CSS when possible; reserve the width attribute for the few HTML elements that specifically support it, and ensure the value is a simple number without units.