Лесна адаптация с CSS фонови изображения

Когато говорим за нови HTML5 стандарти като атрибута srcset и елемента picture, както и за технологиите от страна на сървъра като Responsive Web Design + Server Side Components (RESS), е простимо, ако решите, че обикновените статични уебсайтове в момента не могат да поддържат отзивчиви изображения. Подобно заключение обаче може да е преждевременно. Всъщност има лесен директен начин за доставяне на отзивчиви изображения, които се поддържат от всички съвременни уеб браузъри: CSS фонови изображения.

Този подход обаче има своите ограничения и не винаги работи. Но ако сте готови да положите допълнителни усилия за прости изисквания и да направите изображенията си достъпни, тогава всичко, от което се нуждаете, е CSS фонови изображения.

В тази статия ще разгледаме CSS фоновия подход в няколко стъпки:

Първо, нека да разгледаме бързо нашите цели и изисквания за отзивчиви изображения.

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

След това ще разгледаме как медийните заявки на CSS ни помагат да идентифицираме важни характеристики на устройствата на нашите потребители.

Изследване на ключовото свойство на фоновото изображение на CSS, което дава възможност да се отговори на тези характеристики.

Нека разгледаме стратегия за оптимизиране на отделни изображения, които съставляват адаптивен набор.

Нека разгледаме ограниченията на този подход; в много случаи са достатъчни много прости методи за преодоляването им.

И накрая, нека да опишем проблемите му, за които няма решения.

Забележка: Този подход изисква прецизен контрол върху таблиците със стилове на вашия сайт, както и върху неговата HTML маркировка. Ако уебсайтът зависи от Система за управление на съдържанието (CMS), надзорът върху тези аспекти може да не е достатъчен.

Необходимостта от отзивчиви изображения

В повечето случаи отзивчивият дизайн се ограничава само до коригиране на оформлението и презентацията. Въпреки това, мислейки само за такива въпроси, ние няма да се справим с целта на отзивчивия дизайн и да разочароваме нашите потребители.

Уебсайтът изглежда страхотно на компютри със супер висока разделителна способност, тъй като включва версия на основното изображение с висока разделителна способност. Доставката на този файл с изображения обаче е скъпа; от размера 1940 × 1229 px след компресиране се получава изображение от 446 KB.

На iPhone изображение от 18 KB 290 × 183 px изглежда идентично с изображение от 452 KB и изображение от 1940 × 1229 px на MacBook Pro.

Изображението в пълен размер отнема 3,0 секунди за изтегляне през 3G спрямо 1,3 секунди за отзивчиво изображение.

Основната цел на подхода за адаптивно изображение е проста: доставете само онези пиксели, които действително могат да бъдат използвани от устройството на потребителя.

Определяне на средата на потребителя

Ако нашите уебсайтове реагират на устройството на потребителя, тогава се нуждаем от начин да го идентифицираме. CSS сега предлага най-ефективния метод за разграничаване на устройства. CSS ни дава отговори на два критични въпроса: Какъв е размерът на дисплея на потребителя? И поддържа ли изображения в стил Retina?

Инструментът CSS, който ни предоставя тази информация, е медийна заявка. Медийните заявки дефинират набор от свойства на CSS стил, които се прилагат само за устройства със специфични характеристики. Първоначално медийните заявки бяха ограничени до типове медии. CSS спецификацията дефинира голям брой от тях, включително, например, брайлова азбука (за тактилни брайлови устройства), реч (за синтезатори на реч), tty (само за еднопространствени устройства като телетайпове) и tv (за телевизионни устройства с ниско ниво резолюция и без превъртане). Понастоящем единствените два типа носители, поддържани от всички браузъри, са print (за печатни материали с пагинация) и screen (за компютърни екрани).

CSS3 обаче разшири използването на медийни заявки, като позволи на таблиците със стилове да определят специфични характеристики на устройството, както и техния тип медия. А в случай на екранни устройства тези свойства могат да включват много характеристики на дисплея, включително неговата ширина, ориентация, разделителна способност и съотношение на пикселите. Тези свойства предоставят само информацията, от която се нуждаем, за да изберем правилното отзивчиво изображение.

Ето как медийните заявки могат да помогнат за разрешаването на дилемата в предишния раздел. 15-инчовият MacBook Pro като пример има ширина на екрана 1440 px (тук няма да вземем предвид опцията Retina display). За да определите стилове, които се прилагат за екрани с този размер (или по-големи), можете да си напишете лист със стилове като този: