Invece di usare i prefissi, voglio chiedere ai visitatori del sito di aggiornare il loro browser

Sto ricostruendo un sito usando CSS flexbox .

Nel controllare la compatibilità del browser , vedo che Flexbox è supportato da tutti i browser moderni, ad eccezione del fatto che Safari 8 e IE 10 richiedono i prefissi dei fornitori.

Nel controllare Google Analytics, vedo che il 96% dei visitatori del sito negli ultimi 6 mesi utilizza browser che supportano pienamente la tecnologia flexbox. Il restante 4% utilizza browser che richiedono prefissi o non forniscono supporto.

Dato che stiamo parlando del 4% degli utenti, e il numero continuerà a ridursi (e mi piace mantenere il mio codice il più semplice e pulito ansible), sto considerando di non usare i prefissi e invece di chiedere agli utenti di aggiornare i loro i browser.

Come posso scegliere come target i browser più vecchi per visualizzare un messaggio agli utenti che chiedono di aggiornare il browser?

Ecco cosa ho finora:

 

Questo commento condizionale di IE mi copre per le versioni IE 6, 7, 8 e 9.

Questi visitatori riceveranno un avviso con un link per scaricare un browser corrente. Tuttavia, Microsoft ha interrotto il supporto per i commenti condizionali che iniziano con IE10 .

Ora ho bisogno di qualcosa di simile per:

  • IE 10
  • Safari 7-8
  • Opera Mini <8
  • UC Browser per Android
  • Browser Android <4.4

C’è un semplice script JS / jQuery per gestire questo lavoro? O un altro metodo leggero?


Soluzione

Grazie per tutte le risposte. Chiaramente ci sono molti modi per affrontare questo problema (Modernizr, PHP, funzioni jQuery, semplice Javascript, CSS, browser-update.org, ecc.) Molti di questi metodi faranno il lavoro in modo completo ed efficace.

Sono andato con il più semplice: CSS (credit @ LGSon ).

Questo CSS copre essenzialmente tutti i browser di destinazione, ad eccezione di IE <= 7.

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

Vedi la risposta per i dettagli.

E per quei relativamente pochi visitatori che utilizzano IE <= 7, un commento condizionale nell'HTML:

  

Modifica la risposta dopo la modifica

Ecco un modo CSS per farlo.

Poiché i CSS @supports non funzioneranno sui browser di destinazione (indesiderati): Safari 7-8, IE < = 10, Browser Android <4.4, UC Browser per Android e Opera Mini <8, il tuo messaggio "browserupgrade" sarà visibile su quelli che usano questa regola.

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

Esistono alcuni browser che supportano ancora il flex non prefissato ma non supportano @supports , IE 11 (1) e Opera Mini 8, ma per fortuna possiamo affrontarli con un paio di regole specifiche CSS.

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

Ecco il codice completo per mostrare un messaggio di aggiornamento per i browser di destinazione.

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

 

You are using an outdated browser. Please upgrade your browser to improve your experience.


(1): La regola CSS IE 11 dovrebbe funzionare anche su IE Mobile 11, sebbene non ne abbia uno per testarlo.


Il CSS @supports è disponibile anche come API, CSS.supports () . Ecco un articolo molto ben scritto di David Walsh .


Inoltre, se uno desidera redirect automaticamente quel browser, ecco un piccolo script che lo fa, dopo un ritardo di 10 sec.

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

PREMESSA

La proprietà di style JavaScript restituisce una raccolta completa di proprietà CSS supportate dal browser per l’elemento specificato, che può essere testato utilizzando il seguente frammento:

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

Puoi utilizzare modernizr.js per il rilevamento delle funzionalità .

E poi scrivi qualche JavaScript per redirect gli utenti all’URL sopra se la funzione non viene trovata.

Sì, abbiamo una soluzione per questo …

prima di tutto scarica una build personalizzata Modernizr da (clicca qui -) https://modernizr.com/ (per la proprietà flexbox ) quindi includi l’ultimo Jquery nella tua pagina, aggiungi un foglio di stile e il gioco è fatto!

(Nota: non è necessario scaricare una build personalizzata Modernizr, è ansible utilizzare tutta la build completa direttamente da Modernizr CDN, ma è necessario controllare solo la proprietà Flexbox, ecco perché ti ho detto di scaricare una build personalizzata)

Controlla questo violino con supporto per floppy

La tua intera pagina html (con css, jquery) sarà così …

 < !doctype html>    BroswerCheck     

You are using an outdated browser. Please upgrade your browser to improve your experience.

I tuoi passi saranno,

1. Scarica Modernizr personalizzato per rilevare la proprietà flexbox

2. creare una pagina html con class = “no-js” aggiunto nel tag html

3. creare un div per visualizzare un messaggio e nasconderlo

4. aggiungi jquery e Modernizr alla tua pagina

5. mostra un div, quando un browser non supporta la proprietà flexbox

(a tale scopo usare la proprietà ‘Modernizr.flexbox’ come mostrato nello script sopra)

o se non vuoi usare Jquery usa il seguente script (grazie a @Shaggy) come,

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

Va bene, anche io suggerisco di usare modernizr (download da https://modernizr.com/ ), ma un po ‘diversamente. Prendo atto del fatto che la tua preoccupazione è solo quella di rilevare se il browser supporta la tecnologia flexbox o meno, e non se si tratta di una particolare versione di browser o browser.

Dopo averlo installato e caricato la tua pagina, modernizr metterà le classi nel tag . Per quanto riguarda la flexbox, metterà la class .flexbox O la class .no-flexbox nel tag body, come (e in effetti molte altre classi, a meno che non si scarichi una build personalizzata di modernizr solo per la flexbox). Quindi puoi utilizzare un semplice selettore combinato per una regola CSS che seleziona un blocco DIV in cui scrivi il tuo avviso relativo a un browser obsoleto. Esempio:

Nel codice HTML, scrivi qualcosa come:

 
Your browser is outdated and cannot display this page properly! Please install an up-to-date browser, which you can get from here.

Nel foglio di stile CSS, aggiungi questo:

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

Questo nasconderà prima questo messaggio (secondo la prima regola), e quindi (seconda regola) lo visualizzerà solo nei browser che non possono gestire la flexbox e quindi la class .no-flexbox inserita nel tag body da modernizr quando la pagina viene caricata: Il selettore combinato .no-flexbox .browserwarning funziona indipendentemente da dove si trova l’avvertenza del browser nel corpo: non deve essere un figlio diretto del body , ma può trovarsi ovunque.

Questo funziona di sicuro – l’ho usato in pagine che ho fatto con successo …

MODIFICARE:

Esistono due approcci fattibili: Modernizr o Feature Queries. Modernizr è l’attuale soluzione stabile, ma le funzionalità @support , quando pienamente supportate da tutti i browser, saranno la migliore soluzione CSS pura per il rilevamento delle funzioni css.

Attualmente è necessario aggiungere alcuni prefissi per scegliere come target quei browser che non supportano le query sulle funzionalità, ad es. vedi la risposta di LGSon.

Approccio Modernizr:

È ansible creare una build Modernizr personalizzata flessibile, piuttosto semplice, come precedentemente raccomandato: Modernizr Custom Flexbox Build . Fai riferimento al tuo file javascript modernizr personalizzato nel tuo sito web e poi aggiungi alcune classi di markup Html e Css, qualcosa del genere:

NOTA: apri lo snippet in diversi browser per verificare il supporto.

TEST:

Nessun supporto per Flexbox: Internet Explorer 10

Supporto Flexbox: Chrome 50

 /*! modernizr 3.3.1 (Custom Build) | MIT * * https://modernizr.com/download/?-flexbox-setclasss !*/ ! 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(/([az])-([az])/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(/([AZ])/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); } 
 

Dear user, you are using an outdated browser. Please upgrade your browser to improve your experience.

For more browser support info click here .

Sul front-end è ansible utilizzare la libreria modernizr e rilevare se il browser supporta le funzionalità moderne che si stanno utilizzando.

Un’altra cosa da fare è fare il reindirizzamento direttamente dal back-end a una pagina speciale. Se si utilizza PHP per il back-end, è ansible utilizzare la funzione get_browser per rilevare l’agente utente e quindi caricare una pagina normale o se il browser è uno dei browser non supportati apre una pagina che suggerisce agli utenti di eseguire l’aggiornamento.

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

Puoi anche inserire prefissi nel foglio di stile. Verifica se la proprietà dello stile del browser supporta effettivamente le proprietà di stile già presenti o inserite in modo dinamico successivamente. Composto principalmente per le animazioni, anche se potrebbe essere modificato per testare qualsiasi css , proprietà di stile nel browser. Se gli props già presenti nel stylesheet di stylesheet , i prefissi dei fornitori vengono inseriti nel stylesheet . Se gli oggetti di scena vengono successivamente inseriti dynamicmente, anche i prefissi dei fornitori vengono inseriti o attaccati a tali oggetti di scena.

Ad esempio, aggiungendo prefissi per l’ animation , la backface-visibility , il border-radius , il box-shadow , la transform , lo transform-style , la transition ; imposta anche il prefisso @keyframes

 (function prefix() { // var el = $(selector).get(0), ieg, $("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

Un approccio più completo.

Puoi ottenere le stringhe user-agent per ogni browser che ti interessa e creare un array di tutti quelli che vuoi escludere.

  • Elenco delle stringhe dell’agente utente

Utilizzare navigator.userAgent per ottenere l’agente utente del visitatore e verificare se si trova nell’array dei browser non supportati utilizzando jQuery inArray()

Un semplice avviso javascript potrebbe essere lanciato per i visitatori utilizzando un browser che è una corrispondenza.

Ecco un esempio di come ottenere informazioni relative al browser (esempio: w3schools.com )

 var txt = ""; txt += "

User-agent header: " + navigator.userAgent + "

"; txt += "

Browser CodeName: " + navigator.appCodeName + "

"; txt += "

Browser Name: " + navigator.appName + "

"; txt += "

Browser Version: " + navigator.appVersion + "

"; txt += "

Cookies Enabled: " + navigator.cookieEnabled + "

"; txt += "

Browser Language: " + navigator.language + "

"; txt += "

Browser Online: " + navigator.onLine + "

"; txt += "

Platform: " + navigator.platform + "

"; document.getElementById("demo").innerHTML = txt;
 

Puoi utilizzare UAParser.js . Può darti il ​​nome del browser, la versione, os, ecc. Ecco un esempio .

C’è anche un plugin jQuery per questo.

 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(); } } 

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

  

Imgur

O un altro metodo leggero?

Se stai servendo la tua pagina attraverso nginx, c’è una direttiva molto utile ancient_browser .

È necessario impostare un elenco di browser che non si desidera supportare:

 ancient_browser msie 9.0; 

e quindi redirect quelli alla pagina speciale di aggiornamento del browser:

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

In questo modo non stai inquinando le tue pagine già esistenti e non hai bisogno di caricare css extra per gli utenti che non ne hanno bisogno.

È ansible utilizzare le seguenti funzioni per ottenere il nome e la versione del browser:

 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]; } 

ed è ansible utilizzare il seguente codice per avvisare l’utente di aggiornare il 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"); } }); 

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

opzione 1

  if(ie10){ //Do something } 

AGGIORNARE :

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

Option 2 :

  

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

Spero che questo ti aiuti

Prova questo:

 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(' '); })(); 

But you are trying to reinvent the wheel, with Modernizr you can do:

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