ブラウザ毎に動作する、しないを
アイコンをグレースケールにして表現したかったので
やってみました
チェックを操作すると動きます
SAMPLE
上段
Firefox：×は2回目以降グレースケールにならない。なぜかは不明
safari(iOS)はアップするまで見れる環境無し・・
下段
safari(iOS)はアップするまで見れる環境無し・・
違いは・・？
上段はブラウザ毎に１つずつアイコンがあり
cssでグレースケールで変色させてます
それに対し下段は1枚の画像の中にカラーとグレースケールがあり
cssでその座標の一部を表示しています
↓このような1枚の画像です
ではコードです。
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span><br />
<div id= "c2"></div>
<div id= "f2"></div>
<div id= "i2"></div>
<div id= "s2"></div>
#c1 {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
#f1 {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
#i1 {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
#s1 {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
#c2 {
background-image:url("1枚画像のURL");
width:32px;
height:32px;
float: left;
}
#f2 {
background-image:url("1枚画像のURL");
width:32px;
height:32px;
float: left;
margin-left: 3px;
}
#i2 {
background-image:url("1枚画像のURL");
width:32px;
height:32px;
float: left;
margin-left: 3px;
}
#s2 {
background-image:url("1枚画像のURL");
width:32px;
height:32px;
margin-left: 3px;
float: left;
}
//チェックボタン押下時処理
function oncheck(){
var chromef = (document.getElementById("chk-chrome").checked);
var firefoxf = (document.getElementById("chk-firefox").checked);
var ief = (document.getElementById("chk-ie").checked);
var safarif = (document.getElementById("chk-safari").checked);
fncBrowserIco(chromef,firefoxf,ief,safarif);
}
//メイン処理
// chrome1 firefox1 ie1 safari1は上段用処理
// chrome2 firefox2 ie2 safari2は下段用処理
function fncBrowserIco(chromef, firefoxf, ief, safarif) {
var chrome1 = $('#c1');
var chrome2 = $('#c2');
var firefox1 = $('#f1');
var firefox2 = $('#f2');
var ie1 = $("#i1");
var ie2 = $("#i2");
var safari1 = $("#s1");
var safari2 = $("#s2");
if (chromef === true) {
chrome1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
chrome2.css('background-position', '0px 0px');
} else {
chrome1.css('url("data:image/svg+xml;utf8,#grayscale")');
chrome1.css({filter: 'gray' , '-webkit-filter': 'grayscale(100%)'});
chrome2.css({'background-position': '0px -32px'});
}
if (firefoxf === true) {
firefox1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
firefox2.css({'background-position': '96px 0px'});
}else{
firefox1.css('url("data:image/svg+xml;utf8,#grayscale")');
firefox1.css({filter: 'gray','-webkit-filter': 'grayscale(100%)'});
firefox2.css({'background-position': '96px 32px'});
}
if (ief === true) {
ie1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
ie2.css({'background-position': '64px 0px'});
}else{
ie1.css('url("data:image/svg+xml;utf8,#grayscale")');
ie1.css({filter: 'gray','-webkit-filter': 'grayscale(100%)'});
ie2.css({'background-position': '64px 32px'});
}
if (safarif === true) {
safari1.css({filter: 'none','-webkit-filter': 'grayscale(0%)'});
safari2.css({'background-position': '32px 0px'});
}else{
safari1.css('url("data:image/svg+xml;utf8,#grayscale")');
safari1.css({filter: 'gray', '-webkit-filter': 'grayscale(100%)'});
safari2.css({'background-position': '32px 32px'});
}
}
//初回は全部グレースケールとする
fncBrowserIco(false, false, false, false);
個人的に下段のほうが良いです。
画像が1枚で済む上、最近のブラウザならほぼ大丈夫でしょう
下段だけの処理だとコードが少ないです。
上段はfirefox用のグレースケール処理の「url("data:image・・・」が長すぎるんですけどね
他にもそもそもグレースケールしたアイコンを用意しておく手もあります
そっちのが楽かもしれませんが、やはり早いので1枚画像のが好みです
1867年2月9日（慶応3年1月5日） - 1916年（大正5年）12月9日）は、日本の小説家、評論家、英文学者。本名、金之助（きんのすけ）。江戸の牛込馬場下横町（現在の東京都新宿区喜久井町）出身。俳号は愚陀仏。
wiki
と
正岡子規
1867年10月14日（慶応3年9月17日） - 1902年（明治35年）9月19日）は、日本の俳人、歌人、国語学研究家。名は常規（つねのり）。幼名は処之助（ところのすけ）で、のちに升（のぼる）と改めた。
wiki
