WEBブラウザ

Share  

2012-08-03

記事内容が古くなった。2011年あたりからFirefoxもChromeも機能が拡充され、初期バージョンに比べると重くなった。IEは9になっても相変わらず遅くて、非互換や不具合が多いので使う気がしない。最近のお気に入りは、64ビット版のWaterfoxだ。Firefoxと互換があり、64bit版Windowsに最適化・軽量化されている。英語版しかないが、とにかく速いので気に入っている。

自営サイトを検索したら、”HTMLレンダリング”の記事があった。2008年にAcid3/2, CSS互換をチェックし比較した。最近はどうなのだろう?

定期的にブラウザのテストを実施しているLifehacker.comの最新記事(2012年6月12日)では下記のとおり。

1.Firefox: 81%  2.Opera: 68%  3.Chrome: 62%  4.Internet Explorer: 41%

2010-11-23

WEBブラウザは10種類以上使った。安全性や機能、使い勝手、安定性、拡張性などから私はFirefoxを一番良く使っている。閲覧だけであればChromeが軽快で速いのでいいが、WEB制作でよく使う機能(ソースの一部表示や画像の確認など)が使えなかったり検索しにくいので、開発にはFirefoxを使う。Safari, Operaもデザインがすっきりしていて好きだが、Windowsではマイナーだ。SeaMonkeyは、mail/FTP/editorが統合されており、オンラインでのWEB制作に向いている。

  1. Firefox  標準ブラウザとして利用 Linux/Windows両方で使える。クラウド用にも採用され、欧州各国政府が推奨。
  2. Chrome  軽くて速いのが特徴。Windows7ではクラッシュすることがある。
  3. Safari  Mac/Windowsで使用できる。Firefox/Chromeと互換あり。
  4. Opera  フィンランド製で洒落たデザイン。ブログ/SNS機能がある。<font>が無効になる。
  5. SeaMonkey  Firefox開発のMozillaのプロジェクト。Web制作向き。Mail/FTP統合。
  6. WaterFox 64ビット版に最適化したFirefox (英語版のみ)

推奨ブラウザ

私が運営するサイトを閲覧するときの推奨ブラウザはFirefox, Chrome, Safariである。とくにFirefoxを優先して閲覧テストをしている。Chrome/Safariでのテストが不十分なときがあるが、エンジンの互換性が高いのでFirefoxで動けばChrome/Safariでも動くことが多い。ただしHTML5は別で個別にテストする必要がある。IEでは時間があった時にしかテストしないので非推奨にしている。

IE6/7/8/9を非推奨とする理由

マイクロソフト社独自のブラウザで国際標準との非互換部分多い。特許権侵害の問題を回避するための警告が頻繁にでて余計な手間をかけないと閲覧できない。Web制作者泣かせで開発コストが数倍になってしまう。しかも、遅くて危険なので非推奨としている。

とはいえ、IEは購入したパソコンにバンドルしているので一般ユーザの利用率が高い。そのため、閲覧して欲しいWEBページのテストをせざるを得ない。このために数倍の時間がかかってしまう。Vista/Windows7のIE8については不具合に気づいたときだけテストしている。IE6/7/9はテストしていない。⇒IE9だけをテストするようにしているが依然トラブルが多い(2011)

IE8不具合

IE8非推奨の理由

画像をクリックすると拡大表示できる。これはIE8で発生した不具合だ。フィックスする時間と知識がない。Firefox/Chrome/Safariでは正常に動作した。

IE9になってからもいろんな不具合があったり、国際標準との互換がなかったりする。
ほかのブラウザ(Chrome, Firefox, Safari, Opera)では正常に処理される。
HTML5動画が動かなかったり、ページのレイアウトが乱れたりする。

IE9不具合

  • 他のドメインにある画像が表示されない。⇒baseタグが処理されない。
  • Javascriptで書いたパスワード認証画面が表示されずNGになる。
  • 動画表示スクリプトVideoboxで、右側の白抜きが表示されない。
    また縦横の比率によって画面サイズとプレイヤのサイズがいびつになる。
  • <span>背景画像が表示されない。
  • width:autoが無効になる。⇒text-align:centerを使う。
  • HTML5 tableが無効になる。⇒古いIE互換モードでは機能しないが、IE9.0.9でも無効になった。以前は機能した。
  • <img ~ align="right">が無視される。⇒DOCTYPEを書くと有効
  • border:solid silver 1px;padding:5px;が無視される。border-style:solid; border-color:silver;border-width:1px;padding:5px; と書いても無効 ⇒DOCTYPEを書くと有効

HTML5

W3Cから2008年1月22日に草案が発表され、2012年3月頃に正式勧告される予定だ。多くのブラウザが段階的に対応している。

HTML4.01で非推奨だった<font>や<center>が廃止されるので、過去に作成したページの見直しが必要になる。Operaは国際標準に忠実で数年前から<font>は無視されることに気づいたので、それ以後<font>は使わないようにしている。

私が期待しているのは、<audio><video>要素の追加・標準化だ。音楽(wmvmidi/mp3/aacなど)、動画(mpg1/2/wmv/mov/swf/flv/mp4など)の再生プレイヤ・プラグインがいろいろあり、ブラウザによって動かないことが多い。Silverlightでは動いたと喜んだら半年後には動かなくなったりしてIEには失望・・・といったことの繰り返しだった。いまはFlashに落ち着いた。

HTML5が普及すると、Flashなどのプラグインが不要になるという意見もあるので少し勉強した。

HTML5 動画の例 Discovery Channel
mp4とWebMファイルを再生する<video>要素を使った。

  IE8 Firefox3 Firefox4 Chrome Safari Opera
mp4 X X X ○※ X
webm X X X X→○

※Safariではsourceにwebmも指定すると再生されない。
※Chrome/Firefox/Operaはwebm採用を発表済み。

動画ツール