AMP CSS syntax error in tag ‘style amp-custom’
-
Hello,
I use the “Reader theme: Twenty Twenty-One” and the Google Search Console has notified me for this error: https://prnt.sc/13eik2l
The error is only for this page: https://www.android.com.gr/programmatismos-minymatwn-me-to-google-messages/amp/
AMP Validator tell me that the page is PASS. But Google Console disagree with that… Any help?
-
This topic was modified 4 years ago by
harisreaderbird. Reason: Update page link and text
-
This topic was modified 4 years ago by
-
I’m seeing the same thing. It seems Google Search Console’s AMP test tool has some additional checks it performs beyond the AMP Validator.
Nevertheless, It does look like you have a syntax error in your CSS. In the wp-appbox plugin specifically. There is this CSS:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { div.googleplay a.apptitle { background: url("https://www.android.com.gr/wp-content/plugins/wp-appbox/img/googleplay-small@2x.png") } }
The
min--moz-device-pixel-ratio
here is invalid. From looking at the MDN docs, thismin--moz-device-pixel-ratio
is ancient code that only works in Firefox versions before 16.Therefore, you should contact wp-appbox to have them remove this obsolete code.
You can see the code in wp-appbox here: https://plugins.trac.wordpress.org/browser/wp-appbox/tags/4.3.9/css/styles.css#L538
Their support forum: https://wordpress.org/support/plugin/wp-appbox/
Correction: I’ve opened a pull request to add these this media feature to AMP’s CSS validator spec: https://github.com/ampproject/amphtml/pull/34553
Presuming that is merged shortly, the next time Googlebot indexes your page then the warning should go away.
Thank you for your help!
I remove the code manually from the plugin in my website. I will contact with their support so they remove the code permanently from their plugin.
My pull request has been merged. So the AMP validator will be updated shortly and this warning will be eliminated.
Nice! Thanks for you awesome work! 🙂
hello,
I’m getting the same error, but I don’t use appBox@media screen and ( min-color-index: 0 ) and( -webkit-min-device-pixel-ratio: 0 ){@media{.sidebar{margin-right:-1px}}}@media not all and ( min-resolution: .001dpcm ){@media{.sidebar{margin-right:-1px}}}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cacc73f{fill:white;float:right}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-40bdde6{border-top:1px black solid;border-bottom:1px black solid;line-height:1.2em}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-89acd64{fill:#fff}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-dc9454a{font-size:11.553719008264pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-8d1ef77{font-size:11.140495867769pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-133bd61{font-size:15.355371900826pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-55cb4b1{font-size:10.231404958678pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-e025a51{font-size:12.04958677686pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-e6510ad{font-size:11.057851239669pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-aa06730{font-size:8.495867768595pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-b79e149{font-size:8.7438016528926pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-2f34c34{font-size:13.95041322314pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-7510add{font-size:10.396694214876pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-cd08628{font-size:14.03305785124pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-5bb8a57{font-size:10.066115702479pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-1e1f71b{font-size:14.198347107438pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-788d75a{font-size:8pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-9994f81{font-size:13.289256198347pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-7aad2b6{font-size:10.809917355372pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-5f3fd25{font-size:8.3305785123967pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-3d5b42a{font-size:10.561983471074pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-2decfe0{font-size:9.9834710743802pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-df74061{font-size:12.297520661157pt}:root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-7f68440{font-size:18pt}
@britbomber It appears your CSS is malformed. Namely, there is a missing space between an
and
and(
. So this change is needed in your site CSS:- @media screen and ( min-color-index: 0 ) and( -webkit-min-device-pixel-ratio: 0 ) + @media screen and ( min-color-index: 0 ) and ( -webkit-min-device-pixel-ratio: 0 )
The current CSS you have is a parse error when putting it in the CSS Validator as well: https://jigsaw.w3.org/css-validator/
thanks for your reply Weston … but isn’t it the AMP plugin coming up with that CSS part? that’s not from my theme’s stylesheet
found the culprit! thank you
Hi
i have a problem at search consol. pls help me:CSS syntax error in tag ‘style amp-custom’ – disallowed media feature ‘min–moz-device-pixel-ratio’.
please see pic at follow link:
@ayazi2020 If you’d like to open a new support topic we’d be happy to assist with your case individually.
Please include all relevant information to your support topic, including your Site Health Information if relevant. You can share using this form after opening a support topic.
Hello, what data do you need to solve this problem? that tells me search console. Ask in other blogs on the subject and the AMP team has not responded satisfactorily, I do not know if because it is a Latin American website it is discriminating against us, I seriously do not know what to think. Who can tell us how to solve this long-standing problem of the AMP manufacturer?
If the world is going at high speed, why are they infatuated with the low speed at which they subject the builders imposing amp?
En español: Les dejo este Link para que puedan ver una de las web afectadas.
Alguien del equipo de AMP borró mi comentario y realmente no me ha gustado nada.
Deberían ser un poco más solidarios con los que no somos programadores.Ref
https://palermonline.com.ar/wordpress/bibliotecas-de-palermo/
- The topic ‘AMP CSS syntax error in tag ‘style amp-custom’’ is closed to new replies.