回答編集履歴
12
Google Developers → Google Developers Japan
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
Cf.富永日記帳「[印刷用スタイルを @media print から代替スタイルシートへ変更](https://blog.w0s.jp/612#section-%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8C%E4%BB%A3%E6%9B%BF%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E5%88%87%E6%9B%BF%E6%A9%9F%E6%A7%8B%E3%82%92%E6%9C%89%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E8%AA%BF%E3%81%B9%E3%82%8B)」
|
|
35
35
|
https://blog.w0s.jp/612#section-ブラウザが代替スタイルシートの切替機構を有しているかどうか調べる
|
|
36
36
|
|
|
37
|
-
しかし[Chromium Blog](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)（邦訳[Google Developers](https://developers-jp.googleblog.com/2020/08/chrome-85.html)）によれば、Chrome 85では「HTMLLinkElement の "disabled" 属性の動作のアップデート」がなされ、以下の動作が削除されたともある。
|
|
37
|
+
しかし[Chromium Blog](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)（邦訳[Google Developers Japan](https://developers-jp.googleblog.com/2020/08/chrome-85.html)2020年8月18日）によれば、Chrome 85では「HTMLLinkElement の "disabled" 属性の動作のアップデート」がなされ、以下の動作が削除されたともある。
|
|
38
38
|
- document.stylesheets から disabled 属性の値にアクセスできませんでした。
|
|
39
39
|
- disabled 属性を false に変更した後 true に戻すと、document.stylesheets に表示され、そこに残ったままになっていました。
|
|
40
40
|
- 代替スタイルシートを有効にする唯一の方法は、無効にした後再度有効にすることでした。
|
11
disabled真偽値判定プログラム短縮
test
CHANGED
|
@@ -42,15 +42,13 @@
|
|
|
42
42
|
|
|
43
43
|
念の為、下記のJavaScriptプログラムを仕込んだページをリロードして確認した所、各タイトル毎の代替スタイルシートについてdisabledかどうかの真偽値がfalseと出たのは、FirefoxでもChromeやEdgeやOperaでも（ついでに別系統エンジンの[Falkon](https://www.falkon.org/)でも）みな同じで、結果に差は無かった。
|
|
44
44
|
```JavaScript
|
|
45
|
-
<script type="text/javascript">
|
|
45
|
+
<script type="text/javascript">
|
|
46
|
-
var Links = document.getElementsByTagName('link');
|
|
46
|
+
var Links = document.getElementsByTagName('link');// =document.styleSheets; だとFirefox以外は代替シート認識しない
|
|
47
47
|
for(var i=0; i<Links.length; i++) {
|
|
48
|
-
if (Links[i].rel.toLowerCase().indexOf("stylesheet")==-1) continue;//CSS指定以外のlink要素はスキップする。
|
|
49
|
-
var rel = Links[i].getAttribute("rel").toLowerCase();
|
|
50
|
-
if (Links[i].title !== null && rel.indexOf("alternate")!=-1) /* title属性が存在し且つrel属性値に'alternate'が含まれるならば代替スタイルシートである。 */
|
|
48
|
+
if (Links[i].title !== null && Links[i].rel.indexOf("alternate")!=-1) /* title属性が存在し且つrel属性値に'alternate'が含まれるならば代替スタイルシートである。 */
|
|
51
|
-
alert(Links[i].title + "＝" + Links[i].disabled);//結果の出力
|
|
49
|
+
alert(Links[i].title + "＝" + Links[i].disabled);//結果の出力
|
|
52
50
|
}
|
|
53
|
-
|
|
51
|
+
</script>
|
|
54
52
|
```
|
|
55
53
|
|
|
56
54
|
スタイル切替プログラム全体も、もっとすっきりと書き直すべきなのかもしれないが、不得手なので、うまい書き方があれば御教示を得たい。
|
10
dss → Links
test
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
if (Links[i].rel.toLowerCase().indexOf("stylesheet")==-1) continue;//CSS指定以外のlink要素はスキップする。
|
|
49
49
|
var rel = Links[i].getAttribute("rel").toLowerCase();
|
|
50
50
|
if (Links[i].title !== null && rel.indexOf("alternate")!=-1) /* title属性が存在し且つrel属性値に'alternate'が含まれるならば代替スタイルシートである。 */
|
|
51
|
-
alert(
|
|
51
|
+
alert(Links[i].title + "＝" + Links[i].disabled);//結果の出力
|
|
52
52
|
}
|
|
53
53
|
//--></script>
|
|
54
54
|
```
|
9
各タイトル毎の代替スタイルシートについてdisabledかどうかの真偽値を判定するプログラム
test
CHANGED
|
@@ -40,5 +40,18 @@
|
|
|
40
40
|
- 代替スタイルシートを有効にする唯一の方法は、無効にした後再度有効にすることでした。
|
|
41
41
|
このアップデート後のヴァージョンなのに、disabled=true（無効）にしてからでないとdisabled=false（有効）にならないのは、どう理解したものか？
|
|
42
42
|
|
|
43
|
+
念の為、下記のJavaScriptプログラムを仕込んだページをリロードして確認した所、各タイトル毎の代替スタイルシートについてdisabledかどうかの真偽値がfalseと出たのは、FirefoxでもChromeやEdgeやOperaでも（ついでに別系統エンジンの[Falkon](https://www.falkon.org/)でも）みな同じで、結果に差は無かった。
|
|
44
|
+
```JavaScript
|
|
43
|
-
|
|
45
|
+
<script type="text/javascript"><!--
|
|
46
|
+
var Links = document.getElementsByTagName('link');
|
|
47
|
+
for(var i=0; i<Links.length; i++) {
|
|
48
|
+
if (Links[i].rel.toLowerCase().indexOf("stylesheet")==-1) continue;//CSS指定以外のlink要素はスキップする。
|
|
49
|
+
var rel = Links[i].getAttribute("rel").toLowerCase();
|
|
50
|
+
if (Links[i].title !== null && rel.indexOf("alternate")!=-1) /* title属性が存在し且つrel属性値に'alternate'が含まれるならば代替スタイルシートである。 */
|
|
51
|
+
alert(dss[i].title + "＝" + dss[i].disabled);//結果の出力
|
|
52
|
+
}
|
|
53
|
+
//--></script>
|
|
54
|
+
```
|
|
44
55
|
|
|
56
|
+
スタイル切替プログラム全体も、もっとすっきりと書き直すべきなのかもしれないが、不得手なので、うまい書き方があれば御教示を得たい。
|
|
57
|
+
|
8
https://www.binarydevelop.com/article/html5web-6927
test
CHANGED
|
@@ -24,11 +24,14 @@
|
|
|
24
24
|
優先スタイルシートありの状態でちゃんと代替スタイルとかぶらないでスイッチできるみたいなので、ソースを覗き、その[styles.js](http://confetto.s31.xrea.com/misc/styles.js) 中「スタイルシートを切り替える。」`Switch : function(name) {`以下、特に「Opera9で必要?」とコメントのある行を真似た。
|
|
25
25
|
|
|
26
26
|
原因説明としては、「IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため」「あらかじめ無効に設定することで、有効の設定が機能する」との記述が当て嵌まるか。
|
|
27
|
-
Cf. JavaScript プログラミング解説「スタイルの制御」中「スタイルシートの切り替え」
|
|
27
|
+
Cf. JavaScript プログラミング解説「スタイルの制御」中「[スタイルシートの切り替え](https://so-zou.jp/web-app/tech/programming/javascript/css/#no3)」
|
|
28
28
|
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3
|
|
29
29
|
|
|
30
|
+
「新しいスタイルシートに動的に切り替えるには、まず利用可能なすべてのオプショナルスタイルシートを無効にする必要があります」云々と「[HTML5でオプションのスタイルシートを使ってWebサイトやアプリケーションにダークモードを追加する方法を解説](https://www.binarydevelop.com/article/html5web-6927)」にも見える。
|
|
31
|
+
https://www.binarydevelop.com/article/html5web-6927
|
|
32
|
+
|
|
30
33
|
また、より新しいヴァージョンでも、「document.styleSheets で取得した代替スタイルシートの disabled の値が Firefox 76, IE 11, Opera 12 は true で、 Chrome 83, Edge 83 は false になる」とのこと。
|
|
31
|
-
Cf.富永日記帳「印刷用スタイルを @media print から代替スタイルシートへ変更」
|
|
34
|
+
Cf.富永日記帳「[印刷用スタイルを @media print から代替スタイルシートへ変更](https://blog.w0s.jp/612#section-%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8C%E4%BB%A3%E6%9B%BF%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E5%88%87%E6%9B%BF%E6%A9%9F%E6%A7%8B%E3%82%92%E6%9C%89%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E8%AA%BF%E3%81%B9%E3%82%8B)」
|
|
32
35
|
https://blog.w0s.jp/612#section-ブラウザが代替スタイルシートの切替機構を有しているかどうか調べる
|
|
33
36
|
|
|
34
37
|
しかし[Chromium Blog](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)（邦訳[Google Developers](https://developers-jp.googleblog.com/2020/08/chrome-85.html)）によれば、Chrome 85では「HTMLLinkElement の "disabled" 属性の動作のアップデート」がなされ、以下の動作が削除されたともある。
|
7
富永日記帳
test
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3
|
|
29
29
|
|
|
30
30
|
また、より新しいヴァージョンでも、「document.styleSheets で取得した代替スタイルシートの disabled の値が Firefox 76, IE 11, Opera 12 は true で、 Chrome 83, Edge 83 は false になる」とのこと。
|
|
31
|
-
Cf.「印刷用スタイルを @media print から代替スタイルシートへ変更」
|
|
31
|
+
Cf.富永日記帳「印刷用スタイルを @media print から代替スタイルシートへ変更」
|
|
32
32
|
https://blog.w0s.jp/612#section-ブラウザが代替スタイルシートの切替機構を有しているかどうか調べる
|
|
33
33
|
|
|
34
34
|
しかし[Chromium Blog](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)（邦訳[Google Developers](https://developers-jp.googleblog.com/2020/08/chrome-85.html)）によれば、Chrome 85では「HTMLLinkElement の "disabled" 属性の動作のアップデート」がなされ、以下の動作が削除されたともある。
|
6
#section-ブラウザが代替スタイルシートの切替機構を有しているかどうか調べる
test
CHANGED
|
@@ -25,9 +25,12 @@
|
|
|
25
25
|
|
|
26
26
|
原因説明としては、「IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため」「あらかじめ無効に設定することで、有効の設定が機能する」との記述が当て嵌まるか。
|
|
27
27
|
Cf. JavaScript プログラミング解説「スタイルの制御」中「スタイルシートの切り替え」
|
|
28
|
-
|
|
28
|
+
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3
|
|
29
|
+
|
|
29
30
|
また、より新しいヴァージョンでも、「document.styleSheets で取得した代替スタイルシートの disabled の値が Firefox 76, IE 11, Opera 12 は true で、 Chrome 83, Edge 83 は false になる」とのこと。
|
|
30
|
-
Cf.「印刷用スタイルを @media print から代替スタイルシートへ変更」
|
|
31
|
+
Cf.「印刷用スタイルを @media print から代替スタイルシートへ変更」
|
|
32
|
+
https://blog.w0s.jp/612#section-ブラウザが代替スタイルシートの切替機構を有しているかどうか調べる
|
|
33
|
+
|
|
31
34
|
しかし[Chromium Blog](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)（邦訳[Google Developers](https://developers-jp.googleblog.com/2020/08/chrome-85.html)）によれば、Chrome 85では「HTMLLinkElement の "disabled" 属性の動作のアップデート」がなされ、以下の動作が削除されたともある。
|
|
32
35
|
- document.stylesheets から disabled 属性の値にアクセスできませんでした。
|
|
33
36
|
- disabled 属性を false に変更した後 true に戻すと、document.stylesheets に表示され、そこに残ったままになっていました。
|
5
https://developers-jp.googleblog.com/2020/08/chrome-85.html を参照して補記。
test
CHANGED
|
@@ -22,11 +22,17 @@
|
|
|
22
22
|
参考にしたのは、下記サイト「代替スタイルシート切替JavaScript」である。
|
|
23
23
|
http://confetto.s31.xrea.com/misc/switchstyles
|
|
24
24
|
優先スタイルシートありの状態でちゃんと代替スタイルとかぶらないでスイッチできるみたいなので、ソースを覗き、その[styles.js](http://confetto.s31.xrea.com/misc/styles.js) 中「スタイルシートを切り替える。」`Switch : function(name) {`以下、特に「Opera9で必要?」とコメントのある行を真似た。
|
|
25
|
+
|
|
25
26
|
原因説明としては、「IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため」「あらかじめ無効に設定することで、有効の設定が機能する」との記述が当て嵌まるか。
|
|
26
27
|
Cf. JavaScript プログラミング解説「スタイルの制御」中「スタイルシートの切り替え」
|
|
27
28
|
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3
|
|
28
29
|
また、より新しいヴァージョンでも、「document.styleSheets で取得した代替スタイルシートの disabled の値が Firefox 76, IE 11, Opera 12 は true で、 Chrome 83, Edge 83 は false になる」とのこと。
|
|
29
30
|
Cf.「印刷用スタイルを @media print から代替スタイルシートへ変更」 https://blog.w0s.jp/612
|
|
31
|
+
しかし[Chromium Blog](https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html)（邦訳[Google Developers](https://developers-jp.googleblog.com/2020/08/chrome-85.html)）によれば、Chrome 85では「HTMLLinkElement の "disabled" 属性の動作のアップデート」がなされ、以下の動作が削除されたともある。
|
|
32
|
+
- document.stylesheets から disabled 属性の値にアクセスできませんでした。
|
|
33
|
+
- disabled 属性を false に変更した後 true に戻すと、document.stylesheets に表示され、そこに残ったままになっていました。
|
|
34
|
+
- 代替スタイルシートを有効にする唯一の方法は、無効にした後再度有効にすることでした。
|
|
35
|
+
このアップデート後のヴァージョンなのに、disabled=true（無効）にしてからでないとdisabled=false（有効）にならないのは、どう理解したものか？
|
|
30
36
|
|
|
31
37
|
プログラム全体も、もっとすっきりと書き直すべきなのかもしれないが、不得手なので、うまい書き方があれば御教示を得たい。
|
|
32
38
|
|
4
https://blog.w0s.jp/612 を参照して加筆。
test
CHANGED
|
@@ -22,9 +22,11 @@
|
|
|
22
22
|
参考にしたのは、下記サイト「代替スタイルシート切替JavaScript」である。
|
|
23
23
|
http://confetto.s31.xrea.com/misc/switchstyles
|
|
24
24
|
優先スタイルシートありの状態でちゃんと代替スタイルとかぶらないでスイッチできるみたいなので、ソースを覗き、その[styles.js](http://confetto.s31.xrea.com/misc/styles.js) 中「スタイルシートを切り替える。」`Switch : function(name) {`以下、特に「Opera9で必要?」とコメントのある行を真似た。
|
|
25
|
-
原因説明としては、「IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため」
|
|
25
|
+
原因説明としては、「IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため」「あらかじめ無効に設定することで、有効の設定が機能する」との記述が当て嵌まるか。
|
|
26
26
|
Cf. JavaScript プログラミング解説「スタイルの制御」中「スタイルシートの切り替え」
|
|
27
|
-
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3
|
|
27
|
+
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3
|
|
28
|
+
また、より新しいヴァージョンでも、「document.styleSheets で取得した代替スタイルシートの disabled の値が Firefox 76, IE 11, Opera 12 は true で、 Chrome 83, Edge 83 は false になる」とのこと。
|
|
29
|
+
Cf.「印刷用スタイルを @media print から代替スタイルシートへ変更」 https://blog.w0s.jp/612
|
|
28
30
|
|
|
29
31
|
プログラム全体も、もっとすっきりと書き直すべきなのかもしれないが、不得手なので、うまい書き方があれば御教示を得たい。
|
|
30
32
|
|
3
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3 を参照して補筆。
test
CHANGED
|
@@ -22,6 +22,9 @@
|
|
|
22
22
|
参考にしたのは、下記サイト「代替スタイルシート切替JavaScript」である。
|
|
23
23
|
http://confetto.s31.xrea.com/misc/switchstyles
|
|
24
24
|
優先スタイルシートありの状態でちゃんと代替スタイルとかぶらないでスイッチできるみたいなので、ソースを覗き、その[styles.js](http://confetto.s31.xrea.com/misc/styles.js) 中「スタイルシートを切り替える。」`Switch : function(name) {`以下、特に「Opera9で必要?」とコメントのある行を真似た。
|
|
25
|
+
原因説明としては、「IE9、Chrome 22、Safari 5で確認したところ、代替スタイルシートが適用されていなくてもdisabledがfalseとなっていました。その状態でfalseに設定してもスタイルシートは有効とならないため」、Chromeその他では「あらかじめ無効に設定することで、有効の設定が機能する」のかと察せられる。
|
|
26
|
+
Cf. JavaScript プログラミング解説「スタイルの制御」中「スタイルシートの切り替え」
|
|
27
|
+
https://so-zou.jp/web-app/tech/programming/javascript/css/#no3
|
|
25
28
|
|
|
26
29
|
プログラム全体も、もっとすっきりと書き直すべきなのかもしれないが、不得手なので、うまい書き方があれば御教示を得たい。
|
|
27
30
|
|
2
句点の脱字を補った。
test
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
}
|
|
18
18
|
```
|
|
19
19
|
スタイル切替の前に一遍、外部スタイルシート全部を無効にする手順を踏んでから、メニューで選択したシートを有効にする次第。
|
|
20
|
-
Firefox、Chrome、Edge、Operaいづれでも正常に動作した
|
|
20
|
+
Firefox、Chrome、Edge、Operaいづれでも正常に動作した。
|
|
21
21
|
|
|
22
22
|
参考にしたのは、下記サイト「代替スタイルシート切替JavaScript」である。
|
|
23
23
|
http://confetto.s31.xrea.com/misc/switchstyles
|
1
四行→五行
test
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
上掲プログラムで問題があったのは、下記の
|
|
2
|
+
上掲プログラムで問題があったのは、下記の五行中`sS[i].disabled = !sS[i].disabled;`の箇所だった。
|
|
3
3
|
```JavaScript
|
|
4
4
|
if ( sS[i].title || sS[i].title!="" ) //Chrome対策
|
|
5
5
|
{// titleがある（優先or代替スタイルシート）
|