• Теория
  • Теория

Оптимизация преимуществ, спрайты

Теперь блок преимуществ соответствует макету. Но его можно оптимизировать.

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

Чтобы страница загружалась быстрее, нужно уменьшать не только её общий вес, но и количество HTTP-запросов (это особенно важно, если сайт работает по протоколу HTTP/1.1).

Для уменьшения количества запросов часто используют растровые спрайты. Спрайт — это одна большая картинка, в которой объединены мелкие декоративные изображения. То есть те изображения, которые можно вставить фоном. Спрайт для Великого Кексби вы видите справа.

Перед тем, как использовать спрайт, нужно произвести подготовку: с помощью псевдоэлементов добавим на страницу виртуальные теги-контейнеры, куда и будем помещать спрайт.

Напоминаем, что псевдоэлементы создаются с помощью конструкций ::before и ::after в селекторе CSS-правила. И у каждого псевдоэлемента должно быть содержание (как минимум пустая строка), заданное с помощью свойства content. Пример:


.item::before {
  content: "";
}
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кексби. Четвертьфинал» тренажёра «Великий Кексби, этап 2» можно после регистрации и оформления подписки.