Новости Технологии 17.08.2012 в 16:26 comment

Браузеры Safari 6 и Chrome 21 могут использовать альтернативные изображения для дисплеев с высокой плотностью пикселей

author avatar
https://secure.gravatar.com/avatar/2f8d57cddfeb455ba418faa11ee01bb0?s=96&r=g&d=https://itc.ua/wp-content/uploads/2023/06/no-avatar.png *** https://secure.gravatar.com/avatar/2f8d57cddfeb455ba418faa11ee01bb0?s=96&r=g&d=https://itc.ua/wp-content/uploads/2023/06/no-avatar.png *** https://itc.ua/wp-content/themes/ITC_6.0/images/no-avatar.svg

ITC.UA

автор

Раздел Технологии выходит при поддержке Favbet Tech

В проект WebKit недавно была добавлена экспериментальная поддержка спецификации стилей для изображений стандарта CSS 4. Эта спецификация разработана с целью обеспечить возможность разработчикам веб-сайтов задействовать изображения с высоким разрешением и, тем самым, реализовать некоторые преимущества, доступные владельцам устройств Apple с дисплеем Retina display.

Браузеры Safari 6 и Chrome 21 могут использовать альтернативные изображения для дисплеев с высокой плотностью пикселей

В браузерах Safari 6 и Chrome 21 уже реализована такая поддержка. Она позволяет при написании кода веб-сайтов задействовать новые правила и создавать, приблизительно, следующие конструкции:

#selector {

background-image: url(no-image-set.png);

background-image: -webkit-image-set(url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x);

Курс Business English для фінансистів.
Навчіться на практиці, як підбирати доречний tone of voice для спілкування з топменеджментом, колегами та клієнтами. Опануй англійську для фінансистів.
Дізнатись про курс

/* other prefixes for -moz, -o and -ms go here */

background-image: image-set(url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x);

}

В данном случае проводится оценка плотности размещение пикселей на дисплее компьютерного устройства пользователя, которым в настоящий момент осуществляется просмотр веб-сайта. В случае, если плотность пикселей соответствует 1x, браузер будет демонстрировать пользователю стандартное изображение myimage.jpg. Если же плотность пикселей составляет 2x, то браузер будет использовать для демонстрации изображение myimage-hires.jpg с более высоким разрешением.

При этом отмечается, что такой способ вызова изображений имеет некоторые преимущества перед использованием медиа запросов, хотя они и позволяют получить такой же эффект. Однако предлагаемый способ не содержит жестких требований по отношению к браузеру использовать определенное изображение, а лишь предлагает опциональную возможность выбора. Таким образом, если браузер будет достаточно «умным», он сможет самостоятельно определить, что даже при высокой плотности пикселей экрана, но низкой скорости сетевого соединения, лучше использовать изображение с низким разрешением, которое занимает меньше дискового пространства и быстрее загружается.

Курс Business English для фінансистів.
Навчіться на практиці, як підбирати доречний tone of voice для спілкування з топменеджментом, колегами та клієнтами. Опануй англійську для фінансистів.
Дізнатись про курс

Дополнительно следует отметить, что несмотря на реализованную поддержку спецификации стилей для изображений в браузерах Safari 6 и Chrome 21, она еще не является официальным стандартом в рамках спецификации CSS 4, а носит лишь предварительный характер и еще может быть изменена. Информация о сроках ее утверждения в качестве официального стандарта пока не сообщается.

Раздел Технологии выходит при поддержке Favbet Tech

Favbet Tech – это IT-компания со 100% украинской ДНК, которая создает совершенные сервисы для iGaming и Betting с использованием передовых технологий и предоставляет доступ к ним. Favbet Tech разрабатывает инновационное программное обеспечение через сложную многокомпонентную платформу, способную выдерживать огромные нагрузки и создавать уникальный опыт для игроков. IT-компания входит в группу компаний FAVBET.

Продолжается конкурс авторов ИТС. Напиши статью о развитии игр, гейминг и игровые девайсы и выигрывай профессиональный игровой руль Logitech G923 Racing Wheel, или одну из низкопрофильных игровых клавиатур Logitech G815 LIGHTSYNC RGB Mechanical Gaming Keyboard!


Loading comments...

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: