Member Avatar for TLCJohn

Hi there,
Is there a workaround for -moz-border-radius: and -webkit-border-radius: which will then be validated by W3C CSS?
Thanks for your help.

Kind regards

John

  • 3 Contributors
  • 3 Replies
  • 124 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

The original question from asked whether the vendor-prefixed rules for rounded corners can be made to pass the W3C CSS validator. suggested keeping the validator-facing stylesheet clean, and flagged that approach as a bit "naughty." Below are practical, maintainable alternatives that keep your source CSS validator-friendly while still supporting real browsers.

Prefer using the standard border-radius in your source CSS — modern browsers accept the unprefixed property, so the simplest valid stylesheet is often enough:

/* source (validator-friendly) */
.box {
  border-radius: 6px;
}

Browser support for the unprefixed border-radius is effectively universal for current releases (details: MDN border-radius, Can I use: border-radius). If your audience runs only reasonably modern browsers, this is the cleanest, forward-looking solution.

If older browsers still require prefixes, add them during your build step rather than keeping them in the authoring file. Use a tool like Autoprefixer to generate a vendor-prefixed distribution file from a single, validated source. Example PostCSS config:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({ overrideBrowserslist: ['>0.5%','last 2 versions','Firefox ESR'] })
  ]
};

This keeps source CSS valid while shipping compatible assets. For validation behavior and to run checks, use the official validator: W3C CSS Validator. If build tooling is not an option, consider separate distribution files or accept validator warnings — but prefer build-time prefixing for a maintainable workflow.

Recommended Answers

All 3 Replies

Member Avatar for hielo

REMOVE those "invalid" definitions from your initial CSS file. Instead, add them dynamically through javascript (by importing a "supplemental.css" file - ). The validator will not execute javascript so it should validate only the "good" css.

Edited by hielo because: typo
Member Avatar for TLCJohn

Hi hielo

Thank you for the answer.

Kind regards

John

Member Avatar for Member #120589

I know thtis is solved, but that's a little naughty isn't it hielo? Tsk tsk.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.