Я перестраиваю сайт, используя CSS flexbox.
При проверке совместимости браузера, я вижу, что flexbox поддерживается всеми современными браузерами, за исключением того, что Safari 8 и IE 10 требуют поставщика префиксы.
При проверке Google Analytics я вижу, что 96% посетителей сайта за последние 6 месяцев используют браузеры, которые полностью поддерживают flexbox. Остальные 4% используют браузеры, которые требуют префиксов или не поддерживают.
Поскольку мы говорим о 4% пользователей, и число будет уменьшаться (и мне нравится, когда мой код как можно более чистый и простой), я рассматриваю возможность использования префиксов и вместо этого запрашиваю пользователей для обновления браузеров.
Как настроить таргетинг на старые браузеры, чтобы отображать сообщение пользователям, предлагающим обновить их браузер?
Вот что я до сих пор:
<!--[if IE]>
<div class="browserupgrade">
<p>You are using an outdated browser. Please <a href="#" onclick="location.href='http://browsehappy.com/'; return false;">
upgrade your browser</a> to improve your experience.</p>
</div>
<![endif]-->
Этот условный комментарий IE охватывает меня для версий IE 6, 7, 8 и 9.
Эти посетители получат предупреждение со ссылкой для загрузки текущего браузера. Однако Microsoft прекратила поддержку условных комментариев, начиная с IE10.
Теперь мне нужно что-то подобное для:
- IE 10
- Safari 7-8
- Opera Mini < 8
- UC Browser для Android
- Android Browser < 4.4
Есть ли простой JS/jQuery script для работы с этим заданием? Или другой легкий метод?
Решение
Спасибо за все ответы. Ясно, что есть много способов решить эту проблему (Modernizr, PHP, jQuery-функции, простой Javascript, CSS, browser-update.org и т.д.). Многие из этих методов будут выполнять эту работу полностью и эффективно.
Я пошел с самым простым: CSS (кредит @LGSon).
Этот CSS охватывает практически все целевые браузеры, за исключением IE <= 7.
.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}
Подробнее см. ответ.
И для тех относительно немногих посетителей, которые используют IE <= 7, условный комментарий в HTML:
<!--[if lte IE 7]>
<div style=" ... inline styles here ...">
browser upgrade message here
</div>
<![endif]-->