Только что заметил, что спрайт, используемый Gmail для фона кнопок в пользовательском интерфейсе, выглядит следующим образом:
И все мы знаем, что это настоящие кнопки в действии:
До сих пор (и даже сейчас) моя идея заключалась в том, что соседние значки в этом плотно упакованном прямоугольном спрайте будут отображаться на любых фоновых изображениях. Но на любой кнопке Gmail отображается только один значок.
Это просто CSS? Это JavaScript? Это... магия?
Это CSS и некоторые «лишние калории», называемые вложенными элементами DIV. Настоящая иконка представляет собой отдельный DIV, расположенный в центре кнопки, который едва умещается на одной иконке.
Они установили background, height и width в пределах <div> нескольких слоев в глубину.
Если вы используете Chrome и щелкните правой кнопкой мыши любую из этих кнопок пользовательского интерфейса и выберите Inspect Element, вы увидите, как работают вложенные <div>. HTML и CSS немного запутаны из-за того, как Google развертывает свой код, но они должны быть достаточно простыми для понимания.
