Validation failure in the CSS document - Syntax error

I have searched high and low for a solution to my CSS 3.0 validation issue, but none seem to fit the bill. I am struggling with parse errors in the beginning and despite checking for invisible characters, I can't seem to pinpoint the problem.

What could possibly be causing these parse errors?

I understand that maintaining compatibility for browsers means I can't eliminate this error: 

Sorry, the at-rule @-moz-keyframes is not implemented.

You can view the validator results here and check out my CSS file.

EDIT: Thank you all for your answers regarding the "at-rule," although it was more of a rhetorical question as I had already found the answer on my own. However, I'm still puzzled by the persisting parse error.

EDIT SOLUTION:

After much deliberation and testing, I have arrived at the solution:
- The vendor extensions are merely warnings, except for keyframes which seems to be causing issues.
- The parse error is directly related to the keyframes extension problem.
- Following Kami's suggestion, I moved animations to a separate vendor.css file and linked it to the HTML using JavaScript.

Now everything validates perfectly.

htmlcssvalidation

Answer №1

For Firefox, you can use the non-prefixed version @keyframes, while for Chrome, Safari, and Opera, you still need to use -webkit-. Check out the information on browser compatibility at usability @caniuse.com.

Answer №2

@-moz-keyframes and @-webkit-keyframes are unique CSS features created by different browser companies (Fun fact: -moz and -webkit- are referred to as vendor prefixes.) These features are so cutting-edge that they have not yet been formally included in the W3 CSS3 standards. This is why the validator is flagging them as errors - it doesn't recognize @-____-keyframes at this time. It's possible that in the future, there will be official support for @keyframes.

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

What's preventing my Angular list from appearing?

I am currently developing an Angular project that integrates Web API and entity framework code first. One of the views in my project features a table at the bottom, which is supposed to load data from the database upon view loading. After setting breakpoin ...

javascripthtmlangularjs

Generate a new Div dynamically, positioned higher than the rest

Once a second, this script will utilize AJAX to open a new page and display the contents in a dynamically created div on this page. However, the issue is that the new divs are stacking under each other, and I would prefer them to be added at the top instea ...

phpjavascriptajaxhtml

Issue with style display:none not functioning in IE8, IE9, and IE10 when in Compatibility View mode

I am facing an issue with two DIVs on my webpage. One of them is set to have display:none based on certain conditions. Surprisingly, it works perfectly fine on IE10, Firefox, and Chrome. However, the problem arises on IE8, IE9, and IE10 Compatibility Vie ...

javascriptjqueryhtml

The module 'myapp' with the dependency 'chart.js' could not be loaded due to an uncaught error: [$injector:modulerr]

Just starting out with Angular.JS and looking to create a chart using chart.js I've successfully installed chart.js with npm install angular-chart.js --save .state('index.dashboard', { url: "/dashboard", templateUrl ...

javascriptjqueryhtmlangularjscharts

Adjust the style of an element when hovering over a different element

Below is the HTML code in question: <div> class="module-title" <h2 class="title" style="visibility: visible;"> <span>Spantext</span> Nonspantext </h2> </div> I am looking to change th ...

javascriptjqueryhtmlcss

What is the process for enabling a deactivated hyperlink?

Trying to figure out how to create a link that will only activate when a specific value is present. Let's say I have a link like this: a(class="nav-link" id="signal_" style="pointer-events: none" href="/goToStreamingPage") <i class="fas fa-signal" ...

javascripthtmlcss

What is the best way to apply a semi-transparent background to my navigation bar, while maintaining a blue background across my entire page?

Currently, I have a background set for my website along with a navigation bar that displays my name and additional information. I am looking to make the background of this navigation bar semi-transparent so that it is possible to see through it. I tried ...

htmlcss

obtain the equivalent offsetX value for touch events as for mouse events

Greetings! I am currently attempting to retrieve the offsetX and Y values of a touch event, which ideally should match the offsetX value of a mouse event. In order to achieve this, I have implemented the following code: ev.offsetX = ev.targetTouches[0].p ...

javascripthtmlcanvas

Is there a way to improve the efficiency of this JavaScript code?

I'm looking to optimize the code below in order to replace each link's href querystring with the current page URL's querystring if the current page URL has an argument 'myid1' or 'myid2' in the querystring. I want this sc ...

javascriptjqueryhtmlcss

Is it possible to execute our webpack (UI) build directly in a web browser without the need for a server?

Is it possible to run the build file bundle.js directly in the browser when using a reactjs setup with webpack dev server and webpack build? Also, when we deploy the build on the cloud, what exactly happens and how does our application run? ...

javascripthtmlreactjswebpackwebpack-dev-server

Fetching the image ID from a selection of images in order to retrieve and display the full image data on a separate page upon clicking on the image can be achieved using the following steps

My code is designed to display multiple images and retrieve their IDs [currency.jsp] <div class="container-1" style="background-color:white"> <div style="color:Red;font-size:1.1em;font-weight:bolder;">${err}</div> <% try { DBConne ...

javahtmlmysqljspservlets

"jQuery's .each() method is only iterating through the last element in

I am encountering an issue with this function not operating correctly... only the last Element shows the box. NOTES: <aside> is set to position: fixed; and I understand that this is not the "correct" use of <article> tags, but it helps me dist ...

javascriptjqueryhtmldom

What are your thoughts on using inline PHP to assign values to JavaScript variables?

Imagine you have a PHP document and need to determine if the request was made with or without query parameters using JavaScript. Since there is no built-in function to extract values from the URL, you may need to resort to some sort of workaround. While it ...

javascriptphpjqueryhtmldynamic

Ways to adjust the color of table-striped for oversized rows (those with multiple lines)

Can the background color of table rows with rowspan= "x" be customized? The table has a large row with multiple small rows inside it using rowspan="x". Is there any way to change the background color for both the large row and small rows within it? View ...

htmlhtml-tablebootstrap-4bootstrap-table

Design of the content layout for the PHP mail function

After submitting a form on a website, the text entered is saved in a database. I attempted to send this text via email to a recipient using the following code: $recipient = $emailaddress; $subject = 'xxxx'; $header = 'From: xxxx < ...

phphtmldatabaseformshidden

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11

Div element with fixed position that dynamically adjusts its height according to the position of the

Currently, I am designing a website with two sidebars and a center wrapper for the main content. The sidebars will contain links that jump the user to different sections of the page. I have fixed the position of the sidebars so they stay visible as the use ...

javascriptjqueryhtmlcss

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

javascriptcssjsonchrome-extension-manifest-v3

How to access an element inside a div using the eq() method

Within my #img_wrapper, I have multiple pictures each enclosed in a link: <div id="img_wrapper"> <a href="img1.jpg" style="display: none;"> <img src="img1.jpg" /> </a> <a href="img2.jpg" style="display: none;"> &l ...

jqueryhtml

The compiler throwing an error claiming that the indexOf method is not a valid

Currently, I am working on a simple form that collects user input and aims to validate the email field by checking for the presence of "@" and "." symbols. However, every time I attempt to run it, an error message stating that indexOf is not a function p ...

javascripthtml