HTML Guide

The padding-left property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-left: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-left: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-left: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-left: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-left: 10px;
}

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

To specify no padding, use padding: 0 instead of padding: none.

The padding property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding: 10px;
}

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 padding-right property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-right: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-right: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-right: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-right: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-right: 10px;
}

The padding-top property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-top: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-top: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-top: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-top: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-top: 10px;
}

Padding properties, unline margin properties, don’t accept negative values.

CSS styles could not be parsed, check the indicated line to find what caused the parser to fail. Common causes are unclosed curly brackets or comments, missing semicolons or unexpected or empty properties.

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 value px for a width property is incorrect, it should include both the value and the units, like 10px, or just 0 if it’s zero width. Using only the units without the value is incorrect.

Example of Incorrect CSS

<style>
  .example {
    width: 300; /* This is missing the unit */
  }
  .example2 {
    width: px; /* This is missing the value */
  }
</style>

Corrected Example of CSS

Make sure to include the unit (like px, em, %, etc.) when specifying the width:

<style>
  .example {
    width: 300px; /* Correctly includes 'px' unit */
  }
</style>

Conclusion

Always ensure to provide proper units when specifying dimensions in CSS. Common units are:

• px (pixels)
• em (relative to the font size of the element)
• % (percentage of the parent element’s width)

Use a non-negative value for the CSS property stroke-width; negative lengths are invalid.

In SVG and CSS, the stroke-width property controls the thickness of the outline of shapes and text. It accepts non-negative numbers with optional units. A value of 0 is allowed (renders no visible stroke), but any negative value is invalid per the SVG and CSS specifications and will trigger validator errors.

You can specify stroke-width in user units (unitless, in the current SVG coordinate system) or with CSS length units like px. Common valid values: 0, 1, 2, 0.5, 3px. Avoid negative values and avoid quotes if you’re writing CSS; quotes are only appropriate inside HTML attributes when setting a style string.

If you were using a variable or calculation that could produce a negative number, clamp it to 0 or a minimum positive value.

HTML Examples

Example that reproduces the validator error

<p style="stroke-width: -1">some content</p>

Corrected example with a valid non-negative stroke width

<p style="stroke-width: 0">some content</p>

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.

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis, or display a custom string.

This property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.

Here are some examples:

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

Examples of valid values for this property are:

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

The value break-word for the property word-break is deprecated, you should replace it with a valid value.

According to the CSS Text Module Level 3 spec:

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

The value specified for the transform CSS attribute is not valid.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

To fix this issue, check the syntax for the transform that you want to apply.

Here are some examples of valid values for this property:

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

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.

The ::file-selector-button has not been recognized by the W3C Validator. This seems to be a bug in the W3C Validator, which has already been reported.

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

The ::ng-deep CSS selector is often used in an Angular Component’s CSS to override the styles of a third-party component or a child component’s styles.

This CSS selector is now deprecated.

An unknown CSS pseudo-class or pseudo-element selector is being used.

Validators report this when a selector uses a pseudo-class or pseudo-element not recognized by the chosen CSS profile (e.g., CSS Level 2.1), is misspelled, uses the wrong syntax (single vs double colon), or is behind a vendor prefix or future spec.

Use supported selectors, correct typos, use double colon for pseudo-elements like ::before and ::after, and ensure the validator profile supports modern CSS.

For experimental or vendor-prefixed selectors, consider removing them for validation, adding fallbacks, or switching the validator’s profile to a newer level.

Examples of valid pseudo-classes: :hover, :focus, :active, :focus-visible, :has() (modern). Pseudo-elements should use double colons: ::before, ::after, ::marker, ::placeholder. Vendor-prefixed selectors (e.g., ::-webkit-input-placeholder) may be flagged; provide a standards-based ::placeholder alongside them.

HTML Examples

Example showing the issue

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invalid CSS Example</title>
  <style>
    /* Typo and wrong colon usage */
    a:hovr { color: red; }
    p:before { content: "Hi "; }

    /* Vendor-specific pseudo-element without standard fallback */
    input::-webkit-input-placeholder { color: gray; }

    /* Newer selector not supported by older profiles */
    .card:has(img) { border: 1px solid #ccc; }
  </style>
</head>
<body>
  <a href="#">Link</a>
  <p>Text</p>
  <input placeholder="Your name">
</body>
</html>

Fixed, validator-friendly CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fixed CSS Example</title>
  <style>
    /* Correct pseudo-class */
    a:hover { color: red; }

    /* Use double colon for pseudo-elements */
    p::before { content: "Hi "; }

    /* Standards-based pseudo-element with optional vendor prefix */
    input::placeholder { color: gray; }
    /* Optional: keep vendor prefix for browser support, may still warn */
    /* input::-webkit-input-placeholder { color: gray; } */

    /* If :has() causes warnings, consider a fallback or remove for validation */
    /* .card:has(img) { border: 1px solid #ccc; } */
  </style>
</head>
<body>
  <a href="#">Link</a>
  <p>Text</p>
  <input placeholder="Your name">
</body>
</html>

The @container CSS at-rule is a conditional group rule that applies styles to a containment context. The @container at-rule is a recent addition to CSS which isn’t officially a standard rule instead, although widely supported by major browsers.

Check the linked guides to learn more about browser compatibility for this 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.