I am trying to detect the chrome and safari browser using jquery or javascript.
I thought we are not supposed to use jQuery.browser. Are there any suggestions here? Thanks a lot!
If you dont want to use $.browser, take a look at case 1, otherwise maybe case 2 and 3 can help you just to get informed because it is not recommended to use $.browser (the user agent can be spoofed using this). An alternative can be using jQuery.support that will detect feature support and not agent info.
But...
If you insist on getting browser type (just Chrome or Safari) but not using $.browser, case 1 is what you looking for...
This fits your requirement:
Case 1: (No jQuery and no $.browser, just javascript)
Live Demo: http://jsfiddle.net/oscarj24/DJ349/
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isChrome) alert("You are using Chrome!");
if (isSafari) alert("You are using Safari!");
These cases I used in times before and worked well but they are not recommended...
Case 2: (Using jQuery and $.browser, this one is tricky)
Live Demo: http://jsfiddle.net/oscarj24/gNENk/
$(document).ready(function(){
/* Get browser */
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
/* Detect Chrome */
if($.browser.chrome){
/* Do something for Chrome at this point */
/* Finally, if it is Chrome then jQuery thinks it's
Safari so we have to tell it isn't */
$.browser.safari = false;
}
/* Detect Safari */
if($.browser.safari){
/* Do something for Safari */
}
});
Case 3: (Using jQuery and $.browser, "elegant" solution)
Live Demo: http://jsfiddle.net/oscarj24/uJuEU/
$.browser.chrome = $.browser.webkit && !!window.chrome;
$.browser.safari = $.browser.webkit && !window.chrome;
if ($.browser.chrome) alert("You are using Chrome!");
if ($.browser.safari) alert("You are using Safari!");
Most of the answers here are obsolete, there is no more jQuery.browser, and why would anyone even use jQuery or would sniff the User Agent is beyond me.
Instead of detecting a browser, you should rather detect a feature (whether it's supported or not).
The following is false in Mozilla Firefox, Microsoft Edge; it is true in Google Chrome.
"webkitLineBreak" in document.documentElement.style
Note this is not future-proof. A browser could implement the -webkit-line-break property at any time in the future, thus resulting in false detection.
Then you can just look at the document object in Chrome and pick anything with webkit prefix and check for that to be missing in other browsers.
Instead of detecting a browser, you should rather detect a feature (whether it's supported or not). This is what Modernizr does.
Of course there are cases where you still need to check the browser because you need to work around an issue and not to detect a feature. Specific WebKit check which does not use jQuery $.browser:
var isWebKit = !!window.webkitURL;
As some of the comments suggested the above approach doesn't work for older Safari versions. Updating with another approach suggested in comments and by another answer:
var isWebKit = 'WebkitAppearance' in document.documentElement.style;
There is still quirks and inconsistencies in 2019.
For example with scaled SVG and pointer events, between browsers.
None of the answer of this topic are working any more. (maybe those with jQuery)
Here is an alternative, by testing with JavaScript if a CSS rule is supported, via the native CSS support api. Might evolve, to be adapted!
Note that it's possible to pass many CSS rules separated by a semicolon, for the finest detection.
if (CSS.supports("( -webkit-box-reflect:unset )")){
console.log("WEBKIT BROWSER")
// More math...
} else {
console.log("ENJOY")
}
if (CSS.supports("( -moz-user-select:unset )")){
console.log("FIREFOX!!!")
}
Beware to not use it in loops, for performance it's better to populate a constant on load:
const ff = CSS.supports("( -moz-user-select:unset )")
if (ff){ //... }
Using CSS only, the above would be:
#supports (-webkit-box-reflect:unset) {
div {
background: red
}
}
#supports (-moz-user-select:unset) {
div {
background: green
}
}
<div>
Hello world!!
</div>
List of possible -webkit- only css rules.
List of possible -moz- only rules.
Can I use css support?
/WebKit/.test(navigator.userAgent) — that's it.
I am trying to detect the chrome and safari browser using jquery or javascript.
Use jQuery.browser
I thought we are not supposed to use jQuery.browser.
That's because detecting browsers is a bad idea. It is still the best way to detect the browser (when jQuery is involved) if you really intend to do that.
you can use this minified jQuery snippet to detect if your user is viewing using a mobile device. If you need to test for a specific device I’ve included a collection of JavaScript snippets below which can be used to detect various mobile handheld devices such as iPad, iPhone, iPod, iDevice, Andriod, Blackberry, WebOs and Windows Phone.
/**
* jQuery.browser.mobile (http://detectmobilebrowser.com/)
* jQuery.browser.mobile will be true if the browser is a mobile device
**/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
Example Usage:
if(jQuery.browser.mobile)
{
console.log(‘You are using a mobile device!’);
}
else
{
console.log(‘You are not using a mobile device!’);
}
Detect iPad
var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isiPad)
{
…
}
Detect iPhone
var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone)
{
…
}
Detect iPod
var isiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isiPod)
{
…
}
Detect iDevice
var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());
if (isiDevice)
{
…
}
Detect Andriod
var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
if (isAndroid)
{
…
}
Detect Blackberry
var isBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());
if (isBlackBerry)
{
…
}
Detect WebOs
var isWebOS = /webos/i.test(navigator.userAgent.toLowerCase());
if (isWebOS)
{
…
}
Detect Windows Phone
var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());
if (isWindowsPhone)
{
…
}
Many answers here. Here is my first consideration.
Without JavaScript, including the possibility Javascript is initially disabled by the user in his browser for security purposes, to be white listed by the user if the user trusts the site, DOM will not be usable because Javascript is off.
Programmatically, you are left with a backend server-side or frontend client-side consideration.
With the backend, you can use common denominator HTTP "User-Agent" request header and/or any possible proprietary HTTP request header issued by the browser to output browser specific HTML stuff.
With the client site, you may want to enforce Javascript to allow you to use DOM. If so, then you probably will want to first use the following in your HTML page:
<noscript>This site requires Javascript. Please turn on Javascript.</noscript>
While we are heading to a day with every web coder will be dependent on Javascript in some way (or not), today, to presume every user has javascript enabled would be design and product development QA mistake.
I've seen far too may sites who end up with a blank page or the site breaks down because it presumed every user has javascript enabled. No. For security purposes, they may have Javascript initially off and some browsers, like Chrome, will allow the user to white list the web site on a domain by domain basis. Edge is the only browser I am aware of where Microsoft made the decision to completely disable the user's ability to turn off Javascript. Edge doesn't offer a white listing concept hence it is one reason I don't personally use Edge.
Using the tag is a simple way to inform the user your site won't work without Javascript. Once the user turns it on and refreshes/reload the page, DOM is now available to use the techniques cited by the thread replies to detect chrome vs safari.
Ironically, I got here because I was updating by platform and google the same basic question; chrome vs sarafi. I didn't know Chrome creates a DOM object named "chrome" which is really all you need to detect "chrome" vs everything else.
var isChrome = typeof(chrome) === "object";
If true, you got Chrome, if false, you got some other browser.
Check to see if Safari create its own DOM object as well, if so, get the object name and do the same thing, for example:
var isSafari = (typeof(safari) === "object");
Hope these tips help.
jQuery provides that:
if ($.browser.webkit){
...
}
Further reading at http://api.jquery.com/jQuery.browser/
Update
As noted in other answers/comments, it's always better to check for feature support than agent info. jQuery also provides an object for that: jQuery.support. Check the documentation to see the detailed list features to check for.
Related
I am trying to make my website accessible in high-contrast mode. In order to detect when high-contrast mode is enabled, I created a JavaScript method to detect if background images are disabled, because high-contrast mode disables background images. Then if the browser is in high-contrast mode, I append a CSS file to make fixes for displaying in high contrast. This works fine in Firefox, Edge, and IE, but Chrome uses its own extension to create high-contrast, and it does not disable the background images, so in Chrome the CSS for high contrast is not appended.
From searching I have found that Chrome adds a filter over the website as opposed to enabling/disabling/changing the website colors or images themselves. I have searched and searched, but I can't find anything to test to check if Chrome is using high-contrast mode. If there were a way to detect which extensions are being used that would also solve the problem, but I haven't been able to find a way to do that either.
My code actually works fine, all I need is to be able to detect the high-contrast mode in Chrome. Here is the method I use to check for high-contrast mode.
let highContrast = (options) => {
let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)');
hcDetect.appendTo(document.body);
if (hcDetect.css('background-image') === 'none') {
$('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">');
}
}
If you are asking about Windows High Contrast Mode, Chrome does not know when that is active.
In general, if a Windows user has chosen to enable High Contrast Mode, then that user is surfing in Microsoft Internet Explorer or Microsoft Edge (as these browsers support it). Both of them support the proprietary -ms-high-contrast #media rule.
Checking for a missing background image is a tactic that would work in IE/Edge, but using the media query is a better approach. Especially since Windows High Contrast Mode will soon allow background images in Edge.
If you are looking to detect when a particular extension has set its own high contrast mode in Chrome, it would be helpful to know which extension.
For example, with the High Contrast extension you can look for the following attributes on the <html> tag: hc="a3" and hcx="3" (the values may be different for you, but the attributes should match). If you open the browser dev tools you can see some other things it does. but those attributes are at the highest level of the DOM and probably safest to use.
If you are asking about Chrome for Android, that is also a different process.
...all I need is to be able to detect the high-contrast mode in Chrome
Solution #1:
In my React/TypeScript project, I used code similar to #Wesley Abbenhuis's answer, but found I didn't need the timeout for my component that took seconds to load. In fact, I created a demo React project that tested for the extension in the first loading component, and no delay was necessary.
const htmlTag: HTMLElement = document.getElementsByTagName(
'html'
)[0];
const isUsingChromeHighContrastExtension: boolean =
htmlTag.getAttribute('hc') !== null;
Solution #2:
Make your non-high contrast code accessible, and you shouldn't have to detect Chrome's high contrast extension in the first place.
From the WCAG Criterion 1.4.11: Non-text Contrast:
Success Criterion 1.4.11 Non-text Contrast (Level AA): The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components
Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
The Chrome Extension will inject some code to generate a highcontrast LAF.
The setTimeout could be required duo to the injection. In my case it was required.
This worked for me:
setTimeout(function(){
var htmlTag = document.getElementsByTagName('html');
console.log(htmlTag[0].getAttribute('hc') != null);
}, 150);
How can I check if the browser supports the Zoom css atribute? I know from Caniuse.com that only Firefoz does not support it, so, from this question (In Javascript, how do I determine if my current browser is Firefox on a computer vs everything else?) I tried:
if ($.browser.mozilla) { ...
which returns me an error in chrome:
Cannot read property 'mozilla' of undefined
Another solution according to the answer is detectinf if the browser supports that function, how could I do that?
Here is how you could detect support for a CSS feature in plain JavaScript. (Replace zoom with whatever feature is needed.)
document.createElement("detect").style.zoom === ""
I think this answer should help you : jquery determine if css zoom is available in browser
The best way is to use a JS library dedicated to test browser CSS capabilities like Modernizr does.
Is there a way I can call on different javascript files or lines depending on which device you view the site on? Like media queries for css.
there are a few general approaches to this:
enable features based on browser capabilities
check the user agent string on the server and return different scripts
detect IE with special comments
I recommend the first approach using modernizr http://modernizr.com/
EDIT:
detecting a touch aware browser with modernizr:
modernizr will add class="touch' to the body
$('.touch #popup).hide() // hide "popup" only on touch devices
Devices in context of platforms such as android, iphone, ipad, ie mobile etc, we can simply check as:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// here is your javascript code....
}
Hope, devices means to be worked as above....
Is there a way to do feature detection for setDragImage of HTML5 Drag and Drop (in JavaScript or Dart)?
I do the general HTML5 Drag and Drop feature detection with the following (from guide to detecting everything):
return 'draggable' in document.createElement('span');
This will return true for Chrome, Firefox, etc., and IE10. It will return false for IE9.
Now, the problem is with IE10: While it supports most of HTML5 Drag and Drop, setDragImage is not supported and I need to provide a polyfill just for setDragImage. But I couldn't figure out a way how to detect this.
This solution assumes general D&D support has already been checked.
JavaScript (tested in IE, Firefox, Opera and Chrome):
function test() {
var testVar = window.DataTransfer || window.Clipboard; // Clipboard is for Chrome
if("setDragImage" in testVar.prototype) {
window.alert("supported");
} else {
window.alert("not supported");
}
}
Dart:
I didn't find a way to do this with "native" Dart code, so js-interop is the way to go.
You can use the setDragImage-IE polyfill:
https://github.com/MihaiValentin/setDragImage-IE
This is how it actually works (from the README):
I noticed that if you make a change to the element's style (adding a
class that changes appearance) inside the dragstart event and then
removing it immediately in a setTimeout, Internet Explorer will make
a bitmap copy of the modified element and will use it for dragging.
So, what this library actually does is implement the setDragImage
method that changes the target's element style by adding a class that
includes the image that you want to appear while dragging, and then
removes it. In this way, the browser displays the temporary style of
the element as the drag image.
The feature detection mentioned in the previous answer fails in Opera 12 -- because it claims support for setDragImage, it just doesn't work. The Dart libraries that have been linked to also fail entirely in Opera 12, throwing multiple errors to the console.
It's actually not possible to polyfill a ghost image -- even if you create a document element and position it in the right place, you can't get rid of the default one without setDragImage.
The only solution I know of is to filter-out Opera 12 and all versions of IE (up to and including IE11) and treat them as legacy browsers, which have to be catered for with traditional mouse-event scripting. Since the direct feature testing fails, I would recommend an indirect object test (i.e. use an object test to detect those specific browsers):
var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));
I use often on my website intranet the input of type calendar but it works only when I use Chrome google and no using others browser. So I wrote a code for havin a css/javascript calendar but I would like to display it only if the browser is not chrome.
The calendar appear by id, so Is there a way I can check the browser ?
I really don't know which could can I use, because I don't know which functions can check the broiwser.
Receive all my utmost Respect.
Kind regards
SP.
You may try this to check the browser:
var nav = navigator.userAgent;
var ischrome = nav.indexOf("Chrome") ? true : false;
if (!ischrome) {
// Do something for browsers other than Chrome
// like displaying your calendar
// ...
}
Also, an interesting link that may interest you: JavaScript: How to find out if the user browser is Chrome?
Hope this helps.