Differences between preloading stylesheets and W3C validation explained

I am faced with the challenge of satisfying two different checkers: W3C validator and Google Page Insights

Google Page Insight advised me to asynchronously load all blocking CSS files. Therefore, I have modified the stylesheet inclusion by preloading it in the following way and deferring it from the head to the end of the body:

 ...
    <link rel="preload" href="mystyles.css" media="all" as="style" 
                     onload="this.rel='stylesheet'"/>
</body>

Google Page Insight required me to move it from the head to the end of the body.

Even though Google Page Insight is now satisfied, W3C Validator presented me with a new issue:

Error: A link element must not appear as a descendant of a body element unless the link element has an itemprop attribute or has a rel attribute whose value contains dns-prefetch, pingback, preconnect, prefetch, prerender, or stylesheet

Why can't "preload" be used in the rel attribute outside of the head? I attempted to assign an itemprop, but having both an itemprop and a rel in the same link is not allowed.

cssw3c-validationpreloadgoogle-pagespeed

Answer №1

I am the developer responsible for maintaining the W3C HTML checker (validator). There was a bug in the checker that caused this issue. When I introduced support for rel=preload, I unintentionally omitted it from the list of valid rel values that the checker references to determine if a specific link element is permissible within the document body.

I have rectified this issue in the source code of the checker and have deployed the fix to https://validator.w3.org/nu/.

As a result, the checker will no longer flag an error for the mentioned code snippet. Thank you for bringing this to my attention.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting CSS issues in a Docker container running a VueJs project

I have successfully set up a VueJs project on AWS using Docker. Following the guidelines in the Real-World Example section of the documentation, I created a Dockerfile with instructions to copy my nginx conf file: # build stage FROM node:lts-alpine as buil ...

cssvue.jsnginx

Skewed top-left border surrounds the element with a dashed design

I'm looking to achieve a border effect similar to the one shown in the image linked below: https://i.sstatic.net/a4hCQ.jpg Here is the code I have tried so far: <p>Some Text</p> p{ -webkit-transform: perspective(158px) rotateX(338deg ...

htmlcssbordercss-shapes

Is there a way to enlarge the gomap popup window size?

Is there a way to make my goMap-driven popup windows larger so that they do not require scroll bars? How can I adjust the height and width of the popup window? This is the jQuery and HTML code I am currently using: $("#map").goMap({ address: ' ...

jqueryhtmlcssjquery-ui

Adjust the size of the image to perfectly fit within the div without enlarging it

I have a variety of images with different dimensions, ranging from 50x100 to 4000x4000 pixels. My objective is to display these images in their original size or scale them down to fit within the browser window. However, I have encountered an issue where t ...

javascriptjqueryhtmlcss

Customizing screen dimensions for a single page using jQuery mobile

I am currently facing an issue with adjusting the size of a specific page within my application. Even though I am using <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-den ...

jqueryhtmlcsscordovajquery-mobile

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...

htmlcsstemplatesdrop-down-menusubmenu

Django is indicating that the path is not reachable

I've been struggling with a seemingly silly issue in my code. I can't figure out why it's not working properly. Here is the directory structure of my Django Project: https://i.sstatic.net/0tVo4.png The HTML file I'm targeting (index.h ...

htmlcssdjango

Move the grid items to their new positions with animation

I have a group of floating elements, all the same size and arranged within a grid layout. I am now adding a new element using jQuery's .after() method, which is larger in size and spans the entire width of the container, necessitating its own row. T ...

jquerycssinsertgrid-layout

Steps for compiling Sass to CSS without encountering any npm errors:

Every time I try to compile SASS into CSS, I encounter the same error message: I keep getting an error that says I need to specify an output directory when compiling a directory. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! <a href="/cdn-cgi/l/e ...

cssnode.jsnpmsass

Is there a way to embed a span within a word without causing it to break during wrapping?

As I create a lyrics sheet with chords, I'm facing an issue. Placing the chord (as a span) inside a word for precise positioning causes the word to split in half when the line wraps. How can I prevent this from happening? https://i.sstatic.net/GlNYb. ...

htmlcssword-wrap

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Whenever I expand a bootstrap collapse that contains a carousel, only one carousel item appears instead of all. Is this a bug in Bootstrap or Slick Slider? https://i.sstatic.net/T7Orm.jpg Slider $('.remember__carousel').slick({ slidesToShow: ...

csstwitter-bootstrapslick.js

Exploring etoro data through python web scraping

Attempting to automate the process of logging into my etoro account and extracting data from my portfolio using Selenium. Currently working on Google Colab, here is what I have so far: from selenium import webdriver options = webdriver.ChromeOptions() opt ...

pythoncssseleniumweb-scrapingfinance

Using auto margins does not properly align the image in the center of the page

I noticed that in this specific example, the image is not centered properly. Can someone explain why this might be happening? For context, I am using Google Chrome v10 on a Windows 7 machine, not Internet Explorer. <img src="/img/logo.png" style="mar ...

cssgoogle-chromemargincentering

The text loader feature in THREE.js is failing to load

My first attempt at coding THREE.js resulted in a black screen when I tried to load the Text loader. Can someone help me resolve this issue? I kept getting the following error even after multiple attempts: three.module.js:38595 GET 404 (Not Found) ...

javascripthtmlcsstextthree.js

What could be causing the CSS height percentage to malfunction?

I'm having trouble with some basic CSS that uses percentages. I've labeled everything and checked my code, but it still isn't working properly. Here's the CSS code snippet: .BoxHeight { height: 100%; } #Box { margin-top: 0%; mar ...

htmlcss

The bootstrap navigation bar appears in a vertical orientation rather than the expected horizontal

My page is displaying the navbar vertically instead of horizontally. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to ...

htmlcssbootstrap-4twitter-bootstrap-4

The functionality of Google Maps code is limited on Android devices because the map feature is not available

After updating the Google Maps embed code to be responsive for mobile devices, I discovered that the map still won't display on Android or iPhone. The following is the modified code. Can anyone assist me in resolving this issue so that the map can sho ...

androidhtmlcssgoogle-mapsiframe

What is the solution to adding values from a counter?

I am trying to create a JavaScript counter: function animateSun() { var $elie = $("#sun"); $({ degree: 0 }).animate({ degree: 360 }, { duration: 190999, easing: 'linear', step: function(val) { now = Math.round ...

javascriptjqueryhtmlcsscounter

What is the best way to vertically align a container beneath a navbar without triggering the appearance of a scrollbar?

I'm in the process of developing an application using Bootstrap 4. The app features a navigation bar and a container located beneath it. Below you'll find the structure of the application: <body> <div id="root"> ...

htmlcssbootstrap-4

The straightforward onclick action only functioned once

Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...

javascripthtmlcssdom