HTML Guide

A CSS definition for background-image could not be understood by the parser. Check its definition to ensure that it’s well formed and that it contains an appropriate value.

A CSS definition for an X property could not be understood by the parser. Check it to ensure that it’s well formed and that it contains an appropriate value.

The <table> element does not accept a height attribute. Use CSS instead.

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:

<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">

The media attribute on a <link> element specifies the media for which the linked resource is intended, using a valid media query. The value indicated is not a valid media query, which leads to a parse error.

Explanation

The media attribute is used to define what type of device the linked stylesheet should be applied to. Examples include common media types like screen, print, or all, as well as more complex media queries, such as (max-width: 600px) for responsive designs.

Correct Usage

1. Media Type Only:

   You can specify general media types such as screen, print, or all.

   <link rel="stylesheet" href="styles.css" media="screen">

2. Media Query:

   For more precise control, use a media query to target specific conditions.

   <link rel="stylesheet" href="styles.css" media="(max-width: 600px)">

The sizes attribute for an img element requires valid CSS syntax, and auto is not an acceptable value within that attribute.

The sizes attribute allows you to specify a list of media conditions and corresponding sizes for the images. Each condition determines which size of the image should be displayed at different viewport widths, ensuring responsive image delivery. The syntax for sizes should be a comma-separated list of media queries followed by a value denoting the corresponding width of the image. This width value may be in pixels (px) or as a percentage (vw, vh), but auto is not valid in this context.

Here is a breakdown of a correct sizes attribute usage:

• 50vw: This denotes that the image should take up 50% of the viewport’s width.
• (max-width: 600px) 100vw, 50vw: When the viewport is at most 600 pixels wide, the image should occupy the full width (100vw). Otherwise, it should take 50 percent of the viewport width.

Remove “auto” from your sizes value and provide a valid, contextually correct CSS value.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Responsive Images Example</title>
</head>
<body>
  <img
    src="image.jpg"
    sizes="(max-width: 472px) 100vw, 472px"
    srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
    alt="A description of the image"
  >
</body>
</html>

In this example, if the viewport width is less than or equal to 472 pixels, the image will take up the entire width (100vw). For larger widths, the srcset specifies different image files for varying resolutions.

sizes contains an invalid media condition; the value must be a comma-separated list of media conditions with corresponding slot sizes, ending with an optional fallback length.

Detailed explanation:

• The sizes attribute on img pairs a media condition with a slot size that represents the layout width of the image for that condition. Syntax: (<media-condition>) <length>[, ...], <length> where the last item can be a bare length fallback.
• A media condition uses the same grammar as CSS media queries. It must be valid CSS, e.g., (min-width: 600px) or (width <= 50rem) and (orientation: landscape). Each condition must be enclosed in parentheses unless using logical operators combining proper conditions.

Common parse errors:

• Missing parentheses: use (min-width: 600px), not min-width: 600px.
• Invalid units or tokens: use px, em, rem, vw, etc.; avoid % in media conditions.
• Missing slot size after a condition: (min-width: 600px) must be followed by a length like 600px.
• Using px only for slot size without units or using percentages: slot size must be a length like 300px, 50vw, not 300.
• Trailing comma or extra commas.
• Misusing comparison syntax: use modern range syntax like (600px <= width <= 1000px) or the traditional form (min-width: 600px) and (max-width: 1000px). Do not write (min-width <= 600px).
• Slot sizes must be lengths: px, em, rem, vw, vh, vmin, vmax, ch. Percentages are not allowed in sizes slot sizes.
• The srcset widths (w descriptors) must correspond to the intrinsic widths of the image candidates, e.g., 400w, 800w. The browser picks one based on sizes.

HTML examples:

• Correct usage with media conditions and fallback:

  <img
    src="image-800.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(min-width: 900px) 50vw, (min-width: 600px) 66vw, 100vw"
    alt="Decorative pattern">

• Using range syntax and avoiding common mistakes:

  <img
    src="hero-1600.jpg"
    srcset="hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
    sizes="(800px <= width < 1200px) 80vw, (width >= 1200px) 50vw, 100vw"
    alt="Hero banner">

• Minimal fixed example for a typical error (missing parentheses and slot size): Incorrect:

  <img src="pic-800.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="min-width: 600px, 100vw" alt="Sample">

  Correct:

  <img src="pic-800.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="(min-width: 600px) 50vw, 100vw" alt="Sample">

• Example avoiding invalid tokens and commas:

  <img
    src="avatar-256.png"
    srcset="avatar-128.png 128w, avatar-256.png 256w"
    sizes="(orientation: landscape) 30vw, 50vw"
    alt="User avatar">

sizes only accepts a valid media condition list (e.g., (min-width: 600px) 50vw, 100vw); malformed media conditions or missing length values trigger this parse error.

Detailed explanation

• Element: source in a picture or audio/video context. For responsive images, use attributes srcset, optional media, and optional sizes.
• Attribute: sizes applies only when srcset contains width descriptors (e.g., 320w, 640w). It is a comma-separated list of:
  • One or more media conditions followed by a length (e.g., (min-width: 800px) 50vw)
  • A final fallback length with no media condition (e.g., 100vw)

Common parse errors:

• Missing parentheses around conditions: min-width: 600px → (min-width: 600px)
• Using invalid units or tokens: 50 (needs a length like 50vw or 50rem)
• Missing length after a condition: (min-width: 800px)
• Trailing commas or malformed separators
• Using sizes while srcset uses pixel density descriptors (1x, 2x); sizes is ignored for x-descriptors and may confuse validators
• Valid media condition syntax mirrors CSS media queries without the @media keyword. Use logical operators and, or, not per CSS Media Queries spec, and ensure spaces and colons are correct.

HTML examples

• Correct responsive image with width descriptors and sizes

  <picture>
  <source
    type="image/webp"
    srcset="hero-480.webp 480w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 100vw">
  <img
    src="hero-800.jpg"
    srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
    sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 100vw"
    alt="Hero image">
  </picture>

• Using viewport width units for simpler sizing

  <img
  src="photo-640.jpg"
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1024.jpg 1024w"
  sizes="(min-width: 900px) 50vw, 100vw"
  alt="Sample photo">

• Correct when using pixel density descriptors (omit sizes)

  <img
  src="avatar@1x.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  alt="User avatar">

Fixing common mistakes

• Add parentheses and a length:

  <img
  src="img-800.jpg"
  srcset="img-480.jpg 480w, img-800.jpg 800w"
  sizes="(min-width: 600px) 50vw, 100vw"
  alt="Example">

• Remove stray comma and ensure final fallback:

  <img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px) 60vw, 100vw"
  alt="Banner">

• Minimal valid document example

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Valid sizes Attribute</title>
  </head>
  <body>
    <img
      src="pic-800.jpg"
      srcset="pic-400.jpg 400w, pic-800.jpg 800w"
      sizes="(min-width: 600px) 50vw, 100vw"
      alt="Picture">
  </body>
  </html>

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.