Element is obsolete use css instead

Bad value X for attribute “media” on element “link”: Deprecated media feature “max-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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">

Still checking your large sites one page at a time?

Save time using our automated web checker. Let our crawler check your web pages on the W3C Validator.

Bad value X for attribute “media” on element “link”: Deprecated media feature “min-device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

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">

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.

50,000 Accessibility and HTML checks per month. Fully automated.

Let our automated scanner check your large sites using Axe Core and W3C Validator.

The value on the display property is not valid.

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.

The specified CSS filter is not a standard one, and may only work in some browsers.

font-display isn’t a CSS property, it’s a descriptor for use with the @font-face at-rule.

The value passed to the font-size property is invalid, probably missing the amount of px.

The font-size CSS property sets the size of the font, and this size can be expressed in different units, like em, % or px.

 html> head> title>Font-size Exampletitle> style> p style> head> body> p>This is an example of a paragraph with a font-size of 16px.p> body> html>

When was the last time you validated your whole site?

Keep your sites healthy checking for A11Y/HTML issues on an automated schedule.

The fastest digital accessibility scanner for large sites.

Our Web Accessibility Testing Platform tests and monitors your websites
for HTML and A11Y compliance using the W3C Validator and Axe Core.

Источник

‘»The frameborder attribute on the iframe element is obsolete. Use CSS instead.»

I’m trying to validate my website with the W3C validator but it doesn’t work. I have a YouTube iframe and this is the error:

The frameborder attribute on the iframe element is obsolete. Use CSS instead.

And this is my index.html (cropped):

Solution 1: [1]

As they state themselves «The frameborder attribute is not supported in HTML5. Use CSS instead.»

The equivalent of frameborder in css is border: 0px; . Add it to your iframe in css.

Solution 2: [2]

Your HTML5 markup contains an element with a frameborder attribute in the form:

This attribute is no longer present in HTML5. Use CSS instead:

Solution 3: [3]

Solution 4: [4]

You can use hidden as border-style or none :

I made this to show the difference.

const button = document.getElementById("submit"); const hidden = document.getElementById("hidden"); const none = document.getElementById("none"); const solid = document.getElementById("solid"); const iframe = document.getElementById("iframe"); const error = document.getElementById("error") button.addEventListener("click", function() < if (hidden.checked) < iframe.style.borderStyle = "hidden"; >else if (none.checked) < iframe.style.borderStyle = "none"; >else if (solid.checked) < iframe.style.borderStyle = "solid"; >else < error.textContent = "Choose the border then click Apply"; setTimeout(function()< error.textContent = "" >,1000); > >);

 
 
Hidden border No border Solid border 
Apply 

Solution 5: [5]

I have a manual workaround which is to remove the frameborder=»0″ attribute by adding the code in the post admin.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Источник