Вас попросили улучшить удобство их использования. Кроме того, ваше приложение плохо подходит для инструментов анализа производительности. Одна из причин этого заключается в том, что многие страницы загружают множество компонентов, что приводит к слишком большому количеству HTTP-запросов. Пришло время рассмотреть механизмы уменьшения количества HTTP-запросов, необходимых для отображения ваших страниц.
Решение
Хорошо рассмотрим юзабилити в первую очередь. Изображения для кнопок выглядят не так плохо. Понятно, что они имеют в виду и что они будут делать, поэтому нет особого смысла добавлять подсказки. Но мы могли бы сделать вещи более гладкими с некоторыми «зависаниями». Что зависает? Наведение — это метод, который динамически меняет компонент, когда мышь «зависает» над ним. Технически всплывающие подсказки являются формой зависания, но существуют и другие типы: компоненты могут менять цвет или светиться. Давайте применим некоторую магию парения к нашим кнопкам prev / next. Наведите указатель мыши на кнопки ниже, сделайте это несколько раз и наблюдайте, как они светятся.
Так как же мы все это сделали? Ну, во-первых, мы делаем альтернативные изображения наших оригинальных изображений. Это можно сделать с помощью любого приличного инструмента редактирования: GIMP, Paint Shop Pro, выбор — для этого примера я просто использовал Picaso. Второе, что нужно сделать, — объединить четыре отдельных изображения с помощью такого инструмента, как
генератор CSS Sprite, в одно изображение.
Почему одно изображение? Ну, это для части производительности. HTTP-запросы могут быть дорогими. Мы не хотим иметь 4 отдельных HTTP-запроса для 4 изображений. Таким образом, вместо этого у нас есть одно изображение, которое содержит все, что нам нужно. Это загружает все четыре компонента за один раз. Затем мы используем некоторые хитрости CSS для:
- Вытащите 2 изображения из одного большого спрайта
- Переключите изображения на их всплывающие версии, когда мышь над ними
Так как же нам все это … пора взглянуть на CSS.
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:60px;display:block;}
#prev{left:0px;width:60px;}
#prev{background:url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') 0 0;}
#prev a:hover{background: url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') -60px -60px;}
#next{left:61px;width:60px;}
#next{background:url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') 0 -60px;}
#next a:hover{background: url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') +60px 0px;}
объяснение
- CSS показывает стилизованный список навигации. Список с id = «navlist» получит преимущества в стиле.
- Элемент с id = «prev» обнаружит коллекцию изображений, также называемую «листом спрайта», и выделит ту часть изображения, которую он хочет, т.е. стрелку влево
- Элемент с id = «next» убирает стрелку вправо
- «prev» и «next» имеют изображения при наведении, которые также взяты из листа спрайта и будут отображаться, когда на них наводит курсор мыши.
Итак, поехали. Лучшее удобство и простота использования. Хороший день работы. Итак, есть еще вопросы? Ну, очевидно, почему бы просто не использовать карту изображений? Это также уменьшит количество HTTP-запросов. Это правда. Но это не так гибко, как использование CSS-спрайтов. Когда используются карты изображений, изображения должны быть непрерывными. Используя технику CSS-спрайтов, вы можете разделить их по своему вкусу. Целый набор изображений может быть помещен на один спрайт, а затем может использоваться вместе, отдельно и в любом порядке, который вы хотите. Фактически, именно так большинство компаний использовали CSS-спрайты. Они создают спрайт-лист, который содержит различные изображения для всех частей веб-приложения.
Встроенные изображениядругой подход. Этот подход загружает изображение в том же HTTP-запросе, что и страница, и, таким образом, также уменьшает HTTP-запросы, но также увеличивает размер HTML-страницы. Браузерная поддержка CSS спрайтов также лучше.
Итак, кто-нибудь еще использует спрайты CSS — черт возьми, да! Узнай что-нибудь здесь …
