Google: GoogleBot Can't Crawl CSS Custom Properties

Eric Bidelman from Google posted a PSA, public service announcement, that since GoogleBot is based on Chrome 41, Google is unable to crawl CSS Custom Properties. Using CSS custom properties (variables) CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g. --main-color: black; ) and are accessed using the var() function (e.g., color: var(--main-color);

Eric said he ran into the issue himself when he was deploying a layout or design that relies on vars. He said make sure you are compiling CSS so your page renders properly.

Here is the tweet:

PSA: Google Search crawler 🤖 is based on Chrome 41 [1], which does NOT support CSS Custom Properties [2]. If your layout/design relies on vars, make sure you're compiling CSS so your page renders properly. I wasn't 😢

[1]: https://t.co/ZinziTp4oT
[2]: https://t.co/PtAAR4ZOHq* pic.twitter.com/w4AhujZYSQ

— Eric Bidelman (@ebidel) February 28, 2018

Here are the images showing the issues:

Forum discussion at Twitter.