質問編集履歴
26
Safariについて http://www.usamimi.info/~ide/programe/stylechange/index.html
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
Firefoxではメニューバー→表示→スタイルシートで代替スタイルへの切換を選択できるが、これをJavaScriptによってページ上部のプルダウン・メニューからも選択可能にし、この機能を実装しないGoogle ChromeやMicrosoft Edge等のFirefox以外のブラウザーでも代替スタイルシートを利用可能にしたい。
|
|
5
5
|
|
|
6
|
-
[ブラウザーの互換性の表](https://developer.mozilla.org/ja/docs/Web/CSS/Alternative_style_sheets#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)によってはOperaも代替スタイルシート対応とするものがあるが、GoogleChrome48がこの機能を削除した2015年11月以降のバージョンでは同じBlink系レンダリング・エンジンであるOperaも非対応となってしまった。Chromeで代替スタイル切替ができる仕組みにすればOperaでも操作可能になるはず。ほかSafariについては、環境がWindowsなので実験できず。
|
|
6
|
+
[ブラウザーの互換性の表](https://developer.mozilla.org/ja/docs/Web/CSS/Alternative_style_sheets#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)によってはOperaも代替スタイルシート対応とするものがあるが、GoogleChrome48がこの機能を削除した2015年11月以降のバージョンでは同じBlink系レンダリング・エンジンであるOperaも非対応となってしまった。Chromeで代替スタイル切替ができる仕組みにすればOperaでも操作可能になるはず。ほか[Safariについて](http://www.usamimi.info/~ide/programe/stylechange/index.html)は、環境がWindowsなので実験できず。
|
|
7
7
|
|
|
8
8
|
### 実現したいこと
|
|
9
9
|
- フォームのSelectメニューからスタイル名を選択し、submitボタンで切替実行。
|
25
参考サイトの名称を明示。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -111,11 +111,11 @@
|
|
|
111
111
|
|
|
112
112
|
### 試したこと
|
|
113
113
|
下記を参考にしました。
|
|
114
|
-
- スタイルシートの一覧を取得する：http://critical.s6.xrea.com/web/cssselect.html
|
|
114
|
+
- スタイルシートの一覧を取得する：いちゆう 「スタイルシート切り替えスクリプト」http://critical.s6.xrea.com/web/cssselect.html
|
|
115
|
-
- 固定スタイルシートへ優先or代替スタイルシートを重ね書きする：https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
115
|
+
- 固定スタイルシートへ優先or代替スタイルシートを重ね書きする：2ちゃんねる「代替スタイルシートに萌え～」https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
116
|
-
- Chrome（旧Webkit）対策：https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
|
116
|
+
- Chrome（旧Webkit）対策：炭色地帯「スタイルシートを切り替える」https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
|
117
117
|
- 上記の改造：https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
118
|
-
- スタイル名のリストを取得する際、同じスタイル名が既出である場合（複数シートを一つのスタイル名で括る等）に選択肢への重出を防ぐ：http://www.akatsukinishisu.net/wiki.cgi?CSS%C0%DA%C2%D8%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8
|
|
118
|
+
- スタイル名のリストを取得する際、同じスタイル名が既出である場合（複数シートを一つのスタイル名で括る等）に選択肢への重出を防ぐ：『曉に死す』「CSS切替スクリプト」http://www.akatsukinishisu.net/wiki.cgi?CSS%C0%DA%C2%D8%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8
|
|
119
119
|
### 環境
|
|
120
120
|
Windows 10 Home 21H2
|
|
121
121
|
Firefix106.0.3
|
24
改訂プログラム中if ( sS[i].title && !(/^sS[i].title$/.test(sheetTitles)) )をisSameTitleに再改修。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
- 固定スタイルシートへ優先or代替スタイルシートを重ね書きする：https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
116
116
|
- Chrome（旧Webkit）対策：https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
|
117
117
|
- 上記の改造：https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
118
|
-
|
|
118
|
+
- スタイル名のリストを取得する際、同じスタイル名が既出である場合（複数シートを一つのスタイル名で括る等）に選択肢への重出を防ぐ：http://www.akatsukinishisu.net/wiki.cgi?CSS%C0%DA%C2%D8%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8
|
|
119
119
|
### 環境
|
|
120
120
|
Windows 10 Home 21H2
|
|
121
121
|
Firefix106.0.3
|
|
@@ -147,7 +147,14 @@
|
|
|
147
147
|
{
|
|
148
148
|
// if(sS[i].type!="text/css")continue;//Chrome対策だがHTML5以降はtype属性省略可
|
|
149
149
|
if(sS[i].rel.toLowerCase().indexOf("stylesheet")==-1)continue;//Chrome対策改
|
|
150
|
-
|
|
150
|
+
var isSameTitle = false;/// 既に同じスタイル名がある場合は除く
|
|
151
|
+
for (var j = 0; j < i; j++) {
|
|
152
|
+
if (sS[j].title == sS[i].title) {
|
|
153
|
+
isSameTitle = true;
|
|
154
|
+
break;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
if (!isSameTitle)
|
|
151
158
|
{
|
|
152
159
|
sheetTitles+=sS[i].title;
|
|
153
160
|
sheetTitles+=",";
|
23
改訂プログラム中if(sheetTitles.indexOf(sS[i].title)==-1) を差替
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
{
|
|
148
148
|
// if(sS[i].type!="text/css")continue;//Chrome対策だがHTML5以降はtype属性省略可
|
|
149
149
|
if(sS[i].rel.toLowerCase().indexOf("stylesheet")==-1)continue;//Chrome対策改
|
|
150
|
-
if (s
|
|
150
|
+
if ( sS[i].title && !(/^sS[i].title$/.test(sheetTitles)) )
|
|
151
151
|
{
|
|
152
152
|
sheetTitles+=sS[i].title;
|
|
153
153
|
sheetTitles+=",";
|
22
ブラウザーにFalkonも追加。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
Google Chrome 107.0.5304.88
|
|
123
123
|
Microsoft Edge 106.0.1370.52
|
|
124
124
|
Opera 92.0.4561.43
|
|
125
|
+
[Falkon](https://www.falkon.org/) 3.1.0
|
|
125
126
|
|
|
126
127
|
### 追記
|
|
127
128
|
上掲JavaScriptプログラム中、Chrome対策の`if ( sS[i].title || sS[i].title!="" ) {`以下五行を、スタイルシート一覧取得の函数からスタイルシート動的変更の函数へ移すと、ちょっと見には、うまくいったかと見えた。もろもろ修正したその改訂プログラムは下記の通り。
|
21
微改稿
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -175,11 +175,11 @@
|
|
|
175
175
|
sS[i].disabled =
|
|
176
176
|
selectedTitle=='スタイル解除' ? true :
|
|
177
177
|
selectedTitle=='初期設定' ? (sS[i].title!=sS.preferredTitle && sS[i].title) ://優先シート以外無効
|
|
178
|
-
(sS[i].title!=selectedTitle && sS[i].title);/
|
|
178
|
+
(sS[i].title!=selectedTitle && sS[i].title);//選択シート以外の代替シート無効
|
|
179
|
-
}
|
|
179
|
+
}
|
|
180
|
-
}
|
|
180
|
+
}
|
|
181
|
-
}
|
|
181
|
+
}
|
|
182
|
-
// ///////* プ
|
|
182
|
+
// ///////* ドロップダウン・リストから変更する *//////////////
|
|
183
183
|
function DoSelect() {
|
|
184
184
|
var sl = document.StyleChangeForm.SEL;
|
|
185
185
|
selectedTitle = sl.options[sl.selectedIndex].value;
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
var select = '<label>スタイル選択：<select name="SEL" id="SEL" size="1">';
|
|
200
200
|
for(var i=0; i<sheetTitle.length; i++){
|
|
201
201
|
select += '<option value="' + sheetTitle[i] + '"'
|
|
202
|
-
+ (sheetTitle[i] == sS.preferredTitle ? ' selected="selected"' : '')
|
|
202
|
+
+ (sheetTitle[i] == sS.preferredTitle ? ' selected="selected"' : '')//Firefox不能？
|
|
203
203
|
+ '>'
|
|
204
204
|
+ sheetTitle[i] + '</option>';
|
|
205
205
|
}
|
20
改訂プログラム修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -139,14 +139,14 @@
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
// ///////////* スタイルシートの一覧を取得する *//////
|
|
142
|
-
function setSS(
|
|
142
|
+
function setSS() {
|
|
143
143
|
sS=document.getElementsByTagName('link');//document.styleSheets;の代り、Chrome対策
|
|
144
144
|
if(sS) {
|
|
145
145
|
for(var i=0; i<sS.length; i++)
|
|
146
146
|
{
|
|
147
147
|
// if(sS[i].type!="text/css")continue;//Chrome対策だがHTML5以降はtype属性省略可
|
|
148
148
|
if(sS[i].rel.toLowerCase().indexOf("stylesheet")==-1)continue;//Chrome対策改
|
|
149
|
-
if (sheetTitles.indexOf(sS[i].title)==-1)
|
|
149
|
+
if (sheetTitles.indexOf(sS[i].title)==-1)
|
|
150
150
|
{
|
|
151
151
|
sheetTitles+=sS[i].title;
|
|
152
152
|
sheetTitles+=",";
|
|
@@ -154,9 +154,11 @@
|
|
|
154
154
|
if (sheetTitles.indexOf(sS[i].title)>-1)
|
|
155
155
|
var rel = sS[i].getAttribute("rel").toLowerCase();// sS[i].rel.toLowerCase();
|
|
156
156
|
if (rel == 'stylesheet' && !sS.preferredTitle) sS.preferredTitle = sS[i].title;
|
|
157
|
-
else if(/alternate/i.test(rel)**/ && !sS.alternateTitle)
|
|
157
|
+
else if(/alternate/i.test(rel)/**/ && !sS.alternateTitle)
|
|
158
158
|
sS.alternateTitle=sS[i].title;//不用？
|
|
159
159
|
}
|
|
160
|
+
if (!sS.preferredTitle) sheetTitles='初期設定,'+sheetTitles;// 'Default,'
|
|
161
|
+
sheetTitles+="スタイル解除";// 'NoStyle'
|
|
160
162
|
sheetTitle=sheetTitles.split(",");
|
|
161
163
|
}
|
|
162
164
|
}
|
|
@@ -171,8 +173,8 @@
|
|
|
171
173
|
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;//これでよい？
|
|
172
174
|
}
|
|
173
175
|
sS[i].disabled =
|
|
174
|
-
selectedTitle=='
|
|
176
|
+
selectedTitle=='スタイル解除' ? true :
|
|
175
|
-
selectedTitle=='
|
|
177
|
+
selectedTitle=='初期設定' ? (sS[i].title!=sS.preferredTitle && sS[i].title) ://優先シート以外無効
|
|
176
178
|
(sS[i].title!=selectedTitle && sS[i].title);/**///選択シート以外の代替シート無効
|
|
177
179
|
}
|
|
178
180
|
}
|
19
改訂プログラムの再改訂
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -154,14 +154,14 @@
|
|
|
154
154
|
if (sheetTitles.indexOf(sS[i].title)>-1)
|
|
155
155
|
var rel = sS[i].getAttribute("rel").toLowerCase();// sS[i].rel.toLowerCase();
|
|
156
156
|
if (rel == 'stylesheet' && !sS.preferredTitle) sS.preferredTitle = sS[i].title;
|
|
157
|
-
else if(
|
|
157
|
+
else if(/alternate/i.test(rel)**/ && !sS.alternateTitle)
|
|
158
158
|
sS.alternateTitle=sS[i].title;//不用？
|
|
159
159
|
}
|
|
160
160
|
sheetTitle=sheetTitles.split(",");
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
163
|
// /////////////* スタイルシートの動的切替 *///////////
|
|
164
|
-
function ChangeStyleAlter(s
|
|
164
|
+
function ChangeStyleAlter(selectedTitle) {
|
|
165
165
|
if(sS) {
|
|
166
166
|
for(var i=0; i<sS.length; i++) {
|
|
167
167
|
if(sS[i].rel.toLowerCase().indexOf("stylesheet")==-1) continue;//Chrome対策改
|
|
@@ -171,17 +171,17 @@
|
|
|
171
171
|
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;//これでよい？
|
|
172
172
|
}
|
|
173
173
|
sS[i].disabled =
|
|
174
|
-
s
|
|
174
|
+
selectedTitle=='NoStyle' ? true :
|
|
175
|
-
s
|
|
175
|
+
selectedTitle=='Default' ? (sS[i].title!=sS.preferredTitle && sS[i].title) ://優先シート以外無効
|
|
176
|
-
(sS[i].title!=s
|
|
176
|
+
(sS[i].title!=selectedTitle && sS[i].title);/**///選択シート以外の代替シート無効
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
// ///////* プルダウン・メニューから変更する *//////////////
|
|
181
181
|
function DoSelect() {
|
|
182
182
|
var sl = document.StyleChangeForm.SEL;
|
|
183
|
-
s
|
|
183
|
+
selectedTitle = sl.options[sl.selectedIndex].value;
|
|
184
|
-
ChangeStyleAlter(s
|
|
184
|
+
ChangeStyleAlter(selectedTitle);
|
|
185
185
|
return false;
|
|
186
186
|
}
|
|
187
187
|
// スタイル変更フォーム(セレクト・メニュー)を出力
|
|
@@ -194,25 +194,17 @@
|
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
function createSelect(){
|
|
197
|
-
var links = document.all && document.all.tags('link') || document.getElementsByTagName('link');
|
|
198
|
-
var titles = new Array();
|
|
199
197
|
var select = '<label>スタイル選択：<select name="SEL" id="SEL" size="1">';
|
|
200
|
-
select += '<option value="Default"' + (sheetTitle == 'Default' ? ' selected="selected"' : '') + '>初期設定</option>';// title無し（スタイルシート無し、もしくは固定シート）
|
|
201
|
-
for(var i=0
|
|
198
|
+
for(var i=0; i<sheetTitle.length; i++){
|
|
202
|
-
sheetTitle = links[i].title;
|
|
203
|
-
if(links[i].rel.toLowerCase().indexOf('stylesheet')==-1) continue;//Chrome対策
|
|
204
|
-
if(sheetTitle && !titles[sheetTitle]) {
|
|
205
|
-
titles[sheetTitle] = true;
|
|
206
|
-
|
|
199
|
+
select += '<option value="' + sheetTitle[i] + '"'
|
|
200
|
+
+ (sheetTitle[i] == sS.preferredTitle ? ' selected="selected"' : '')
|
|
207
|
-
|
|
201
|
+
+ '>'
|
|
208
|
-
|
|
202
|
+
+ sheetTitle[i] + '</option>';
|
|
209
|
-
|
|
203
|
+
}
|
|
210
|
-
}
|
|
211
|
-
select += '<option value="NoStyle"' + (sheetTitle == 'NoStyle' ? ' selected="selected"' : '') + '>スタイル解除</option>';
|
|
212
204
|
select += '</select></label>';
|
|
213
|
-
|
|
214
205
|
return select;
|
|
215
206
|
}
|
|
207
|
+
// このファイルが表示された場合、ブラウザーの戻るボタンを押してみて下さい。-->
|
|
216
208
|
```
|
|
217
209
|
しかし、このプログラムは下記のごとき優先スタイルシートありの場合に、不具合が生じた。
|
|
218
210
|
```html
|
18
四行→五行
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
Opera 92.0.4561.43
|
|
125
125
|
|
|
126
126
|
### 追記
|
|
127
|
-
上掲JavaScriptプログラム中、Chrome対策の`if ( sS[i].title || sS[i].title!="" ) {`以下
|
|
127
|
+
上掲JavaScriptプログラム中、Chrome対策の`if ( sS[i].title || sS[i].title!="" ) {`以下五行を、スタイルシート一覧取得の函数からスタイルシート動的変更の函数へ移すと、ちょっと見には、うまくいったかと見えた。もろもろ修正したその改訂プログラムは下記の通り。
|
|
128
128
|
```JavaScript
|
|
129
129
|
//** 改訂SwitchStyle.js **//
|
|
130
130
|
if (document.styleSheets
|
17
スタイル解除させて後に選択を実行できるか
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -226,5 +226,6 @@
|
|
|
226
226
|
これで代替シートを選択して実行したら、Firefoxでは固定シートに代替スタイルが重ねられる形でスタイル指定が適用されて問題無かったが、ChromeやEdgeやOperaだと固定シートのみならず優先シートのスタイル指定（上記例では背景色）までもが継承されてしまって、そこに代替シートの指定が上書きされた表示となり、優先／代替の切換（スイッチ）にはなってくれない。但し、そのままプルダウン・メニューで代替シートを選択した状態でsubmitボタンの「切替」をもう一度押し直すと、優先シートのスタイルを切って代替シートのみ適用される。さらにそのまま三度目のsubmitボタンのクリックでは、また優先シートの指定が反映される状態に戻る。
|
|
227
227
|
また、リロード直後いったん「スタイル解除」（NoStyle）を選択・実行してから次いで代替シートを選択・実行すると、最初から優先シートのスタイルを引き継がずに代替シートだけが正しく適用される。この場合も、そのままサブミット・ボタンの二度押しをすれば優先シートも有効化するし、三度押し目ではまた優先シートの無効状態になる。
|
|
228
228
|
|
|
229
|
-
サブミット・ボタンの二度押しをプログラムに仕組めば良いのかとも思ったものの、二重送信を防止するプログラムはサンプルが多々見つかるのに対し、その逆に連続クリックを強制させるプログラムは見当たらない。試しに`
|
|
229
|
+
サブミット・ボタンの二度押しをプログラムに仕組めば良いのかとも思ったものの、二重送信を防止するプログラムはサンプルが多々見つかるのに対し、その逆に連続クリックを強制させるプログラムは見当たらない。試しに`window.onload`イベントで`document.getElementById('StyleChangeForm').submit();`とか`document.getElementsByTagName('input').click();`とかやってみたが、作動しないみたいだった。それに、直前に選択されたメニューによって対応を変更せねばならないから場合分け（分岐）がややこしくて手にあまる。
|
|
230
230
|
Chrome対策用の`sS[i].disabled = !sS[i].disabled;`の二重化が悪さをしたのかもしれないけれど、これを削ってしまったら、改訂前の最初のプログラムと同じく代替シート選択時にまともに動作しなくなる。これ以外にChrome対策の手法を見出せないのだが……もし他にあるのなら御教示戴きたい。
|
|
231
|
+
或いは、スタイルシート選択時には一度`sS[i].disabled=true;`の値を渡して「スタイル解除」（`document.getElementById('SEL').value='NoStyle';`とか？）させてから選択したスタイルシート名の値を実行するといった流れのプログラムを仕込めればいいのかもしれないが、ちゃんと動かすにはどうやればよいのやら……？
|
16
.submit();乃至.click();
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -226,5 +226,5 @@
|
|
|
226
226
|
これで代替シートを選択して実行したら、Firefoxでは固定シートに代替スタイルが重ねられる形でスタイル指定が適用されて問題無かったが、ChromeやEdgeやOperaだと固定シートのみならず優先シートのスタイル指定（上記例では背景色）までもが継承されてしまって、そこに代替シートの指定が上書きされた表示となり、優先／代替の切換（スイッチ）にはなってくれない。但し、そのままプルダウン・メニューで代替シートを選択した状態でsubmitボタンの「切替」をもう一度押し直すと、優先シートのスタイルを切って代替シートのみ適用される。さらにそのまま三度目のsubmitボタンのクリックでは、また優先シートの指定が反映される状態に戻る。
|
|
227
227
|
また、リロード直後いったん「スタイル解除」（NoStyle）を選択・実行してから次いで代替シートを選択・実行すると、最初から優先シートのスタイルを引き継がずに代替シートだけが正しく適用される。この場合も、そのままサブミット・ボタンの二度押しをすれば優先シートも有効化するし、三度押し目ではまた優先シートの無効状態になる。
|
|
228
228
|
|
|
229
|
-
サブミット・ボタンの二度押しをプログラムに仕組めば良いのかとも思ったものの、二重送信を防止するプログラムはサンプルが多々見つかるのに対し、その逆に連続クリックを強制させるプログラムは見当たらない。それに、直前に選択されたメニューによって対応を変更せねばならないから場合分け（分岐）がややこしくて手にあまる。
|
|
229
|
+
サブミット・ボタンの二度押しをプログラムに仕組めば良いのかとも思ったものの、二重送信を防止するプログラムはサンプルが多々見つかるのに対し、その逆に連続クリックを強制させるプログラムは見当たらない。試しに`function DoSelect()`内で`document.getElementById('StyleChangeForm').submit();`とか`document.getElementsByTagName('input').click();`とかやってみたが、作動しないみたいだった。それに、直前に選択されたメニューによって対応を変更せねばならないから場合分け（分岐）がややこしくて手にあまる。
|
|
230
230
|
Chrome対策用の`sS[i].disabled = !sS[i].disabled;`の二重化が悪さをしたのかもしれないけれど、これを削ってしまったら、改訂前の最初のプログラムと同じく代替シート選択時にまともに動作しなくなる。これ以外にChrome対策の手法を見出せないのだが……もし他にあるのなら御教示戴きたい。
|
15
文章を多少補って改稿。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
|
|
4
4
|
Firefoxではメニューバー→表示→スタイルシートで代替スタイルへの切換を選択できるが、これをJavaScriptによってページ上部のプルダウン・メニューからも選択可能にし、この機能を実装しないGoogle ChromeやMicrosoft Edge等のFirefox以外のブラウザーでも代替スタイルシートを利用可能にしたい。
|
|
5
5
|
|
|
6
|
-
[ブラウザーの互換性の表](https://developer.mozilla.org/ja/docs/Web/CSS/Alternative_style_sheets#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)によってはOperaも代替スタイルシート対応とするものがあるが、GoogleChrome48がこの機能を削除した2015年11月以降のバージョンでは同じBlink系レンダリング・エンジン
|
|
6
|
+
[ブラウザーの互換性の表](https://developer.mozilla.org/ja/docs/Web/CSS/Alternative_style_sheets#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)によってはOperaも代替スタイルシート対応とするものがあるが、GoogleChrome48がこの機能を削除した2015年11月以降のバージョンでは同じBlink系レンダリング・エンジンであるOperaも非対応となってしまった。Chromeで代替スタイル切替ができる仕組みにすればOperaでも操作可能になるはず。ほかSafariについては、環境がWindowsなので実験できず。
|
|
7
7
|
|
|
8
8
|
### 実現したいこと
|
|
9
|
-
- フォームのSelect
|
|
9
|
+
- フォームのSelectメニューからスタイル名を選択し、submitボタンで切替実行。
|
|
10
10
|
- 代替シート名以外に、初期設定（デフォルトの固定スタイルシート）とスタイル解除（プレーンHTMLのみ）も選択肢に出す。
|
|
11
|
-
- htmlにおけるlink要素で呼び出した外部スタイルシートを[HTML仕様書](https://triple-underscore.github.io/HTML-links-ja.html#rel-alternate)通りに反映させ、指定スタイルの適用順序は、第一に固定スタイルシート（title属性無し）があって、それにtitleありの優先スタイルシートか代替スタイルシートかが上書きされてゆく形にする。
|
|
11
|
+
- htmlヘッダーにおけるlink要素で呼び出した外部スタイルシートを[HTML仕様書](https://triple-underscore.github.io/HTML-links-ja.html#rel-alternate)通りに反映させ、指定スタイルの適用順序は、第一に固定スタイルシート（title属性無し。永続スタイルシート）があって、それにtitleありの優先スタイルシートか代替スタイルシートかが上書きされてゆく形にする。
|
|
12
12
|
- できれば、Cookieは使用しない方向で。
|
|
13
13
|
|
|
14
14
|
### 発生している問題
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
Opera 92.0.4561.43
|
|
125
125
|
|
|
126
126
|
### 追記
|
|
127
|
-
JavaScriptプログラム中、Chrome対策の`if ( sS[i].title || sS[i].title!="" ) {`以下四行を、スタイルシート一覧取得の函数からスタイルシート動的変更の函数へ移すと、ちょっと見には、うまくいったかと見えた。もろもろ修正したその改訂プログラムは下記の通り。
|
|
127
|
+
上掲JavaScriptプログラム中、Chrome対策の`if ( sS[i].title || sS[i].title!="" ) {`以下四行を、スタイルシート一覧取得の函数からスタイルシート動的変更の函数へ移すと、ちょっと見には、うまくいったかと見えた。もろもろ修正したその改訂プログラムは下記の通り。
|
|
128
128
|
```JavaScript
|
|
129
129
|
//** 改訂SwitchStyle.js **//
|
|
130
130
|
if (document.styleSheets
|
|
@@ -223,8 +223,8 @@
|
|
|
223
223
|
<script TYPE="text/javascript" charset="Shift_JIS" src="../SwitchStyle.js"></script>
|
|
224
224
|
</head>
|
|
225
225
|
```
|
|
226
|
-
Firefox
|
|
227
|
-
また、リロード直後いったん「スタイル解除」（NoStyle）を選択・実行してから次いで代替シートを選択・実行すると、最初から優先シートのスタイルを引き継がずに代替シートだけが適用される。この場合も、そのままサブミット・ボタンの二度押しをすれば優先シートも有効化し、三度押し
|
|
226
|
+
これで代替シートを選択して実行したら、Firefoxでは固定シートに代替スタイルが重ねられる形でスタイル指定が適用されて問題無かったが、ChromeやEdgeやOperaだと固定シートのみならず優先シートのスタイル指定（上記例では背景色）までもが継承されてしまって、そこに代替シートの指定が上書きされた表示となり、優先／代替の切換（スイッチ）にはなってくれない。但し、そのままプルダウン・メニューで代替シートを選択した状態でsubmitボタンの「切替」をもう一度押し直すと、優先シートのスタイルを切って代替シートのみ適用される。さらにそのまま三度目のsubmitボタンのクリックでは、また優先シートの指定が反映される状態に戻る。
|
|
227
|
+
また、リロード直後いったん「スタイル解除」（NoStyle）を選択・実行してから次いで代替シートを選択・実行すると、最初から優先シートのスタイルを引き継がずに代替シートだけが正しく適用される。この場合も、そのままサブミット・ボタンの二度押しをすれば優先シートも有効化するし、三度押し目ではまた優先シートの無効状態になる。
|
|
228
228
|
|
|
229
229
|
サブミット・ボタンの二度押しをプログラムに仕組めば良いのかとも思ったものの、二重送信を防止するプログラムはサンプルが多々見つかるのに対し、その逆に連続クリックを強制させるプログラムは見当たらない。それに、直前に選択されたメニューによって対応を変更せねばならないから場合分け（分岐）がややこしくて手にあまる。
|
|
230
|
-
Chrome対策用の`sS[i].disabled = !sS[i].disabled;`の二重化が悪さをしたのかもしれないけれど、これを削ってしまったら、改訂前の最初のプログラムと同じく代替シート選択時にまともに動作しなくなる。これ以外にChrome対策の手法を見出せないのだが
|
|
230
|
+
Chrome対策用の`sS[i].disabled = !sS[i].disabled;`の二重化が悪さをしたのかもしれないけれど、これを削ってしまったら、改訂前の最初のプログラムと同じく代替シート選択時にまともに動作しなくなる。これ以外にChrome対策の手法を見出せないのだが……もし他にあるのなら御教示戴きたい。
|
14
「追記」（改訂プログラム含む）
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
### 実現したいこと
|
|
9
9
|
- フォームのSelect要素でスタイル名を選択し、submitボタンで切替実行。
|
|
10
10
|
- 代替シート名以外に、初期設定（デフォルトの固定スタイルシート）とスタイル解除（プレーンHTMLのみ）も選択肢に出す。
|
|
11
|
-
- htmlにおけるlink要素で
|
|
11
|
+
- htmlにおけるlink要素で呼び出した外部スタイルシートを[HTML仕様書](https://triple-underscore.github.io/HTML-links-ja.html#rel-alternate)通りに反映させ、指定スタイルの適用順序は、第一に固定スタイルシート（title属性無し）があって、それにtitleありの優先スタイルシートか代替スタイルシートかが上書きされてゆく形にする。
|
|
12
12
|
- できれば、Cookieは使用しない方向で。
|
|
13
13
|
|
|
14
14
|
### 発生している問題
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
if ( sS[i].title || sS[i].title!="" ) {//titleあり（優先・代替スタイルシートあり）
|
|
50
50
|
sS[i].disabled = (sS[i].title==sheetTitle) ? false:true;//優先・代替か否か
|
|
51
51
|
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;//Chrome対策これでよい？
|
|
52
|
-
|
|
52
|
+
}
|
|
53
53
|
if (sheetTitles.indexOf(sS[i].title)==-1)
|
|
54
54
|
{
|
|
55
55
|
sheetTitles+=sS[i].title;
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
var select = createSelect();
|
|
86
86
|
if (document.styleSheets)
|
|
87
87
|
{
|
|
88
|
-
document.writeln('<form action="" name="StyleChangeForm" id="StyleChangeForm" onSubmit="return DoSelect(this);" style="clear:both;>');
|
|
88
|
+
document.writeln('<form action="" name="StyleChangeForm" id="StyleChangeForm" onSubmit="return DoSelect(this);" style="clear:both;">');
|
|
89
89
|
document.writeln(select + ' <input type="submit" value="切替">');
|
|
90
90
|
document.writeln('</form>');
|
|
91
91
|
}
|
|
@@ -116,7 +116,6 @@
|
|
|
116
116
|
- Chrome（旧Webkit）対策：https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
|
117
117
|
- 上記の改造：https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
118
118
|
|
|
119
|
-
|
|
120
119
|
### 環境
|
|
121
120
|
Windows 10 Home 21H2
|
|
122
121
|
Firefix106.0.3
|
|
@@ -124,3 +123,108 @@
|
|
|
124
123
|
Microsoft Edge 106.0.1370.52
|
|
125
124
|
Opera 92.0.4561.43
|
|
126
125
|
|
|
126
|
+
### 追記
|
|
127
|
+
JavaScriptプログラム中、Chrome対策の`if ( sS[i].title || sS[i].title!="" ) {`以下四行を、スタイルシート一覧取得の函数からスタイルシート動的変更の函数へ移すと、ちょっと見には、うまくいったかと見えた。もろもろ修正したその改訂プログラムは下記の通り。
|
|
128
|
+
```JavaScript
|
|
129
|
+
//** 改訂SwitchStyle.js **//
|
|
130
|
+
if (document.styleSheets
|
|
131
|
+
&& !(navigator.userAgent.indexOf("Mac_PowerPC") != -1
|
|
132
|
+
&& navigator.userAgent.indexOf("MSIE 4") != -1)) {
|
|
133
|
+
main();
|
|
134
|
+
}
|
|
135
|
+
function main() {
|
|
136
|
+
sheetTitles="";
|
|
137
|
+
if(document.styleSheets){
|
|
138
|
+
setSS();
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
// ///////////* スタイルシートの一覧を取得する *//////
|
|
142
|
+
function setSS(sheetTitle) {
|
|
143
|
+
sS=document.getElementsByTagName('link');//document.styleSheets;の代り、Chrome対策
|
|
144
|
+
if(sS) {
|
|
145
|
+
for(var i=0; i<sS.length; i++)
|
|
146
|
+
{
|
|
147
|
+
// if(sS[i].type!="text/css")continue;//Chrome対策だがHTML5以降はtype属性省略可
|
|
148
|
+
if(sS[i].rel.toLowerCase().indexOf("stylesheet")==-1)continue;//Chrome対策改
|
|
149
|
+
if (sheetTitles.indexOf(sS[i].title)==-1) // if(~sheetTitles.indexOf(sS[i].title))でも可
|
|
150
|
+
{
|
|
151
|
+
sheetTitles+=sS[i].title;
|
|
152
|
+
sheetTitles+=",";
|
|
153
|
+
}
|
|
154
|
+
if (sheetTitles.indexOf(sS[i].title)>-1)
|
|
155
|
+
var rel = sS[i].getAttribute("rel").toLowerCase();// sS[i].rel.toLowerCase();
|
|
156
|
+
if (rel == 'stylesheet' && !sS.preferredTitle) sS.preferredTitle = sS[i].title;
|
|
157
|
+
else if(~rel.indexOf('alternate')/**/ && !sS.alternateTitle)
|
|
158
|
+
sS.alternateTitle=sS[i].title;//不用？
|
|
159
|
+
}
|
|
160
|
+
sheetTitle=sheetTitles.split(",");
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
// /////////////* スタイルシートの動的切替 *///////////
|
|
164
|
+
function ChangeStyleAlter(sheetTitle) {
|
|
165
|
+
if(sS) {
|
|
166
|
+
for(var i=0; i<sS.length; i++) {
|
|
167
|
+
if(sS[i].rel.toLowerCase().indexOf("stylesheet")==-1) continue;//Chrome対策改
|
|
168
|
+
if ( sS[i].title || sS[i].title!="" ) //Chrome対策
|
|
169
|
+
{// titleがある（優先or代替スタイルシート）
|
|
170
|
+
sS[i].disabled = (sS[i].title==sheetTitle) ? false:true;//優先か代替か
|
|
171
|
+
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;//これでよい？
|
|
172
|
+
}
|
|
173
|
+
sS[i].disabled =
|
|
174
|
+
sheetTitle=='NoStyle' ? true :
|
|
175
|
+
sheetTitle=='Default' ? (sS[i].title!=sS.preferredTitle && sS[i].title) ://優先シート以外無効
|
|
176
|
+
(sS[i].title!=sheetTitle && sS[i].title);/**///選択シート以外の代替シート無効
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
// ///////* プルダウン・メニューから変更する *//////////////
|
|
181
|
+
function DoSelect() {
|
|
182
|
+
var sl = document.StyleChangeForm.SEL;
|
|
183
|
+
sheetTitle = sl.options[sl.selectedIndex].value;
|
|
184
|
+
ChangeStyleAlter(sheetTitle);
|
|
185
|
+
return false;
|
|
186
|
+
}
|
|
187
|
+
// スタイル変更フォーム(セレクト・メニュー)を出力
|
|
188
|
+
var select = createSelect();
|
|
189
|
+
if (document.styleSheets)
|
|
190
|
+
{
|
|
191
|
+
document.writeln('<form action="" name="StyleChangeForm" id="StyleChangeForm" onSubmit="return DoSelect();" style="clear:both;">');
|
|
192
|
+
document.writeln(select + ' <input type="submit" value="切替">');
|
|
193
|
+
document.writeln('</form>');
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
function createSelect(){
|
|
197
|
+
var links = document.all && document.all.tags('link') || document.getElementsByTagName('link');
|
|
198
|
+
var titles = new Array();
|
|
199
|
+
var select = '<label>スタイル選択：<select name="SEL" id="SEL" size="1">';
|
|
200
|
+
select += '<option value="Default"' + (sheetTitle == 'Default' ? ' selected="selected"' : '') + '>初期設定</option>';// title無し（スタイルシート無し、もしくは固定シート）
|
|
201
|
+
for(var i=0, sheetTitle; i<links.length; i++) {
|
|
202
|
+
sheetTitle = links[i].title;
|
|
203
|
+
if(links[i].rel.toLowerCase().indexOf('stylesheet')==-1) continue;//Chrome対策
|
|
204
|
+
if(sheetTitle && !titles[sheetTitle]) {
|
|
205
|
+
titles[sheetTitle] = true;
|
|
206
|
+
select += '<option value="' + sheetTitle + '"'
|
|
207
|
+
+ '>'
|
|
208
|
+
+ sheetTitle + '</option>';
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
select += '<option value="NoStyle"' + (sheetTitle == 'NoStyle' ? ' selected="selected"' : '') + '>スタイル解除</option>';
|
|
212
|
+
select += '</select></label>';
|
|
213
|
+
|
|
214
|
+
return select;
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
しかし、このプログラムは下記のごとき優先スタイルシートありの場合に、不具合が生じた。
|
|
218
|
+
```html
|
|
219
|
+
<head>
|
|
220
|
+
<link rel="stylesheet" type="text/css" href="../persistent.css"><!-- 固定シート -->
|
|
221
|
+
<link rel="stylesheet" type="text/css" href="../preferred.css" title="優先シート（背景色＝赤）">
|
|
222
|
+
<link rel="alternate stylesheet" type="text/css" href="../alternate.css" title="代替シート（文字色＝青）">
|
|
223
|
+
<script TYPE="text/javascript" charset="Shift_JIS" src="../SwitchStyle.js"></script>
|
|
224
|
+
</head>
|
|
225
|
+
```
|
|
226
|
+
Firefoxだと問題無かったが、ChromeやEdgeやOperaだと代替シートを選択して実行した場合に、固定シートのみならず優先シートのスタイル指定（上記例では背景色）までもが継承されてしまって、そこに代替シートの指定が上書きされた表示となり、優先／代替の切換にはならない。但し、そのままプルダウン・メニューで代替シートを選択した状態でsubmitボタンの「切替」を押し直すと、優先シートのスタイルを切って代替シートのみ適用される。さらにそのまま三度目のsubmitボタンのクリックでは、また優先シートの指定が反映される状態に戻る。
|
|
227
|
+
また、リロード直後いったん「スタイル解除」（NoStyle）を選択・実行してから次いで代替シートを選択・実行すると、最初から優先シートのスタイルを引き継がずに代替シートだけが適用される。この場合も、そのままサブミット・ボタンの二度押しをすれば優先シートも有効化し、三度押しすればまた優先シートの無効状態になる。
|
|
228
|
+
|
|
229
|
+
サブミット・ボタンの二度押しをプログラムに仕組めば良いのかとも思ったものの、二重送信を防止するプログラムはサンプルが多々見つかるのに対し、その逆に連続クリックを強制させるプログラムは見当たらない。それに、直前に選択されたメニューによって対応を変更せねばならないから場合分け（分岐）がややこしくて手にあまる。
|
|
230
|
+
Chrome対策用の`sS[i].disabled = !sS[i].disabled;`の二重化が悪さをしたのかもしれないけれど、これを削ってしまったら、改訂前の最初のプログラムと同じく代替シート選択時にまともに動作しなくなる。これ以外にChrome対策の手法を見出せないのだが、もし他にあるのなら御教示戴きたい。
|
13
プログラム中、閉ぢ括弧（}）が一つ多かったので削除。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -49,15 +49,15 @@
|
|
|
49
49
|
if ( sS[i].title || sS[i].title!="" ) {//titleあり（優先・代替スタイルシートあり）
|
|
50
50
|
sS[i].disabled = (sS[i].title==sheetTitle) ? false:true;//優先・代替か否か
|
|
51
51
|
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;//Chrome対策これでよい？
|
|
52
|
+
|
|
52
|
-
|
|
53
|
+
if (sheetTitles.indexOf(sS[i].title)==-1)
|
|
53
54
|
{
|
|
54
55
|
sheetTitles+=sS[i].title;
|
|
55
56
|
sheetTitles+=",";
|
|
56
57
|
}
|
|
57
|
-
|
|
58
|
+
if (sheetTitles.indexOf(sS[i].title)>-1) var rel = sS[i].rel;//LINK要素のrel属性
|
|
58
59
|
if (rel == 'stylesheet' && !sS.preferredTitle) sS.preferredTitle = sS[i].title;
|
|
59
60
|
else if(rel=='alternate stylesheet' && !sS.alternateTitle) sS.alternateTitle = sS[i].title;
|
|
60
|
-
}
|
|
61
61
|
}
|
|
62
62
|
if (!sS.preferredTitle) sheetTitles='Default,'+sheetTitles;
|
|
63
63
|
sheetTitles+="スタイル解除";
|
12
プログラム脱落行を補訂
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -73,6 +73,7 @@
|
|
|
73
73
|
sheetTitle=='Default' ? (sS[i].title!=sS.preferredTitle && sS[i].title) :
|
|
74
74
|
(sS[i].title!=sheetTitle && sS[i].title);
|
|
75
75
|
}
|
|
76
|
+
}
|
|
76
77
|
}
|
|
77
78
|
function DoSelect(sheetTitle) {
|
|
78
79
|
var sl = document.StyleChangeForm.SEL;
|
11
プログラム中で肝腎の、スタイルシートの動的切替をするfChangeSSを書き落とした儘だったのを修正。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -64,6 +64,16 @@
|
|
|
64
64
|
sheetTitle=sheetTitles.split(",");
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
+
function fChangeSS(sheetTitle) {///* スタイルシートの動的切替 */
|
|
68
|
+
if(sS) {
|
|
69
|
+
for(var i=0; i<sS.length; i++) {
|
|
70
|
+
if( sS[i].type.toLowerCase()!="text/css" )continue;
|
|
71
|
+
sS[i].disabled =
|
|
72
|
+
sheetTitle=='NoStyle' ? true :
|
|
73
|
+
sheetTitle=='Default' ? (sS[i].title!=sS.preferredTitle && sS[i].title) :
|
|
74
|
+
(sS[i].title!=sheetTitle && sS[i].title);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
67
77
|
function DoSelect(sheetTitle) {
|
|
68
78
|
var sl = document.StyleChangeForm.SEL;
|
|
69
79
|
sheetTitle = sl.options[sl.selectedIndex].value;
|
10
Opera補足
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
代替スタイルシートをJavaScriptで切換可能にしたい。
|
|
3
|
+
|
|
3
4
|
Firefoxではメニューバー→表示→スタイルシートで代替スタイルへの切換を選択できるが、これをJavaScriptによってページ上部のプルダウン・メニューからも選択可能にし、この機能を実装しないGoogle ChromeやMicrosoft Edge等のFirefox以外のブラウザーでも代替スタイルシートを利用可能にしたい。
|
|
5
|
+
|
|
6
|
+
[ブラウザーの互換性の表](https://developer.mozilla.org/ja/docs/Web/CSS/Alternative_style_sheets#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)によってはOperaも代替スタイルシート対応とするものがあるが、GoogleChrome48がこの機能を削除した2015年11月以降のバージョンでは同じBlink系レンダリング・エンジンなのでOperaも非対応となってしまった。Chromeで代替スタイル切替ができる仕組みにすればOperaでも可能になるはず。ほかにSafariは、環境がWindowsなので実験できない。
|
|
4
7
|
|
|
5
8
|
### 実現したいこと
|
|
6
9
|
- フォームのSelect要素でスタイル名を選択し、submitボタンで切替実行。
|
|
7
10
|
- 代替シート名以外に、初期設定（デフォルトの固定スタイルシート）とスタイル解除（プレーンHTMLのみ）も選択肢に出す。
|
|
8
|
-
- htmlにおけるlink要素でのスタイルシート
|
|
11
|
+
- htmlにおけるlink要素での外部スタイルシート導入を[HTML仕様書](https://triple-underscore.github.io/HTML-links-ja.html#rel-alternate)通りに反映させ、指定スタイルの適用順序は、第一に固定スタイルシート（title属性無し）があって、それにtitleありの優先スタイルシートか代替スタイルシートかが上書きされてゆく形にする。
|
|
9
12
|
- できれば、Cookieは使用しない方向で。
|
|
10
13
|
|
|
11
14
|
### 発生している問題
|
|
12
|
-
Firefoxではうまくいったのだが、Google ChromeとMicrosoft Edgeでは不具合が生じます。
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
Firefoxではうまくいったのだが、Google ChromeとMicrosoft EdgeやOperaでは不具合が生じます。
|
|
16
|
+
|
|
17
|
+
例）link要素に優先スタイルシートが無い場合、リロード直後のページで最初に「代替シート１」を選択→実行してもスタイル表示に変化なく、「スタイル解除」の実行しか有効でない。しかし、その「スタイル解除」の実行後、さらに「初期設定」を選択して実行した後では、「代替シート１」の選択・実行も可能になる。Firefoxならば最初からメニューにある「代替シート１」「スタイル解除」のどれも選択してスタイル変更できた。
|
|
18
|
+
|
|
19
|
+
ChromeやEdgeやOperaでもFirefox同様の動作をさせるには、プログラムをどう直したらよいのですか。
|
|
15
20
|
|
|
16
21
|
### 該当のソースコード
|
|
17
22
|
```html
|
|
@@ -96,7 +101,7 @@
|
|
|
96
101
|
### 試したこと
|
|
97
102
|
下記を参考にしました。
|
|
98
103
|
- スタイルシートの一覧を取得する：http://critical.s6.xrea.com/web/cssselect.html
|
|
99
|
-
- 固定スタイルシートへ優先
|
|
104
|
+
- 固定スタイルシートへ優先or代替スタイルシートを重ね書きする：https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
100
105
|
- Chrome（旧Webkit）対策：https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
|
101
106
|
- 上記の改造：https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
102
107
|
|
|
@@ -106,4 +111,5 @@
|
|
|
106
111
|
Firefix106.0.3
|
|
107
112
|
Google Chrome 107.0.5304.88
|
|
108
113
|
Microsoft Edge 106.0.1370.52
|
|
114
|
+
Opera 92.0.4561.43
|
|
109
115
|
|
9
固定シートと優先・代替シートの関係について等補足。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
### 実現したいこと
|
|
6
6
|
- フォームのSelect要素でスタイル名を選択し、submitボタンで切替実行。
|
|
7
7
|
- 代替シート名以外に、初期設定（デフォルトの固定スタイルシート）とスタイル解除（プレーンHTMLのみ）も選択肢に出す。
|
|
8
|
+
- htmlにおけるlink要素でのスタイルシート指定を仕様書通りに反映させ、スタイルの適用順序は、第一に固定スタイルシート（title属性無し）があって、それにtitleありの優先スタイルシートか代替スタイルシートが上書きされる形にする。
|
|
8
9
|
- できれば、Cookieは使用しない方向で。
|
|
9
10
|
|
|
10
11
|
### 発生している問題
|
|
@@ -94,10 +95,11 @@
|
|
|
94
95
|
|
|
95
96
|
### 試したこと
|
|
96
97
|
下記を参考にしました。
|
|
97
|
-
http://critical.s6.xrea.com/web/cssselect.html
|
|
98
|
+
- スタイルシートの一覧を取得する：http://critical.s6.xrea.com/web/cssselect.html
|
|
98
|
-
https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
99
|
+
- 固定スタイルシートへ優先・代替スタイルシートを重ね書きする：https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
100
|
+
- Chrome（旧Webkit）対策：https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
|
99
|
-
https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
101
|
+
- 上記の改造：https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
100
|
-
|
|
102
|
+
|
|
101
103
|
|
|
102
104
|
### 環境
|
|
103
105
|
Windows 10 Home 21H2
|
8
前提を書き足した。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
代替スタイルシートをJavaScriptで切換可能にしたい。
|
|
3
|
+
Firefoxではメニューバー→表示→スタイルシートで代替スタイルへの切換を選択できるが、これをJavaScriptによってページ上部のプルダウン・メニューからも選択可能にし、この機能を実装しないGoogle ChromeやMicrosoft Edge等のFirefox以外のブラウザーでも代替スタイルシートを利用可能にしたい。
|
|
3
4
|
|
|
4
5
|
### 実現したいこと
|
|
5
6
|
- フォームのSelect要素でスタイル名を選択し、submitボタンで切替実行。
|
|
@@ -7,7 +8,7 @@
|
|
|
7
8
|
- できれば、Cookieは使用しない方向で。
|
|
8
9
|
|
|
9
10
|
### 発生している問題
|
|
10
|
-
Firefoxではうまくいったのだが、Google ChromeとMicrosoftEdgeでは不具合が生じます。
|
|
11
|
+
Firefoxではうまくいったのだが、Google ChromeとMicrosoft Edgeでは不具合が生じます。
|
|
11
12
|
例）link要素に優先スタイルシートが無い場合、リロードしたページで最初に「代替シート１」を選択→実行してもスタイル表示に変化なく、「スタイル解除」の実行しか有効でない。しかし、その「スタイル解除」の実行後、さらに「初期設定」を選択して実行した後では、「代替シート１」の選択・実行も可能になる。Firefoxならば最初から「初期設定」「代替シート１」「スタイル解除」の三つどれも選択してスタイル変更できた。
|
|
12
13
|
ChromeやEdgeでもFirefox同様の動作をさせるには、プログラムをどう直したらよいのですか。
|
|
13
14
|
|
7
タグにChrome追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
6
d. → document. に修正。」
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
function DoSelect(sheetTitle) {
|
|
61
|
-
var sl = d.StyleChangeForm.SEL;
|
|
61
|
+
var sl = document.StyleChangeForm.SEL;
|
|
62
62
|
sheetTitle = sl.options[sl.selectedIndex].value;
|
|
63
63
|
fChangeSS(sheetTitle);
|
|
64
64
|
return false;
|
5
Cookie不使用の方針を追記。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
代替スタイルシートをJavaScriptで切換可能にしたい。
|
|
3
3
|
|
|
4
4
|
### 実現したいこと
|
|
5
|
-
-
|
|
5
|
+
- フォームのSelect要素でスタイル名を選択し、submitボタンで切替実行。
|
|
6
|
-
-
|
|
6
|
+
- 代替シート名以外に、初期設定（デフォルトの固定スタイルシート）とスタイル解除（プレーンHTMLのみ）も選択肢に出す。
|
|
7
|
+
- できれば、Cookieは使用しない方向で。
|
|
7
8
|
|
|
8
9
|
### 発生している問題
|
|
9
10
|
Firefoxではうまくいったのだが、Google ChromeとMicrosoftEdgeでは不具合が生じます。
|
|
10
|
-
例）link要素に優先スタイルシートが無い場合、リロードしたページで最初に「代替シート１」を選択
|
|
11
|
+
例）link要素に優先スタイルシートが無い場合、リロードしたページで最初に「代替シート１」を選択→実行してもスタイル表示に変化なく、「スタイル解除」の実行しか有効でない。しかし、その「スタイル解除」の実行後、さらに「初期設定」を選択して実行した後では、「代替シート１」の選択・実行も可能になる。Firefoxならば最初から「初期設定」「代替シート１」「スタイル解除」の三つどれも選択してスタイル変更できた。
|
|
11
12
|
ChromeやEdgeでもFirefox同様の動作をさせるには、プログラムをどう直したらよいのですか。
|
|
12
13
|
|
|
13
14
|
### 該当のソースコード
|
|
14
|
-
|
|
15
15
|
```html
|
|
16
16
|
<head>
|
|
17
17
|
<link rel="stylesheet" type="text/css" href="../persistent.css">
|
|
@@ -34,14 +34,14 @@
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
function ChangeStyleAlter(sheetTitle) {
|
|
37
|
-
sS=document.getElementsByTagName('link');
|
|
37
|
+
sS=document.getElementsByTagName('link');// document.styleSheetsの代り
|
|
38
38
|
if(sS) {///* ここでスタイルシートの一覧を取得する */
|
|
39
39
|
for( i=0; i<sS.length; i++)
|
|
40
40
|
{
|
|
41
41
|
if( sS[i].type!="text/css" )continue;
|
|
42
|
-
if ( sS[i].title || sS[i].title!="" ) {//title
|
|
42
|
+
if ( sS[i].title || sS[i].title!="" ) {//titleあり（優先・代替スタイルシートあり）
|
|
43
43
|
sS[i].disabled = (sS[i].title==sheetTitle) ? false:true;//優先・代替か否か
|
|
44
|
-
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;//
|
|
44
|
+
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;//Chrome対策これでよい？
|
|
45
45
|
if (sheetTitles.indexOf(sS[i].title)==-1)
|
|
46
46
|
{
|
|
47
47
|
sheetTitles+=sS[i].title;
|
|
@@ -93,6 +93,7 @@
|
|
|
93
93
|
|
|
94
94
|
### 試したこと
|
|
95
95
|
下記を参考にしました。
|
|
96
|
+
http://critical.s6.xrea.com/web/cssselect.html
|
|
96
97
|
https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
97
98
|
https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
98
99
|
https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
4
参考リンク追加。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -95,6 +95,7 @@
|
|
|
95
95
|
下記を参考にしました。
|
|
96
96
|
https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
97
97
|
https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
98
|
+
https://www.usamimi.info/~geko/arch_web/02_sample/018/index.html
|
|
98
99
|
|
|
99
100
|
### 環境
|
|
100
101
|
Windows 10 Home 21H2
|
3
プログラムのコメント修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
{
|
|
41
41
|
if( sS[i].type!="text/css" )continue;
|
|
42
42
|
if ( sS[i].title || sS[i].title!="" ) {//titleがある（優先・代替スタイルシートあり）
|
|
43
|
-
sS[i].disabled = (sS[i].title==sheetTitle) ? false:true;//
|
|
43
|
+
sS[i].disabled = (sS[i].title==sheetTitle) ? false:true;//優先・代替か否か
|
|
44
44
|
sS[i].disabled = !sS[i].disabled; sS[i].disabled = !sS[i].disabled;// これでよい？
|
|
45
45
|
if (sheetTitles.indexOf(sS[i].title)==-1)
|
|
46
46
|
{
|
2
タグにDOM追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
1
「試したこと」に参考リンク追記。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -93,6 +93,7 @@
|
|
|
93
93
|
|
|
94
94
|
### 試したこと
|
|
95
95
|
下記を参考にしました。
|
|
96
|
+
https://mevius.5ch.net/test/read.cgi/hp/991400015/433-439
|
|
96
97
|
https://mevius.5ch.net/test/read.cgi/hp/991400015/549-550
|
|
97
98
|
|
|
98
99
|
### 環境
|