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

Resolving W3C Validation errors caused by markup generated by appleStartup true #289

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Resolving W3C Validation errors caused by markup generated by appleStartup true #289

wants to merge 1 commit into from

Conversation

joepagan
Copy link

@joepagan joepagan commented Oct 16, 2019 •
edited

Changes

  • Removing deprecated device- prefix for media attribute features

Why

W3C Markup Validation throws errors on the application markup generated by this where appleStartup is true:

Error: Bad value (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1) for attribute media on element link: Deprecated media feature device-width. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

From line 2, column 19378; to line 2, column 19573

="Name"><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/resources/favicons/apple-touch-startup-image-320x460.png"><link

Markup with W3C's HTML Validator can be tested here:
https://validator.w3.org/nu/#textarea

The markup which is currently output:

<!doctype html>
<head>
<title>hi</title>
<link rel="apple-touch-icon" sizes="57x57" href="/resources/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/resources/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/resources/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/resources/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/resources/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/resources/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/resources/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/resources/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Spring">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="transparent">
<meta name="application-name" content="Spring">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
<link rel="shortcut icon" href="/resources/favicons/favicon.ico">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/resources/favicons/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/resources/favicons/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/resources/favicons/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/resources/favicons/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/resources/favicons/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-1536x2008.png">
</head>
<body></body>
</html>

The markup we want to output:

<!doctype html>
<head>
<title>hi</title>
<link rel="apple-touch-icon" sizes="57x57" href="/resources/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/resources/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/resources/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/resources/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/resources/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/resources/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/resources/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/resources/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Spring">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="transparent">
<meta name="application-name" content="Spring">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
<link rel="shortcut icon" href="/resources/favicons/favicon.ico">
<link rel="apple-touch-startup-image" media="(width: 320px) and (height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/resources/favicons/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(width: 320px) and (height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(width: 320px) and (height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(width: 375px) and (height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(width: 414px) and (height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/resources/favicons/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(width: 414px) and (height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/resources/favicons/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(width: 768px) and (height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/resources/favicons/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(width: 768px) and (height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/resources/favicons/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(width: 768px) and (height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(width: 768px) and (height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/resources/favicons/apple-touch-startup-image-1536x2008.png">
</head>
<body></body>
</html>

Fixes #273
Also fixes jantimon/favicons-webpack-plugin#98 further down the chain for the webpack plugin

Removing device- prefix as suggested here:
https://drafts.csswg.org/mediaqueries/#mf-deprecated

How

Done a find and replace in files to replace:
device-width with width
device-height with height

Feedback

This is also replacing a bunch of references in markdown files, which appears to be used for testing purposes.
I am not too familiar with testing like that, but, running npm run test does fail because the tests do not match the snapshots, please advise on how I can deal with that.

@joepagan joepagan marked this pull request as ready for review October 17, 2019 07:57
@Voltra Voltra mentioned this pull request Jul 27, 2020
Merged
scheibo added a commit to pkmn/PocketMon that referenced this pull request Nov 27, 2022
@scheibo
remove device- prefix from width/height (itgalaxy/favicons#289)
e9d2e29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Deprecated media attribute HTML5 validation (Expected a CSS media feature but saw device-width instead)
1 participant
@joepagan