Can I use… is an invaluable resource that we all (hopefully) use on a regular basis, but what if you have an existing codebase that you want to evaluate for browser support? You could go through it manually, but that could be a lot of work. Thankfully, someone has put together an app and a Node.js module that can crawl your CSS and list what will break in what browser.
Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this:
.element {
background: linear-gradient(
to bottom,
red,
transparent
);
}
There is a pretty big gotcha here, though.
In Chrome (also Android), Firefox, and Edge, you’d be all good.
But in Safari (also iOS), you’d not be good.
The problem, the best I understand it, is that transparent is being interpreted (and interpolated) as “transparent black”.
To fix it, you have to set the color as a fully transparent version of that exact color. Like:
.element {
background: linear-gradient(
to bottom,
red,
rgba(255, 0, 0, 0)
)
}
[…]
Sass can help out, if you are using that:
.element {
background: linear-gradient(
to bottom,
#eb8fa9,
rgba(#eb8fa9, 0);
)
}