Как работает спрайт фоновых изображений кнопок в Gmail?

Question

Только что заметил, что спрайт, используемый Gmail для фона кнопок в пользовательском интерфейсе, выглядит так:

И все мы знаем, что это настоящие кнопки в действии:

До сих пор (и даже сейчас) я думал, что смежные значки в этом плотно упакованном прямоугольном спрайте будут появляться на любых фоновых изображениях.Но на любой кнопке Gmail отображается только один значок.
Это просто CSS?Это JavaScript?Это .. магия?

Answer 1

Это CSS, и некоторые «лишние калории» называются вложенными DIVs .Фактическая иконка - это отдельный DIV, расположенный в центре кнопки, который едва достаточно велик, чтобы уместиться на одну иконку.

Answer 2

CSS.

Они устанавливают background, height и width в пределах <div> нескольких слоев глубиной.

Если вы используете Chromeи щелкните правой кнопкой мыши любую из этих кнопок пользовательского интерфейса и выберите Inspect Element, чтобы увидеть, как работают вложенные <div>.HTML и CSS немного запутаны благодаря тому, как Google развертывает их код, но это должно быть достаточно легко понять.