DEV Community

Discussion on: CSS Frosted glass credit card

View post
Collapse
 
oovictorfranco profile image
Victor Franco • • Edited

One suggestion would be to wrap the entire backdrop-filter in @supports to avoid browser read failures.

@supports ((-webkit-backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%)) or (backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%))) {
  .card {
    &:before {
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
      content: '';
      height: 100%;
      position: absolute;
      width: 100%;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dailydevtips1 profile image
Chris Bongers •

I've seen that one, but it won't really fix it for the browser, it will just not have the whole effect then?

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ • 
  .card {
    &:before {
Enter fullscreen mode Exit fullscreen mode

Is there any reason for nesting that? It seems weird as the original code wasn't nested and this literally does nothing other than decrease readability 🤷

Collapse
 
johnylab profile image
João Ferreira •

I think nesting increases readability.

Collapse
 
swagwik profile image
Sattwik Sahu •

Your suggestion is in Sass syntax, for anyone who's getting confused why there's nesting in it. Sass is actually like a much better version of CSS, just that you can do a lot more with it.