Is there a way to modify the code so that Firefox displays Everything like Chrome does? i.e Firefox makes everything look bigger. On my website Chrome shows everything nicely while in Firefox everything seems too big.
Every browser has its own differences, so there is a chance that one browser will display a webpage differently than another. However, if size is your main concern, Mozilla has a webpage all about changing the size of webpages or just the text on webpages [here].
For achieve this, u need first use some css reset, you can view the most famous css resets here:
http://www.cssreset.com/
A CSS Reset is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In case you didn't know, every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible.
Them, use the pre-fixes in properties that are not full supported:
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
You can learn more about pre-fixes here:
http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
And you can also view if a property is fully supported by all the browsers here :
http://caniuse.com/#
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);
I am using a page that is using the css of -webkit-background-clip:text with a polyfill to get it working in browsers that don't support this.
Obviously, some browsers use Webkit (Chrome, Opera & Safari) and some don't (Firefox, IE), and I want the page to display the same (give or take the background clip) however this isn't happening on Firefox. The polyfill I'm using works but translates the text very weirdly in Firefox. Strangely enough, IE works (though the polyfill doesn't).
This is Firefox:
This is a Webkit browser:
And finally this is IE:
The polyfill I'm using is https://github.com/TimPietrusky/background-clip-text-polyfill
I've tried contacting the guy who made it but can't get any reply out of him.
Basically, I have no idea why Firefox is translating the text at all. I want it to either act as Internet Explorer and just display the text as white, or correctly display it.
How would I go about doing that?
If you need a page to work off, there is too much for a jsfiddle, but a link to the page can be found here.
Your polyfill creates a SVG for Firefox, but doesn't seem to do a very good job at it. Removing
overflow: hidden from the SVG element (set in svg.css) will let all the generated SVG show.
I am using wz_jsgraphics.js library to draw lines. It is working with all browser other than IE 7/8/9. Now I want to run it on any IE7/8/9 browser. Please guide me to resolve this problem.
Walter Zorn's wz_jsgraphics.js works fine in IE7, IE8, and IE9 when I use these browsers on four different computers.
Internet Explorer has quite many options. Maybe one of them needs to be changed on your computer. For instance, if you are running jsgraphics offline from an html document on a file, the advanced IE option Allow Active Content To Run From A File (or whatever it is called) must, of course, be checked.
There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.
I'm having some trouble setting up virtual machines for testing IE versions (I use a mac) and have noticed on IE8 it has a browser switching mode.
Does this mode do a full switch for CSS and Javascript, I need testing to be 100% reliable.
Also does IE9 have a similar feature going down to IE7?
It's not going to be 100% reliable, I can tell you that right now. The only way to really test on IE7 is to test on IE7. For most layout checks, using the newer browser in emulation mode will be fine, but there are definitely bugs and oddities in the actual older browsers that the newer browsers don't mimic faithfully.
When you change The browser mode from the IE developer tools, IE renders the site according with your selection.
IE 9 also has this option, and if say you pick IE7, you'll get pretty much the same expercience you would get in that browser (from a layout and functionality point of view), but it's not completely reliable, some Javascript quirks are not the same (I can't remember any specific ones)
If you really need to test in IE7, get IE7 :D
More info here!
Press F12, and in the developer tools toolbar change browser mode to IE7 and Document Mode: IE7 (if you change the browser mode, then doc mode automatically changes also).
As for whether you get a different Javascript API? I don't know.
I agree with #Pointy, though. Realistically you actually need to run IE7. A VM is often a good way to do this if you don't want to muck about getting the different versions running side-by-side.