Régler le code CSS en fonction du navigateur Firefox, Chrome, Internet Explorer, Safari, Edge

Publié le - Modifié le 19 août 2022 | Aucun commentaire

Classé dans : Astuce, Intervention délicate en 10 min. | Mots clés : CSS, 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 smiley

Source : https://www.browserstack.com/guide/create-browser-specific-css

Écrire un commentaire

Quelle est le quatrième caractère du mot prelkts2 ?

Fil RSS des commentaires de cet article