ワードプレスのブログをカスタマイズしたらブラウザによって表示が崩れる

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

ワードプレスのブログをカスタマイズしたらブラウザによって表示が崩れる

ワードプレスでブログをカスタマイズしてるとブラウザによって崩れて表示さ
れる事があります。それを解消してくれるのが「cssハック」です。

ブラウザである「グーグルクローム」でstinger　5をカスタマイズしています。

そんな時ブラウザである「インターネットエクスプローラー（ie 11）」でカ
スタマイズ中のブログを観てみたら、表示が崩れていた。

そんな事ってあなたはありませんか？

私の場合、ブログトップページの記事一覧をカスタマイズしました。
グーグルクローム上では、私が思っていたようにカスタマイズ出来たのですが、
ie(11)で観たら記事一覧の上の余白部分が狭くなっていました。

いろんなサイトをググッて、試行錯誤で「margin」「padding」等を変更して
も一向に変わらない。

とりあえずたどりついたのが　「cssハック」

cssハックとは

CSSハック（英：CSS Hack）は、Webサイト作成の際にWebブラウザ間（以下単
に「ブラウザ」）で異なるCascading Style Sheets(CSS)の実装状況の違いや
バグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの
一つである。

CSSハック以外に「CSSフィルター」(“CSS Filter”)とも呼ばれるが、Internet
Explorer(IE)の独自拡張CSSであるフィルタとの混同を避けるためか日本では
CSSハックの語が用いられることが多い。
wikipedia　より引用です。

私の場合、ie(11)の表示が崩れたのでie 9～11用の「cssハック」を使用した。
どうしてブラウザ間で表示が異なるの？

ウェブサイトの表示がブラウザごとに異なるのは、ブラウザがHTMLやCSSやjav
ascriptの言語の解釈が異なるからです。

これらの言語の解釈を行うのが「レンダリングエンジン」というプログラムな
のですが、ブラウザによって搭載しているレンダリングエンジンが違います。

表示が異なると製作側が頭を悩まされます。
そうしたらハックが活用される。というわけです。

CSSハックについて

ウェブ製作において、ブラウザ間の表示の差異はどうしてもつきまとう問題の
一つです。

そんな時に利用するのがCSSハックです。CSSハックは、ブラウザのバージョン
ごとの解釈の違いを突いて、目的のブラウザのバージョンごとに指定を行うな
ど、細かい調整の切り分けに使うものです。

ただ、文法的に間違った書き方をするものがほとんどなので、ブラウザのバー
ジョンアップによっては将来的に予想外の不具合を起こす可能性があります。

主要ブラウザ用CSSハック

ＩＥ（インターネットエクスプローラー）

ＩＥ９

ノットターゲットハック

セレクタの後に「:not(:target)」を記述。IE9がリリースした頃に登場したハ
ックですが、現在ではIE9やIE10はもちろん他の主要ブラウザでも対応してま
す。なので、今ではこのハックで適用されないのは”IE8以下”となります。

「.text:not(:target) { color: #f00; }」

ＩＥ９と１０

アットメディアゼロハック

スタイルを「@media screen and (min-width:0\0){}」の中に記述。
ＩＥ１１でも適用しました。
@media screen and (min-width:0\0) {
.text { color: #f00; }
}

ＩＥ１０

アットメディア エムエスハイコントラストハック

スタイルを「@media screen and (-ms-high-contrast: active), (-ms-high-c
ontrast: none){}」の中に記述。ですが、こちらもIE11でも適用されました。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: non
e) {
.text { color: #f00; }
}

Firefox

モズドキュメントハック

スタイルを「@-moz-document url-prefix() {}」の中に記述。この記述だとFi
refoxのみに適用できます。ただW3C CSS Validatorではエラーが出ます

@-moz-document url-prefix() {
.text { color: #f00; }
}

Chrome

ウェブキットハック

スタイルを「@media screen and (-webkit-min-device-pixel-ratio:0) {}」
の中に記述。webkit系ブラウザに適用させるハックで、ChromeとSafari3に適
用されます。

ちなみにChormeはwebkitからBlinkへとエンジンが変わりバージョン28から採
用されています。現時点ではこのハックは有効ですが、今後はどうなるか分か
りませんので過去にウェブキットハックを使っている場合はご注意

@media screen and (-webkit-min-device-pixel-ratio:0) {
.text { color: #f00; }
}

Safari

xmlns属性セレクタハック

セレクタの前に「html[xmlns*=””]:root」を記述。Safari2～3.1が適用になる
ようですが、検証してません。

html[xmlns*=””]:root .text { color: #f00; }

Opera

Operaハック

セレクタの前に「html:66irst-child」を記述。Opera9.25以降が適用となるよ
うですが、検証していません。

cssハックの使用例

当ブログで使用した例です。
トップページ記事一覧をカスタマイズ

[css]
/*—————————–
アーカイブ（一覧表示）のカスタマイズ
——————————*/
#topnews dl {
background: none repeat scroll 0 0 #E0FFFF;
border: 3px solid #4169e1 !important;
border-radius: 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
margin-top: 0;
padding: 15px;
}
[/css]

スタイルシート（style.css）にトップページ記事一覧をカスタマイズするた
めに記述したところ、最初の記事の上の余白がＩＥだけ崩れて表示。
なのでこの下に「cssハック」コードを追記した。

使用したcssハックは
アットメディアゼロハック
スタイルを「@media screen and (min-width:0\0){}」の中に記述。
[css]
/*—————————–
ieの表示が崩れるための修正
——————————*/
@media screen and (min-width:0\0) {
#topnews dl:first-child {
margin-top: 20px;
}
}
/*—————————–
ieの表示が崩れるための修正ここまで
——————————*/
[/css]

上記コードを追記したところ、ＩＥ１１での崩れた表示が解消されました。

まとめ

上記に挙げたハックを見てもらうとわかりますが、「当時はそのバージョン限
定」だったのにその後のバージョンでも使えてしまうものとか、「特定ブラウ
ザのみ対応」だったのに他のブラウザでも使えてしまうものなど、予期せぬ状
況が生まれています。

その理由は、冒頭にも書いたようにCSSハックとは「各ブラウザバージョンの
バグや非対応の側面を突いた手法」だからです。

バージョンアップするたびにバグが改善されるのは当たり前です。逆に、当時
は特定のブラウザでしか解釈できなかったから使えた文法的に正しいハックは、
バージョンアップに伴い多くのブラウザが正常に読み込めるようになります。

なのでハックでのカスタマイズは一時しのぎの技と思ってもいいかも知れませ
んね！

各ブラウザ担当者を集めて規格を統一させてもらいたいですね！！

それを元にバージョンアップしていけばいいじゃないですか。

そうしたらカスタマイズした後こんなに悩むことは無いと思いますが・・・