ZeroPlus Media > L_HTML/CSS > クロスブラウザ対応とは？ベンダープレフィックスとリセットCSSについて解説

クロスブラウザ対応とは？ベンダープレフィックスとリセットCSSについて解説

2023/08/16

この記事では「クロスブラウザ対応の方法」について解説します。

Webサイトを構築していると、あるブラウザではきれいに見えるのに、他のブラウザで見るとスタイルが崩れている、というようなことがよくあります。

ブラウザが異なると見え方が変わってくるのは、ブラウザごとに適用されている独自のスタイル差によるものです。

Web制作をするうえでは、ユーザーがどんな端末・どんなブラウザでWebサイトを見ても、見た目が整った正常に動作するサイトを構築する必要があります。

そのため、クロスブラウザ対応は必須です。

クロスブラウザ対応とは

ブラウザと聞いて、どんなブラウザを思い浮かべますか？

ブラウザといえば、大別すると下記のような種類があります。

Chrome
Edge
Firefox
Safari

その他にも、細かいブラウザを含めれば非常に多くのブラウザが存在します。

これらのブラウザでは、ブラウザによってHTMLやCSS、JavaScriptの表示結果が異なります。同じコードで作っていても、ブラウザによって見え方が変わってしまうのです。

ブラウザによって表示結果が異なるのは、CSSプロパティでブラウザごとにサポートしているものに差異があったり、ブラウザ特有のバグによるためです。Web制作者はこの問題に対応しながら、どんなブラウザであっても正しく意図通りに表示されるWebサイトを構築する必要があります。

その問題への対応をクロスブラウザ対応といいます。つまりクロスブラウザ対応とは、異なるブラウザでWebページを見たときでも、見た目と動作を同じにするための処理のことです。

クロスブラウザ対応は、利用者の多いブラウザに合わせて行うのが基本です。

デスクトップ版ブラウザは、ChromeとEdgeの2つで全体の80%のシェアを占め、EdgeとFirefoxを合わせれば約98％になります。一方で、日本のモバイル版各種ブラウザのシェアは、ChromeとSafariで合わせて約95%です。基本的にはそれら主要ブラウザに対して対応をするのが推奨されます。

日本で使われているPC版各種ブラウザのシェア率は、下記のサイトで確認できます。

Statcounter Global Stats

クロスブラウザ対応の方法

クロスブラウザ対応の方法としては、下記の2つがあります。

どちらの方法も必須となるので、両方対応するのがおすすめです。

ブラウザのデフォルトスタイルを無効化する
ベンダープレフィックスを付与する

ブラウザのデフォルトスタイルシートを無効化する

ChromeやSafariなどの各ブラウザは独自のスタイルを適用しているので、そのままの状態ではそれによる表示の違いが出てしまいます。そのため、「リセットCSS」を用いてデフォルトスタイルシートを無効化する必要があります。

例えば下記のコードが、リセットCSSを適用していない場合のWindowsPCでの各ブラウザでどのように表示されるか確認してみましょう。

<section class="section">
  <h2 class="title">h2見出し</h2>
  <div class="contents">
    <div class="imgbox">
      <img src="dummy.png" alt="">
    </div>
    <div class="textbox">
      <p class="text">仮の文章が入ります。仮の文章が入ります。仮の文章が入ります。仮の文章が入ります。</p>
      <a href="#" class="link">詳しく見る</a>
    </div>
  </div>
  <ul>
    <li>アイテム</li>
    <li>アイテム</li>
    <li>アイテム</li>
    <li>アイテム</li>
  </ul>
  <ol>
    <li>アイテム</li>
    <li>アイテム</li>
    <li>アイテム</li>
    <li>アイテム</li>
  </ol>
  <button>ボタン</button>
</section>

.section {
  background-color: orange;
}

.title {
  text-align: center;
  background-color: lightblue;
}

.contents {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgbox {
  margin-right: 16px;
  max-width: 50%;
}

.imgbox img {
  width: 100%;
}

.link {
  display: inline-block;
}

表示結果（Chrome）

表示結果（Firefox）

表示結果（Edge）

ブラウザごとにそれぞれのタグに独自のデフォルトスタイルが適用されているので、フォントが異なっていたり余白などが違って表示されています。

リセットCSSは、このようなブラウザ間で異なるデフォルトスタイルを無効化するCSSです。

リセットCSSには、いくつかの種類があります。

デフォルトスタイルを完全に打ち消すリセットCSS
デフォルトスタイルを統一するリセットCSS

デフォルトスタイルを完全に打ち消すリセットCSS

デフォルトスタイルを打ち消すリセットCSSは、まっさらな状態からスタイルを適用することができます。ブラウザ独自で適用されているスタイルがほぼ完全に打ち消されるので、デフォルトスタイルの仕様を気にせずスタイルを適用することができます。

有名なリセットCSSには次のようなものがあります。

ResetCSS：ブラウザのデフォルトスタイリングをほぼ無くすことができる。
destyle.css：RestCSSと同様だが、リセット力は強い。フォントサイズや余白関係もほぼ白紙状態になる

デフォルトスタイルを統一するリセットCSS

ブラウザ間のスタイルをある程度整ったデフォルトスタイルに統一することができます。

こちらの有名なリセットCSSだと下記のものがあります。

Normlize.css：値をすべてリセットではなく、ブラウザ間のスタイルを統一する。デフォルトCSSの見栄えを活かしたい場合に使用。
sanitize.css：Normlize.cssの拡張版。list-style:none;やbox-sizing: border-box;などよく使うCSSも指定されている

各リセットCSSは上記のリンクからコードを入手できます。

ブラウザ間のデフォルトスタイルによる差異は、リセットCSSによって平坦化・無効化されるので、コーディングしやすくなります。

リセットCSSを使う場合は上記リンクからCSSコードをコピーして、リセットCSS用のCSSファイル（reset.css）を作成してファイル内にコードを貼り付けます。

作成したリセットCSSファイルは、headタグの中に記述して読み込ませます。

その際に、リセットCSSはスタイル用のCSSよりも先に読み込ませることに注意してください。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css"> <!-- リセットCSSを先に読み込ませる -->
  <link rel="stylesheet" href="style.css" /> <!-- スタイル用のCSSはリセットCSSの後に読み込ませる -->
</head>

このようにすることで、リセットCSSによって一度ブラウザごとに当てられているスタイルを打ち消し、まっさらな状態にしてからメインスタイルを当てることができます。

ベンダープレフィックスを付与する

ベンダープレフィックスとは、ブラウザがサポートしていないCSSプロパティを、他のブラウザと差異なく表示するためのものです。主に試験的・非標準なCSSプロパティに対して付けられます。

HTMLやCSSなどの言語には古いバージョンや新しいバージョンが存在します。またブラウザによってもブラウザごとに古いバージョンや新しいバージョンが存在します。そのため同じCSSでも、そのCSSが適用されるブラウザと適用されないブラウザがあります。また、最新のブラウザで適用されても、古いバージョンのブラウザでは適用されないこともあります。

これらの問題を解決するために、ベンダープレフィックスがあります。

そのほかに、試験的・非標準なCSSプロパティがあります。これらは、あるブラウザでは使うことはできても、仕様が確定されるまでは他のブラウザでそのままでは使えません。

試験的なCSSプロパティが正式に採用されるまでは非常に時間がかかります。仕様確定までの間に各ブラウザでも先行して使えるようにしたいときに、ベンダープレフィックスを使用して対応します。

例えばChromeで、あるCSSプロパティがベンダープレフィックスなしで使用できても、他のブラウザではベンダープレフィックスを付ければ対応できる場合は、ベンダープレフィックスを併記する形で使用します。

ベンダープレフィックスには下記の種類があります。

ベンダープレフィックスの種類

-webkit-：Chrome、Safari、ほぼ全てのIOSブラウザ
-moz-：Firefox
-o-：古いOpera
-ms-：Internet Explorer、Microsoft Edge

例として、下記のように使用します。

<div>
  <p>仮の文章が入ります。</p>
 </div>

p {
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

このように通常の書き方に併記する形で、ベンダープレフィックスを付けたプロパティを記述します。現在、transformは主要なブラウザのほぼ全てに対応しているため、この例ではベンダープレフィックスの有無によって挙動が変わることはありません。

CSSプロパティまたは値の「前に」ベンダープレフィックスを記述することに注意しましょう。現在、ベンダープレフィックスが必要でも、将来的にベンダープレフィックスが不要になることに備えて、「ベンダープレフィックスなしの記述も最後に書く」ようにしましょう。

CSSプロパティがどのブラウザに対応しているかは、以下のサイトで調べられます。

Can I use..

Can I use..のサイトにアクセスした後、Can I useのあとに調べたいプロパティ名を入力します。

例えば「transform」と入力すると、下記のようにサポートしているブラウザを確認することができます。

数字はバージョンを示しています。緑色がサポート済みで、ベンダープレフィックスなしで使用できます。緑色の右上に黄色マークがあるものは、ベンダープレフィックスを付けることで対応可能なことを示しています。

一方で赤色のブラウザやバージョンではそのプロパティをサポートしていません。

例えばtransformは、Firefox 2〜3、Opera10.1、Internet Explorer 6〜8、Opera Miniのバージョンやブラウザではサポートされていません。（ベンダープレフィックスをつけても挙動に反映されません）

Firefox3.5〜15やOpera11.5、Internet Explore 9やChrome 4〜35、Safari3.1〜8からは緑色マークの右上にアイコンが付いているので、ベンダープレフィックスを付与すれば、transformを使用することができます。

なお、2023年現在、最新のブラウザではほとんどのCSSプロパティがベンダープレフィックス不要となっています。しかし、全てのユーザーが最新のブラウザを使っているとは限らないということに留意しておきましょう。

ベンダープレフィックスを付与する方法

ベンダープレフィックスを付与する方法はいくつかあります。

ベンダープレフィックス付与の方法

自ら記述する
Autoprefixer（VSCode拡張機能）
Gulpを使う
オンラインツールを使う（Autoprefixer CSS online）

Gulpや拡張機能、オンラインツールなどを使えば、ベンダープレフィックスを付与した状態でCSSを出力してくれます。ベンダープレフィックスを付与するなら、それらのツールを使って対応するのがおすすめです。

Gulpや拡張機能の場合、自動でベンダープレフィックスが付与できるので、出力したCSSをそのままサーバーにアップロードすれば反映されます。

このように、ブラウザ間でサポートされていないCSSなどはベンダープレフィックスで対応することができます。

ここでは、オンラインツールを使ったやり方をメインに解説していきますが、他の方法についても簡単に解説します。

自ら記述する

CSSプロパティを見ながら、自分でベンダープレフィックスを記述する方法です。

CSSはときに何千行にもなるので、自分で記述する場合、記述漏れや記述ミスが発生する可能性があります。また、時間もかかります。

自分で記述する方法は、そのような理由からおすすめしません。

Autoprefixer（VSCode拡張機能）

VSCode拡張機能のAutoprefixerを使うやり方です。

CSSファイルを開き、Autoprefixer: Runのコマンドを入力すると、自動的にベンダープレフィックスが付与されます。

Gulpを使う

Gulpとは、画像圧縮やSassのコンパイル、ファイル圧縮などさまざまなタスクを自動化するツールの一つです。

Gulpの機能にautoprefixerを導入すると、自動でベンダープレフィックスを付与した状態でCSSを出力してくれます。CSSファイルを更新した場合でも、その都度ベンダープレフィックスを付与してくれたりもできます。

オンラインツールを使う（Autoprefixer CSS online）

オンラインツールを使ってもベンダープレフィックスを付与することができます。ここでは、Autoprefixer CSS onlineを使って解説します。

Autoprefixer CSS onlineのサイトを開くと、下記のような画面になります。

左側に「ベンダープレフィックスを付与したいCSS」を貼り付けると、右側に「ベンダープレフィックスが付与されたCSS」が表示されます。

画面下部のBrowserslistで、ブラウザのどのバージョンまで対応するか設定することができます。例えば、browserslist last 4 versionsでは、最新バージョンから4つ前まで対応したベンダープレフィックスが付与されます。

ベンダープレフィックスを使った具体例

ベンダープレフィックスを使用した具体例をいくつか紹介します。

スクロールバーをブラウザごとに非表示
CSSで行数制限

スクロールバーをブラウザごとに非表示

スクロールバーを非表示にする場合、下記のコードで実現できます。

<div class="container">
   <p>1:スクロールバーを非表示にするのはかんたん</p>
   <p>2:クロスブラウザ対応が必要です</p>
   <p>3:どのブラウザからみても同じく見えるか確認してください</p>
   <p>4:スクロールバーを非表示にするのはかんたん</p>
   <p>5:クロスブラウザ対応が必要です</p>
   <p>6:どのブラウザからみても同じく見えるか確認してください</p>
</div>

.container {
  scrollbar-width: none; /*Firefox対応のスクロールバー非表示コード*/  
  -ms-overflow-style: none;/*Internet Explore対応のスクロールバー非表示コード*/  
}

.container::-webkit-scrollbar {  
  display: none; /*Google Chrome、Safari、Microsoft Edge対応のスクロールバー非表示コード*/
}

.container {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  white-space: nowrap;/*テキストの改行を防ぐコード*/
  overflow: scroll; /*親要素から子要素がはみ出した場合、スクロール領域にして隠す指定*/
}

表示結果

-ms-overflow-styleや-webkit-scrollbar、scrollbar-widthなどを使い、ブラウザごとの対応でスクロールバーが非表示になるように適用しています。

ただし、スクロールバーを非表示にするやり方はユーザビリティ的にあまりよくないやり方です。

スクロールバーはブラウザ標準に実装されている、広く認知されたユーザーインターフェース（UI）コンポーネントの一つです。Webサイトに限らずアプリでも採用されています。

スクロールバーそれ自体を「隠す」ことは判断が分かれるところです。

標準的なキーボード操作・マウスホイール操作で上下スクロール可能であっても、そういった操作方法を知らないユーザーは少なくありません。また、本来スクロールバーが存在するところにスクロールバーが表示されていない、もしくはスクロールできるのか一見して分からない、といった場合には、ユーザーに無意識に考えさせてしまい、意図しないストレスを与える原因になります。

その場合、スクロールバーを非表示にするのではなく、スクロールバーの見た目をWebサイトに合わせたスタイルに変更するなど、別な方法を考えるのがいいでしょう。

こちらの方法に関しては、下記の記事で詳しく解説しています。

【CSS】ブラウザごとにスクロールバーを非表示にする最新の方法

CSSで行数制限

CSSで任意の行数以上になったら文末を「...」にする方法です。

See the Pen スクロールバー非表示 by ZeroPlus (@zeroplus-programming) on CodePen.

<div class="box">
  <p class="box__text">仮の文章です。仮の文章です。仮の文章です。仮の文章です。仮の文章です。仮の文章です。仮の文章です。</p>
</div>

.box {
  width: 240px;
}

.box__text {
  font-size: 20px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2; // 2行以上で文末を「...」にする
  -webkit-box-orient: vertical;
}

表示結果

テキストが2行以上になると文末が「...」になりました。3行以上、4行以上など任意の行数で文末を「...」にする場合は、-webkit-line-clampの値を変更してください。

displayプロパティに、-webkit-boxが設定されていて、かつbox-orientにvertibalが設定されているときのみ適用されます。なお、box-orientやline-clampは試験的なプロパティのため、2023年現在ではベンダープレフィックスなしで使うことのできるプロパティ（標準機能）ではありません。

-webkit-line-clampや-webkit-box-orientなどは2023年7月現在、下記のように緑色マークに右上に黄色アイコンが付いていることから、最新ブラウザではベンダープレフィックスを付与することで対応できます。

しかし、「黄色アイコンがない状態の緑色マークがない」ため、「ベンダープレフィックスなしで対応しているブラウザは現状ない」ということになります。そのためCSSコードの、下記部分に関してはベンダープレフィックスなしの記述がありません。

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

クロスブラウザ対応手順

対応を考慮して、Webサイトをコーディングする場合は下記の手順で行うといいでしょう。

オンラインツールでベンダープレフィックスを付与する場合

ローカルでWebサイトをコーディングする（その際にChromeの検証ツールで適宜表示確認する）
ローカルで表示確認後、オンラインツールでベンダープレフィックス付与前のCSSを貼り付ける
→ベンダープレフィックスが付与されたCSSが出力されます
ベンダープレフィックス付与後のCSSとそれ以外のファイルをテストサーバーにアップロードする
PC（Windows, Mac)とモバイル端末（Android, iOS）上で、Chrome, Safari, Firefox, Edgeでそれぞれ表示確認する。
表示崩れがあれば、ローカルでCSSを修正し、手順2に戻ってやり直す

Gulpや拡張機能を使っている場合は、自動でベンダープレフィックスが付与されるので、2の手順が省略されます。出力されたCSSとそれ以外のファイルをそのままテストサーバーにアップロードして表示確認すればだいじょうぶです。