HTML Guide

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.

The hexadecimal value for the color CSS property is not valid. It needs to have either 3 or 6 hexadecimal digits.

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.

This property accepts colors in different formats, one of them being hexadecimal values. For example a pure red color can be expressed either with 3 hexadecimal digits or 6 hexadecimal digits:

color: #F00;
color: #FF0000;

The W3C Validator error “CSS: “font-weight”: “X” is not a “font-weight” value” indicates that an incorrect value has been assigned to the font-weight CSS property. The font-weight property controls the boldness or weight of the font, but it only accepts specific values, not a measurement like pixels.

Accepted Values for font-weight:

1. Keywords: normal, bold, bolder, lighter.
2. Numeric Values: 100, 200, 300, 400 (equivalent to normal), 500, 600, 700 (equivalent to bold), 800, 900.

Fixing the Issue:

You need to replace the incorrect value with one of the accepted values for font-weight.

Incorrect CSS:

p {
    font-weight: 20px; /* Invalid value */
}

Corrected CSS:

If you want to use a lighter weight, you can choose one of the valid numeric values.

• For a thin font weight:

  p {
    font-weight: 100; /* Thin weight */
  }

• For normal (default) font weight:

  p {
    font-weight: 400; /* Normal weight */
  }

• For bold font weight:

  p {
    font-weight: bold; /* Bold keyword */
  }

Example in HTML:

Here’s how you might use the corrected font-weight property in a simple HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Corrected font-weight values */
        .thin {
            font-weight: 100;
        }
        .normal {
            font-weight: 400;
        }
        .bold {
            font-weight: bold;
        }
    </style>
    <title>Font Weight Example</title>
</head>
<body>
    <p class="thin">This is thin font weight.</p>
    <p class="normal">This is normal font weight.</p>
    <p class="bold">This is bold font weight.</p>
</body>
</html>

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.

<img> tags no longer accept a border attribute. This can be defined using CSS instead, for example:

<img src="..." alt="..." style="border:0;" />