Thursday, September 18, 2014

Затачиваем Framework7 под Windows Phone

Первое, что мы видим, запуская демо приложение или открывая сайт Framework7 в Internet Explorer 10/11 (на десктопе и WindowsPhone) это отсутствие иконок элементов управления.

Посмотрим, как они задаются через Inspect element. Ага, иконки задаются через CSS в SVG формате


Гуглим по вопросу совместимости данного действия в разных браузерах и находим
SVG можно использовать в CSS через data URI, но вставку незакодированного SVG поддерживают только браузеры на Webkit. Если закодировать SVG с помощью escape() - SVG начинает отображаться во всех современных браузерах.
Скажу, что FireFox 30+ отображает иконки нормально. Но мы воспользумся приведённой тулзой и получим:

Ага, иконка есть! Но она черного цвета, а в примере F7 синего (или голубого):
Смотрим еще раз SVG код... Ага! В незакодированной версии цвет задан закодированным значением %23 и при кодировке, % тоже кодируется, что приводит к потере цвета

Заменяем %23 на # и снова проводим кодировку.

Вот! Теперь нужный цвет присутствует. Попробуем вставить полученный код в backround-image иконки на странице открытой в ИЕ...


Победное бдынц! Иконка появилась! И в нужном цвете.

Но это еще не всё :) Чтобы появились все иконки необходимо их всех перекодировать в css файлах F7 и проверить на других платформах. Также при смене цветовых тем иконка снова теряется.
И опять таки "заточка под ИЕ" на этом не закончится, ибо кроме внешнего вида есть еще и поведение контролов F7. А тут есть разница в том как они себя ведут в ИЕ на мобильной и десктопной платформе.
Но это уже, как говорится, другая история.

No comments: