I noticed that in my angular app the property
window.navigator.pointerEnabled
returns true
Now, because I would like to do some testing which involves pointer-events inside a jsfiddle.net I noticed that these events are not present there. This probably has something to do with the fact that here the pointerEnabled property is undefined.
My question is, how is this property controlled, how can I enabled it?
If you're testing your code in Firefox, you need to configure the browser to enable pointer events, as they're not enabled by default at the moment (my current latest upgrade as of 2017.xi.15 is Firefox Quantum 57.0.2 (64-bit), what I post here may change in later versions!).
To do this, you have to launch a new tab, and type "about:config" in the address bar. Then, search for the entry:
dom.w3c_pointer_events.enabled
and change the status of this boolean value to true.
Unless you do this, Firefox won't, as yet, handle pointer events at all. This will probably change in the future, but for the moment, be aware that pointer event handling is likely to be a minefield if you're interested in cross-browser compatibility. For example, the latest version of Chrome running on my machine, namely Version 63.0.3239.84 (Official Build) (64-bit), handles pointer events without having to dive in and reconfigure the browser, but Firefox caused me no end of headaches until I discovered the above config issue, and similar woes are likely to appear on other browsers as well.
Just to compound the issue, the Windows version of Firefox allows you to enable pointer events, but they are not supported as yet at all on the Firefox Mobile for Android version of the browser. So the same browser is likely to behave differently when one changes platform, just to add to your coding nightmares.
I'm not familiar with Safari or Opera, but users of those browsers are strongly advised to check whether or not similar support issues apply when using pointer events!
As a consequence, it won't matter whether you're trying to handle pointer events natively, or via a framework such as Angular, if the browser doesn't enable pointer events from the get-go. I wasted several hours on this issue, and thought it would be a good idea to spare others the same frustration.
Of course, this will not solve the problem of your end users not knowing this, and your app failing on their systems when they try to run it without configuring their browsers to do so. Or, worse still, your app failing because their browsers don't support pointer events at all (e.g., Firefox Mobile for Android I cited above). End users expect apps to run out of the box, regardless of their hardware & browser choices, except that to make this happen, you currently have nasty hurdles to negotiate. One of these being that touch event support is also hidden behind a config flag in Firefox, so you can't even guarantee that falling back on separate touch events in case pointer events are not supported, will save your app from failure.
At the moment, the only major browser that maintains some consistency across platforms in this regard is Chrome. Code I've written using pointer events works both on a desktop machine and a tablet when I fire up Chrome, but I'm now aware that Firefox is going to present me with headaches on its own, when I try running the code on the tablet.
There are probably other issues lurking in addition to the above waiting for you (especially if you're using the new CSS pointer event features as well!) but they're properly reserved for elsewhere.
Pointer events offer a new way to handle mouse and touch events with one interface. Support for pointer events is currently still rather sparse. Currently, IE11 and Edge have direct support, IE10 with prefix. FF and Chrome (>=53) are actively developing it and have it hidden behind flags (See: chrome://flags/#enable-pointer-events ).
From Safari there are no public signals so far.
There is no way to activate or deactivate it for your users. Either a browser supports or it does not.
window.navigator.pointerEnabled is the deprecated way to check if the browser supports it. The recommended way is to check if window.PointerEvent is defined.
There is a polyfill, to support FF, CH, IE10 and Safari.
Related
I've tried on getting browser info from javascript - navigator.userAgent, but cannot find any related string with "Vivaldi".
Please help to suggest if there are any other programming method or javascript can be used to detect Vivaldi browser?
The correct syntax in JavaScript is navigator.userAgent.
You can check window size, but it may be incorrect.
Vivaldi has its own sidebar and bottom bar that the others not.
But remember, user can change the window size to prevent detection.
According to Vivaldi, the userAgent will not have Vivaldi in it for a better user experience and mimic Chrome in all sites except a few known ones.
For the next release of Vivaldi, we have decided to try something different. The problem with our current approach is that with the web being almost infinite, we can’t possibly discover all the websites who have blocks set against us. Thus maintaining a list of sites where we present a non-Vivaldi User Agent is difficult. Instead, we will try doing the reverse. For a handful of sites where we know the label Vivaldi (and our version number) is responsibly used, we will present our full User Agent. Those sites being our own and a handful of interesting alternative search engines: duckduckgo.com, ecosia.org, qwant.com, and startpage.com. Every other site will get a User Agent that appears to be identical to Chrome.
src: https://vivaldi.com/blog/user-agent-changes/
Since you haven't mentioned your use case, assuming you are building sites, the best solution would be to do what everyone does. I recommend building websites agnostic to browsers and devices, but responsive to resolutions and feature support. Almost all of the browsers are running on Chromium these days, except Safari and Firefox (to my knowledge). So they are all going to work consistently across the board. For any given feature, one could always refer to w3c or mdn docs for compatibility and build around that.
Browser detection is also not quite reliable, as there are extensions to spoof the information. Like this extension that mimics a TV agent so one can run youtube console version on it.
On the other hand, once again I don't know your use case, one might benefit from platform detection over browser detection, like catering to mobile and TV users. Even then, if you have a site responsive enough the platform becomes non-essential information.
How to attach the Debug points with the Safari Browser. As I have implemented my application in the Firebreath Framework which supports the unmanaged Code. To verify the Functionality in the Safari Browser as well, I am attaching the Debug Points but Debug Points will not hit. Is it necessary to set any kind of Property for the same . Please Let me know how to attach the Firebreath code with Safari browser?
Note that Safari starts your plugin in another process. If you look at np_macmain.cpp you'll see that there is a define that you can set that will cause it to pause and wait for the debugger to attach -- this is your best option if you need to attach early. Note that I've seen Safari kill plugins that don't respond soon enough, which tends to lead to your plugin getting killed any time it's stuck in a breakpoint.
see http://www.firebreath.org/display/documentation/Debugging+Plugins -- the Safari stuff is a little out of date, but the concepts are the same. I think the process name has changed.
One of the requirements of one of my clients is to show a message to a user that's using an older version of Firefox, Chrome, IE or Safari. For the last two it's easy (IE 9+ and Safari 5+). But for Firefox and Chrome, the requirement is that the site supports the current and the previous version of each browser.
To get the clients browser and version is quite simple, but I need to know what is the last version of each browser. Is there any way of doing that?
Well, technically, all you need is a place that keeps track of what the latest version of each browser (Ideally with a web service).
A quick Googling I was able to find: http://www.webdevelopersnotes.com/articles/latest-browser-versions.php
It's not a web service, but you could simply parse that HTML and get the latest version of each browser. Alternatively, you could keep track yourself and manually update this information in your database.
You should only ever have to worry about IE when it comes to version enforcement. Exception being, of course, if you need a specific API that's just not available in previous versions of Chrome/Firefox, but in that case you'd look and enforce the API, not the browser version. Adding to that, if Chrome/Firefox don't have an API, chances are even the most bleeding edge version of IE won't either, so the point is moot. The fact is Firefox and Chrome, and in part Safari, are far ahead of IE when it comes to browser hosted capabilities that trying to enforce specific versions of the former would likely be a lot of wasted time and effort to yield nothing substantial.
The best I could find was this. It has an export option that allows to export in JSON, XML...
I would strongly suggest that you don't check the browser version, instead try doing feature detection using, say, Modernizr.
What features of your client's site depends on specific versions of each browser? If you use Modernizr you could perform a check on a feature, say some video stuff, and if the current browser does not support that feature, then display a message to the user suggesting they upgrade their browser.
Detecting browser versions via Javascript is very flakey at best.
The only reason I'd say you need this kind of verification is because your webpage has features only available to latest browsers. Instead of relying on version numbers, I suggest learning Modernizr.js for your website.
http://modernizr.com/
It can detect particular html5/css3 features individually.
Is it necessary to test the rendering of my website in both Chrome and Safari despite the fact that both browsers implement the Webkit rendering engine underneath?
Is this a cop out by developers or a valid assumption to make?
I am specifically asking about whether the pages of my website will render the same in both browsers and whether my Javascript will work in both browsers.
There are some slight differences, so I would test in both. Some examples:
By default Safari has 3rd-party cookies disabled, but Chrome has them enabled by default.
Safari does not store <noscript> content in the DOM, Chrome does
Chrome keeps each browser window sandboxed in its own operating system process (multi-process model). Safari keeps all windows in one process. [Note though: The upcoming WebKit2 will have support for the multi-process model built in].
Chrome uses the V8 javascript engine, Safari uses Nitro.
I know there a few other differences I have encountered, but I can't remember them off the top of my head. I'll update this post if any occur to me.
They use different JavaScript engine, Chrome:V8, Safari:Nitro
Each browser may choose to include different features of webkit in their final versions, so they are not always the same.
Even different versions of Chrome will behave differently, same for different versions of Safari. So I wouldn't use this assumption, and would test in both browsers.
Interesting question, I was thinking about this earlier. I would say yes, just because the rendering engine is only one part of the browser. You also have to take into account that there are many versions of each browser still in use.
It doesn't take too long to test the page in ether, better safe then sorry.
I do web site debugging with Internet Explorer (as well as other browsers), but my problem is with Internet Explorer, as it is the browser I usually use for regular browsing.
In order to debug you need to turn on debug mode in the advanced options. OK, fine. It's turned on. But the issue I have, that is quite annoying, is that it seems 30% of websites have JavaScript errors, and Internet Explorer in debug mode causes a popup. This is now also the case with Stack Overflow as well, where I spend a lot of time now. Every time I edit I get a JavaScript error pup up.
I guess it comes down to this: Is there a way to QUICKLY enable and disable debug mode, such as a Hokey, or an add-in, so you don't have to go into Advanced Options to enable and disable?
I should mention I do mainly ASP.NET development and use Visual Studio. I do already use Firefox/Firebug for some scenarios and non Internet Explorer-related issues. I'm not really looking to switch around what I do or how I do it, mainly looking for a solution to the problem at hand. Even a workaround that doesn't involve using other browsers/debuggers.
The quickest way I can think of would be to write a small utility to:
Close all IE windows
Toggle the REG_SZ registry value HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\Disable Script Debugger (from "yes" to "no" or vice versa)
Optionally restart IE
As far as I know, there's no way to make IE recognize the changed registry value without restarting it, even using an IE plugin.
As an aside, unless the IE/VS integration is critical for you, you may want to look into the combination of Firefox and Firebug for Javascript debugging: I find it much nicer in general, and debugging can easily be enabled or disabled, either interactively or on a per-site basis.
I recommend using Firefox + IE Tab, which would allow you to easily and quickly change the rendering engine used for sites that require IE. This way the bulk of your browsing can be done in non-IE tabs and you can avoid the debug popups.
Have a look at debugbar. It's free for personal use, and it has a 60 days trial for commercial. It works a bit like fireug for Firefox, but obviously it's going to cost to use.