Include one CSS Custom Property in shipped code to move the web forward about twentynineteen HOT 5 CLOSED

We should use more than one!
I suggested this in #core-editor. It would be so easy to do editor styles if they were Custom Properties.
I used a polyfill for older browsers, but I used them extensively in a theme I wrote this past year.

from twentynineteen.

@mor10 Can you think of a way to use one? Since we still have to support IE11, it's difficult without a polyfill, but what if there were a progressive enhancement, such as background-blend-mode or something for modern browsers? If we use a variable there, we don't have to worry about IE11.

from twentynineteen.

@mor10
Can you put a variable in for the featured image mix-blend-mode? There is already alternate support for the old browsers, so that's a case where there would be only modern browsers using it.

from twentynineteen.

We don't need to put an actual functional variable in the code. It could just be a color that falls back on a hard-coded color:

:root {
  --key-color: #4169E1;
}

.entry-title {
  color: #4169E1 /* fallback for older browsers */
  color: var(--key-color);
}

Of course this could (and probably should) be expanded to handle color schemes if this theme ships with them, but that's a lot more complex. Starting small still makes a huge difference.

from twentynineteen.

I don't believe this ended up happening for launch, due the compressed timeline and other priorities. I'm going to close this issue rather than migrate it over to Trac, as it's not quite actionable at this stage. If anyone has ideas for using one of the custom properties mentioned moving forward, feel free to open up a Trac ticket for discussion.

Thank you!

from twentynineteen.