W3C CSS Validation Parse Error on Variables

W3C CSS Validation parse error on variables

As stated, this is a non-issue. CSS is moving and changing too fast for the Jigsaw W3C CSS validator to keep up, and it can no longer be relied on for checking anything other than the most mature feature sets such as those of CSS2, and of the earliest CSS3 specs.

It's a shame that it can't even be used reliably to check for careless errors now (which is what it's always been intended for) because the real errors are constantly getting occluded by so many of these fake ones. For example, it may not spot a real typo because it was thrown off a few lines up by one of these features it doesn't support.

The most reliable validator these days is to test in browsers and assume that if it works consistently across the board, then it's valid. Or, when in doubt, ask a question here and hope someone familiar with the specs will answer. If anyone asks you if you've tried validating your CSS, point them to me.

W3 CSS Validation error Parse error

The problem is that there is a bug in the CSS3 validation service provided by W3C. See https://www.w3.org/Bugs/Public/show_bug.cgi?id=18913 for more information.

As far as I can tell, there is nothing wrong with your CSS calc value and the second error is likely a result of the false-negative response from that service.

W3C CSS validator: Parse Error }

You are using a non-standard property value for filter

progid:DXImageTransform.Microsoft is obviously a Microsoft only property. Since it doesn't meet any standards value, it gets flagged.

The other values are properly vendor prefixed but they may be included in this because you shouldn't be using vendor prefixed CSS anymore.

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

what is a parse error and how do I fix it

You have some sort of invisible character that the validator is choking on somewhere (ie. it looks and acts like a space, but it isn't the space). If I view your CSS file directly and copy/paste the contents into the CSS validator's direct input validation, it validates.

Post CSS parse error on calc() of CSS variables with several default values

found an answer: it seems to be a bug: https://github.com/postcss/postcss-calc/issues/104 somone also posted a workaround: temporarily save a chunk of variables into another one to use it as an intermediary.

W3C CSS validation error using calc() and vendor extensions

Don't worry about the vendor extensions. I don't recall why they are flagged that way but they are not errors on your part. I don't recall the reasoning for it. iirc, there is a checkbox to ignore these warnings.

The explanation may lie in this article where it states:

Vendor-specific extensions (mostly) do adhere to the CSS 2.1 grammar,
but since they are not defined in the CSS 2.1 specification, they are
invalid. Hence the CSS validator is correct in reporting them as
validation errors.

Error: CSS: text parse Error

It's type="text/css" not style="text/css". Also there was a " in type="text/css missing and a closing </div> at the end.

Cleaned up

<!DOCTYPE html>
<html lang="en">
<head>
<title>Prisma Kitchens</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desctiption" content="Kitchen designers in Manchester.">
<meta name="author" content="Prisma Kitchens">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css.css" type="text/css" >
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" type="text/css">
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<div class="logo">
<!--Logo is here-->
</div>
<div class="links">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="services.html">services</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
</div>
<div class="right-container">
<div class="head_image_mobile"></div>
<div class="heading_image">
<!--Holds the image at top of page-->
</div>
<div class="content">
<div class="subheading">Why Choose Prisma Kitchens?</div>
<a class="button" href="about.html">Learn More...</a>
<div class="content_gap"></div>
<div class="subheading">What Can We Offer?</div>
<a class="button" href="services.html">Our Services...</a>
<div class="content_gap"></div>
</div>
</div>
</body>
</html>


Related Topics



Leave a reply



Submit