guia container bootstrap javascript jquery css css3 flexbox

javascript - container - En lugar de usar prefijos, quiero pedirle a los visitantes del sitio que actualicen su navegador



flexbox order (15)

Estoy reconstruyendo un sitio usando CSS flexbox .

Al verificar la compatibilidad del navegador , veo que FlexBox es compatible con todos los navegadores modernos, excepto que Safari 8 e IE 10 requieren prefijos de proveedor.

Al revisar Google Analytics, veo que el 96% de los visitantes del sitio en los últimos 6 meses usan navegadores que son totalmente compatibles con flexbox. El 4% restante usa navegadores que requieren prefijos o no brindan soporte.

Dado que estamos hablando del 4% de los usuarios, y el número seguirá reduciéndose (y me gusta mantener mi código tan limpio y simple como sea posible), estoy considerando no usar prefijos, y en cambio pedirles a los usuarios que actualicen sus navegadores.

¿Cómo puedo orientarme a navegadores más antiguos para mostrar un mensaje a los usuarios pidiéndoles que actualicen su navegador?

Esto es lo que tengo hasta ahora:

<!--[if IE]> <div class="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/"> upgrade your browser</a> to improve your experience.</p> </div> <![endif]-->

Este comentario condicional de IE me cubre para las versiones IE 6, 7, 8 y 9.

Estos visitantes recibirán una alerta con un enlace para descargar un navegador actual. Sin embargo, Microsoft suspendió el soporte para comentarios condicionales comenzando con IE10 .

Ahora necesito algo similar para:

  • IE 10
  • Safari 7-8
  • Opera Mini <8
  • Navegador UC para Android
  • Navegador de Android <4.4

¿Hay un script JS / jQuery simple para manejar este trabajo? ¿O otro método liviano?

Solución

Gracias por todas las respuestas. Claramente hay muchas maneras de abordar este problema (Modernizr, PHP, funciones de jQuery, Javascript simple, CSS, browser-update.org, etc.) Muchos de estos métodos harán el trabajo completa y efectivamente.

Fui con el más simple: CSS (credit @LGSon ).

Este CSS cubre esencialmente todos los navegadores dirigidos, excepto para IE <= 7.

.browserupgrade { display: block; } _:-ms-fullscreen, :root .browserupgrade { display: none; } :-o-prefocus, .browserupgrade { display: none; } @supports (display: flex) { .browserupgrade { display: none; }}

Ver la respuesta para más detalles.

Y para aquellos relativamente pocos visitantes que usan IE <= 7, un comentario condicional en el HTML:

<!--[if lte IE 7]> <div style=" ... inline styles here ..."> browser upgrade message here </div> <![endif]-->

¿O otro método liviano?

Si está publicando su página a través de nginx, hay una directiva muy útil, ancient_browser .

Debe configurar una lista de navegadores que no desea admitir:

ancient_browser msie 9.0;

y luego redirigirlos a la página especial de actualización del navegador:

if ($ancient_browser) { rewrite ^ /install-chrome.html; }

De esta forma, no está contaminando sus páginas ya existentes y no necesita cargar css extra para los usuarios que no lo necesitan.

PREMISA

La propiedad de style JavaScript devuelve una colección completa de propiedades de CSS que el navegador admite para el elemento especificado, que se puede probar con el siguiente fragmento de código:

for(var x in document.body.style) console.log(x);

Esto es así independientemente de si una propiedad en particular está explícitamente establecida para el elemento especificado. Esto se puede probar ejecutando el siguiente fragmento de código en Chrome, por ejemplo; la primera línea devolverá false ya que Chrome aún no admite la propiedad de appearance prefijada mientras que la segunda línea devolverá true .

console.log("appearance" in document.body.style); console.log("-webkit-appearance" in document.body.style);

body{ appearance:none; }

Sin embargo, debe tenerse en cuenta que si una propiedad no admitida se establece en un elemento que utiliza JavaScript, a través de la propiedad de style , entonces la comprobación de la presencia de esa propiedad devolverá true :

document.body.style.appearance="none"; console.log("appearance" in document.body.style);

Por lo tanto, utilizaremos document.createElement() para crear un elemento temporal, por lo que podemos estar seguros de que ninguna de las propiedades que estamos verificando se ha establecido de esta manera. (Gracias a Gothdo por esta sugerencia, que eliminó la necesidad de hacer suposiciones).

REQUISITOS

Mirando la lista de navegadores a ser apuntados:

  • Internet Explorer 10 admite flexbox con el prefijo -ms- .
  • Safari 7 y 8 admiten flexbox con el prefijo -webkit- .
  • Opera Mini, de acuerdo con caniuse.com , ha admitido Flexbox sin prefixing desde la versión 5, sin embargo, no puedo certificar la exactitud de eso y estoy buscando a alguien que lo confirme.
  • UC Browser actualmente (v9.9) es compatible con flexbox con el prefijo -webkit- .
  • Antes de la v4.4, el navegador Android soportaba flexbox con el prefijo -webkit- .

SOLUCIÓN

Podemos ver en la lista que todos los navegadores a los que se dirige requieren el prefijo de las propiedades de la FlexBox para que podamos orientarlas simplemente comprobando la presencia de cualquiera de las propiedades no prefijadas en la colección de style del elemento temporal. El siguiente Snippet devolverá true cuando se ejecuta en cualquiera de los navegadores anteriores:

console.log(!("flex" in document.createElement("p").style));

Armados con este conocimiento ahora podemos crear una solución de trabajo para mostrar el mensaje de actualización del navegador a los navegadores necesarios.

if(!("flex" in document.createElement("p").style)) document.getElementById("browserupgrade").style.display="block";

#browserupgrade{ display:none; font-family:sans-serif; }

<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>

NOTAS

Antigua sintaxis

Había una versión de la especificación flexbox actual que usaba una sintaxis ligeramente diferente con una de las diferencias, ya que la propiedad del order se llamaba flex-order . Que yo sepa, el único navegador que alguna vez admitió esa sintaxis era IE10, que requería un prefijo, por lo que debería ser el objetivo de la solución anterior. En aras de la exhaustividad, en caso de que haya navegadores que admitan esa sintaxis sin prefijo, puede incluir un control adicional para la presencia de la propiedad de flex-order al mismo tiempo que verifica que la propiedad del order no esté presente en el caso hay navegadores compatibles con ambas versiones de la sintaxis.

var checkstyle=document.createElement("p").style; if(!("flex" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))) document.getElementById("browserupgrade").style.display="block";

#browserupgrade{ display:none; font-family:sans-serif; }

<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>

Firefox

Firefox agregó compatibilidad con las propiedades de flexbox no prefijadas en la versión 22, pero no admitió las propiedades flex-flow o flex-wrap hasta la versión 28, por lo que para agregar v22-27 a nuestra orientación, deberíamos verificar la presencia de una de esas propiedades.

var checkstyle=document.createElement("p").style; if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))) document.getElementById("browserupgrade").style.display="block";

#browserupgrade{ display:none; font-family:sans-serif; }

<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>

Internet Explorer 11

A pesar de no requerir el prefijo, el soporte de IE11 para flexbox sigue siendo extremadamente problemático, por lo que también debería considerar orientarlo. No hay forma de hacerlo utilizando ninguna de las propiedades de flexbox, sin embargo, IE 7-11 (tipo de) admite la propiedad de image-rendering través de la propiedad non-standard -ms-interpolation-mode , con soporte posteriormente descartado en Edge / v12 + entonces podemos verificar eso. Sin embargo, no hay garantía de que esta propiedad no se vuelva a agregar a una versión futura de Edge, por lo que debe supervisarse.

var checkstyle=document.createElement("p").style; if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||"-ms-interpolation-mode" in checkstyle) document.getElementById("browserupgrade").style.display="block";

#browserupgrade{ display:none; font-family:sans-serif; }

<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>

mini Opera

Aunque caniuse.com afirma que ha existido soporte total para flexbox en Opera Mini desde la versión 5 y se considera que es una fuente autorizada de dicha información, si aún desea orientarlo, puede hacerlo buscando la presencia de uno de ellos. la gran cantidad de propiedades que no admite. Sin embargo, para mantener las cosas concisas, sugiero que se reemplace la -ms-interpolation-mode con una comprobación de transform-style de transform-style que no es compatible con Opera Mini ni con versiones anteriores de IE. Al igual que con la verificación anterior, esta debería ser monitoreada ya que las futuras versiones de Opera Mini a las que quizás no desee apuntar pueden continuar sin admitir la propiedad de transform-style .

var checkstyle=document.createElement("p").style; if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||!("transform-style" in checkstyle)) document.getElementById("browserupgrade").style.display="block";

#browserupgrade{ display:none; font-family:sans-serif; }

<div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div>

ACTUALIZACIONES

13/05/16: Se agregaron controles adicionales para apuntar a más navegadores después de que se actualizó la pregunta.
16/05/16: Se agregaron explicaciones más detalladas de la solución propuesta en base a la retroalimentación proporcionada en los comentarios y para que sea digna de la recompensa ofrecida. Se eliminaron los cheques por especificaciones de flexbox antiguas ya que eran redundantes.
17/05/16: Se agregó un elemento temporal para ejecutar las comprobaciones, en lugar de usar document.body , siguiendo la sugerencia de Gothdo, lo que llevó a la eliminación de sugerir el uso de getElementsByTagName() para una mayor compatibilidad con el navegador.
23/05/16: Se agregaron notas con cheques sugeridos para Internet Explorer 11 y Opera Mini.

De acuerdo, también sugiero usar modernizr (descargar de https://modernizr.com/ ), pero un poco diferente. Considero que su verdadera preocupación es detectar si el navegador es compatible con flexbox o no, y no si se trata de un navegador o una versión de navegador en particular.

Después de instalarlo y cargar su página, modernizr colocará clases en la etiqueta <body> . Con respecto a flexbox, colocará la clase .flexbox O la clase .no-flexbox en la etiqueta body, como <body class="no-flexbox bgsizecover csscalc"> (y de hecho muchas más clases, a menos que descargue una compilación personalizada modernizr solo para flexbox). De modo que puede usar un selector combinado simple para una regla CSS que selecciona un bloque DIV en el que escribe su advertencia con respecto a un navegador desactualizado. Ejemplo:

En el HTML, escribe algo como:

<div class="browserwarning">Your browser is outdated and cannot display this page properly! Please install an up-to-date browser, which you can get from <a href="http://www.example.com">here</a>.</div>

En la hoja de estilo CSS, agregue esto:

.browserwarning { display: none; } .no-flexbox .browserwarning { display: block; font-size: 24px; color: red; background-color: yellow; }

Esto ocultará este mensaje primero (por la primera regla), y luego (segunda regla) solo lo mostrará en navegadores que no pueden manejar flexbox y, por lo tanto, tendrá la clase .no-flexbox puesta en la etiqueta body por modernizr cuando se cargue la página: El selector combinado .no-flexbox .browserwarning funciona independientemente de en qué parte del cuerpo se coloque la advertencia del navegador; no tiene que ser un elemento directo del body , pero puede estar en cualquier lugar allí.

Esto funciona con seguridad. Lo he usado en páginas que hice con éxito ...

En la interfaz, puede usar la biblioteca modernizr y detectar si el navegador admite las funciones modernas que está utilizando.

Otra cosa que hacer es redirigir directamente desde el back-end a una página especial. Si está utilizando PHP para el back-end, puede usar la función get_browser para detectar el agente de usuario y luego cargar una página normal o, si el navegador es de navegador no compatible, abrir una página que sugiera a los usuarios actualizar.

http://php.net/manual/en/function.get-browser.php

Prueba esto:

navigator.browser = (function() { var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=//))//?/s*(/d+)/i) || []; if (/trident/i.test(M[1])) { tem = //brv[ :]+(/d+)/g.exec(ua) || []; return ''IE ''+(tem[1] || ''''); } if (M[1]=== ''Chrome'') { tem = ua.match(//b(OPR|Edge)//(/d+)/); if (tem != null) return tem.slice(1).join('' '').replace(''OPR'', ''Opera''); } M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, ''-?'']; if ((tem = ua.match(/version//(/d+)/i))!= null) M.splice(1, 1, tem[1]); return M.join('' ''); })();

Pero estás tratando de reinventar la rueda, con Modernizr puedes hacer:

if (Modernizr.flexbox) { // Modern Flexbox supported } else { // Flexbox syntax not supported }

Puedes usar UAparser.js . Puede darle el nombre del navegador, la versión, el sistema operativo, etc. Aquí hay un example .

Incluso hay un plugin jQuery para él.

var parser = new UAParser(); var browser = parser.getBrowser(); // leave only the major version and minor in order to compare // eg 12.2.4 > 12.2 var secondDot = browser.version.indexOf(".", browser.version.indexOf(".") + 1); browser.version = parseFloat(browser.version.substr(0, secondDot)); // debugging $("#browserName").html(browser.name); $("#browserVersion").html(browser.version); if (["IE", "Safari", "Opera Mobi", "UCBrowser", "Android Browser"].indexOf(browser.name) != -1) { if (browser.name == "IE" && browser.version <= 10) { $("#browserupgrade").show(); } if (browser.name == "Safari" && browser.version <= 10) { $("#browserupgrade").show(); } if (browser.name == "UCBrowser") { $("#browserupgrade").show(); } if (browser.name == "Android Browser" && browser.version <= 4.4) { $("#browserupgrade").show(); } }

Respuesta revisada después de la edición de la pregunta

Aquí hay una forma única de CSS para lograr eso.

Como CSS @supports no funcionará en sus navegadores dirigidos (no deseados): Safari 7-8, IE <= 10, navegador Android <4.4, navegador UC para Android y Opera Mini <8, su mensaje de "actualización de navegador" estará visible en aquellos que usan esta regla.

@supports (display: flex) { .browserupgrade { display: none; }}

Hay algunos navegadores que todavía admiten la flex sin prefijo, pero no admite @supports , IE 11 (1) y Opera Mini 8, pero afortunadamente podemos abordarlos con un par de reglas específicas de CSS.

/* IE 11 */ _:-ms-fullscreen, :root .browserupgrade { display: none; } /* Opera Mini 8 */ :-o-prefocus, .browserupgrade { display: none; }

Aquí está el código completo para mostrar un mensaje de actualización para sus navegadores dirigidos.

CSS

.browserupgrade { display: block; } /* IE 11 */ _:-ms-fullscreen, :root .browserupgrade { display: none; } /* Opera Mini 8 */ :-o-prefocus, .browserupgrade { display: none; } /* all modern browsers */ @supports (display: flex) { .browserupgrade { display: none; }}

HTML

<div class="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/"> upgrade your browser</a> to improve your experience.</p> </div>

(1): La regla de IE 11 CSS debería funcionar en IE Mobile 11 también, aunque no tiene uno para probarlo.

CSS @supports también está disponible como API, CSS.supports() . Aquí hay un artículo muy bien escrito de David Walsh .

Además, si a uno le gustaría redirigir automáticamente ese navegador, aquí hay un pequeño script que lo hace, después de un retraso de 10 segundos.

var el = document.querySelector(''.browserupgrade''); if (window.getComputedStyle(el,null).getPropertyValue("display") != ''none'') { setTimeout(function(){ window.location = ''http://browsehappy.com/''; }, 10000); }

También puede insertar prefijos en la hoja de estilo. Compruebe si la propiedad de estilo de los navegadores realmente admite las propiedades de estilo ya presentes o insertadas dinámicamente más tarde. Compuso principalmente para animaciones, aunque podría modificarse para probar cualquier propiedad de estilo css en el navegador. Si los props ya están presentes en la stylesheet de stylesheet , los prefijos del vendedor se insertan en la stylesheet . Si los accesorios se insertan dinámicamente más tarde, los prefijos del vendedor también se insertan o se unen a esos accesorios.

Por ejemplo, agregar prefijos para animation , backface-visibility , border-radius , box-shadow , transform , transform-style , transition ; también estableciendo el prefijo en @keyframes

(function prefix() { // var el = $(selector).get(0), i.e.g, $("body").get(0), $("#animated").get(0) var prefixes = {"MozAnimation": "-moz-","webkitAnimation": "-webkit-" ,"msAnimation": "-ms-","oAnimation": "-o-"}; var props = ["animation", "backface-visibility", "border-radius" , "box-shadow", "transform", "transform-style", "transition"]; $.each(prefixes, function(key, val) { $("style") .attr({"data-prefix": val,"class": String(val).replace(/-/g, "")}); return !(key in el.style); }); $.each(props, function(index, value) { var cssPrefix = $("style").attr("data-prefix"); if (value in el.style === false) { $.fn.pfx = function(prop, pfxprop, q) { return $("style").html($("style").text() .replace(new RegExp(prop, "g"), q + $("style").attr("data-prefix") + pfxprop)) }; $("style").pfx("@keyframes", "keyframes", "@") .pfx(value, value, ""); }; }); }());

github https://github.com/guest271314/prefix/blob/master/prefix.1.1.min.js

Ver: https://browser-update.org/

<script> var $buoop = {c:2}; function $buo_f(){ var e = document.createElement("script"); e.src = "//browser-update.org/update.min.js"; document.body.appendChild(e); }; try {document.addEventListener("DOMContentLoaded", $buo_f,false)} catch(e){window.attachEvent("onload", $buo_f)} </script>

EDITAR:

Hay dos enfoques viables: Modernizr o Consultas de funciones. Modernizr es la solución estable actual, pero las consultas de características @support , cuando cuentan con el soporte completo de todos los navegadores, serán la mejor solución de CSS puro para la detección de funciones css.

Actualmente, necesita agregar algunos prefijos para orientar los navegadores que no admiten consultas de características, es decir. ver la respuesta de LGSon.

Enfoque Modernizr:

Puede crear una compilación Modernizr personalizada de FlexBox bastante fácil, como se recomendó anteriormente: Modernizr Custom Flexbox Build . Haga referencia a su archivo javascript modernizr personalizado en su sitio web y luego agregue algunas etiquetas Html y Css, algo como esto:

NOTA: abra el fragmento en diferentes navegadores para verificar el soporte.

PRUEBAS:

Sin soporte de flexbox: Internet Explorer 10

Soporte Flexbox: Chrome 50

/*! modernizr 3.3.1 (Custom Build) | MIT * * https://modernizr.com/download/?-flexbox-setclasses !*/ ! function(e, n, t) { function r(e, n) { return typeof e === n } function o() { var e, n, t, o, s, i, a; for (var l in C) if (C.hasOwnProperty(l)) { if (e = [], n = C[l], n.name && (e.push(n.name.toLowerCase()), n.options && n.options.aliases && n.options.aliases.length)) for (t = 0; t < n.options.aliases.length; t++) e.push(n.options.aliases[t].toLowerCase()); for (o = r(n.fn, "function") ? n.fn() : n.fn, s = 0; s < e.length; s++) i = e[s], a = i.split("."), 1 === a.length ? Modernizr[a[0]] = o : (!Modernizr[a[0]] || Modernizr[a[0]] instanceof Boolean || (Modernizr[a[0]] = new Boolean(Modernizr[a[0]])), Modernizr[a[0]][a[1]] = o), g.push((o ? "" : "no-") + a.join("-")) } } function s(e) { var n = x.className, t = Modernizr._config.classPrefix || ""; if (_ && (n = n.baseVal), Modernizr._config.enableJSClass) { var r = new RegExp("(^|//s)" + t + "no-js(//s|$)"); n = n.replace(r, "$1" + t + "js$2") } Modernizr._config.enableClasses && (n += " " + t + e.join(" " + t), _ ? x.className.baseVal = n : x.className = n) } function i(e, n) { return !!~("" + e).indexOf(n) } function a() { return "function" != typeof n.createElement ? n.createElement(arguments[0]) : _ ? n.createElementNS.call(n, "http://www.w3.org/2000/svg", arguments[0]) : n.createElement.apply(n, arguments) } function l(e) { return e.replace(/([a-z])-([a-z])/g, function(e, n, t) { return n + t.toUpperCase() }).replace(/^-/, "") } function f(e, n) { return function() { return e.apply(n, arguments) } } function u(e, n, t) { var o; for (var s in e) if (e[s] in n) return t === !1 ? e[s] : (o = n[e[s]], r(o, "function") ? f(o, t || n) : o); return !1 } function d(e) { return e.replace(/([A-Z])/g, function(e, n) { return "-" + n.toLowerCase() }).replace(/^ms-/, "-ms-") } function p() { var e = n.body; return e || (e = a(_ ? "svg" : "body"), e.fake = !0), e } function c(e, t, r, o) { var s, i, l, f, u = "modernizr", d = a("div"), c = p(); if (parseInt(r, 10)) for (; r--;) l = a("div"), l.id = o ? o[r] : u + (r + 1), d.appendChild(l); return s = a("style"), s.type = "text/css", s.id = "s" + u, (c.fake ? c : d).appendChild(s), c.appendChild(d), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(n.createTextNode(e)), d.id = u, c.fake && (c.style.background = "", c.style.overflow = "hidden", f = x.style.overflow, x.style.overflow = "hidden", x.appendChild(c)), i = t(d, e), c.fake ? (c.parentNode.removeChild(c), x.style.overflow = f, x.offsetHeight) : d.parentNode.removeChild(d), !!i } function m(n, r) { var o = n.length; if ("CSS" in e && "supports" in e.CSS) { for (; o--;) if (e.CSS.supports(d(n[o]), r)) return !0; return !1 } if ("CSSSupportsRule" in e) { for (var s = []; o--;) s.push("(" + d(n[o]) + ":" + r + ")"); return s = s.join(" or "), c("@supports (" + s + ") { #modernizr { position: absolute; } }", function(e) { return "absolute" == getComputedStyle(e, null).position }) } return t } function h(e, n, o, s) { function f() { d && (delete z.style, delete z.modElem) } if (s = r(s, "undefined") ? !1 : s, !r(o, "undefined")) { var u = m(e, o); if (!r(u, "undefined")) return u } for (var d, p, c, h, v, y = ["modernizr", "tspan", "samp"]; !z.style && y.length;) d = !0, z.modElem = a(y.shift()), z.style = z.modElem.style; for (c = e.length, p = 0; c > p; p++) if (h = e[p], v = z.style[h], i(h, "-") && (h = l(h)), z.style[h] !== t) { if (s || r(o, "undefined")) return f(), "pfx" == n ? h : !0; try { z.style[h] = o } catch (g) {} if (z.style[h] != v) return f(), "pfx" == n ? h : !0 } return f(), !1 } function v(e, n, t, o, s) { var i = e.charAt(0).toUpperCase() + e.slice(1), a = (e + " " + b.join(i + " ") + i).split(" "); return r(n, "string") || r(n, "undefined") ? h(a, n, o, s) : (a = (e + " " + E.join(i + " ") + i).split(" "), u(a, n, t)) } function y(e, n, r) { return v(e, t, t, n, r) } var g = [], C = [], w = { _version: "3.3.1", _config: { classPrefix: "", enableClasses: !0, enableJSClass: !0, usePrefixes: !0 }, _q: [], on: function(e, n) { var t = this; setTimeout(function() { n(t[e]) }, 0) }, addTest: function(e, n, t) { C.push({ name: e, fn: n, options: t }) }, addAsyncTest: function(e) { C.push({ name: null, fn: e }) } }, Modernizr = function() {}; Modernizr.prototype = w, Modernizr = new Modernizr; var x = n.documentElement, _ = "svg" === x.nodeName.toLowerCase(), S = "Moz O ms Webkit", b = w._config.usePrefixes ? S.split(" ") : []; w._cssomPrefixes = b; var E = w._config.usePrefixes ? S.toLowerCase().split(" ") : []; w._domPrefixes = E; var P = { elem: a("modernizr") }; Modernizr._q.push(function() { delete P.elem }); var z = { style: P.elem.style }; Modernizr._q.unshift(function() { delete z.style }), w.testAllProps = v, w.testAllProps = y, Modernizr.addTest("flexbox", y("flexBasis", "1px", !0)), o(), s(g), delete w.addTest, delete w.addAsyncTest; for (var N = 0; N < Modernizr._q.length; N++) Modernizr._q[N](); e.Modernizr = Modernizr }(window, document);

.support-container { display: none; } .no-flexbox .support-container { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #CE3426; padding: 100px; } .support-container__update-browser { color: #ffffff; font-size: 2em; } .support-container__can-i-use { font-size: 1.2em; font-style: italic; color: #dddddd; } .support-container__update-browser a, .support-container__can-i-use a { background-color: #ffffff; text-decoration: underline; padding: 0 3px; border-radius: 4px; border-bottom: 2px solid rgba(0, 0, 0, 0.3); }

<div class="support-container"> <div id="browserupgrade" class="support-container__update-browser"> <p>Dear user, you are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div> <div class="support-container__can-i-use"> <p> For more browser support info click <a href="http://caniuse.com/#feat=flexbox">here</a> . </p> </div> </div>

EXPLICACIÓN ADICIONAL:

Modernizr comprueba si el navegador admite su función personalizada en este caso Flexbox. Si el navegador no lo admite, Modernizr agrega una clase a su etiqueta <html> . De esta manera: <html class="no-flexbox> . Que puede usar a su conveniencia en su hoja de estilo.

Además , puede agregar una función para detectar el navegador del usuario y agregarlo a su mensaje de actualización del navegador para una mejor UX. Crédito: kennebec

navigator.sayswho= (function(){ var ua= navigator.userAgent, tem, M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=//))//?/s*(/d+)/i) || []; if(/trident/i.test(M[1])){ tem= //brv[ :]+(/d+)/g.exec(ua) || []; return ''IE ''+(tem[1] || ''''); } if(M[1]=== ''Chrome''){ tem= ua.match(//b(OPR|Edge)//(/d+)/); if(tem!= null) return tem.slice(1).join('' '').replace(''OPR'', ''Opera''); } M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, ''-?'']; if((tem= ua.match(/version//(/d+)/i))!= null) M.splice(1, 1, tem[1]); return M.join('' ''); })();

Puede usar las siguientes funciones para obtener el nombre y la versión del navegador:

function get_browser() { var ua = navigator.userAgent, tem, M = ua .match(/(opera|chrome|safari|firefox|msie|trident(?=//))//?/s*(/d+)/i) || []; if (/trident/i.test(M[1])) { tem = //brv[ :]+(/d+)/g.exec(ua) || []; return ''IE '' + (tem[1] || ''''); } if (M[1] === ''Chrome'') { tem = ua.match(//bOPR//(/d+)/) if (tem != null) { return ''Opera '' + tem[1]; } } M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion, ''-?'' ]; if ((tem = ua.match(/version//(/d+)/i)) != null) { M.splice(1, 1, tem[1]); } return M[0]; } function get_browser_version() { var ua = navigator.userAgent, tem, M = ua .match(/(opera|chrome|safari|firefox|msie|trident(?=//))//?/s*(/d+)/i) || []; if (/trident/i.test(M[1])) { tem = //brv[ :]+(/d+)/g.exec(ua) || []; return ''IE '' + (tem[1] || ''''); } if (M[1] === ''Chrome'') { tem = ua.match(//bOPR//(/d+)/) if (tem != null) { return ''Opera '' + tem[1]; } } M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion, ''-?'' ]; if ((tem = ua.match(/version//(/d+)/i)) != null) { M.splice(1, 1, tem[1]); } return M[1]; }

and you can use the following code to alert the user to update the browser.

jQuery(document).ready(function() { var browser = get_browser(); var browser_version = get_browser_version(); if (browser == "Chrome" && browser_version <= 30) { alert("Your browser is below the minimum required version. Please update your browser for this site to function properly"); } if (browser == "Firefox" && browser_version <= 25) { alert("Your browser is below the minimum required version. Please update your browser for this site to function properly"); } if (browser == "MSIE" && browser_version <= 8) { alert("Your browser is below the minimum required version. Please update your browser for this site to function properly"); } });

Sí, tenemos una solución para esto ...

en primer lugar, descargue una compilación personalizada de Modernizr desde (haga clic aquí) https://modernizr.com/ (para propiedades de flexbox ) y luego incluya la última versión de Jquery en su página, agregue una hoja de estilo y ¡listo!

(Nota: No es necesario descargar una compilación personalizada de Modernizr, puede usar la compilación completa directamente desde Modernizr CDN, pero solo necesita verificar las propiedades de Flexbox; por eso le dije que descargue una compilación personalizada)

Mira este fiddle flexbox support violín

Toda la página html (con css, jquery) será así ...

<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>BroswerCheck</title> <style type="text/css"> #browserupgrade{ display:none; text-align:center; background:#F1070B; color:#FFFFFF; font-family:Segoe, "Segoe UI", Verdana, sans-serif; font-size:15px; padding:10px;} #browserupgrade a{ color:#FFFFFF; background:#000000; text-decoration:none; padding:5px 15px; border-radius:25px;} </style> <script src="modernizr.js"></script> </head> <body> <div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div> <script src="jquery-2.1.1.js"></script> <script type="text/javascript"> $(document).ready(function () { if (!Modernizr.flexbox) { $("#browserupgrade").show(); } }); </script> </body> </html>

Tus pasos serán,

1. Descargue Modernizr personalizado para detectar la propiedad de flexbox

2. crea una página html con class = "no-js" agregado en la etiqueta html

3. crea un div para mostrar un mensaje y ocultarlo

4. agregue jquery y Modernizr a su página

5. mostrar un div, cuando un navegador no es compatible con flexbox-property

(para ese propósito, use la propiedad ''Modernizr.flexbox'' como se muestra en el script anterior)

o si no quieres usar Jquery, utiliza la siguiente secuencia de comandos (gracias a @Shaggy), ya que

$(document).ready(function () { if(!Modernizr.flexbox)document.getElementByID("browserupgrade").style.display="‌​block"; });

Un enfoque más completo.

Puede obtener las cadenas de usuario-agente para cada navegador que le interese y crear una matriz de todas las que desee excluir.

Utilice navigator.userAgent para obtener el user-agent del visitante y verifique si está en su matriz de navegadores no compatibles utilizando jQuery inArray()

Se puede generar una alerta de javascript simple para los visitantes que usan un navegador compatible.

Aquí hay un ejemplo de cómo obtener información relacionada con el navegador (fuente de ejemplo: w3schools.com )

var txt = ""; txt += "<p>User-agent header: " + navigator.userAgent + "</p>"; txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt += "<p>Browser Name: " + navigator.appName + "</p>"; txt += "<p>Browser Version: " + navigator.appVersion + "</p>"; txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt += "<p>Browser Language: " + navigator.language + "</p>"; txt += "<p>Browser Online: " + navigator.onLine + "</p>"; txt += "<p>Platform: " + navigator.platform + "</p>"; document.getElementById("demo").innerHTML = txt;

<div id="demo"></div>

ACTUALIZAR

Este es un enfoque muy simple, no involucra API de terceros. Simplemente use UAparser.js para filtrar los resultados. Todo lo que necesita verificar de su parte es el nombre y la versión del navegador. Verifique el ejemplo a continuación

var parser = new UAParser(); var thisBrowser = parser.getBrowser(); var thisOS = parser.getOS(); switch(true) { case (thisBrowser.name=="IE" && thisBrowser.version<=10) : alert("IE versions older than v11 are not supported"); break; case (thisBrowser.name=="Safari" && (thisBrowser.version>=7 || thisBrowser.version<9)): alert("Safari versions 7 and 8 are not supported"); break; case (thisBrowser.name=="Android Webkit Browser" && thisBrowser.version<4.4): alert("Default browser of Android OS versions older than v4.4 are not supported."); break; case (thisBrowser.name=="UC Browser" && thisOS.name=="Android"): alert("UC browser versions for Android are not supported."); break; case (thisBrowser.name=="Opera Mini" && thisBrowser.version<8): alert("Default browser of Android OS versions older than v4.4 are not supported."); break; default: alert("Great this is a supported browser"); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.10/ua-parser.min.js"></script>

This one line will check for ie10 and return true if ie10 or false otherwise .

var ie10 = /MSIE 10/i.test(navigator.userAgent) && /MSIE 10/i.test(navigator.vendor);

Did my studies here : https://blogs.msdn.microsoft.com/ie/2011/04/15/the-ie10-user-agent-string/

use case

Opción 1

if(ie10){ //Do something }

UPDATE :

Microsoft browsers use @cc_on which will allow you to initiate conditional comments through script .

Option 2 :

<script> /*@cc_on @if (@_jscript_version == 10){ document.write("You are using IE10"); } @*/ </script>

FYI . Only EI 10 and below do not support flexbox css . Proof here : caniuse.com

Espero que esto ayude