Обнаружение функций HTML / CSS для PWA

1

MDN определяет "прогрессивный" в прогрессивных веб-приложениях как -

Современные веб-приложения могут быть разработаны для обеспечения превосходного опыта для полнофункциональных браузеров и приемлемого (хотя и не столь блестящего) опыта для менее способных браузеров. Мы много лет делаем это с лучшими практиками, такими как прогрессивное совершенствование, поэтому давайте продолжим хорошую работу.

Я понимаю, что с точки зрения функций javascript мы можем использовать условия if-else для проверки наличия функции и ее надлежащего управления.

Но каковы наилучшие способы сделать это для HTML/CSS?

В документации google/MDN большое внимание уделяется проверке функций JS, но у вас нет документации для html/css.

Моим вариантом использования является создание веб-приложения с современными функциями, но оно работает и во всех браузерах (включая прокси-браузеры, такие как Opera Mini и UC Browser).

Теги:
progressive-web-apps
cross-browser

1 ответ

5

Используя библиотеку сценариев под названием Modernizr, вы можете добавлять проверки на различные функции HTML5/CSS3 на свои страницы с минимальным количеством кода,

Чтобы сгенерировать сценарий производства, сайт предоставляет собственный инструмент создания сценариев, а не отдельный сценарий, который имеет все для обнаружения функций HTML5/CSS3. Используя инструмент генерации скриптов, вы можете выбрать необходимую функциональность теста и игнорировать все, что вам не нужно.

Вот отличная статья о том, как использовать Modernizr

Изображение 174551

Если вы хотите выйти за рамки modernizr, вы можете начать использовать новое правило CSS @supports для обнаружения функций. Это правило является частью модуля условных правил CSS3. Благодаря этому правилу вы можете выборочно применять стили CSS только в том случае, если браузер поддерживает их. В противном случае браузер игнорирует эти стили. Его синтаксис очень похож на CSS-запросы.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню