Will someone fix this CSS?

  • pavolknut

    (@pavolknut)


    2 days, 10 hours ago

    I would love to see a fix in the core for /wp-includes/blocks/image/style.min.css and have someone validate this style. Problematic css deserves w3c validation.
    I get a lot of confusion in my work during audits.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator threadi

    (@threadi)

    2 days, 8 hours ago

    What exactly is problematic about the CSS there, and what would the fix look like? If you already have that information, feel free to open a ticket in Core Trac and suggest it to the developers there as an optimization: https://core.trac.wordpress.org/newticket

    Since this appears to be a Gutenberg component, however, their team might actually be the better point of contact for this: https://github.com/WordPress/gutenberg/issues

    Avtar Bhumrah

    (@avtarbhumrah)

    1 day ago

    Hi,

    I took a closer look at the stylesheet you referenced.

    I can see that it uses several modern CSS features, including :has(), @supports, env(), backdrop-filter, and the prefers-reduced-motion media query.

    However, looking at the stylesheet alone, I don’t see a specific CSS rule that I can confidently identify as incorrect. If the W3C validator is reporting an issue, could you share the exact validation error/warning and the affected line?

    That would make it possible to determine whether there is an actual issue with the WordPress CSS or whether the validator is flagging a feature it does not fully support yet. From there, a Core Trac or Gutenberg issue could be opened with a specific proposed fix if necessary.

    Thread Starter pavolknut

    (@pavolknut)

    23 hours, 29 minutes ago

    This is the power mapper report:
    The CSS backdrop-filter: property is not supported by some browsers.
    .has-nested-images figure.wp-block-image:before { backdrop-filter: blur(3px3px; }
    .wp-lightbox-container button { backdrop-filter: blur(16px16pxsaturate(180%180%; }

    Invalid CSS url() value.

    -webkit-mask-image: data:image/svg+xml;utf8,
    mask-image: data:image/svg+xml;utf8,

    This is what jigsaw.w3.org says for the address https://photoknut.eu/wp-includes/blocks/image/style.min.css

    The types are incompatible ))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale))
    The types are incompatible ))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale))

    Thanks Guys

    • This reply was modified 23 hours, 28 minutes ago by pavolknut.
    Moderator threadi

    (@threadi)

    18 hours ago

    The support page looks pretty good to me, though: https://caniuse.com/?search=backdrop-filter

    This also meets WordPress’s requirements for supported browser versions; see: https://make.wordpress.org/core/handbook/best-practices/browser-support/

    I therefore think it’s unlikely that a change will be made, but as I said, feel free to reach out to the Gutenberg team.

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

You must be logged in to reply to this topic.