@property Support

  • Resolved blackape

    (@blackape)


    3 years, 10 months ago

    Hello im trying to setup a Website for my friend and he wants to include a counter at the bottom. Im unhappy with the counter in the plugin so I decided to build one in css. I managed to track down the approriate functions to do so but when i try to save those in WordPress i get the Errormessage “Markup is not allowed in CSS” even though i dont use markup and it works fine on the site previw when i put it in additional css i just cant save it.

    CSS Code:

    @property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

.countingnumbers {
  transition: --num 1s;
  counter-reset: num var(--num);
}
.countingnumbers:hover {
  --num: 10000;
}
.countingnumbers::after {
  content: counter(num);
}

    Html Code:
    <div class=”countingnumbers”></div>

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter blackape

    (@blackape)

    3 years, 10 months ago

    im sorry the css code is wrong i was playing around with it and accidently posted the wrong code:
    The CSS Code im trying to use:

    @property --num{
  syntax: "<integer>";
  initial-value: 1000;
  inherits: false;
}

.countingnumbers {
  transition: --num 1s;
  counter-reset: num var(--num);
}
.countingnumbers:hover {
  --num: 10000;
}
.countingnumbers::after {
  content: counter(num);
}
    Moderator threadi

    (@threadi)

    3 years, 10 months ago

    Where in wordpress do you paste the code exactly? I don’t see it in the front end of the page, so I’m just wondering.

    George Appiah

    (@gappiah)

    3 years, 10 months ago

    My understanding is that @blackape is adding the CSS in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS, and is seeing a syntax error due to the @property style’s syntax: "<integer>" property.

    @property is an experimental technology with limited browser support.

    It should therefore not be surprising that whatever 3rd-party library WordPress uses for the CSS editor (CodeMirror?) does not recognize it as a valid CSS rule.

    You could enqueue your CSS from your theme, rather than using WordPress’ CSS editor.

    But do you really want to build your friend’s site using a technology that neither Firefox nor Safari (both desktop and the 1.6 billion iOS devices) supports at all?

    Thread Starter blackape

    (@blackape)

    3 years, 10 months ago

    @gappiah Thank you for your wonderfully reply yes it was exactly like you decribed.
    i guess ill just have to wait for @propertys to be fully supported until then i will just have to make due with a javascript.
    Anyhow @propertys is a really wonderfull addition to css and i hope it will be supported widely in the future since the animations you can create and the ease in wich you can create them really is astounding.

    Thank you all for your replys I will close this topic.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘@property Support’ is closed to new replies.

Tags