Приёмы верстки

В этом разделе собраны типовые подходы к решению частых задач верстки.

Использование оптимальных изображений под разные браузеры и устройства

WebKit поддерживает srcset атрибут изображений в img и image-set в стилях. Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей.

Обязательно задается изображение для браузеров не поддерживающих это свойство.

.class {
    /* задаем фоновое изображение, если браузер не поддерживает image-set */
    background-image: url(image-set-not-supported.png);
    /* задаем фоновые изображения, для различных разрешений */
    background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x);
    background-size: cover;
}

Не забудьте использовать свойство background-size для того что бы большие изображения корректно отображались.

Атрибут srcset работает аналогичным образом.

<img src="srcset-not-supported.png" srcset="low-res-image.jpg 1x, high-res-image.jpg 2x">

Как в первом так и во втором случае, после ссылки на изображение указывается условие при котором оно будет работать. В примерах выше в качестве условия ppi устройства. Также можно указывать разрешения экранов.