Пиксельная стрелка Тумблера - PullRequest
1 голос
/ 20 октября 2011

Если вы посмотрите здесь:

http://www.tumblr.com/explore

Вы заметите фоновое поле и маленький треугольник над пунктом меню "исследовать". Я очень люблю дизайн Тамблера, поэтому я пытался узнать, что я могу из этого. Когда я использовал удобные инструменты разработчика Chrome, я увидел, что для маленького треугольника они «рисовали» его пиксель за пикселем. У них 6 делений в пикселе. Первый имеет ширину 11 пикселей, второй - 9, третий - 7 ...

Это поднимает всевозможные маленькие флажки в моей голове, но я только начал заниматься веб-разработкой, поэтому я решил спросить людей, которые знают об этом больше.

Итак, все вы, профессионалы, в чем заключаются плюсы и минусы создания пикселя за пикселем с элементами HTML вместо использования изображения?

Ответы [ 2 ]

4 голосов
/ 20 октября 2011

Преимущества заключаются в том, что он будет одинаковым во всех браузерах, даже в IE6, и он не будет делать дополнительный HTTP-запрос для метода фонового изображения.Вес CSS, уменьшенная семантика и более грязный код.Лучшей альтернативой, даже использованию изображения, было бы использование псевдоэлемента, имеющего форму треугольника.Это не отнимает ни у чистого кода, ни у семантики.

0 голосов
/ 20 октября 2011

Хотя это и обеспечивает прозрачность в IE6, как отмечают другие, это не очень убедительно, поскольку вы всегда можете использовать прозрачный GIF для этого приложения.

Я бы сказал, что этот хак здесь на один меньшезвонок на сервер.Это имеет два основных преимущества:

  • Мгновенная видимость.Если вся информация, необходимая для визуализации изображения, содержится в CSS и HTML, она может быть визуализирована как можно скорее.Дополнительного сетевого вызова нет.
  • Выход из критического пути.На этой странице много файлов для загрузки.Поскольку браузеры ограничивают количество одновременных подключений к серверу, любой файл, который вы можете удалить из процесса запуска, улучшит время загрузки.

Альтернативой может быть использование URL-адреса данных, содержащего прозрачный PNG.Это лучше в том, что это не зависит от взлома, но хуже в том, что IE6 и IE7 не могут его поддерживать.Более распространенной практикой является объединение всех изображений, используемых страницей, в изображение спрайта и использование фонов CSS с background-position для обрезки точного изображения.Недостатком этого является то, что по-прежнему требуется сетевой вызов, но его можно связать с URL-адресом данных, если вам не нужен IE6 или IE7.

Недостатком, конечно, является то, что это хак, а не правильныйспособ ведения дел.

В итоге:

PROS

  • Быстрый рендеринг
  • Не требуется сетевой вызов
  • Улучшенная страницавремя загрузки
  • Поддержка нескольких браузеров

CONS

  • Это просто не то, что вы должны делать.

Мне лично это нравится, и я бы сделал что-то подобное, если бы мне пришлось.

...