The CSS Validator does not recognize the CSS pointer-events and appearance properties

I'm a CSS beginner who recently created an app. I've encountered some errors and warnings when validating my CSS code:

https://i.stack.imgur.com/g4MUz.png

https://i.stack.imgur.com/Es1DE.png

Could someone kindly explain these errors and warnings to me, along with solutions on how to fix them for successful CSS validation?

Despite these issues, the app is still functioning properly.

Here is a snippet of my CSS code:

/*----------------------------CSS reset------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;

...

Answer №1

Summary: It's more beneficial to refer to caniuse.com for browser data rather than relying solely on W3C validators that may not include newer properties and values supported by major browsers.


Looking back at CSS Working Group archives:

An individual encountered an error when the css validator flagged the pointer-events property as non-existent with a value of "none."

This confusion arises because the pointer-events property is still experimental in CSS specifications, even though it has been defined in SVG 1.1. The feature was initially part of the CSS3 UI draft but got postponed to CSS4 due to unresolved issues.

The W3C CSS Validator primarily checks against CSS 2.1 and some "CSS3 specifications," often excluding those in working draft stages like pointer-events at that time.

More information here

Although this excerpt dates back to 2012, its content remains relevant in 2017.

Referencing MDN documentation on pointer-events:

The pointer-events extension for HTML elements, originally in early drafts of CSS Basic User Interface Module Level 3, has now moved to level 4.

A similar situation can be seen with the appearance property (MDN link). This property is currently in Editor's Draft status, not yet included in the CSS Validator assessment.


An Extra Note

In my experience, validating HTML tends to be smoother compared to CSS validation difficulties. While achieving full HTML validation is common, acquiring complete CSS validation is less frequent due to using modern properties still pending official approval.

Thus, I recommend prioritizing caniuse.com for checking browser compatibility regarding CSS. Despite lacking formal specification inclusion, properties like pointer-events have had wide browser support for quite some time.

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

Styling is lost in FancyBox popup when loading Partial View

I've been attempting to incorporate a partial view into my MVC project using fancybox. It seems to be loading the content correctly, mostly anyway, as it tends to cut off part of the page and loses all styling from the view upon loading. Even after i ...

Trying to resolve w3 validator error and warning issues

While checking my HTML code using the W3 validator, I encountered an error and warning message: Line 21, Column 23: The ID menuItem was first used here. <li id="menuItem"><a href="#visit">Ten Places to Visit</a></li> ✉ Line 29 ...

Border becomes dashed when dragging and dropping

I am working on enabling drag and drop functionality for users. When an item is lifted from its original position, a gray dashed box should appear in its place. As the item is moved closer to another spot, the containers adjust to create a target area (gra ...

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

CSS tip: Display only the latest x entries on a list

Can CSS be used to display only the most recent x items in a list? The code below reveals every item except the first two. How can I make it so that only the last two items are displayed in the list? ul li { display: none !important; } ul li:nth-las ...

Here's a unique version: "A guide on using jQuery to dynamically adjust the background color of table

I need some assistance with changing the background color of td elements based on the th class. Specifically, I want to target all td elements under the bots class in the HTML code provided below. <table border="1" class="CSSTableGenerator" id="myTab ...

Unusual behavior observed in Safari regarding transitions and animations

I have encountered a strange bug in Safari 8 and 9 on desktop, as well as iOS 8.4 and newer on mobile devices. I am perplexed by why it is happening and how to resolve it. This issue can be replicated with 100% accuracy. Here are the steps to reproduce: ...

Is there a way to undo the CSS rotate animation that has been applied?

Struggling with reversing a CSS animation based on a class being added to a DOM node? Take a look at the code I've been using: EXAMPLE // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyfra ...

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...

Django static files reference

sample code snippet tooltip reference navigating to the correct file path FILES: settings.py STATICFILES_DIRS = [ BASE_DIR / "static" , ] base.html {% load static %} How can I properly link my static files in the html line below?... &l ...

Intersection of content in panel-body using bootstrap tab pills

Can someone help me solve a major issue? I need the content of each tab to overlap as if they are unaware of each other. Currently, my code is saved in this fiddle: https://jsfiddle.net/axq882de/1/. When I click on different tabs, the contents should remai ...

Iterating through a SASS map and retrieving the next item in the loop

I am working with a color array that looks like this: $colors: ( 'primary': '#aaa', 'secondary': '#bbb', 'color-3': '#ccc', 'color-4': '#ddd', 'color-5': & ...

The scrollbar on the side of my page seems to be malfunctioning

I'm having an issue with the collapsible sidebar and tabs on my angularjs page. The scroll bar is not appearing when there is overflow in the sidebar. I've tried setting the scrollbar height to auto and overflow-y to scroll, but it's not wor ...

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

Implementing dynamic width with ng-style in AngularJS

I am trying to dynamically resize a div when an event is fired from S3. In the code below, I pass the progress variable to the updateProgress function as a parameter. This function resides in the top scope of my Angular controller. s3.upload(params).on(& ...

Creating a dynamic 3x3 layout using flexbox: a step-by-step guide

Is it possible to dynamically create a layout in Next.js with 3 columns of 3 rows using flexbox, React Bootstrap, or CSS only? ...

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

What is the reason that elements with % properties totaling 100% do not align next to each other?

I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...

I need to see the image named tree.png

Could someone assist me in identifying the issue with this code that only displays the same image, tree.png, three times? var bankImages = ["troyano", "backup", "tree"]; jQuery.each( bankImages, function( i, val ) { $('#imagesCon ...