IE11/Edgeで最低限閲覧可能な見た目にする

[usagi]

提案

• IE11 を含む IE を判定しすべて中途半端なレガシーウェブブラウザーとして、 "さいあく" でも CSS と JS を無効化しても難なく閲覧可能なよう対策する。

背景

1. IE11 での表示崩れが可読性に影響のあるレベルで発生している。（参考1）
2. IE11はまだ現役で cpprefjp も個人ユーザーの他、あまりモダンではない、あるいはウェブブラウザーについて保守的な環境を強いられたユーザーも残念ながら少なくない。
3. 滅びゆく IE11 に CSS/JS を特殊可するコストは勿体無い。
4. 実は w3m などテキストブラウザーだとわりとまともに読める。（参考2）
5. IE の場合はさしあたり CSS と JS を無効化してしまって少なくともテキストブラウザーと同様には読めるようにしてはどうか。

参考1 IE11

参考2 w3m

CC: @saki7

[saki7]

画像付きの詳細な報告ありがとうございます。これにはHTMLとCSSとJSそれぞれの問題がありますので、僕が把握している範囲のことを順を追って書きたいと思います。

HTML

cpprefjpのhtmlは、以前より編集者各位のご尽力のおかげで、文書構造としてはかなり適切な形になっています。このため、GoogleのクローラなどJSが無効化されているrobotsが来ても正しくパースできています。

僕の方でhtmlに行った変更は、（cssを.cssファイルに移動するなど）古いコードを削除するものです。この時に、html5shiv.js （IE8以下でHTML5/CSS3を使えるようにするパッチ）など事実上廃止されていた物の読み込み処理は削除しました。これがIE11に影響を与えている可能性はあります。

w3mなどのテキストブラウザでそこそこ見れるのは、この文書構造の正しさのおかげです。以前のサイドバーで静的に生成されていたサイドバー用のhtmlも、構造が正しいです。ただ、このサイドバーはサイズが肥大化するなど様々な問題を抱えており (参考) 、フロントエンドのデザイン修正を抜きにしても対応する必要はありました。

htmlについては大幅な変更が必要無いので、僕としてもこれから大規模な変更をする予定はありません。

CSS

cpprefjpのCSSは、元々はbootstrapベースに様々な要素を追加したものでした。bootstrapのレイアウトは全て float: left; などを使って実装されているため、基本的にどんなブラウザでもうまく表示できます。

kunaiのCSS実装では、floatの代わりにCSS3のflexboxを（全面的に）使っています。flexbox自体は2014年くらいから広く使われ始めた技術なので、これ自体は極端に先鋭的なものというほどでもないかなと思っています。

https://caniuse.com/#feat=flexbox

flexboxは、IEでは最終版の IE 11 でも実装にバグがありすぎて実質使えません。以前のデザインに戻すことは可能ですが、サイドバーのことを考えると float を使ってゼロから書き直す必要があります。僕の技術力の問題で僕は float でサイトを構築することができないので、誰かが対応してくれた場合は IE 11 を検出して切り替えるコードは3行くらいで書けます。

ブラウザの印刷機能で印刷をする時に正しく表示されるようにするのは新規の機能になるので、余裕ができたらやりたいなと思っています。

JS

cpprefjp の中で特別なJavaScriptコードは2箇所あります。クイックジャンプの検索窓とサイドバーです。DOM生成にはjQueryを使っているのでモバイルでもレガシーでも基本的に動くと思います。言語自体はES2017ですが、最終的にES2015にトランスパイルされてデプロイされているので、ブラウザで解釈できます。

---

float で全てを実装し直した css をどなたかが書いて頂けるのであれば、僕はIE11向けのフォールバック処理をすぐに実装する用意はできています。

※「IE11のシェアが何％だから〜」という数字の話を抜きにしても、僕はIE11への対応自体の必要性は感じています。

※いまのサイドバーのJavaScriptの実行が重すぎる問題は、数日以内に対応してデプロイします。

[saki7]

※大掛かりな修正を入れずとも、IE11向けの特殊なHTMLコメントを埋め込むことでcssを全て以前のものに切り替える処理を実装することは出来ます。ただし、その場合にそれがどういう風に見えているかを僕が継続的に検証することが出来ないので、フロントエンド方面でフルタイムで協力して頂ける方がどうしても必要です。

追記：条件付きコメントはIE10で削除されたらしいので、上記の内容は現在では正しくないです。対応するためには、IE11を検出する専用のJavaScriptコードを新しく書く必要があります

[saki7]

@usagi cpprefjp/kunai#31 で見た目が多少マシになったと思うのですが、ローカルのIE11で確認して頂けますか？

[yumetodo]

うーむ

[saki7]

@yumetodo あ、これです。この画像の2枚目の情報が知りたかった。

注意 Internet Explorer 11 は、flexbox プロパティの Microsoft ベンダー プレフィックス ("-ms-") バージョンをサポートしなくなりました。 標準の準拠や今後の互換性のため、代わりにプレフィックスなしの名前を使う必要があります。変更とベスト プラクティスの要約については、「可変ボックス ("Flexbox") レイアウトの更新」をご覧ください。

https://msdn.microsoft.com/ja-jp/library/hh673531(v=vs.85).aspx

display: flex もしくは display: -ms-flexbox が正しく見れていれば最低限の配置は守られるはずなんですが、うまくいかないですね。これが余計なベンタープレフィクスを見に行っていることで発生している問題だとするなら cpprefjp/kunai#31 で iOS のWebkitに対応する目的でプレフィクックスの対応範囲を上げたことによるregressionですが、そうでないとしたら元々このIssueで僕が書いたようなIE11のflexへの対応不足が原因なので、根本的な問題に戻りますね。

[saki7]

ref:

cpprefjp/kunai@bd89f41#r149858589

https://github.com/cpprefjp/kunai/pull/31/commits/bd89f41830bdfe9eb3419cc94d9e829ed65f50f4#r149858589

↑GitHubの内部参照のURLの自動変換先が間違ってるのでリンクにしてないです（これはGitHubのサポートに報告しておきました）

[yumetodo]

そりゃそうとこのkunai-vender.js:24,336959から飛んできてるエラーはなんだろう・・・

M.OPTS_DEFAULT={klass:{search_button:["fa","fa-fw","fa-binoculars"]},google_url:new URL("https://www.google.co.jp/search"),force_new_window:!1}

該当箇所はおそらくこれなんですが・・・

[saki7]

@yumetodo 該当箇所がそれかどうかは僕にも確信が無いですが、（IE11で）JavaScriptが全部死んでいるのはかなりスコープが広い問題なので、一概にどうとは言えないですね。

[yumetodo]

わかった

var u = new URL("https://www.google.co.jp/search");

が

このオブジェクトではサポートされていない操作です。

て言ってくる。