Лесна адаптация с CSS фонови изображения
Когато говорим за нови HTML5 стандарти като атрибута srcset и елемента picture, както и за технологиите от страна на сървъра като Responsive Web Design + Server Side Components (RESS), е простимо, ако решите, че обикновените статични уебсайтове в момента не могат да поддържат отзивчиви изображения. Подобно заключение обаче може да е преждевременно. Всъщност има лесен директен начин за доставяне на отзивчиви изображения, които се поддържат от всички съвременни уеб браузъри: CSS фонови изображения.
Този подход обаче има своите ограничения и не винаги работи. Но ако сте готови да положите допълнителни усилия за прости изисквания и да направите изображенията си достъпни, тогава всичко, от което се нуждаете, е CSS фонови изображения.
В тази статия ще разгледаме CSS фоновия подход в няколко стъпки:
Първо, нека да разгледаме бързо нашите цели и изисквания за отзивчиви изображения.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3
След това ще разгледаме как медийните заявки на CSS ни помагат да идентифицираме важни характеристики на устройствата на нашите потребители.
Изследване на ключовото свойство на фоновото изображение на CSS, което дава възможност да се отговори на тези характеристики.
Нека разгледаме стратегия за оптимизиране на отделни изображения, които съставляват адаптивен набор.
Нека разгледаме ограниченията на този подход; в много случаи са достатъчни много прости методи за преодоляването им.
И накрая, нека да опишем проблемите му, за които няма решения.
Забележка: Този подход изисква прецизен контрол върху таблиците със стилове на вашия сайт, както и върху неговата HTML маркировка. Ако уебсайтът зависи от Система за управление на съдържанието (CMS), надзорът върху тези аспекти може да не е достатъчен.
Необходимостта от отзивчиви изображения
В повечето случаи отзивчивият дизайн се ограничава само до коригиране на оформлението и презентацията. Въпреки това, мислейки само за такива въпроси, ние няма да се справим с целта на отзивчивия дизайн и да разочароваме нашите потребители.