このウェブサイトはどのようにイメージをレンダリングしますか？

Question

youtube.com用のユーザースクリプトを作成していて、YouTubeページの他のボタンと同じルックアンドフィールのボタンを挿入したいと考えています。過去はうまくいっていましたが、突然停止しました。 は、任意のユーチューブ映像の上にこの画像のボタンを見てください：

だから、僕はこれらのボタンは、テキストと画像のサブノードを含む、Firebugの中で一つのことに気づいたが、レンダリングされていませんソース画像URLを与えるだけの単純な画像です。これらの画像の 'src'属性（「プラス記号」画像または「下向き矢印」画像）または他のすべての画像には、正確に同じURL（1 x 1画像）：//s.ytimgがあります。 com/yt/img/pixel-vfl3z5WfW.gif。しかし、最終的には、これらのすべての異なるイメージとしてレンダリングされます。その結果、私のボタンで同じことをすると、他のすべてのCSSプロパティは正常に動作しますが、画像は空白になります。

私はちょうどHTML/JavaScriptの/ CSSの専門家から知ってほしい -

1. どのように彼らはこれをやっていますか？
2. これらを最終的にCSS/javascriptでレンダリングするにはどうすればいいですか？

ありがとう！

P.S. ：
- 司会者がこの質問を終了したい場合は、プログラミングに関する質問ではありません。どのようにこの種の '検出不可能な' htmlイメージを実現できるのか、あるいはjavascript/html/cssを通してどうやってそのイメージを取り込むことができるのか知るために。
- 司会者が（youtube.comについて）それがあまりにも具体的であるというこの質問を終了したい場合、そうではありません。 HTMLに関する一般的な質問ですが、これまでのところYouTubeだけでしか実装されていません。私は初心者です。

おかげで、
Piyush

Answer 1

この技術は、CSSスプライトと呼ばれています。これは、HTTP要求の量を減らすために使用されます。

基本的に、すべてのアイコンを持つ画像は1つのみです（サーバーから1つの画像を読み込むだけです）。あなたは、CSSのプロパティbackground-positionで表示して再生するアイコンのサイズに定義された幅/高さを持つ要素の背景画像としてこの画像を使用し、背景をアイコンの上/左に配置して背景画像。

だから、重要な部分は以下のとおりです。

• は背景
• として画像を設定し、あなたの要素にサイズを設定します。イメージはバックグラウンドとして使用されるので、暗黙のうちにイメージのサイズを持たないでしょう！
• は、バックグラウンド位置規則

を設定

YouTubeの次の画像を使用している：http://s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png

画像であるに16px/16pxに大きさと "プラス" アイコンの左上/位置97px/66pxにあるので、次の背景位置値を使用します。

background-image: url(//s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png); 
background-position-x: -97px; 
background-position-y: -66px; 
width: 16px; 
height: 16px; 

深い読み：

• CSS Sprites: Image Slicing’s Kiss of Death
• The mystery of CSS sprites

ジェネレータ：

• Online CSS Sprites Generator

Answer 2

この技術は、 "CSSスプライト" と呼ばれている。

• http://css-tricks.com/css-sprites/
• http://www.alistapart.com/articles/sprites
• http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
• https://stackoverflow.com/search?q=css+sprites

彼らはone image with all the backgroundsを使用して、要素の高さと幅を設定し、そのように背景を配置するためにCSSを使用していますその一部だけが明らかにされています。

YouTubeのケースでは、1x1の空白の<img>が表示され、imgタグ自体に背景画像が設定されています。

Answer 3

そのタグのCSS宣言を見てください。例えば、のようなボタンは、このHTMLを持っています

<button onclick=";return false;" title="I like this" type="button" class="start yt-uix-tooltip-reverse yt-uix-button yt-uix-button-default yt-uix-tooltip" id="watch-like" data-button-toggle="true" data-button-action="yt.www.watch.actions.like" role="button" data-tooltip-text="I like this"> 
    <img class="yt-uix-button-icon yt-uix-button-icon-watch-like" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="I like this"><span class="yt-uix-button-content">Like </span> 
</button> 

とCSSで宣言があります：

#watch-actions .yt-uix-button-icon-watch-like { 
    background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refresh-vflmpZ5kj.png) -75px -102px; 
    width: 13px; 
    height: 15px; 
} 

WWW-リフレッシュvflmpZ5kj.pngはスプライトで、背景の宣言はでそれを配置します - サムスンアップアイコンの位置である75ピクセルと-102ピクセルです。

Answer 4

私はyoutube.comのユーザースクリプトを作成し、YouTubeページの他のボタンと同じルックアンドフィールのボタンを挿入したいと考えています。

ボタンにクラスyt-uix-button yt-uix-button-defaultを与えて、他のボタンと同じ外観と感じるようにします。自分のYouTubeユーザースクリプトでも同じことをしています。

過去には機能していましたが、突然停止しました。

ええ、彼らは最後の大きなアップデートの間に少しでもクラス名を変更しました。

以前は、あなたのコメントで指摘したとおり、クラスはちょうどyt-uix-buttonだったので、yt-uix-button-defaultも追加する必要があります。

---

ここに私のカスタムボタンは、ちょうどそれが動作を示すために、です;）