While I was doing some optimizations on my web, I ran into some trouble with Safari.
I have some CSS commands, which are broken on Safari 8 (maybe unsupported?), Safari 9 and all other browsers are OK.
I would like to fix the code for safari 8, without breaking and rebuilding my code using different (and much more complicated) structure to achieve the same output.
So:
Is here a way to target !ONLY! safari version 8?
Targeting could be any-
as comment in html, like old comments for "if IE7"
as in CSS somehow (but -webkit targets all webkit browsers, not only safari)
as in javascript/jquery
So, any sugggestions, please?
You could use browser detection and add or not add (depending on the browser) a class to the body (e.g. <body class="is-safari-8">). In your CSS you could set specific rules only applying to .is-safari-8 and its descendants.
The browser detection itself can be done either on the server or client side. While server side is probably preferable I'm assuming you intend to do it client side.
For this you can either use a library (you should find several with a quick google search but it might be overkill since you are looking for just one specific case) or write your own script to check the user agent.
Here is a helpful source that should get you started:
https://developer.mozilla.org/en/docs/Web/API/Navigator
On a sidenote:
The user agent can be faked (but that probably won't be an issue here).
More importantly: you might want to look up https://modernizr.com/. It's a feature detection script. It might allow you to solve your problem in a more flexible way.
There are lots of different ways you can solve the problem. If you want to inject a stylesheet, you may use the code below:
var ua='Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A';
var verRe = /Version\/(\d+)/;
var version = ua.match(verRe);
var safari = ua.indexOf("Safari");
if (safari !== -1) {
if (version[1] <= 8) {
addStyleTag("safari8.css");
}
}
function addStyleTag(url) {
var link,head;
head = document.querySelector("head");
link = document.createElement("link");
link.setAttribute("href",url);
link.setAttribute("type","text/css");
link.setAttribute("rel","stylesheet");
head.appendChild(link);
}
If it was my page, I would write the code to degrade gracefully on Safari.
Related
We are in the process of upgrading our React v17 app to v18. Currently we use react-app-polyfill as well as bowser to check if users are using a supported browser, and show a simple alert if they aren't. The app doesn't work properly on IE11 but the alert at least appears.
Now that we don't have any specific requirements to support IE11 it would be nice to remove the polyfill dependency, but obviously nothing within the React app will render without it, alert included.
Aside from the hacky solution of hardcoding text into the index.html root div, does anyone have a simple way of notifying users of a) IE11 and / or b) any unsuitable browser that their browser is not supported?
You may use a <script> tag with nomodule attribute inside your index.html like this:
<script nomodule>
alert('Sorry, you need to upgrade your web browser :(');
// or
window.location.href = 'a static page where you explain what to do';
</script>
This script will only be executed on web browsers that do not support ES Modules, which are Chrome <61, Firefox <60, Safari <11, Edge <16 and all versions of Internet Explorer (to mention only the most common ones).
I'd lean toward Valentin's nomodule approach.
But if you have a reason for not requiring module support, then I'd lean toward:
Doing a feature-check on some JavaScript language feature that you know IE doesn't have but you know your target browsers will have (like class, which is supported by all modern or even semi-modern browsers and markedly predated module support in browsers; but the specific choice is up to you).
If the feature-check fails, add your alert using something other than React.
For example:
function isObsolete() {
try {
(0, eval)("class Example { }");
return false;
} catch (e) {
return true;
}
}
// ...
if (isObsolete()) {
// ...add/perform warning...
}
I am trying to create a document explorer targeted for Edge. For that purpose I am using the msLaunchUri method as follows:
navigator.msLaunchUri('ms-word:ofe|u|http://docServerPath/someFolder/document.docx', function() { console.log("success")}, function() { console.log("error")});
However, the document is never opened. I've tried with different types of office documents, but the outcome is always the same. Is there a way to either fix this or to open the documents in a different way?
I am using Win10 and Edge 42.17134.1.0 (EdgeHTML 17.17134).
Since I don't have the Edge 42 version environment, I have tested your code using Edge 44.18362.1.0 version and Edge 41.16299.1004.0 version, they all will open the documents,
I suggest you check this thread, perhaps the issue is relate to the following registry keys, you could try to remove it.
HKEY_CURRENT_USER\Software\Classes\myprotocol
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\ProtocolExecute\myprotocol
If still not working, please try to reset the browser setting. Also, you could try to upgrade the browser version.
I was just forced into a browser upgrade (IE8 to IE11) while in the middle of testing. I've lost some essential functionality with some javascript that suddenly doesn't work in my .NET site.
This section of the code was written when I was in grade school, so I'm not extremely familiar with it, but what seems to be the problem is a call to form.all. I have to assume that call was built into javascript at some point - there's no definition for it in the code.
There are 7 "if statements" that use form.all and they are all written the same way:
if(form.all(cTag + "PersonNum") != null)
form.all(cTag + "PersonNum").value = personNumber;
The error:
JavaScript runtime error: Object doesn't support property or method 'all'
In newer versions of JavaScript, is there a version of form.all that performs the same action? All I really need is for someone to point me in the right direction.
A weird note: the same JavaScript code IS working in production on IE11
EDIT Ok, I found a line that was minimized. It looks like form is a created variable.
var form = document.forms(0);
EDIT2 Compatibility view/mode was the solution after all. I had added our production site's domain to the compatibility list and didn't think about it; adding 'localhost' fixed the issue. You just have to set it to the right domain first for it to work :)
Check the browser compatability mode when your running in production it's probally on IE8.
You can use obj.getElementsByTagName("*")
You could also add an All method to the prototype if it's not there.
IE introduced an all property for certain DOM objects (e.g. document) but it was never part of any W3C standard. It allowed access to DOM objects by name or ID using:
var element = document(elementNameOrID);
or
var element = document[elementNameOrID];
that is, it is a property that could use the same syntax as a method. Neat. Some other browsers supported it for compatibility, but it pretty much went out of use with IE 6 (not sure when IE started supporting getElementById, I think it was IE 5). But IE continued to think name and ID attributes were the same thing until IE 8 in standards mode.
Support for all has been dropped from IE 11 in standards mode.
If form is a reference to a form element, and cTag + "PersonNum" is the name of a form control, then the simplest fix is to change:
form.all(cTag + "PersonNum").value
to
form[cTag + "PersonNum"].value
which takes advantage of named form controls being made properties of the form that contains them. This behaviour is standardised and supported by browsers from the very beginning (i.e. every where) and is future proof (it's not going to change).
I want to identify if the broswer is IE then goto if block, other browser to else block in Java script.
I have one code here,
var browserName=navigator.appName;
if(browserName == "Microsoft Internet Explorer"){
IE code
}
else{
Other code
}
but i want to know is there any other way of implementing it?
Rather than do browser sniffing, you should do feature detection. Later versions of IE may support standards compliant stuff that in older versions you needed to work around or use MS-specific stuff.
Microsoft themselves have written up about the best way to do this and provide examples of both bad code (via sniffing) and good code (via detection). Make sure you go down the "good code" route.
I just started using this script to identify browser, version, and OS:
http://www.quirksmode.org/js/detect.html
If you are needing to use different code based on browser support for certain objects or methods, it's usually better to use object or method detection instead of browser detection. I use the browser detection for collecting statistics on my users, not for enabling or disabling features.
Quirksmode has a short article about why you don't use browser detection this way: http://www.quirksmode.org/js/support.html It's also linked from the browser detection script.
I found that This task is quite difficult as browsers all have similar names and different userAgent strings, so this is my Conditional statement to identify browsers.
I used this to identify the browser for different style sheets.
function styc()
{
var str = navigator.userAgent;
var res = navigator.userAgent.match(/Trident/);
var res2 = navigator.userAgent.match(/Firefox/);
if(res=="Trident"||res2=="Firefox")
{
//alert(navigator.userAgent);//for testing
document.getElementById('IE_fix').setAttribute("href", "IE_fix.css");
}
else
{
//alert("no");//for testing
document.getElementById('IE_fix').setAttribute("href", "mt_default.css");
}
}
Find a unique word in the userAgent string match it and check if the condition is true or not true depending on what you are doing.
The unique word I found for IE is Trident, and also identifies IE versions according to MicroSoft(not positive on this).
is there a way to disable a certain script for all ie browsers?
You can make use of conditional compilation to determine if the client is using MSIE.
var IE = /*#cc_on!#*/false;
which can be used as
if (IE) {
// IE.
} else {
// Others.
}
Only in IE, the ! will be compiled and taken in the expression, resulting in a new expression !false, which is logically true. This works better than $.browser.msie because it can be fooled by the useragent and also better than document.all because it would affect certain Opera versions as well.
That said, what is it you're trying to disable? You can on the other hand also make use of feature detection. Here's a discussion about this: Browser detection versus feature detection
I wouldn't recommend this, but:
if(!$.browser.msie) {
//non IE script
}
I would fix the script to work in IE, or exclude it based on some feature the browser doesn't support...not just because it's IE. With any browser a feature could be added via an update tomorrow, and your script would still exclude it. See $.support for more on feature detection.
Excluding something from running because "it isn't supported" is a perfectly valid scenario. However, excluding something because "IE doesn't support it...when I wrote this code" isn't a good approach. Instead, check if the feature that you need is present, and the user gets the richest experience possible in their current browser.
You could not include the javascript at all for IE browsers using Microsoft's recommended way of inserting a conditional comment:
<!--[if !IE]>
<script src="myscript.js" type="text/javascript"></script>
<![endif]-->
or simply wrap the code you want to exclude in the comment.
If you're speaking of IE 6, you can crash it by calling this function :
function crash_IE6() {for(x in document.open);}
Seriously, the most use way of deteting IE is checking the presence of document.all... but it still isn't a good thing.
You should nerver check what browser your script is running on... you should just check the presence of the needed methods.