目的
フロント周りで必要となる知識を広く浅く学び、実務に生かす。
内容
HTML
HTMLとは
Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)
Webページを作るための最も基本的なマークアップ言語のひとつ。他にはXML、XHML、SGMLなどある。
マークアップ言語の種類と特徴
HTMLができた理由
研究者が研究状況の確認や資料を探すなどの行為を、簡単に探して見ることができる方法はないかと考えて生まれた。生まれた場所は、スイス・ジュネーブにあるCERN(欧州原子核研究機構)で、欧州12か国が共同で研究を行う機関であり何千人という科学者が入れ替わり立ち代わりで訪れていたらしい。
HTMLの誕生からザッと要点紹介
W3C
World Wide Web Consortium(ワールド・ワイド・コンソーシアム)
Web技術の標準化を行う非営利団体
about W3C
W3Cができた理由
開発者たちが次々と新しいタグを導入していき、Webページ開発者は苦労し始めた。
その為タグを標準化する必要性があると感じ、世の中のWebの標準的な技術(HTML、SVG、DOMなど)の
技術を策定し標準化へと導いていく組織が必要とのことでW3Cが設立した。
ひと休憩
会社名 | Microsoft | Netscape |
---|---|---|
ブラウザー | IE | NS |
スクリプト言語 | JScript | Javascript |
Javascriptで書いたコードはIEではJScriptで動いてるらしいです。
レンダリングエンジン
レンダリングエンジンとは
ウェブページ記述用言語で書かれたデータを解釈し、実際に画面に表示する文字や画像などの配置を計算するプログラム。模写をしてくれる仕組み
HTMLレンダリングエンジンとは
実務
ブラウザーで検証をする際は、ブラウザーというよりレンダリングエンジンの検証という認識で考える
どのブラウザーがどのレンダリングエンジンを採用してるのか見れば、全てのブラウザーを見なくても良い。
レンダリングエンジンの状況
ブラウザー | レンダリングエンジン | 評価 |
---|---|---|
IE | Trident | ひどい |
FireFox | Gecko | |
Opera | Presto | |
Safari | WebKit | すごい |
Chrome | Blink | すごい |
iOS | WebKit | すごい |
評価基準は、HTML5/CSS3の対応が早いか遅いか
ちなみにiOSは、OSのアップデートでブラウザーもアップデートをする
ベンダーフレックス
ベンダーフレックスとは
CSS3で採用される予定の機能で、先頭に付ける-moz-や-webKit-などを指す
主要ブラウザのベンダープレフィックス
ブラウザー | ベンダーフレックス |
---|---|
Firefox | -moz- |
Chrome | -webKit- |
Safari | -webKit- |
IE | -ms- |
ひと休憩
フロント界隈でBig News
「Firefoxのベンダーベンダープレフィックスに、-WebKit-が導入」
WebKitが独自に実装したCSSプロパティをFirefoxでも有効と認識されてレンダリングの際に設定が反映されるようになった。なぜBigNewsなのか。それは手間が省けるから。「-moz-」を書かなくても良い。FireFoxを気にしなくて済むということ。
(個人的には、ベンダープレフィックスに苦しめられた経験がないのでBigNewsさがわかりません)
ブラウザーのベンダープレフィックスの対応可否の確認
Can I use.com
検索にかけたセレクターが、"どのブラウザー" の "どのバージョン"に対応をしているかがわかる。
セレクターのブラウザー対応状況を確認する際は、ここにアクセス
まとめ
格ブラウザーのレンダリングエンジンの状況、W3Cが出す最新セレクターなど
フロント周りの情報をおさえておくことが大事。
(ブラウザ戦争については、長くなりそうなので機会があれば書く。)