Browser Support

Not all CSS features work in every browser. Understanding browser support and how to handle it is essential.

Checking Browser Support

Use caniuse.com — the definitive resource for checking which browsers support which CSS features:

• Visit caniuse.com
• Search for any CSS property
• See which browsers and versions support it

Vendor Prefixes

Some newer CSS features need vendor prefixes for older browsers:

/* Vendor-prefixed versions */
.box {
    -webkit-backdrop-filter: blur(10px); /* Safari */
    backdrop-filter: blur(10px);         /* Standard */

    -webkit-user-select: none;  /* Safari */
    -moz-user-select: none;     /* Firefox */
    user-select: none;           /* Standard */
}

Fallback Values

/* Provide a fallback for older browsers */
.box {
    background: #3498db;                    /* Fallback */
    background: linear-gradient(#3498db, #2c3e50); /* Modern */
}

.text {
    color: black;                           /* Fallback */
    color: color-mix(in srgb, blue, red);   /* Modern */
}

Feature Queries

/* Only apply if browser supports grid */
@supports (display: grid) {
    .layout {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Fallback for browsers without grid */
.layout {
    display: flex;
    flex-wrap: wrap;
}

Best Practices

• Always provide fallbacks for critical visual properties
• Use autoprefixer tools to add vendor prefixes automatically
• Test in multiple browsers