HTML Guide for unrecognized at-rule
@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 @tailwind at-rule defined by the Tailwind CSS framework isn’t officialy supported by the W3C Validator.
Tailwind directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.
Although they’re valid directives for Tailwind, they’re not valid from the W3C Validator perspective. You can consider muting this issue in your Rocket Validator Pro reports.