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);
Related
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.
I'm building an in-browser application for my company's internal use. It would be helpful if my users could quickly switch between 6 different browser dimensions. I've tried using window.resizeTo, but it seems most modern browsers are disabling any sort of coded resizing. Safari seems to be my only exception for Mac users, but I'm concerned that they too will follow suit with Chrome and FF.
Is anybody aware of any work-arounds or user opt-ins? I've found a Chrome extension that can get the job done, but ideally there wouldn't have to be any sort of configuration or 3rd party extensions as some of my users have very strict permissions on their machines.
No, that's not possible. Otherwise all kind of ads would ask the user to allow them to resize themselves in the hope some people allow it (and thus most likely allow it for the whole adserver used by tons of websites).
You could wrap your application's content in a <div> with overflow: scroll, and resize that actual div. If your application's styles do not allow that, you can wrap it in an <iframe> with the viewport size you want to enforce.
Is there today with HTML5 a way to copy to clipboard, without browser plugins (and so without Flash nor java) nor short-term hacks, an image built in a canvas ?
The copy to clipboard would be initiated by javascript but having user confirmation or a dialog isn't a problem.
Solutions which don't work in Windows and Linux, or which don't work at least in Chrome and Firefox are without interest to me.
Ideally I would prefer a solution that doesn't impose to display the image (which is built in memory with document.createElement('canvas')) but that's not an absolute requirement.
As far as I'm aware, the Clipboard API is the only specification in this area. I've never used it and don't know how widely it's supported, but I suspect not widely. According to this quick and dirty test, the current versions of Chrome and Firefox fire the copy event. I believe the user has to initiate the copy (e.g., you say "press Ctrl+C to copy").
IE makes window.clipboardData available, but as far as I know you're limited to text and URLs.
So sadly, I think this is one of those answers that's basically: No, not yet.
I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.
What browsers are implementing the input attribute "accesskey"?
Is the behavior consistent cross browser?
Is it safe to use accesskey as just an extra data attribute (like the "rel" and "rev" are sometimes used on the a tag)?
Also, is there a way to capture the "onaccesskeypress" in JavaScript? Does it just fire an onclick event?
Browser support:
All major browsers support the accesskey attribute. Although there has been some discussion whether this is a good thing for accessibility, it remains part of HTML (as of HTML5).
Consistent behaviour:
Behaviour is only consistent across browsers & platforms in that pressing a particular set of control keys and the defined accesskey key will activate the link.
By definition, every web developer is free to define access keys as they wish, and there isn't an agreed standard for common links, such as 'Jump down to the main content', 'home', 'sitemap' etc., so there's no consistency from website to website. See my suggestions below.
Also the control keys for accessing these keyboard shortcuts differ from browser to browser and platform to platform, and occasionally there have been changes between browser versions too.
The Wikipedia page about access keys provides a list for a wide number of browsers and should provide you with an up-to-date list.
Safe to use accesskey as just an extra data attribute:
I'm not sure what you mean by 'safe'. Here is an example of how to use it:
<a accesskey="9" href="/sitemap.html">Sitemap</a>
Personal suggested access keys:
0 - Home
9 - Sitemap
8 - Accessibility page (listing the keys)
1,2,3... - Main navigation items, top-level only
accesskey has pretty spotty implementation. Firefox allows you to use any character as an accesskey value, while Safari seem to only allow numeric characters (for example, on this page).
The next button is mapped to the > accesskey. It works in Firefox (Ctrl>, on a Mac), but not in Safari.
In my opinion, if keyboard navigation is essential to your webpage, using JavaScript is a much better option.
Some resources I used to come to my conclusions: [1], [2]
EDIT: After a bit more experimentation, it appears that Safari honors accesskeys that are alphanumeric characters. The keystroke to execute them is CtrlAlt{ACCESSKEY}. I still think JavaScript is the best way to implement keyboard navigation, but I thought I'd add this information for clarity.
Every major browser supports accesskey (parses it and assigns keyboard shortcuts accordingly).
The problem with this is that the control key is different for every browser. On Internet Explorer, it's Alt + key, Firefox uses Shift + Alt + key, Mac uses Ctrl + key.