14. 相互運用性への意気込み
In cases where these changes necessarily differ
from standards, we’re following through with
standards bodies and other browsers to update
specs and implementations to reflect the
interoperable behavior.
IEBlog – “Living on the Edge – our next step in helping the web just work”
(November 12, 2014 ) より抜粋
31. 資料 : CSS ハック
body {
color: red; /* all browsers, of course */
color: green¥9; /* IE8 and below */
*color: yellow; /* IE7 and below */
_color: orange; /* IE6 */
}
body:not(:target) {
color: black¥9; /* IE9 */
}
非推奨
32. レンダリングモードの指定
~旧バージョンのIEの描画ルールで表示 ~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!meta http-equiv ="X-UA-Compatible"
content="IE=EmulateIE7">
ドキュメントモード
互換 (Quirks) モード指定
不必要
33. JavaScript によるブラウザー検出
~ user-agent を使用した検出~
var ver = -1;
var ua = navigator.userAgent;
var re = new RegExp(‘MSIE ([0-9]{1,}[¥.0-9]{0,})‘);
if (re.exec(ua) != null) {
ver = parseFloat( RegExp.$1 );
}
例) Internet Explorer の場合は
-1 以外のバージョン番号を返す
非推奨
38. ActiveX の代替
~Web 標準技術での実装~
activeX
マルチメディア再生video,audio タグ
ファイルアクセスFile Access API
グラフィックCanvas,SVG,WebGL
カメラ,マイクMedia Capture API
通信XHR,WebSockets,ORTC
位置情報Geo location API
音声合成Web Audio API
ゲームコントローラーGame Pad API
リッチテキストcontenteditable 属性
39. JavaScript フレームワークについて(1/2)
~本当に必要?~
// Retrieve DOM element with id ‘featuredProduct‘
var product = $(‘#featuredProduct‘);
// Retrieve all image child elements for the
var productImages = $(‘#featuredProduct‘).find(‘img‘)
// Add a class to the given element
$(‘#featuredProduct‘).addClass(‘featured’);
// Retrieve DOM element with id ‘featuredProduct‘
var product = document.getElementById(‘featuredProduct‘);
// Retrieve all image child elements for the
var productImages = document.querySelectorAll(‘#featuredProduct img‘);
// Add a class to the given element
document.querySelector(‘#featuredProduct’).classList.add(‘featured’);
jQuery
標準的なJavaScript