CSSのメディアクエリでは、ブラウザ別に指定を切り替えることが出来ます。
特定のブラウザだけレイアウトが崩れてしまう時などに活用すると便利な機能です。
この記事では「Google Chrome」「Firefox」「Safari」「Microsoft Edge」「Internet Explorer11（IE11）」、それぞれのブラウザごとにCSSを指定する方法をご紹介したいと思います。

ブラウザは日々アップデートを繰り返されるので古い記事で紹介されている指定方法ではうまくいかない場合があります。

ブラウザごとにCSSの指定を切り替える方法

Google Chromeの場合

メディアクエリで「Google Chrome」だけにCSSを指定したい場合はこちら。

/* Google Chromeの場合 */
_:lang(x)::-internal-media-controls-overlay-cast-button, セレクタ {

}

下の実装例では、「Google Chrome」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
_:lang(x)::-internal-media-controls-overlay-cast-button, p{
    color: #000;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

Firefoxの場合

メディアクエリで「Firefox」だけにCSSを指定したい場合はこちら。

/* Firefoxの場合 */
@-moz-document url-prefix(){
    セレクタ {

    }
}

下の実装例では、「Firefox」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
@-moz-document url-prefix(){
    p{
        color: #000;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もしくはこちら。

/* Firefoxの場合 */
_:lang(x)::-moz-placeholder, セレクタ {

}

下の実装例では、「Firefox」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
@-moz-document url-prefix(){
    p{
        color: #000;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

Safariの場合

メディアクエリで「Safari」だけにCSSを指定したい場合はこちら。

/* Safariの場合 */
_:lang(x)+_:-webkit-full-screen-document, セレクタ {

}

下の実装例では、「Safari」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
_:lang(x)::-moz-placeholder, p {
    p{
        color: #000;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

もしくはこちら。

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, セレクタ {

    }
}

下の実装例では、「Safari」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, p {
        color: #000;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

Microsoft Edgeの場合

「Microsoft Edge」にはレガシー版とChromium版の2種類あります。「Microsoft Edge（EdgeHTML）」がレガシー版で、「Microsoft Edge（Chromium）」がChromium版です。

メディアクエリで「Microsoft Edge（EdgeHTML）」だけにCSSを指定したい場合はこちら。

/* Microsoft Edge（EdgeHTML）の場合 */
@supports (-ms-ime-align:auto){
    セレクタ {

    }
}

下の実装例では、「Microsoft Edge（EdgeHTML）」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
@supports (-ms-ime-align:auto){
    p{
        color: #000;
    }
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

メディアクエリで「Microsoft Edge（Chromium）」だけにCSSを指定したい場合はこちら。

/* Microsoft Edge（Chromium）の場合 */
_:lang(x)::-ms-, セレクタ {

}

下の実装例では、「Microsoft Edge（Chromium）」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
_:lang(x)::-ms-, p{
    color: #000;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

Internet Explorer11（IE11）の場合

メディアクエリで「Internet Explorer11（IE11）」だけにCSSを指定したい場合はこちら。

/* Internet Explorer11（IE11）の場合 */
_:-ms-lang(x)::-ms-backdrop, セレクタ {

}

下の実装例では、「Internet Explorer11（IE11）」で閲覧した場合のみ、テキストが表示されます。

p{
    color: #fff;
}
_:-ms-lang(x)::-ms-backdrop, p{
    color: #000;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
jsを使わなくても、CSSのみでブラウザごとに表示を切り替えることが出来ます。
「Google Chrome」の時だけレイアウトが崩れる等、ブラウザごとの違いが起こった際、気軽に使うことが出来ますね。