ブラウザ別に適用させるCSSハック

***************************************************************************

【前提】
・CSS3使用
 →現時点全てのブラウザはCSS3をサポートしています。
・IE10以降は基本的に対象外となる
 →Microsoftも古いブラウザをサポートされていません。


 CSSを作成する時に、特定のブラウザーで同じのCSSコードでも正しく動作できないという問題がよく発生しています。
 解決のために特定のブラウザーに対して、特定のCSSコードを作成する必要があります。
 CSSで特定のブラウザを区別する方法は次のとおりです:
 ※2020年1月のChromiun版のEdgeブラウザもサポートしています。

/* IE11 */
_:-ms-lang(x)::-ms-backdrop, .selector {}

/* Edge(edgeHTML) */
_:-ms-lang(x)::backdrop, .selector {}

/* Edge(Chromium) */
_:lang(x)::-ms-, .selector {}

/* Chrome */
_:lang(x)::-internal-media-controls-overlay-cast-button, .selector {}

/* Safari */
:lang(x)+:-webkit-full-screen-document, .selector {}

/* Firefox */
_:lang(x)::-moz-placeholder, .selector {}

***************************************************************************