Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Misleading validator error when stylesheet isn't in head #9737

Closed
ghost opened this issue Jun 6, 2017 · 2 comments
Closed

Misleading validator error when stylesheet isn't in head #9737

ghost opened this issue Jun 6, 2017 · 2 comments
Assignees
@Gregable
Labels
P3: When Possible WG: caching

Comments

@ghost
Copy link

ghost commented Jun 6, 2017

Receive the error:

The attribute 'rel' in tag 'link rel=' is set to the invalid value 'stylesheet'.

When <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> is not in the <head>, for example, if in the <body>.

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
  
<body>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  Hello, AMP world.</body>
</html>

Expected: The error to state that <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> must be in <head>.

Reference: ampproject/amp.dev#542 - User didn't know that the tag was in the wrong place, and error mislead them into thinking that the actual stylesheet wasn't allowed.
@Gregable
Copy link
Member

Gregable commented Jun 6, 2017 •
edited by jridgewell

The validator is confused, since we do allow <link> tags in the <body>, but they must have a different rel value. For example <link rel=foo href="https://fonts.googleapis.com/css?family=Lato"> is perfectly valid in the body, which is what the error is trying to tell you.

This is something we'd like to eventually improve however.

This was referenced Jun 20, 2017
Merged
Merged
@Gregable
Copy link
Member

These validator changes should be live everywhere within an hour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Gregable Gregable

Labels
P3: When Possible WG: caching
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Gregable @jridgewell @honeybadgerdontcare