cross-browser interview questions
Top cross-browser frequently asked interview questions
How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY which will work in all major browsers?
Source: (StackOverflow)
For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?
I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-select option.
Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?
Source: (StackOverflow)
In JavaScript 1.7, the let keyword was added. I've heard it described as a "local" variable, but I'm still not quite sure how it behaves differently than the var keyword.
What are the differences? When should let be used over var?
Source: (StackOverflow)
I want to center a div vertically with CSS. I don't want tables or Javascript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
<body>
<div>Div to be aligned vertically</div>
</body>
How can I center a div vertically in all major browsers, including Internet Explorer 6?
Source: (StackOverflow)
Is this defined by the language? Is there a defined maximum? Is it different in different browsers?
Source: (StackOverflow)
Is there a CSS-only way to style a <select> dropdown?
I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?
This code needs to be compatible with all major browsers:
- Internet Explorer 6,7 and 8
- Firefox
- Safari
I know I can make it with JavaScript: Example.
And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.
I found similar questions on Stack Overflow.
And this one on Doctype.com.
Source: (StackOverflow)
Recently I was looking through some website's code, and saw that every <div> had a class clearfix.
After a quick Google search, I learned that it is for IE6 sometimes, but what actually is clearfix? Could you provide some examples of a layout with clearfix, compared to a layout without clearfix?
Source: (StackOverflow)
I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?
Source: (StackOverflow)
There is a bunch of images in a web page.
Other browsers are downloading them correctly, but Chrome doesn't loads them.
In the developer's console, it shows the following message for each image:
Failed to load resource
This problem appears only in Chrome.
What is it?
Source: (StackOverflow)
What are all the valid self-closing elements (e.g. <br/>) in XHTML (as implemented by the major browsers)?
I know that XHTML technically allows any element to be self-closed, but I'm looking for a list of those elements supported by all major browsers. See http://dusan.fora.si/blog/self-closing-tags for examples of some problems caused by self-closing elements such as <div />.
Source: (StackOverflow)
How can a web application detect a paste event and retrieve the data to be pasted?
I would like to remove HTML content before the text is pasted into a rich text editor.
Cleaning the text after being pasted afterwards works, but the problem is that all previous formatting is lost. For example, I can write a sentence in the editor and make it bold, but when I paste new text, all formatting is lost. I want to clean just the text that is pasted, and leave any previous formatting untouched.
Ideally, the solution should work across all modern browsers (e.g., MSIE, Gecko, Chrome, and Safari).
Note that MSIE has clipboardData.getData(), but I could not find similar functionality for other browsers.
Source: (StackOverflow)
Is there any good way of truncating text with plain HTML and CSS, so that dynamic content can fit in a fixed-width-and-height layout?
I've been truncating server-side by logical width (i.e. a blindly-guessed number of characters), but since a 'w' is wider than an 'i' this tends to be suboptimal, and also requires me to re-guess (and keep tweaking) the number of characters for every fixed width. Ideally the truncation would happen in the browser, which knows the physical width of the rendered text.
I've found that IE has a text-overflow: ellipsis property that does exactly what I want, but I need this to be cross-browser. This property seems to be (somewhat?) standard but isn't supported by Firefox. I've found various workarounds based on overflow: hidden, but they either don't display an ellipsis (I want the user to know the content was truncated), or display it all the time (even if the content wasn't truncated).
Does anyone have a good way of fitting dynamic text in a fixed layout, or is server-side truncation by logical width as good as I'm going to get for now?
Source: (StackOverflow)
On IE I can do this with the (terribly non-standard, but working) jQuery
if ($.browser.msie)
$(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});
But is it possible to do in a way which works on Firefox, or in a cross-browser way for a bonus?
For the record:
$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });
does nothing.
$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });
solves the problem, but renders the backspace key unusable on the page, which is even worse than the original behaviour.
EDIT:
The reason I do this is that I'm not creating a simple web page but a large application. It is incredibly annoying to lose 10 minutes of work just because you pressed backspace in the wrong place. The ratio of preventing mistakes vs. annoying users should be way above 1000/1 by preventing the backspace key from navigating back.
EDIT2: I'm not trying to prevent history navigation, just accidents.
EDIT3: @brentonstrines comment (moved here since the question is so popular): This is a long-term 'fix', but you could throw your support behind the Chromium bug to change this behavior in webkit
Source: (StackOverflow)
If you have worked with JavaScript at any length you are aware that Internet Explorer does not implement the ECMAScript function for Array.prototype.indexOf() [including Internet Explorer 8]. It is not a huge problem, because you can extend the functionality on your page with the following code.
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0), j = this.length; i < j; i++) {
if (this[i] === obj) { return i; }
}
return -1;
}
When should I implement this?
Should I wrap it on all my pages with the following check, which checks if the prototype function exists and if not, go ahead and extend the Array prototype?
if (!Array.prototype.indexOf) {
// Implement function here
}
Or do browser check and if it is Internet Explorer then just implement it?
//Pseudo-code
if (browser == IE Style Browser) {
// Implement function here
}
Source: (StackOverflow)