回答編集履歴
6
2017/09/06 15:12 追記
answer
CHANGED
|
@@ -27,6 +27,8 @@
|
|
|
27
27
|
<![endif]-->
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
+
**(2017/09/06 15:12 追記)**
|
|
31
|
+
|
|
30
32
|
ただし、この書き方では条件付きコメントを解釈できない IE10 以降およびIE以外のブラウザでは jQuery が読み込まれないという致命的な問題があります。
|
|
31
33
|
そこで、これらのブラウザ用に「jQueryが読み込まれなかった時用のコード」を書いて対応します。
|
|
32
34
|
|
5
条件付きコメントを解釈できない IE10 以降およびIE以外のブラウザ用のコード追記
answer
CHANGED
|
@@ -27,6 +27,30 @@
|
|
|
27
27
|
<![endif]-->
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
+
ただし、この書き方では条件付きコメントを解釈できない IE10 以降およびIE以外のブラウザでは jQuery が読み込まれないという致命的な問題があります。
|
|
31
|
+
そこで、これらのブラウザ用に「jQueryが読み込まれなかった時用のコード」を書いて対応します。
|
|
32
|
+
|
|
33
|
+
```HTML
|
|
34
|
+
<!--[if lte IE 8]>
|
|
35
|
+
<script type="text/javascript" src="./assets/js/jquery-1.12.4.js"></script>
|
|
36
|
+
<![endif]-->
|
|
37
|
+
<script type="text/javascript">
|
|
38
|
+
'use strict';
|
|
39
|
+
if (typeof jQuery !== 'function') {
|
|
40
|
+
(function () {
|
|
41
|
+
var script = document.createElement('script');
|
|
42
|
+
script.type = 'text/javascript';
|
|
43
|
+
script.src = './assets/js/jquery-3.2.1.js';
|
|
44
|
+
document.body.appendChild(script);
|
|
45
|
+
}());
|
|
46
|
+
}
|
|
47
|
+
</script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
なお、要件としてはこれで対応できると思いますが、jquery-1.12.4.js, jquery-3.2.1.js のどちらかをDLする仕組みにメリットがあるかについては疑問が残ります。
|
|
51
|
+
IE8, IE11 の両方に対応しなければならない以上、どちらにも存在する機能でコードを書かざるを得ず、jquery-3.2.1.js だけに存在する最深の機能を使うことが出来ません。
|
|
52
|
+
通常であれば、jquery-1.12.4.js のみをDLする実装で問題はないと思われますので、今一度設計を考え直してみると良いかもしれません。
|
|
53
|
+
|
|
30
54
|
### script要素を置く場所
|
|
31
55
|
|
|
32
56
|
`<head>` 内にscript要素を置いているようですが、`</body>` 手前に置くと js ファイル読み込み時のレンダリングブロックがなくなるので、描画速度の高速化に繋がります。
|
4
<!--\[if gte IE 9\]--> -> <!--\[if gte IE 9\]>
answer
CHANGED
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
|
|
21
21
|
```HTML
|
|
22
22
|
<!--[if lte IE 8]>
|
|
23
|
-
<script type="text/javascript" src="./assets/js/
|
|
23
|
+
<script type="text/javascript" src="./assets/js/jquery-1.12.4.js"></script>
|
|
24
24
|
<![endif]-->
|
|
25
|
-
<!--[if gte IE 9]
|
|
25
|
+
<!--[if gte IE 9]>
|
|
26
|
-
<script type="text/javascript" src="./assets/js/
|
|
26
|
+
<script type="text/javascript" src="./assets/js/jquery-3.2.1.js"></script>
|
|
27
|
-
<!
|
|
27
|
+
<![endif]-->
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
### script要素を置く場所
|
3
<!\[endif\]-->
answer
CHANGED
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
```HTML
|
|
22
22
|
<!--[if lte IE 8]>
|
|
23
23
|
<script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script>
|
|
24
|
-
<![
|
|
24
|
+
<![endif]-->
|
|
25
25
|
<!--[if gte IE 9]-->
|
|
26
26
|
<script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script>
|
|
27
|
-
<!--[
|
|
27
|
+
<!--[endif]-->
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
### script要素を置く場所
|
2
表現の修正
answer
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
**条件付きコメントの書き方が正しくない**ように思います。
|
|
15
15
|
このコメントのポイントは、条件付きコメントを解釈できるブラウザ(IE9-)では条件分岐処理が働き、条件付きコメントを解釈できないブラウザ(IE10+, Firefox, Google Chrome 等のモダンブラウザ)では通常のコメントとして扱われるところにあります。
|
|
16
16
|
|
|
17
|
-
ところが、上記マークアップでは
|
|
17
|
+
ところが、上記マークアップでは条件文でコメントが閉じられてしまっている為、モダンブラウザでは jquery-1.12.4.js, jquery-3.2.1.js の両方がダウンロードされ、jquery-1.12.4.js の実行は jquery-3.2.1.js の実行によって上書き実行されることになります。
|
|
18
18
|
**条件付きコメントは IE10 で廃止されました**ので、IE11 でも二重にダウンロード→実行されます。
|
|
19
19
|
解決する為にはモダンブラウザで読み込んでほしくない部分は、HTMLのコメントの文法が成立する形ででコメントアウトする必要があります。
|
|
20
20
|
|
1
表現の微修正
answer
CHANGED
|
@@ -11,12 +11,11 @@
|
|
|
11
11
|
> <!-- [end if] -->
|
|
12
12
|
> ```
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
**条件付きコメントの書き方が正しくない**ように思います。
|
|
15
|
-
このコメントのポイントは条件付きコメントを解釈できるブラウザ(IE9-)では条件分岐処理が働き、
|
|
15
|
+
このコメントのポイントは、条件付きコメントを解釈できるブラウザ(IE9-)では条件分岐処理が働き、条件付きコメントを解釈できないブラウザ(IE10+, Firefox, Google Chrome 等のモダンブラウザ)では通常のコメントとして扱われるところにあります。
|
|
16
16
|
|
|
17
|
-
ところが、上記マークアップでは全てコメントとして成立している為、モダンブラウザでは jquery-1.12.4.js, jquery-3.2.1.js の両方がダウンロードされ、実行されることになります。
|
|
17
|
+
ところが、上記マークアップでは全てコメントとして成立している為、モダンブラウザでは jquery-1.12.4.js, jquery-3.2.1.js の両方がダウンロードされ、jquery-1.12.4.js の実行は jquery-3.2.1.js の実行によって上書き実行されることになります。
|
|
18
|
-
jquery-1.12.4.js の実行は jquery-3.2.1.js の実行によって上書きされるわけですが、jquery-1.12.4.js が余計に実行されてしまっています。
|
|
19
|
-
**条件付きコメントは IE10 で廃止されました**ので、IE11 でも
|
|
18
|
+
**条件付きコメントは IE10 で廃止されました**ので、IE11 でも二重にダウンロード→実行されます。
|
|
20
19
|
解決する為にはモダンブラウザで読み込んでほしくない部分は、HTMLのコメントの文法が成立する形ででコメントアウトする必要があります。
|
|
21
20
|
|
|
22
21
|
```HTML
|