難でもアリ: ブラウザのアイコンをHTML上でグレースケールにしたりしてみる

ブラウザ毎に動作する、しないを
アイコンをグレースケールにして表現したかったので
やってみました
チェックを操作すると動きます

SAMPLE

chrome firefox ie safari(iOS)

上段

×動作せず

●

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枚画像のが好みです

2015年6月25日木曜日

ブラウザのアイコンをHTML上でグレースケールにしたりしてみる

ラベル