Підтримка пристроїв з retina дисплеєм
Сьогодні на ринку є пристрої з екранами з широким діапазоном щільності пікселя. Відмінною особливістю деяких пристроїв, таких як iPhone 5, iPad, MacBook Pro, є дисплеї з високою роздільною здатністю. Як веб-розробники або дизайнери, ми повинні гарантувати якісний зовнішній вигляд нашого веб-сайту або веб-застосунки на пристроях з високою щільністю пікселя. Щоб уникнути розмиття зображення на пристроях з високою щільністю пікселя, ми повинні забезпечити більшу роздільну здатність зображень на нашому веб-сайті або веб-програмі, використовуючи останню CSS функцію WebKit, названу – “Image Set”. Використовуючи функцію Image Set, браузер може визначити щільність пікселя пристрою користувача та показати користувачеві відповідну версію зображень.
Використання CSS Image Set
Приклад використання-webkit-image-set:
.myImage {
background: -webkit-image-set(url(images/bg.jpg) 1x, url(images/bg_2.jpg) 2x);
height: 300px;
width: 300px;
}
Як Ви бачите вище, ми використовуємо функцію Image Set до властивостей фону. У функції Image Set 1x дорівнює стандартній версії зображення; 2x прирівнюється до зображення з високою роздільною здатністю. Це змушує браузер вибирати і використовувати як тло зображення з високою роздільною здатністю, якщо пристрій користувача має високу щільність пікселів, інакше йому буде надана стандартна версія зображення.
Зверніть увагу, що значення висоти та ширини класу CSS повинні відповідати стандартним розмірам щільності зображення, оскільки CSS пікселі — це не те саме, що пікселі пристрою, це означає, що 1 піксель CSS відповідає 1 пікселю пристрою на пристроях стандартної густини. Однак, на пристроях з високою щільністю, у кожному пікселі CSS є 4 пікселі пристрою.
Підтримувані браузери
Функція Image Set CSS в даний час підтримується Safari та Chrome, Opera та інші, їх список можна переглянути на сайті Can I use, що використовують WebKit префікс. На даний момент функція Image Set тільки обговорюється, і не є частиною специфікації CSS4. Це може змінитися будь-якої миті.
