detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/

                * {
                    margin: 0;
                    padding: 0;
                }

                #watchonly {
                    display: none;
                }


                /*animation of the championship logo*/

                #champ {
                    position: absolute;
                    top: 15%;
                    right: 20%;
                    animation-name: champ;
                    animation-duration: 5s;
                    animation-timing-function: linear;
                    animation-delay: 2s;
                }

                @keyframes champ {
                    0% {
                        right: 20%;
                        top: 15%;
                    }
                    25% {
                        right: 22%;
                        top: 16%;
                    }
                    50% {
                        right: 20%;
                        top: 17%;
                    }
                    75% {
                        right: 19%;
                        top: 16%;
                    }
                    100% {
                        right: 20%;
                        top: 15%;
                        transform: rotateY(360deg);
                    }
                }


                /*navigation controls*/

                nav ul li {
                    display: inline;
                }

                nav ul li a, nav ul li a:visited {
                    color: #006734;
                    display: block;
                    float: left;
                    font-size: 1.25em;
                    font-weight: bold;
                    margin: 5px 2px;
                    padding: 7px 10px 4px;
                    text-shadow: 0 1px 1px white;
                    text-transform: uppercase;
                }

                nav ul li a:hover {
                    text-decoration: none;
                    background-color: #009340;
                }

                nav, main, nav ul li a, .twitter-timeline {
                    border-radius: 30px;
                }

                nav {
                    background: #6fad60;
                    padding: 0 5px;
                    position: absolute;
                    right: 0;
                    top: 4px;
                    border: 1px solid #0e1f0c;
                    box-shadow: 0 1px 1px #0e1f0c;
                }


                /*switching off the watch only text*/

                #watchonly {
                    display: none;
                }

                .clear:after {
                    content: ".";
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }

                body {
                    font-size: 15px;
                    color: #f8f8f8;
                    background-color: #bcbcbc;
                    font-family: Arial, Helvetica, sans-serif;
                }


                /*the default font*/

                h1, h2, h3 {
                    font-family: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
                    color: #00923f;
                    text-shadow: 0 1px 1px black;
                }

                h1 {
                    font-size: 35px;
                    padding: 3px;
                    text-transform: uppercase;
                }

                h3 {
                    font-family: forte, "Myriad Pro", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
                    font-size: 30px;
                    font-weight: normal;
                    margin: 2px;
                }

                img {
                    width: auto;
                    height: 100%;
                }

                p {
                    line-height: 120%;
                    padding-bottom: 2px;
                }

                main .line {
                    background-color: #15242a;
                    border-bottom-color: #204656;
                    margin: 3px;
                }

                .line {
                    height: 1px;
                    background-color: #24404c;
                    border-bottom: 1px solid #416371;
                    margin: 2px;
                    overflow: hidden;
                }

                footer .line {
                    margin: 2px;
                }


                /*Main page size*/

                #page {
                    width: 900px;
                    margin: 0 auto;
                    position: relative;
                }

                main {
                    background-color: #006634;
                    margin: 2px;
                    padding: 20px;
                    text-shadow: 0 2px 0 #001f10;
                    margin-top: 20px;
                }

                footer {
                    color: #000000;
                    margin-bottom: 30px;
                    text-align: center;
                    font-size: 10px;
                }

                footer a, footer a:visited {
                    color: #6fad60;
                    background-color: #006634;
                    padding: 2px 4px;
                }

                footer a:hover {
                    text-decoration: none;
                    background-color: #000000;
                }

                footer a.up {
                    float: right;
                }


                /*control of the twitter frame*/

                .twitter-timeline {
                    border: 3px solid #00943f;
                    float: right;
                    margin-left: 15px;
                    overflow: hidden;
                }

                #twitter-widget-0 {
                    height: 500px !important;
                    min-height: 500px !important;
                }

                a, a:visited {
                    color: #ffffff;
                    text-decoration: none;
                    outline: none;
                }

                a:hover {
                    color: black;
                    text-decoration: underline;
                }

                a img {
                    border: none;
                }

                iframe {
                    width: 100%;
                    height: 600px;
                }


                /*turning off the image and allowing the iframe to show*/

                #whensmall {
                    display: none;
                }


                /*control of the form*/

                form {
                    padding: 20px;
                }

                textarea {
                    height: 300px;
                    width: 275px;
                }

                input {
                    padding-left: 90px;
                }


                /*control of map iframe*/

                .map {
                    width: 300px;
                    height: 350px;
                }

I have been struggling to validate my website using the W3C validator.

The HTML5 validation is successful but the CSS validation is not. I am getting parse errors (x6) at keyframes.

I have experimented with different curly bracket arrangements as it seems that the parser is interpreting them incorrectly.

This is my first attempt at creating an HTML and CSS website. Any help would be greatly appreciated.

// Your CSS code goes here
csshtml

Answer №1

Latest Information

Based on the specifications from https://www.w3.org/TR/CSS2/media.html#at-media-rule, at-rules (@...) are considered invalid within the @media rules (such as the @keyframes rules).

It is recommended to define the animations outside of the media queries and then apply them to the elements within the media query.

If you use an editor that can automatically format your CSS, it will help identify any issues.

@media only screen and (min-width: 301px) and (max-width: 500px) {
  /* Disable iframe, large champion image, and watch only text */
  #whenbig {
    display: none;
  }
  #whensmall {
    display: none;
  }
  #watchonly {
    display: none;
  }
  /* Animation for championship logo */
  #champ {
    position: absolute;
    @keyframes champ1 {
      25% {
        right: 2%;
        top: 2%;
      }
      50% {
        right: 4%;
        top: 1%;
      }
      75% {
        right: 2%;
        top: 2%;
      }
      100% {
        right: 0%;
        top: 0%;
      }
    }
    ul {
        padding: 0%;
        nav ul li a,
        nav ul li a:visited {
          color: #006734;
        }
        nav ul li {
            display: inline;
        }
        nav {
            position: relative;
        }
        #page {
            width: 295px;
            .map {
              width: 260px;
            }
            #twitter-widget-0 {
              height: 45px !important;
              .twitter-timeline {
                border: 3px solid #00943f;
                h1 {

Upon inspection, it appears that some } are missing in the code leading to incorrect nesting.

Answer №2

Your @keyframe should not be inside your block #champ. It needs to be structured like this: `

div {
    width: 100px;
    height: 100px;
    background: red;
    position :relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    75%  {top: 50px}
    100% {top: 100px;}
}
<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

`

As shown, mymove is a variable located at the top level as a variable

Answer №3

While validators are helpful tools, they are not the ultimate authority on valid HTML and CSS. Ultimately, as long as your code works and the browser isn't showing any errors, you should be good to go.

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

Simple HTML and CSS tutorial: Creating a vertical menu with a left-popping submenu

Recently, I designed a vertical menu bar using a Dreamweaver template with CSS styling. Subsequently, I added a submenu feature that I intended to have pop out from the left side of the main menu links they are associated with. Despite numerous attempts an ...

htmlcss

The issue of an HTML button positioned on top of an image not remaining fixed when the browser window is resized

After mastering the art of placing an html form element on top of an image, I am now facing the challenge of making sure that the button remains intact even when I resize the window. For a reference, please visit: Note: Despite its simplicity, I acknowle ...

htmlcss

The button click event fails to trigger after entering text into an input field

I created a basic calculator. Users can input a value in the designated field and then click on the '+' button. The cursor stays in the input field, allowing users to immediately enter a new value after clicking the '+'. The mouse poi ...

javascripthtmlbuttoninputfocus

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

In my application built with NextJS and styled with MaterialCSS, I have created two themes: a dark theme and a light theme using the following code: import { createTheme } from '@mui/material/styles'; export const darkTheme = createTheme({ pal ...

cssreactjsmaterial-uimaterial-designnext.js13

Scrolling with jQuery just got a sleek upgrade with our new

Can anyone suggest a jQuery scrollbar that resembles the clean black bar found on the iPhone? I need a simple design without visible up or down buttons. Many scripts I came across offer more features than necessary for my project. My div element has a fi ...

javascriptjquerycssscrollbar

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

cssangular

pure-react-carousel: every slide is in view

Issue I am encountering a problem where the non-active slides in my container are not being hidden properly. This results in all of the slides being visible when only one should be displayed. Additionally, some slides are rendering outside of the designate ...

javascriptcssreactjspure-react-carousel

What is the method to extract the content located within the <body> element using requests.get()?

I attempted to utilize: from json import loads from requests import get text_inside_body_tag = loads(get('https://Clicker-leaderboard.ge1g.repl.co').content) However, it keeps throwing an error related to loads expecting a bytes object or when ...

pythonhtmlpython-requests

Tips on customizing image borders/masks with hover effects

Is there a React library or a simple CSS trick to create an image's canvas cropping effect on hover? For example, similar to this: Thanks in advance! ...

javascriptcssreactjs

Locating a particular table without an identifier

Recently, I've started working on a selenium project and I've encountered a roadblock. The webpage I am dealing with has three tables but I only need to extract data from one specific table. The challenge lies in the fact that all tables have the ...

javahtmlseleniumxpathhtml-table

Retrieving the headers from an ajax request

Is there a method to retrieve the complete request headers used in an AJAX call made through jQuery? ...

javascriptjqueryhtmlajaxhttp-headers

I am having issues with my JavaScript code, I could really use some assistance

Currently, I am developing a custom file search program. The goal is to have a textarea where users can input text, which will then generate a clickable link below it. However, I am facing issues with the current implementation. Below is the snippet of my ...

javascripthtml

The event listener for jQuery's document.ready doesn't trigger, rendering all jQuery functions ineffective

After researching similar issues on various forums, I have attempted the following troubleshooting steps: replacing all $ with jQuery ensuring the correct src is used implementing jQuery.noConflict() My goal is to retrieve data from a SQLite3 database w ...

javascriptjqueryhtmlajax

Are JQuery functions affected when navigating between pages in smart-tables?

Apologies if this question has been answered before or seems obvious. I couldn't find a solution after searching, and as someone new to web development, I might be going in circles here. Issue: I've integrated the smart-table extension () into ...

javascriptjqueryhtmlangularjssmart-table

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

javascripthtmlcsscanvas

Tips for maintaining color on <a> tags even after they have been clicked

My webpage has 3 <a> tag links to 3 different pages. I have set the hover state color to red, and now I want the background-color of the clicked page to remain as it was in the hover state. How can I achieve this? <html lang="en"> < ...

htmlcss

What is the reason behind the failure of the jquery.hide() function on this particular UL element?

Although the submenu displays correctly, it refuses to hide when using the mouseleave function. Oddly enough, a console.log() confirms that an event does trigger at the right moment when the mouse exits the <ul>, yet the submenu remains visible for ...

jquerycsshtml-lists

Obtain the PHP function output through asynchronous JavaScript and XML programming

I have a form that collects user input and saves it to the database. After submitting the form, an ajax call is made to the action.php file. e.preventDefault(); $.ajax({ type: "POST", url: "action.php", data: senData, dataType: "JSON", ...

javascriptphphtmlajaxforms

WordPress presents a challenge with PHP Heredoc not displaying variables in HTML

I've coded some functions in my theme's functions.php file. Here is an example: $usrProfileHTML = <<<EOD <div class="eUserProfile"> <div class="eUsrImage"> <img src="{$envUserProfile['eUsrImage']}" a ...

phphtmlwordpressheredoc

Div with full height will not have scrollbars

As I work on developing a chat site, I've come across a peculiar issue with the chat display feature. Currently, my jQuery code dynamically adds chat rows to a div. My goal is to set the height of this div to 100% so that it adjusts based on the user& ...

jqueryhtmlcsscross-browser