Régler le code CSS en fonction du navigateur Firefox, Chrome, Internet Explorer, Safari, Edge
/* Chrome version 29 and above */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { selector{ property:value; } }
/* Chrome version 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { selector { -chrome-:only (; property:value; );} } /* Chrome, Safari, and also the Edge Browser and Firefox */ @media and (-webkit-min-device-pixel-ratio:0) { selector { property:value; } }
<!--[if IE]> <link rel="stylesheet" type="text/css" href="https://80hg.francksinimale.fr/only-ie.css" /> <![endif]--> /* Using conditional comments with head section CSS */ <!--[if IE]> <style type="text/css"> /************ css for all IE browsers ****************/ </style> <![endif]--> /* Using conditional comments with HTML elements */ <!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]--> /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { selector { property:value; } } /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9 { selector { property:value; } } /* IE6,7 */ @media screen\9 { selector { property:value; } } /* IE8 */ @media \0screen { selector { property:value; } } /* IE9,10 */ @media screen and (min-width:0\0){ selector { property:value; } }
/* Edge */ @supports (-ms-ime-align:auto) { selector { property: value; } }
/* Mozilla */ @-moz-document url-prefix() { selector { property:value; } } or
@supports (-moz-appearance:none) { selector { property:value; } }
/* Safari 11+ */ @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (stroke-color:transparent) { selector { property:value; } }} /* Test website on real Safari 11+ */ /* Safari 10.1 */ @media not all and (min-resolution:.001dpcm){ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) { selector { property:value; } }} /* Safari 6.1-10.0 (but not 10.1) */ @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ @media { selector { property:value; } }}
Et ça marche
Source : https://www.browserstack.com/guide/create-browser-specific-css