ブラウザー毎にCSSを変える

TextAreaのBorder Colorを各ブラウザー毎に変えるCSSを記述してみる。

Firefoxにだけ適用させる

@-moz-document url-prefix() {
    textarea {
        border-color: #ff0000;
    }
}

Safariにだけ適用させる

_::-webkit-full-page-media, _:future, :root textarea {
    border-color: #00ff00;
}

Microsoft Edgeにだけ適用させる

@supports (-ms-ime-align:auto) {
    textarea {
        border-color: #0000ff;
    }
}

Chromeにだけ適用させる

@media screen and (-webkit-min-device-pixel-ratio:0) {
    textarea {
        border-color: #ffffff;
    }
}

IE11にだけ適用させる

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    textarea {
        border-color: #0f0f0f;
    }
}