Modifier le CSS en fonction du navigateur/système d'exploitation

Modifier le CSS en fonction du navigateur/système d'exploitation

Tech web
Cloche d'abonnement aux notifications | |
  • Recevoir les notifications

La première question que l’on peut se poser en voyant le titre de cette article, c’est « Pourquoi aurais-je besoin de faire cela ? ». 

Peut-être pour une question d’ergonomie : vous pourriez avoir envie de déplacer le bouton de fermeture d’une popup à gauche lorsque vous êtes sur MacOS et le mettre à droite lorsque vous êtes sur Windows.

Il pourrait s’agir également de corriger un problème assez fréquent au niveau des polices d’écriture. En effet, les systèmes d’exploitation n’affichent pas toujours le même espacement en dessus et en dessous des polices d’écriture. Vous ne pourrez donc pas vous contenter de corriger cela avec une simple règle CSS qui marcherait sur tous les systèmes et tous les navigateurs.

Voici donc différentes solutions qui pourraient vous aider en fonction du type de problème que vous souhaitez résoudre.

Pour l’exemple, voici le bouton dont nous allons modifier le padding-top et le padding-bottom (espacement en dessus du texte et en dessous).

bouton sur windows

Problème, votre bouton apparaît comme cela sur un système d’exploitation de chez Apple :

bouton sur device Apple

 

1er cas de figure : vous voulez faire une modification CSS sur Safari, qu’importe le système d’exploitation.

C’est le cas le plus simple, mais peut-être le moins utile. Une « media query » CSS suffit.

/* Safari */
@media not all and (min-resolution: 0.001dpcm) {
  .btn {
    padding-top: 14px;
    padding-bottom: 8px;
  }
}

 

2ème cas de figure : vous voulez faire une modification CSS sur MacOS uniquement (mais sur n’importe quel navigateur ouvert sur ce système d’exploitation).

Pour cette variante et les suivantes, nous allons utiliser du JavaScript en plus du CSS.

// changement CSS sur MacOS uniquement
var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;

if (isMac) {
    $('.btn').addClass('t-is-mac');
}

Attention, j’utilise ici la librairie jQuery. Si vous ne l’avez pas, vous pouvez ajouter une classe en passant par du JavaScript standard :

document.getElementsByClassName(btn).classList.add('t-is-mac-like');

On ajoute donc une classe à notre bouton. Si le bouton possède cette classe, il n’y a plus qu’à lui appliquer les modifications avec une simple règle CSS :

.btn.t-is-mac {
  padding-top: 14px;
  padding-bottom: 8px;
}

 

3ème cas de figure : vous voulez faire une modification CSS sur IOS uniquement

Il suffit de remplacer votre variable « isMac » par une nouvelle variable « isIOS » et de la définir comme cela :

// changement CSS sur iOS uniquement
var isIOS = /(iPhone|iPod|iPad)/i.test(navigator.platform);

if (isIOS) {
    $('.btn').addClass('t-is-ios');
}

Le CSS reste le même (à part le nom de la classe).

.btn.t-is-ios {
  padding-top: 14px;
  padding-bottom: 8px;
}

 

4ème cas de figure : vous voulez faire une modification CSS sur IOS et MacOS

// changement CSS sur iOS et MacOS
var isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);

if (isMacLike) {
    $('.btn').addClass('t-is-mac-like');
}

Là encore, on reprend le même code et on change la variable (et accessoirement le nom de la classe).

.btn.t-is-mac-like {
  padding-top: 14px;
  padding-bottom: 8px;
}

 

À noter que je n'ai pas mis les balises <script> pour le javascript et <style> pour le CSS. Mais je pars du principe que si vous lisez cela, vous savez comment cela fonctionne.

Catégories :
Tech web

Tags :
JavaScript CSS

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !