Error with this CSS?

Hi there,

I have this code in which I am using to create an infinite loop marquee, but I am getting errors on some lines.

This is my code:

.menu {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10vh 0 25vh;
  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 10vw;
  counter-reset: menu; }

But I am getting errors on these lines:

  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 10vw;

image

Which relates to the lines above.

Can anyone see what’s wrong with those lines? Or are they actually ok?

Thanks!

Does the code do what you want it to?

Yes just getting errors with it for some reason. I don’t know where the right brace would need to go.

It’s not unknown for the validator to get things wrong.

I don’t think it’s a problem putting the custom properties after other styles, but it might be worth declaring those custom properties before the other styles, just to see if that makes the browser happier.

That is:

.menu {
  --marquee-width: 100vw;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  --item-font-size: 10vw;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10vh 0 25vh;
  counter-reset: menu; 
}

Not certain, but I think these errors are appearing in the browser’s devtools, but it wasn’t made explicitly clear. But yeah, if it’s the validator, it has always been buggy and behind the times.

1 Like

There are no errors showing on the css validator with that code.

Screen Shot 2023-08-02 at 10.58.23

There are warnings for vendor extensions but that’s to be expected and are not an issue.

Custom properties are values you can reuse in CSS. They can cause errors if you use them wrong. Follow some rules to avoid errors. Check A Complete Guide to Custom Prop for more info. Hope this could help!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.