HTML Guide

The attribute font-weight can be used on SVG text elements like text but not on g container elements, and none is not a valid value.

The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

This attribute can be used with the SVG elements text, textPath, tref and tspan, but on on g elements.

Its allowed values are normal, bold, bolder, lighter, or a number. The value none is not valid for this attribute.

Here’s an example:

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-weight="normal">Normal text</text>
  <text x="100" y="20" font-weight="bold">Bold text</text>
</svg>

Alternatively, SVG text elements can also be stilyzed using CSS, like so:

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" style="font-weight:normal">Normal text</text>
  <text x="100" y="20" style="font-weight:bold">Bold text</text>
</svg>

The issue you’re encountering indicates that the CSS property align-items is being set to a value of auto, which is not a valid value for this property according to the CSS specification. The align-items property is used in flexbox and grid layouts to define how items are aligned along the cross axis.

Fixing the Issue:

• Understand Valid Values: The valid values for the align-items property include:

  /* Basic keywords */
  align-items: normal;
  align-items: stretch;
  
  /* Positional alignment */
  /* align-items does not take left and right values */
  align-items: center;
  align-items: start;
  align-items: end;
  align-items: flex-start;
  align-items: flex-end;
  align-items: self-start;
  align-items: self-end;
  align-items: anchor-center;
  
  /* Baseline alignment */
  align-items: baseline;
  align-items: first baseline;
  align-items: last baseline; /* Overflow alignment (for positional alignment only) */
  align-items: safe center;
  align-items: unsafe center;
  
  /* Global values */
  align-items: inherit;
  align-items: initial;
  align-items: revert;
  align-items: revert-layer;
  align-items: unset;
  

• Choose a Correct Value: Based on the desired alignment, choose one of the valid values. For instance:

  • Use flex-start to align items to the start of the container.
  • Use center to align items in the center.
  • Use stretch to stretch items to fill the container.

• Example Correction: If your original CSS was:

   .container {
     display: flex;
     align-items: auto; /* This is invalid */
   }

  You could change it to:

   .container {
     display: flex;
     align-items: center; /* This is valid */
   }

Conclusion:

Replace the invalid auto value with a valid option that suits the design you aim for, making sure to test the layout after applying changes to confirm that the items align as intended.

This error typically occurs when there is a syntax issue in the CSS code for the background-color property in your HTML or CSS file. The error message indicates that there is an unexpected semicolon (;) after the # symbol, which is commonly used to define hexadecimal color values.

Here is a step-by-step guide to fix this issue:

1. Locate the Error:

   • Look for the line and column in your code as specified by the validator. This is where the error is occurring.

2. Identify the Issue:

   • Check the background-color property at that location. It’s likely that you have a semicolon directly after the # or an invalid color value.

3. Correct the Syntax:

   • Ensure that the background-color property is followed by a valid hexadecimal color value, an RGB/RGBA value, an HSL/HSLA value, or a predefined color keyword.

Example of Error

Let’s say you have the following erroneous CSS code:

body {
    background-color: #; /* Incorrect */
}

The above code is incorrect because #; is not a valid color value.

Corrected Example

Here’s how to fix it by providing a valid hexadecimal color value:

body {
    background-color: #ffffff; /* Correct: Hexadecimal color for white */
}

Alternatively, you can also use other color formats or color keywords. Examples:

body {
    background-color: rgb(255, 255, 255); /* RGB color */
}

body {
    background-color: rgba(255, 255, 255, 1); /* RGBA color */
}

body {
    background-color: hsl(0, 0%, 100%); /* HSL color */
}

body {
    background-color: hsla(0, 0%, 100%, 1); /* HSLA color */
}

body {
    background-color: white; /* Predefined color keyword */
}

The error you encountered indicates that the value none is not a valid value for the border-radius CSS property. The border-radius property expects a length value (like px, em, etc.), or keywords that define its radius, such as 0 or inherit.

How to Fix It

• Use a Valid Value: If you want no border radius, use 0 instead of none.
• Specify a Length: If you want rounded borders, specify a valid length value (e.g., 5px, 1em).

Examples

Incorrect Usage

This is the incorrect way that leads to the validation error:

<style>
  .example {
    border-radius: none; /* Invalid value */
  }
</style>

Correct Usage

Here are correct alternatives:

Option 1: No Border Radius

<style>
  .example {
    border-radius: 0; /* Valid value for no rounded corners */
  }
</style>

Option 2: Specify a Border Radius

<style>
  .example {
    border-radius: 5px; /* Valid value for rounded corners */
  }
</style>

Conclusion

Replace border-radius: none; with either border-radius: 0; for no rounded corners or an appropriate pixel/em value for adding rounded corners. This will resolve the W3C Validator issue and ensure your CSS is compliant with the standards.

This W3C Validator issue indicates that the value assigned to the CSS border property is invalid. The border property in CSS is used to specify the width, style, and color of an element’s border, and these values must be appropriately defined.

To resolve this issue, make sure you define the border property using valid values for border width, border style, and border color. Below is the correct syntax for setting a border:

selector {
  border: 1px solid black; /* width, style, color */
}

If you inadvertently set the border property to an incorrect or undefined value, such as undefined, it will trigger this validation issue.

Incorrect Example:

<div style="border: undefined;"></div> <!-- This will cause a validation error -->

Correct Example:

To correct this, replace undefined with a valid CSS border definition. For example:

<div style="border: 1px solid black;"></div>

Breakdown:

• 1px is the border width.
• solid is the border style.
• black is the border color.

More Examples:

Here are a few more valid examples with different border styles:

• Dotted border:

  <div style="border: 2px dotted red;"></div>

• Dashed border:

  <div style="border: 3px dashed blue;"></div>

• Double border:

  <div style="border: 4px double green;"></div>

Additionally, you can define border properties separately:

selector {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Summary:

Ensure your border property has valid width, style, and color values. Avoid using placeholders like undefined in your CSS properties. This will resolve the W3C Validator issue and render your border as expected in your HTML document.

The CSS font-style property is used to set the style of the font, such as normal, italic, or oblique. The value bold is not a valid value for font-style. Instead, you should use the font-weight property to set the boldness of the font. The valid values for font-weight are normal, bold, bolder, and lighter.

Here’s an example of how to use the font-weight property to set the text to bold:

<p style="font-weight: bold;">This text is bold.</p>

Alternatively, you can use a CSS stylesheet to apply the font-weight property to multiple elements:

<style>
  p { font-weight: bold; }
  h1 { font-weight: bolder; }
</style>

<p>This text is bold.</p>
<h1>This heading is even bolder.</h1>

The specified CSS mask has incorrect or unrecognized values. Ensure that the mask property is used correctly according to the CSS specifications.

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

For example, the mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element, as in thie example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <style>
  .masked {
    width: 100px;
    height: 100px;
    background-color: #8cffb0;
    -webkit-mask-image: url(sun.svg);
    mask-image: url(sun.svg);
  }
  </style>
</head>
<body>
  <div class="masked"></div>
</body>
</html>

The CSS property padding-block does not accept auto as a value. The padding-block property is used to set the padding on the block-level start and end sides of an element, and it expects length values (like px, em, %, etc.) or global values like inherit, initial, revert, revert-layer, unset.

Here’s how you can fix this issue by providing valid values for the padding-block property.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Padding Block Example</title>
  <style>
    .example {
      /* Incorrect use of 'auto' */
      /* padding-block: auto; */

      /* Correct use of padding-block with length values: */
      padding-block: 20px 10px;

      /* You can also use single value for same padding on both sides: */
      /* padding-block: 15px; */

      /* Or use percentage values: */
      /* padding-block: 2% 1%; */
      /* Or inherit, initial, revert, unset */
      /* padding-block: inherit; */
    }
</style>
</head>
<body>
  <div class="example">
    This is an example demonstrating correct use of padding-block.
  </div>
</body>
</html>

Explanation:

1. Length values: You can specify the padding using absolute units like px, em, rem, etc. In the example above, padding-block: 20px 10px; applies 20px padding to the block-start and 10px to the block-end.

2. Single Length Value: Using padding-block: 15px; applies the same padding (15px) to both block-start and block-end.

3. Percentage values: padding-block: 2% 1%; will apply 2% of the containing block’s size to block-start and 1% to block-end.

4. Global values: You can also use inherit, initial, revert, revert-layer, or unset to control CSS inheritance and initial values.

The issue you’re encountering is due to incorrect use of the pointer-events CSS property value. The W3C Validator indicates that normal is not a valid value for pointer-events.

How to Fix

The pointer-events property accepts specific valid values, and while “normal” is not one of them, the correct relevant value you likely intended to use is auto.

Valid Values for pointer-events

Here are the most common valid values for pointer-events:

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

Example Fix

If your original CSS is like this:

<style>
  .my-element {
    pointer-events: normal; /* This is incorrect */
  }
</style>

You should change it to:

<style>
  .my-element {
    pointer-events: auto; /* This is correct */
  }
</style>

Summary

To resolve the W3C Validator issue, replace any occurrence of pointer-events: normal; with pointer-events: auto; or another appropriate value based on the desired behavior.

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.