Top cross-browser Questions

List of Tags

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?

Answered By: Blowsie ( 1276)

All of the correct CSS variations are:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
257
John Millikin

I've seen a couple questions around here like How to debug RESTful services, which mentions:

Unfortunately that same browser won't allow me to test HTTP PUT, DELETE, and to a certain degree even HTTP POST.

I've also heard this, that browsers support only GET and POST, from some other sources like:

However, a few quick tests in Firefox show that sending PUT and DELETE requests works as expected -- the XMLHttpRequest completes successfully, and the request shows up in the server logs with the right method. Is there some aspect to this I'm missing, such as cross-browser compatibility or non-obvious limitations?

Answered By: Matthew Murdoch ( 170)

HTML forms (up to HTML version 4 and XHTML 1) only support GET and POST as HTTP request methods. A workaround for this is to tunnel other methods through POST by using a hidden form field which is read by the server and the request dispatched accordingly.

However, for the vast majority of RESTful web services GET, POST, PUT and DELETE should be sufficient. All these methods are supported by the implementations of XMLHttpRequest in all the major web browsers (IE, Firefox, Opera).

What is the best way to create rounded corners using CSS?

Answered By: Yaakov Ellis ( 70)

I don't know if you can say that there is any one technique that is "the best". Below are a whole bunch of different approaches. Find one that suits your site and coding style, and go with it.

  1. CSS Design: Creating Custom Corners & Borders
  2. CSS Rounded Corners 'Roundup'
  3. 25 Rounded Corners Techniques with CSS
174
Jitendra Vyas

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.

Answered By: Danield ( 44)

After extensive searching, I have found 2 reasonable approaches for creating custom pure-css select drop-downs.

Approach #1. Original article here

Wrap the select element in a div with a fixed width (say 150px) and overflow hidden. Then give the select element a width of about 20px greater than the div. The result is that the default drop-down arrow of the select element will be chopped off, and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (IE8+,Webkit,Gecko) however

the disadvantage of approach is that the options drop-down juts out on the right-hand-side (by the 20px which we hid.... because the option elements take the width of the select elment)

[Here's a demo of this approach]

Approach #2 Original post here

Use the pointer-events property.

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: No extra markup, works well in Webkit and Gecko.

Disadvantage: IE doesn't support pointer-events. (even IE10), which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor...because we have just disabled pointer events on them!

However with this method you can use Modernizer or conditional statements to make IE revert to the standard built in arrow.

This, in my opinion is the best available solution to date. (at least until the appearance property gets wider browser support)

Here is a fiddle [which uses the second approach together with IE conditionals] where you can verify this.

165
Morgan Cheng

Is there a standard for what actions F5 and Ctrl+F5 trigger in web browsers?

I once did experiment in IE6 and Firefox 2.x. The "F5" refresh would trigger a HTTP request sent to the server with an "If-Modified-Since" header, while "Ctrl+F5" would not have such a header. In my understanding, F5 will try to utilize cached content as much as possible, while "Ctrl+F5" is intended to abandon all cached content and just retrieve all content from the servers again.

But today, I noticed that in some of the latest browsers (Chrome, IE8) it doesn't work in this way anymore. Both "F5" and "Ctrl+F5" send the "If-Modified-Since" header.

So how is this supposed to work, or (if there is no standard) how do the major browsers differ in how they implement these refresh features?

Answered By: some ( 335)

It is up to the browser but they behave in similar ways.

I have tested FF, IE7, Opera and Chrome.

F5 usually updates the page only if it is modified. The browser usually tries to use all types of cache as much as possible and adds an "If-modified-since" header to the request. Opera differs by sending a "Cache-Control: no-cache".

CTRL-F5 is used to force an update, disregarding any cache. IE7 adds an "Cache-Control: no-cache", as does FF, which also adds "Pragma: no-cache". Chrome does a normal "If-modified-since" and Opera ignores the key.

If I remember correctly it was Netscape which was the first browser to add support for cache-control by adding "Pragma: No-cache" when you pressed CTRL-F5.

Edit: Updated table

The table below is updated with information on what will happen when the browser's refresh-button is clicked (after a request by Joel Coehoorn), and the "max-age=0" Cache-control-header.

Updated table, 27 September 2010

+------------+-----------------------------------------------+
|  UPDATED   |                Firefox 3.x                    |
|27 SEP 2010 |  +--------------------------------------------+
|            |  |             MSIE 8, 7                      |
| Version 3  |  |  +-----------------------------------------+
|            |  |  |          Chrome 6.0                     |
|            |  |  +  +--------------------------------------+
|            |  |  |  |       Chrome 1.0                     |
|            |  |  |  |  +-----------------------------------+
|            |  |  |  |  |    Opera 10, 9                    |
|            |  |  |  |  |  +--------------------------------+
|            |  |  |  |  |  |                                |
+------------+--+--+--|--+-----------------------------------+
|          F5|IM|I |IM|IM|C |                                |
|    SHIFT-F5|- |- |CP|IM|- | Legend:                        |
|     CTRL-F5|CP|C |CP|IM|- | I = "If-Modified-Since"        |
|      ALT-F5|- |- |- |- |*2| P = "Pragma: No-cache"         |
|    ALTGR-F5|- |I |- |- |- | C = "Cache-Control: no-cache"  |
+------------+--+--+--|--+--+ M = "Cache-Control: max-age=0" |
|      CTRL-R|IM|I |IM|IM|C | - = ignored                    |
|CTRL-SHIFT-R|CP|- |CP|- |- |                                |
+------------+--+--+--|--+--+                                |
|       Click|IM|I |IM|IM|C | With 'click' I refer to a      |
| Shift-Click|CP|I |CP|IM|C | mouse click on the browsers    |
|  Ctrl-Click|*1|C |CP|IM|C | refresh-icon.                  |
|   Alt-Click|IM|I |IM|IM|C |                                |
| AltGr-Click|IM|I |- |IM|- |                                |
+------------+--+--+--+--+--+--------------------------------+

Versions tested:

  • Firefox 3.1.6 and 3.0.6 (WINXP)
  • MSIE 8.0.6001 and 7.0.5730.11 (WINXP)
  • Chrome 6.0.472.63 and 1.0.151.48 (WINXP)
  • Opera 10.62 and 9.61 (WINXP)

Notes:

  1. Version 3.0.6 sends I and C, but 3.1.6 opens the page in a new tab, making a normal request with only "I".

  2. Version 10.62 does nothing. 9.61 might do C unless it was a typo in my old table.

Note about Chrome 6.0.472: If you do a forced reload (like CTRL-F5) it behaves like the url is internally marked to always do a forced reload. The flag is cleared if you go to the address bar and press enter.

Is this defined by the language? Is there a defined maximum? Is it different in different browsers?

Answered By: Jimmy ( 153)

+/- 9007199254740992

ECMA Section 8.5 - Numbers

Note that all the positive and negative integers whose magnitude is no greater than 253 are representable in the Number type (indeed, the integer 0 has two representations, +0 and −0).

They are 64-bit floating point values, the largest exact integral value is 253, or 9007199254740992.

Note that the bitwise operators and shift operators operate on 32-bit ints.


Test it out!

var x = 9007199254740992;
var y = -x;
x == x + 1; // true !
y == y - 1; // also true !
// Arithmetic operators work, but bitwise/shifts only operate on int32:
x / 2;      // 4503599627370496
x >> 1;     // 0
x | 1;      // 1