#html #css #tumblr
#HTML #css #tumblr
Вопрос:
Если вы посмотрите здесь:
Вы заметите фоновую рамку и маленький треугольник над пунктом меню «исследовать». Мне очень нравится дизайн Tumblr, поэтому я пытался извлечь из него все, что могу. Когда я использовал удобные инструменты разработчика Chrome, я увидел, что для маленького треугольника они «нарисовали» его пиксель за пикселем. У них 6 divs на пиксель в высоту. Ширина первого составляет 11 пикселей, второго — 9, третьего — 7…
Это поднимает всевозможные маленькие флажки в моей голове, но я только начал заниматься веб-разработкой, поэтому я решил спросить людей, которые знают об этом больше.
Итак, все вы, профессионалы, каковы плюсы и минусы создания дизайна попиксельно с элементами HTML вместо использования изображения?
Ответ №1:
Преимущества в том, что он будет одинаковым во всех браузерах, даже в IE6, и он не делает дополнительный HTTP-запрос для метода фонового изображения.
Недостатком, конечно, является увеличенный вес HTML и CSS, уменьшенная семантика и более беспорядочный код. Лучшей альтернативой, даже для использования изображения, было бы использование псевдоэлемента, имеющего форму треугольника. Это не отнимет у чистого кода или семантики.
Комментарии:
1. Как бы вы использовали псевдоэлемент для создания треугольника? И как долго они поддерживаются?
2. Границы стрелок CSS не всегда получаются симметричными. Это одна из причин, по которой мне не нравятся VideoJS.
3. @BrianNickel: Посмотрите на ссылку, которую опубликовал ЭНевес — она идеально симметрична.
4. Хорошо, для этого приложения это не проблема, но для других приложений это может быть. Левая граница занимает всю высоту объекта, то есть верхняя и нижняя границы занимают верх
(width - 1px), а правая граница занимает верх(height - 2px). Вот почему VideoJS выглядит так плохо.
Ответ №2:
Хотя это обеспечивает прозрачность в IE6, как отмечают другие, это не очень убедительно, поскольку вы всегда можете использовать прозрачный GIF для этого приложения.
Я бы сказал, что этот хак здесь для того, чтобы на один вызов сервера стало меньше. Это имеет два основных преимущества:
- Мгновенная видимость. Если вся информация, необходимая для отображения изображения, содержится в CSS и HTML, его можно отобразить как можно скорее. Нет дополнительного сетевого вызова.
- Выход из критического пути. На этой странице загружается много файлов. Поскольку браузеры ограничивают количество одновременных подключений к серверу, любой файл, который вы можете удалить из процесса запуска, увеличит время загрузки.
Альтернативой может быть использование URL-адреса данных, содержащего прозрачный PNG. Это лучше тем, что не зависит от взлома, но хуже тем, что IE6 и IE7 не могут его поддерживать. Более распространенной практикой является объединение всех изображений, используемых страницей, в спрайтовое изображение и использование CSS-фонов background-position для обрезки точного изображения. Недостатком этого является то, что по-прежнему требуется сетевой вызов, но его можно связать с URL-адресом данных, если вам не нужен IE6 или IE7.
Недостатком, конечно, является то, что это взлом и неправильный способ ведения дел.
Вкратце:
ПЛЮСЫ
- Быстрый рендеринг
- Сетевой вызов не требуется
- Улучшено время загрузки страницы
- Кроссбраузерная поддержка
МИНУСЫ
- Это просто не то, как вы должны что-то делать.
Лично мне это нравится, и я бы обязательно сделал что-то подобное, если бы пришлось.