Jump to content

[5.0.4] CSS framework - W3C validation errors

Adlago

By Adlago

  • Status: Not a bug

When analyzing the CSS framework, 3 important errors are reported:

  1. CSS rule

    @media (max-width: 767px) {

    :root {

    --i-box--pa-bl:var(--i-sp_2);

    --i-box--pa-in: var(--i-sp_2);

    --i-sticky-offset: calc(env(safe-area-inset-top) + var(--i-sticky-offset--small) + var(--i-sticky-offset--extra, 0px));

    }

    }

    issue: Parse Error calc(env(safe-area-inset-top) + var(--i-sticky-offset--small) + var(--i-sticky-offset--extra, 0px))

2. CSS rule

:root{--i-mobileFooter--he: calc(55px + env(safe-area-inset-bottom));}

issue: Parse Error env(safe-area-inset-bottom))

3. CSS issue :root { --i-range: clamp(0rem, (100vw - 30 * var(--i-rem)) / (70 - 30), var(--i-rem));}

Issue: The types are incompatible  )) / (70 - 30), var(--i-rem))

It is possible that these errors create render delay LCP in the PSI test, i.e. in a slow 4G test mobile.

    •

    User Feedback

    Recommended Comments

    Ehren Experienced

    Ehren

    Invision Community Team

    The validator only tests for "CSS Level 3" code. Those alerts are all valid pieces of code and are understood by all modern (and not so modern) browsers.

    Ehren Experienced

    Ehren

    Invision Community Team

    Changed Status to Not a bug