IE対応テンプレートの修正を行っています
過去にリリースし 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向け修正についてのアナウンスでした。以下は修正済みテンプレートです。随時追加していきます。
修正済みテンプレート
* 修正内容の詳細は各テンプレート専用記事でご確認をお願いします。
CommonSenseテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
vanillaice000.blog.fc2.com
Crescentテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Hymnテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Genericテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Axisテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Pinboardテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Classicaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Out-of-styleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
VeryMerryテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Empty-streetテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Donnaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Sincerely-yours - FC2ブログテンプレート
Sincerely-yoursテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Velonicaテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Dark-Divineテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Chronicleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Juliette-Noteテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Pianissimoテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Room38テンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
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テンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Decoyテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Stoicテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
BetweenNeoテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Fieldsテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Blissテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Jingleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
GirlOnWireテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
TheCityテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
OnTheGroundテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Capricious/Ranchu - FC2ブログテンプレート
Capricious/ Ranchuテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
Sakuraテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
