【CSS】ホームページの表示がブラウザによって違う件

ブラウザのCSS表示の違いについてホームページ

ホームページを作るうえで、レイアウトに力を入れるならCSSの設定は避けて通れません
CSSの便利ツールがいくつかあって、ブラウザを開きながらCSSを編集ができ、さらにそのまま編集箇所を反映することができます

WordPressを使えば、CSSを動的に更新しながら調整できるから便利です

他にもブラウザの機能としても動的に更新できるものもあったりします

FirefoxプラグインにEditCSSWeb Developerなどがあります
Web Developerの方が多機能ですし、Chromeにも同様に使えるのでいいかもしれません

ただ、注意も必要です
ブラウザによっては「CSS の認識の違い」があります

ブラウザにはレンダリングエンジンというもの使ってて、HTMLやCSSなどを解析し、実際の画面に描画します
つまり、レンダリングエンジンが違うとHTMLやCSSの解釈に差があるので、ブラウザによってデザインが崩れるという現象がおこるわけです

主要ブラウザに関して、次のようにレンダリングエンジンが変わってきます

Trident(IEコンポーネントブラウザ):IE、Sleipnir
Geckoレンダリングエンジンブラウザ:Firefox
Blink系レンダリングエンジン:Google chrome、Opera
EdgeHTMLレンダリングエンジン:microsoft edge

つまり、chromeでCSSレイアウトそろえたら、Operaでも問題なく同様に表示されるって事ですが、他のブラウザに関しては、ずれて表示されることはあります

ちなみにブラウザによる表示の違いがあるタグは、「padding」「margin」「border」・・・など
頻繁に使うものです

IEはサービス終了になりましたが、chromeとEdgeは互換があってほしかったです

 

コンディショナルコメントについて

ブラウザによって、CSSの解釈が違うので、同じCSSを読み込んでも表示が異なる時があります
それを防ぐには「コンディショナルコメント」「CSSハック」という方法があります

「コンディショナルコメント」とは

条件分岐によりタグを選択することができるが、HTMLに記述するので、対象のソースボリュームが増えてしまうこともあります
分岐の条件として”IE”と”IE以外”のみだけの対応になり、IE以外のブラウザ種別では対応外となります(MacIEなども対応外です)

構文

<!–[if <条件> ]>
(内容)
<![endif]–>

<条件> に合致するものが(内容)に記載されているHTMLソースを処理します
例えばここに “<style type=”text/css” media=”all”>@import url(http://***.***.co.jp/***.css);</style>”
などの構文を記載すれば、別のスタイルシートを読み込ませることも可能です
尚、条件には “IE” ベースでしか選択できない

■<条件> の種類

<!–[if IE]>全てのバージョンが対象
<!–[if IE 5 – 8]>指定したバージョンのみ対象(IE5.5 については “IE 5.5000” と記載)
<!–[if gte IE 6 ]>指定したバージョン以上が対象 gte = Greater-Than or Equal
<!–[if gt IE 6 ]>指定したバージョンより上が対象 gte = Greater-Than
<!–[if lte IE 8 ]>指定したバージョン以下が対象 gte = Less-Than or Equal
<!–[if lt IE 8 ]>指定したバージョンより下が対象 gte = Less-Than
<!–[if !IE 8]>IE 8 以外 の IE が対象
<![if !IE ]>IE以外 のブラウザが対象(唯一書式が違う)

 

「CSSハック」とは

ブラウザのバグを逆手にとって利用する事ができ、ブラウザやそのバージョン毎に細かい設定が可能です
しかし、CSSファイルにのみ記載すればいいが、ソースが長くなってしまうというデメリットも
また、ブラウザが新しいバージョンになった場合に使えなくなることがあります

構文

<条件>, body { (内容); }

<条件> に合致するものが(内容)に記載されているHTMLソースを処理します
例えばここに “<style type=”text/css” media=”all”>@import url(http://***.***.co.jp/***.css);</style>”
などの構文を記載すれば、別のスタイルシートを読み込ませることも可能です

■<条件> の種類

_:-ms-lang(x)::-ms-backdropIE11
_:-ms-lang(x)::backdropEdgeのみ(EdgeHTML)
_:lang(x)::-ms-Edgeのみ(Chromium)
_:lang(x)::-internal-media-controls-overlay-cast-buttonChromeのみ
_:lang(x)::-moz-placeholderFirefoxのみ
_:lang(x)+_:-webkit-full-screen-documentSafariのみ

結論としては使用シェアの高い「IE」とそれ以外のブラウザで意識すれば
「コンディショナルコメント」の方が便利に使えそうですが、「コンディショナルコメント」は、IE5 からの機能なため、IE4以下 は対象外
そして、E10、IE11ではコンディショナルコメントが使えません
さらに2022年6月16日までにIEのサポートが終了しましたので、使用する人は激減したと思います

OEM版のOSのIEでしたら、使い続けられるかもしれませんが、WindowsUpdateによって使えなくなった(勝手にアンインストール?)ケースも多いようです

IEとそれ以外のブラウザで表示の違いが大きいので、IEさえ使用しなければ、考慮の必要はないかもしれません

 

標準、互換モードについて

HTMLの形式が徐々に進化するにつれ、CSS も変化し続けています
CSS の解釈の仕方は二つあります

標準モード・・・W3Cの標準的仕様に準拠した解釈でページを表示する
互換モード・・・古い HTMLバージョン で書かれたページを表示する

ブラウザ(レンタリングエンジン)によっては、デフォルトで使用されるモードがそれぞれ違うので、表示されたページのレイアウトが異なることがあります

以下の3つの方法を使用することで、表示の違いを防ぐことができます

1.「DOCTYPE宣言」し、Webページ 単位で設定する
2.Webサーバ上で HTTPヘッダ をカスタムし、Webサイト 全体を設定する
3.ブラウザでのモードの切り替えを行う

※1、2を両方設定されている場合は “1” が優先される

今回は、一番使用されると思われる、”1” の「DOCTYPE宣言」について説明します

「DOCTYPE宣言」は ソースの文頭でする必要があるので
<html>タグ よりも前でする必要があります

「DOCTYPE宣言」の種類と各ブラウザの対応状況は以下の表を参照してください

(X)HTML形式DOCTYPE宣言IE
6
NSFF
Sf
Ch
OP
宣言なし互換互換互換互換
HTML4.01
Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>標準標準標準標準
HTML4.01
Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
標準標準標準標準
HTML4.01
Tranditional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>互換標準標準互換
HTML4.01
Tranditional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
標準標準標準標準
XHTML1.0
Strict
<?xml version=”1.0″ encoding=”…”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
互換標準標準標準
XHTML1.0
Tranditional
<?xml version=”1.0″ encoding=”…”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
互換標準標準標準
XHTML1.1<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
互換標準標準標準

IE・・・Internet Explorer、NS・・・Netscape、FF・・・Firefox、Sf・・・Safari、Ch・・・Chrome、OP・・・Opera
IEは6基準、他のブラウザはバージョンによってデフォルトのモードが変わるものもある

タイトルとURLをコピーしました