IE対応テンプレートの修正を行っています

テンプレートテンプレ不具合・修正など

2019/10/30

2022/10/02 0

vanillaice (Akira)

過去にリリースし IE11非対応を謳っていないものについて順次調整・修正を行っています。

作業及び上書き登録が済んだものから順にこちらに進捗して掲載してきます。よろしくお願いします。

対象テンプレート

CommonSense
Crescent
Hymn
Generic
Axis
Pinboard
Classica
Out-of-style
VeryMerry
Donna
Empty-street
Sincerely-yours
Velonica
Dark-Divine
Room38
Chronicle
Juliette-Note
Pianissimo
Swollen
Vanilla-Sky
Cabbie
Synchronisity
Juvenile
Basement
Message
Life-is
Arrival
Corridor
Colony
Fraise
Nostalgia
Little-thing
Mocha
Belong
All-about-us
Sweetie
Southerly
Liberty
Promise-Me
Alternative
Quiet
Decoy
Stoic(2タイプ)
BetweenNeo
Fields
Bliss
Jingle
GirlOnWire
TheCity
OnTheGround
Capricious
Ranchu
Sakura(3色)

見づらいですが修正完了次第記事最後尾に各テンプレートへのリンクを掲載します。

IE11の苦手なもの

IEという旧タイプのブラウザが何を苦手としているかですね。ここを簡単に説明することで今回の修正内容をご理解頂けるのではないかと思います。また、何かの折にヒントとして活用できることもあるかもしれません。

SVG
width
calc
inline-block
flex
z-index

バグを抱えていたり、誤解釈であったり。IE対策で気をつけなければいけない主な点が上記の通りです。

SVG

インラインSVGですね。通常は viewBox属性の参照から width は容易に割り出せるので記述の必要は無いんですが、IEは計算ができないので書かないといけません。ほかブラウザでは不要ですがIEだけが必要。SVGアイコン1点につき1つづつ全てに明示が必要。もーアホかっつーの。

width

widthプロパティなんてのは超頻出なんですが、とにかくwidthの誤解釈が多すぎ。そして box-shadow をwidthに含めてしまうアホはMicrosoft社製ブラウザ(spartan Edge含む)のみです(笑)

calc

四則計算を可能にする calc function ですが、IE11は奇数の割り算ができません(笑)
flexなどでアイテムを3列で並べるときは width: 33.3333% とか書かないとはみ出します。割り切れませんので微妙な余白も生じます。

inline-block

display: inline-block の max-width: 100% とか理解できませんのでこちらが意図した表示になりません。

flex

特に垂直位置が苦手です。flex-direction: column とか使ったらその時点でほぼアウト。解消するには余分なwrapper(ラッパー)を増やしたり色々意味不明な小細工を強いられます。また、flex-basis の解釈も俺流です。

z-index

z-index については全バージョンで苦手のようですね。特に「子を親の下位にする」といった多少テクニカルな指定などについては無視を決め込むことにしているようです。

他にもわざと間違った構文を書かなければ言うことを聞かないという場面が多いです。例えば max-width の指定を解除するのは max-width: initial ですが、彼はこれが理解できないので max-width: auto としなければいけません。CSS構文エラーですし、人間の言葉としても「最大値は自動」とかちょっと意味がわからない。なら最大値指定する意味ねーじゃん。

document.writeについて

html5に於いてJavaScriptの document.writeメソッドは strongly discouraged(強い否認) とされています。もういい加減書き換えないといけないなぁ、と思うんですが、IEに対応する場合は使わざるを得ない場合も。

弊テンプレートの場合該当は2箇所です。

新着記事タイトル横の NEW のマーク
コメント主リンク生成のJS

後者については今後の製作と、今回修正対象になっているテンプレートについては書き直しを行います。が、前者の「NEWマーク」の方は IE対応テンプレートについてのみ書き直さずそのままにしておきます。色々考えた結果、もうそのままにしておいた方が良いな、と判断 (∵`)

何故今修正するのか

個人的な理由は新Microsoft Edgeのリリースです。こちらは後述。

IEがまだMicrosoftのサポート対象だから使おうよという意図ではありませんので強調しておきます。Microsoft社はIEの開発を既に断念しており、msの言う「サポート」というのは最低限のセキュリティサポートのみで技術進歩やバグ修正やユーザー快適度の追求などは含まれません。

そしてms自体がもうIEを使うのは辞めてくださいと懇願している点に注目してください。

例えばこれが車だとして、その車のメーカーが「当社のxxx車は危険なので乗らないようにしてください」なんてアナウンスをすることなどまずありません。仮にリコール対象だとして、メーカーから「危険なので」と言われて乗るでしょうか。

乗る人居るんだよね。
絶対居るんですよ(笑)
リコール車に乗る人も、避難勧告に従わない人も必ず居ます。それが世の常。

じゃあなんで今IE非対応に切り替えるのではなく修正をするのか、ですが、それは IEを利用している他者へ一定期間の後方互換を行うというサービスみたいなものです。あくまでも「他者」に向けるべきであって、管理人自身は脱IE を意識してくださいね。管理者というのは閲覧者からすれば「ホスト」なのですから、意識は高めに持ちましょう。

私はIE対応自体には反対ではないんです。ただその理由が「私IE大好き。これからもずっと使う。」というのなら反対します(笑)
私が賛同できるのは他者へのサービスとしての後方サポートです。

IE対応の最大のヒントなんですけど、「並べはfloat使ってアイテム(記事)を3列以上にせず、できれば1列で素直に縦に配置」することです。デザイン面でかなり限定されてしまいますが、これが一番の安牌。

ieユーザーさんは旧Yahoo!ブロガーに非常に多いんですね。というのはYブログ!の「かんたんモード」というのはieコンポーネントで開発されていたはずです。現にwikiモードで利用できるhtmlはieの独自タグ・独自属性(ieでしか使えないもの)がてんこもり。確かY!ブログの開発理念は「簡単に操作できることが最優先、場合によっては古い技術の利用も辞さない」とかそういう感じだったと思います。それじゃいかんわな。今はもう (∵`)

ieユーザーさんへは、もう終了が確定しているブラウザなのですから、是非とも今のうちにモダンブラウザに乗り換えて慣れて頂きたいなぁ、と思います。今からじゃ遅いぐらいです。

Microsoft Edgeが新しく生まれ変わります

なんか朗報っぽく聞こえますが実際どうなんでしょう。切り替えとかちゃんと上手く行くんだろうか(ﾌﾞﾂﾌﾞﾂ…)

msはまずIEの開発を断念しましたね。そして新たなレンダリングエンジンの開発に着手。それが spartan という無駄にかっこいいコードネームの、現時点でWindows10のデフォルトブラウザとしてバンドルされているものです。

現行Edgeのレンダリングエンジンは Edge HTML です。JSエンジンは chakra です。ところがこのエンジン開発についてもmsは再び断念。

というわけで EdgeはChromium派生ブラウザの仲間入りをします。ChromiumというのはGoogle ChromeやVivaldiやOperaなどがベースにしています。レンダリングエンジンは blink、JSエンジンは V8 です。Chromiumはオープンソースなのでこれまでのmsの独占体制自体が消滅。というわけで私のマシンはMacですが、新Edgeのダウンロードが可能になりましたのでインストールしてみました。

悪くないと思います。ほぼChromeと同じ。つか、Chromeそのもの(笑)
旧Edgeで存在していたバグ関係も今の所見当たりませんね。

とまぁ、msの迷走にこれで一旦終止符が打たれるのかなぁ、と思います。なのでIEをターゲットにしたテンプレートの修正やらなんやら、今やっておかないと永遠に放置する可能性がありますので、今やった(笑)

新Edgeがいつ正式なお披露目を迎えるのかわかりませんが、現Edgeというのは正直これまた非常にバグや嫌な挙動が多いんですね。でも今それを修正したところで新Edgeが控えているわけですから、今回も今後も現Edge用の調整は行いません。すみません。

IEが悪いわけではない

IE、ひいてはIEユーザーさんに非常に意地悪な感じに受け取られることもあると思うんですが、実際はIEは別に悪くないんです。IEだってリリース当初は優れたブラウザでした。IE11のリリースは2013年ですから現在の2019年まで6年経過しています。msはそれまでまともな改善や修正をほとんど行えなかったうえに、その状態でダラダラといつまでもサポートし続けた(継続中) ことが罪。

他モダンブラウザなんかは大体月1ペースでアップデートが来ますし、途中でアップグレードがあってもIEのように「バージョンごとに別のアプリケーション」なんて事態を招いてはいないわけで。そして「現行バージョンとその1つか2つ前のバージョンまでしかサポートしません」とはっきり線引もしているんですね。そういう風潮にmsが乗らなかったのが廃れた原因。

msのOSもこれまでのように「新しいOS出たからパッケージ版購入してください」とかはもうやめて、全てオンラインで同じ基盤でもって行う、と。そして原則、アップデート・アップグレードについては無料。これAppleはもうとっくにそういう体制ですから迎合したということでしょう。

しかし新Edgeの切り替えってどうなるんでしょう。win10の中にIE11と旧Edgeと新Edgeが鎮座、とかわけのわからないことにならないか心配なんだけれども(笑)

まとめ

やっぱりお国柄とかもありますよね。日本はいまだ現金主義の方が非常に多い。英米だとちょっとしたものでもカードで買いますし、現金だと「なにかしでかすつもり？」とか勘ぐることさえある(足が着かないから)(笑)
カード社会なんで IEでサーフィンとか口座関係の某とかありえないという感じなんですが。日本平和で良いよね。日本サイコー ←

なんだか話があっちゃこっちゃしましたが、IE向け修正についてのアナウンスでした。以下は修正済みテンプレートです。随時追加していきます。

修正済みテンプレート

* 修正内容の詳細は各テンプレート専用記事でご確認をお願いします。

BetweenNeo - FC2ブログテンプレート(配布終了 2020年4月31日)

Comments 0

コメントに関する注意事項

テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
FC2共有テンプレート一覧ご質問の前に
専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)

管理者にだけ表示を許可する