CSSスプライトをやる際に気をつけることメモ

いつもぼくがCSSスプライトをやるときは、
要素の背景画像にする → 文章をspanで囲って消す。ってやり方だったのです。

つまり


  <h1><a href="./" id="logo"><span class="hide">タイトル</span></a></h1>
  
  #logo {
    background: url(images/logo.png) no-repeat;
    width: 100px;
    height: 50px;
    display: block;
  }
    #logo:hover {
      background-position: 0 -50px;
    }
  span.hide {
  	display: none;
  }

みたいな書き方をしていたわけです。

しかし、この書き方だと、
「h1タグの中のaタグの中のspanの中の、、、」って三回もDOMを探ってるわけなのです。
text-indent: -9999;なんかよりもdisplay: none;のほうが、なんかカッコいい!と思って書いていたわけですが(嘘です。もうちょっとましな理由があります)、
そんな浅はかなバカヤロウな自分のせいで、、、今までこのやり方で書いてきてごめんなさい。

本当は、


  <h1><a href="" id="logo">タイトル</a></h1>
  
  #logo {
    background: url(images/logo.png) no-repeat;
    width: 100px;
    height: 50px;
    display: block;
    text-indent: -9999px;
  }
    #logo:hover {
      background-position: 0 -50px;
    }

と書いたほうがサイト高速化にもなります。

みなさんもこのやり方で書いていきましょう。