Safariでの条件付きCSSの使用方法

2024-02-13 21:55 Safari CSS 条件付きスタイル
  1. User Agentを使用した条件付きCSS: SafariはUser Agentに特定の文字列を含んでいるため、これを利用してSafariのみに適用するCSSを指定することができます。以下はその例です。
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    /* Safari専用のスタイル */
  }
}
  1. Safariのバージョンを使用した条件付きCSS: SafariのバージョンによってもCSSの動作が異なる場合があります。そのため、特定のバージョンのSafariにのみ適用するCSSを指定することもできます。以下はその例です。
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-marquee-direction:inherit) {
    /* Safari 14以前のバージョンにのみ適用するスタイル */
  }
}
  1. JavaScriptを使用した条件付きCSS: JavaScriptを使用することで、ブラウザの種類やバージョンを判定し、それに基づいてCSSを適用することもできます。以下はその例です。
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
  /* Safariのみに適用するスタイル */
}

以上がSafariでの条件付きCSSの使用方法とコード例です。これらの方法を活用することで、Safariに特化したスタイルを指定することが可能です。ただし、CSSの互換性に留意しながら使用するようにしてください。