Difference Between "-Webkit-Text-Fill-Color" and "Color"

Difference between -webkit-text-fill-color and color ?

From the WebKit blog:

text-fill-color – This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.

So yes, they are the same, but -webkit-text-fill-color will take precedence over color if the two have different values.

I think the rationale for this is that you can choose a different color if you want when using -webkit-text-stroke, but it will gracefully fall back to color if -webkit-text-stroke isn't available (and thus -webkit-text-fill-color isn't either). There may be cases where you would otherwise end up with unreadable text.

Please note that, as of 2021, -webkit-text-fill-color (and probably other -webkit prefixed properties) are not necessarily exclusive to WebKit-based browsers (i.e. it works in Firefox).

How can I set -webkit-text-fill-color in vanilla javascript

Just use element.style.webkitTextFillColor = "color"

In React, what case should a CSS property name beginning with -webkit be converted to?

Is there any specific reason why you're using this? If not, you should be using color property. MDN does not recommend using this.

<Component styles={{color: 'blue'}} />

UPDATE

This is a MUI-related issue. Here is the answer to "How to override the default placeholder colour of the TextField MUI component" :

import React, {useState, useEffect} from "react";
import {TextField, Theme} from "@mui/material";
import {makeStyles, styled} from "@mui/styles";

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        '& input::placeholder': { //This is meant to change the place holder color to green
            color: 'green !important'
        }
    }
}))

const MuiTextF = () => {
    const classes = useStyles()


    return <div style={{background: 'black'}}><TextField placeholder={'i should be green'} className={classes.root}/></div>
}

export default MuiTextF;

UPDATE 2

In order to change disabled version, you should do:

import React from "react";
import {TextField, Theme} from "@mui/material";
import {makeStyles} from "@mui/styles";

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        '& .Mui-disabled::placeholder': { //This is meant to change the place holder color to green
            color: 'green !important'
        }
    },
}));

const MuiTextF = () => {
    const classes = useStyles()
    return <div style={{background: 'black'}}><TextField disabled={true} className={classes.root} placeholder={'i should be green'}/>
    </div>
}

export default MuiTextF;

Is using text-fill-color for clipping text in css actually necessary?

-webkit-text-fill-color is just a WebKit-specific variant of color that's used in conjunction with -webkit-text-fill-stroke (and, as you've seen, -webkit-background-clip: text. It is documented in the Safari CSS Reference.

There is no difference between -webkit-text-fill-color and color, except that when both properties are specified, WebKit will use the former. You can use this to your advantage to specify that the text should be transparent only in WebKit-based browsers to allow -webkit-background-clip: text to work, while gracefully degrading to some other color in other browsers.

-webkit-text-fill-color is not new. It has been part of WebKit since perhaps the very beginning. Whoever told you that it's part of some new and upcoming standard was equally misinformed. Toss the -moz- and -o- prefixes — they don't exist for this property, because again it's WebKit-specific, and not at all part of CSS3.

---

Related Topics