Archived topic
Some of my CSS variables won't work
7 replies · Started by emanharout on December 26, 2020
Hi support team,
This is a strange issue I'm experiencing. I have a pallet of colors I refer to via CSS variables. When I use certain variables for certain elements, it won't work. Note these same variables work elsewhere just fine. In my browser's inspector, I also see it recognizes all the variables too.
If I change the element to another variable or another color entirely, it works, but the variable itself won't. Here's a few examples:
.entry-title a,
.entry-title a:visited {
color: var(--brand-gray-14); /*14+ won't work while in dark mode on my Mac. Light mode works though */
}
/* View button in "ABOUT" section of website */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
color: var(--brand-gray-2);
background-color: var(--brand-color-8);
box-shadow: 0px 2px 4px var(--shadow-0); /* won't recognize this color in light or dark mode */
}
Hi there,
I don't believe the theme would interfere with something like this.
Looking at your site, I'm not sure I'm actually seeing the issue. Did you resolve it?
The shadow issue is resolved but referring to gray colors numbered 14+ still isn't. It's a head scratcher. The entry-title being set to anything 14 or above won't actually switch colors despite the browser recognizing the stored colors.
Edit: Added private information that may help with replication on your end.
Edit #2: It appears the variables are recognized on Chrome and not for Safari. Is there something special I need to do to get Safari to recognize all variables? I've purged my cache, disabled CDN, and it's still no dice on Safari.
Edit #3: Regarding viewing inline code on Safari while on Dark mode on macOS: It appears even if I replace the variable with the hsl value—e.g. background-color: hsl(267, 81%, 83%)—for code {...} it still uses a gray color. Chrome works with both the variable and hsl value, Safari works with neither. So it doesn't seem to be a css-variable issue.
Moreover, when I change the HSL value's hue to 40 or 300, the color appears in Safari! If I do 260—270, it reverts back to gray.
Hi there,
you have this CSS for your <code> blocks - which is very specific and overriding your variable CSS:
<pre><code>code[class*="language-"], pre[class*="language-"] {
color: #ccc;
background: #282936;
text-shadow: none;
font-family: Menlo,PT Mono,Consolas,Monaco,andale mono,ubuntu mono,monospace;
font-size: .8125rem;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}I can't see where that CSS is coming from as the SG Optimizer has cached your CSS.
Apologies, had it on for a second to test a potential solution. I've since turned off SG Optimizer so 100% of my plugins (save GP) are deactivated.
I also added !important to the CSS to see if it helped but somehow Safari still rejects the color I'm setting.
If there's anything else I can do to help identify this issue let me know. It's strange that Safari suddenly works anytime I set a manual hsl value where the hue isn't in the 260-270 range.
Added a video in private information demoing the issue (please see private information). Note this issue isn't confined to <code> elements. I can't get certain colors to work while in dark mode on my Mac in Safari on seemingly random elements, even if I forgo CSS variables. At this point I'm hoping I can get a simply hard coded hsl color to actually work as a baby step.
Closing this out and creating a new thread as I think I've gotten more insight and the nature of the issue is a bit different than what I originally thought.
No problems - i have replied to your other topic.
