Comment réparer les sélections brillantes dans Webkit (Safari)

Problèmes de compatibilité entre navigateurs : style des éléments HTML <select> dans Safari

Maintenir un comportement cohérent des applications sur différents moteurs de navigateur peut être un défi. Récemment, lors du développement de devpad (un projet dans lequel j'ai intentionnellement évité les frameworks d'interface utilisateur et m'étais fortement appuyé sur des éléments HTML de base), j'ai rencontré un problème particulier avec l'élément <select> dans Safari.

Au départ, le développement s'est déroulé sans problème à l'aide d'Arc (un navigateur basé sur Chromium). Cependant, les tests dans Safari ont révélé une différence visuelle inattendue :

Cette image montre la différence choquante entre l'élément <select> rendu dans Chromium et Safari :

Le rendu Safari présentait une apparence obsolète et brillante, contrairement à l'aspect épuré de Chromium. Après des recherches approfondies sur Stack Overflow et ChatGPT, j'ai finalement trouvé une solution.

Une suggestion courante de Stack Overflow consiste à utiliser -webkit-appearance: none;. Cependant, cela supprime l'indicateur de flèche déroulante, ce qui a un impact sur l'expérience utilisateur.

Une approche plus prometteuse, mentionnée par la suite, consistait à utiliser une image d'arrière-plan SVG. Cela s'est avéré délicat lors de l'application également d'une couleur de fond.

En utilisant les icônes Lucide.dev, j'ai incorporé une flèche SVG. Cependant, au départ, les changements de couleur dynamiques via des variables CSS échouaient. Une requête @media au sein de l'élément select s'est également révélée inefficace :

<code class="language-css">select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="none" height="24" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 9 12 15 18 9"></path></svg>') no-repeat;
  /* ...rest of the CSS... */
}</code>

La solution, grâce à ChatGPT, impliquait d'encoder en URL la chaîne SVG :

<code class="language-css">select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') no-repeat;
  background-size: 18px;
  background-position: calc(100% - 3px) 50%;
  background-repeat: no-repeat;
  background-color: var(--input-background);
  padding-right: 24px;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') !important;
  }
}</code>

Le résultat final : des éléments <select> cohérents et compatibles avec tous les navigateurs avec prise en charge des modes sombre/clair.

Cette solution devrait permettre aux autres de gagner du temps et des efforts pour relever ce défi de style commun à tous les navigateurs. Pour plus de détails sur le projet devpad, veuillez vous référer à mon dernier article de blog.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!