.box {
    /* Webkit (Chrome, Safari) */
    -webkit-transform: rotate(45deg);
    
    /* Mozilla (Firefox) */
    -moz-transform: rotate(45deg);
    
    /* Microsoft (IE, Edge) */
    -ms-transform: rotate(45deg);
    
    /* Opera */
    -o-transform: rotate(45deg);
    
    /* Standard */
    transform: rotate(45deg);
}

.flex-container {
    /* Old syntax */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    
    /* Modern syntax */
    display: -webkit-flex;
    display: flex;
}

.grid-container {
    /* IE 10-11 */
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    
    /* Modern */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* Feature queries */
@supports (display: grid) {
    .container {
        display: grid;
    }
}

@supports not (display: grid) {
    .container {
        display: flex; /* Fallback */
    }
}

.box {
    background-color: #007bff; /* Fallback */
    background-color: rgba(0, 123, 255, 0.8); /* Modern */
}

.text {
    font-size: 16px; /* Fallback */
    font-size: clamp(14px, 2vw, 20px); /* Modern */
}

/* IE 10-11 only */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie-only {
        /* IE-specific styles */
    }
}

/* Safari only */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .safari-only {
            /* Safari-specific styles */
        }
    }
}

/* Base styles for all browsers */
.button {
    padding: 10px 20px;
    background-color: blue;
}

/* Enhanced styles for modern browsers */
@supports (backdrop-filter: blur(10px)) {
    .button {
        backdrop-filter: blur(10px);
    }
}

.box {
    /* Fallback */
    background: blue;
    
    /* Modern gradient */
    background: linear-gradient(to right, blue, purple);
}