-
Notifications
You must be signed in to change notification settings - Fork 869
Critical CSS: Invalid charset rule #33447
Copy link
Copy link
Closed
Labels
BugWhen a feature is broken and / or not performing as intendedWhen a feature is broken and / or not performing as intendedTriaged[Plugin] BoostA feature to speed up the site and improve performance.A feature to speed up the site and improve performance.[Pri] Normal
Description
Impacted plugin
Boost
Quick summary
It seems the css output from critical css contains an invalid @charset rule. According to the specification, it must be the first element in the stylesheet and cannot be nested.
Originally reported on the forum: https://wordpress.org/support/topic/css-parse-error-5/
The offending line:
<meta name=description content="Harika siteler sitesi Sunipeyk Yapay Zeka (AI),WordPress, web standartları, kullanıcı deneyimi, markalar, sosyal medya, tasarım üzerine yazılar ve bilimkurgu, poster çalışmaları, film ve romanlar, kitap kapakları."><style id="jetpack-boost-critical-css">@media all{body{background-color:#fff;color:#32373c;font-family:Roboto,system-ui,sans-serif;font-size:20px;line-height:1.6;margin:0 auto}figure{margin:0}.searchfield{border-radius:.5em 0 0 .5em;border-width:0;padding:.5em}.arabutton{background-color:#32373c;color:#fff;border-radius:0 .7em .7em 0;border:none;padding:.5em 1em}.title{font-size:2em}.title,p{overflow-wrap:break-word}.posttarihi{margin:1em auto;border-top:2px solid}h1{margin:0}h2{line-height:1.2}h3{font-style:italic;line-height:1.2}.ana a{border-radius:2em;color:#32373c;font-weight:500;text-decoration:none}.page-numbers{border-radius:.2em}.dots,.none{display:none}.page-numbers{color:#000;margin:.2em .1em;padding:.04em .2em;text-decoration:none}input{width:100%;padding:.7em;box-sizing:border-box}input{font-size:1em}.page-numbers{background:#ddd}.alignright{float:right}.ikili a,a{color:inherit;text-decoration:none}.ikili{display:grid;background:#f5f5f5}img{max-width:100%;height:auto;vertical-align:middle}.ikili figure{display:grid;overflow:hidden}:where(.ikili h2,.ikili p){padding:0 5%}.ikili aside{align-self:flex-end;width:90%}.maingrid{display:grid;gap:1em}.menuitem{font-size:1.2em;margin:1em 0 .5em 0;padding:0 .5em}.searchform{display:flex;width:100%}.ana{display:none;width:100%}.burger-shower{display:none}.hamburger{width:25px;margin:1.6em 0}.hamburger span,.hamburger:after,.hamburger:before{background-color:#32373c;border-radius:3px;content:"";display:block;height:4px;margin:4px 0}.navholder{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.5em 5%;margin:0 auto}nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.tepe{background-color:#e9e930}.baslik{display:flex;align-items:center;text-decoration:none}.siteismi{color:#32373c;font-size:1.6em;font-style:italic;font-weight:900;padding:.05em .3em 0 .2em}.splogo{width:2.24em;height:2.24em;background:#eee;border:4px solid #32373c;border-radius:50%;position:relative}.splogo:after{content:"";width:20px;height:4px;background-color:#32373c;border-radius:0 3px 3px 0;top:28px;left:0;position:absolute}.splogo:before{content:"";width:20px;height:4px;background-color:#32373c;border-radius:3px 0 0 3px;top:12px;right:0;position:absolute}@media (min-width:768px){.navholder{flex-wrap:nowrap}.hamburger{display:none}.ana{display:flex;width:60%}.searchform{flex:2}.menuitem{flex:1;text-align:center;padding:0;margin:1.2em .5em}.ikili figure{border-radius:.5em .5em 0 0}.ikili{border-radius:.5em}.ikili:first-child{grid-column:1/span 8}.ikili:nth-child(2){grid-column:9/span 4}.ikili:nth-child(3){grid-column:1/span 4}.ikili:nth-child(4){grid-column:5/span 4}.ikili:nth-child(5){grid-column:9/span 4}.maingrid{grid-template-columns:repeat(12,1fr);padding:1em 5%}}@media (prefers-color-scheme:dark){body{background:#222;color:#fff}.home{background-color:#222}.siteismi{color:#eee}.searchfield{background-color:#eee}a{color:#06c}.ana a,.ikili a{color:#fff}.ikili{background-color:#000}.tepe{background-color:#222}.hamburger span,.hamburger:after,.hamburger:before{background-color:#fff}.posttarihi{color:#ddd}.arabutton{background-color:#666}}}@media all{@charset "UTF-8";.screen-reader-text{clip:rect(1px,1px,1px,1px);word-wrap:normal!important;border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:where(figure){margin:0 0 1em}}</style><title>SUNIPEYK – Harika siteler sitesi</title>
Steps to reproduce
- Go to https://www.sunipeyk.com/
- Inspect the site
- You'll be able to see the invalid styles generated by critical CSS.
A clear and concise description of what you expected to happen.
Critical CSS output should be valid by W3 standards.
What actually happened
No response
Impact
One
Available workarounds?
No and the platform is unusable
Platform (Simple and/or Atomic)
No response
Logs or notes
No response
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
BugWhen a feature is broken and / or not performing as intendedWhen a feature is broken and / or not performing as intendedTriaged[Plugin] BoostA feature to speed up the site and improve performance.A feature to speed up the site and improve performance.[Pri] Normal
Type
Projects
Status
Done