To truly go cross browser / platform, you *could* use a [custom cursor from a image url][1] to display context menu cursor however you'd like.

For example, you apply the following CSS Rule:

    cursor: url("https://i.stack.imgur.com/ygtZg.png"), auto;

Which looks like this:

>[![Custom Context Menu][2]][2]

Here's a [**Demo in jsFiddle**][3]

> **Note**: Even if you *can* solve any cross-platform rendering issues, you might want to consider [whether you *should* use the context-menu cursor][4].  It's is so rarely used that it may confuse users who see it, and context-menus themselves don't translate well to mobile deployments, which'll be a good chunk of most web-users.

**Further Reading**:

* [MDN - Cursor Property][5]
* [CSS Tricks - Using CSS Cursors][6]

[1]: https://stackoverflow.com/a/6623948/1366033
[2]: https://i.stack.imgur.com/ygtZg.png
[3]: https://jsfiddle.net/KyleMit/1L8dom1s/
[4]: https://ux.stackexchange.com/q/91307/34594
[5]: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
[6]: https://css-tricks.com/using-css-cursors/

[This page][1] says that IE9 and Opera 11.6 support the context-menu cursor on Windows, but I know Chrome, Safari and Firefox do not support the context-menu cursor on Windows, it just shows the regular arrow in those browsers.

I simply cannot understand why they wouldn't support that cursor. It would be immensely useful, especially when it's supported in those browsers on Mac.

It's purpose is for when you want the user to know that you've placed a special function on an element that will be activated when you engage the context-menu trigger over that element. For windows, that's a right-click. (most likely to bring up a custom context-menu)

Obviously, everything has a context menu on the web, you can right click anywhere on a page and the generic context menu will appear. This cursor though, is meant for when you place your own special function on an element that will be activated by right-click(and whatever Macs have - a context-menu key?)

Does anyone know why this isn't supported on Windows by those three browsers, but it is on Mac in those three browsers?


  [1]: http://www.browsersupport.net/CSS/cursor:context-menu

Why isn't `cursor:context-menu` supported by safari, chrome, or firefox on windows? But it is by IE9 and Opera?

The current solution will mask the issue, but won't address the underlying problem, which is that when browsers besides IE are composing the request for the gif (which SSRS just uses to replace padding), they don't know to include the `IterationId` query string parameter.

As [SQL Reporting Services Viewer broken in Non-IE Browsers][1] points out, if you're using the ReportViewer, you can fix this in your application routing under `Application_BeginRequest` like this:



    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        // Original fix credit to Stefan Mohr
        // Bug fix for MS SSRS Blank.gif 500 server error missing parameter IterationId
        // https://connect.microsoft.com/VisualStudio/feedback/details/556989/
        HttpRequest req = HttpContext.Current.Request;
        if (req.Url.PathAndQuery.StartsWith("/Reserved.ReportViewerWebControl.axd") &&
            !req.Url.ToString().ToLower().Contains("iteration") &&
            !String.IsNullOrEmpty(req.QueryString["ResourceStreamID"]) &&
            req.QueryString["ResourceStreamID"].ToLower().Equals("blank.gif"))
        {
            Context.RewritePath(String.Concat(req.Url.PathAndQuery, "&IterationId=0"));
        }
    }

[1]: http://coffeestain-it.blogspot.com/2011/08/sql-reporting-services-viewer-broken-in.html

I'm using `ReportViewer` 10.0. In Google Chrome, the lines come with a broken image called `blank.gif`. But IE and Firefox are working fine.

Here's an example with the images circled:

![Screnshot](http://i.imgur.com/JOV3rKR.png)

Any ideas on how to fix this?

ReportViewer showing broken images in Chrome

Since apparently chrome is doing this [intentionally][Chrome32] to move away from native controls, here's a way to change the default behavior in chrome.

* Use the CSS [Attribute Selector][attribute] to target `input` with `[type=checkbox]`
* Use the CSS [`:hover` pseudo-class][hover] to conditionally apply values when hovering
* Use the Chrome [Vendor Prefix][prefix] to only target `-webkit-` browsers<sup>†</sup>
* Style with [`Box-Shadow`][box shadow], using the `inset` option so the shadow goes inwards

Add this CSS:



    input[type=checkbox]:hover {
        -webkit-box-shadow: inset 0 0 2px 2px rgba(82,168,236,.6);
    }

##[Here's a Demo in Fiddle][fiddle]

Here's an **example***:   

![screenshot][screenshot]

†The webkit prefix will also apply to safari browsers  
**There have been prettier things in the world, but I'd still rather have this than nothing*

[Chrome32]: http://winsupersite.com/cloud/chrome-32-vs-windows
[attribute]: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
[hover]: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
[prefix]: https://stackoverflow.com/a/5411098/1366033
[box shadow]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
[fiddle]: http://jsfiddle.net/KyleMit/K4cXa/3/
[screenshot]: http://i.imgur.com/Lv1mDRG.png

When I hover over a checkbox or it's label in Firefox or IE, the checkbox enters an active state where it is highlighted, indicating that a click will affect it.  However this doesn't appear to be working chrome for me.

Here's some very, very simple code:



    <label>
        <input type="checkbox"/>
        Sample Check Label
    </label>

##[Here's a fiddle to try out][fiddle]

Here's an example of how checkboxes are rendering in all browsers:

![screenshots][screenshots]

I'm using chrome 32.0.1700.76 m

* Is this an issue other people are having with chrome?
* If other people aren't having this issue, any ideas what could be causing it (extension, add on)
* Is this actually the way chrome chooses to render checkboxes?
   * If so, are there any workarounds for cross browser consistency?

[fiddle]: http://jsfiddle.net/KyleMit/K4cXa/
[screenshots]: http://i.imgur.com/qRpmOYe.png

Checkbox not highlighted on hover in Chrome 32

## In Short, Specificity

From [CSS Specificity: Things You Should Know][specificity]:

>1. Specificity **determines, which CSS rule is applied** by the browsers.
2. Specificity is usually the reason why your CSS-rules don't apply to some elements, although you think they should.
3. Every selector has its place in the specificity hierarchy.
4. If two selectors apply to the same element, the one with **higher specificity wins**.
5. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements.
6. You can understand specificity if you love Star Wars: [CSS Specificity Wars][star wars].
7. You can understand specificity if you love poker: [CSS Specificity for Poker Players][poker].
8. When selectors have an equal specificity value, the latest rule is the one that counts.
9. When selectors have an unequal specificity value, the more specific rule is the one that counts.
10. Rules with more specific selectors have a greater specificity.
11. The last rule defined overrides any previous, conflicting rules.
12. The embedded style sheet has a greater specificity than other rules.
13. ID selectors have a higher specificity than attribute selectors.
14. You should always try to use IDs to increase the specificity.
15. A class selector beats any number of element selectors.
16. The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.
17. You can calculate CSS specificity with CSS Specificity Calculator.

### For example

If you had a `p` with class `a`, what would you predict it's color would be based on the following rules:




    p.a { color: red;  }
     .a { color: blue; }

[If you said *blue*, you'd be wrong!][fiddle]

As [Alochi pointed out][alochi], if you're looking for more of a **Tree View** of the styles hit by a particular element, in the Chrome Developer Tools, go to the computed tab and expand the property you're interested in.  You'll get a full list of all the other rules that apply to that element with a link to each.  From what you know about specificity and cascading, it should be clearer why the "winner" was chosen. 

![Chrome Inspector][Chrome Inspector]



[specificity]: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
[star wars]: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
[poker]: http://iamacamera.org/default.aspx?id=95

[fiddle]: http://jsfiddle.net/KyleMit/evwK4/

[alochi]: https://stackoverflow.com/questions/25006951/#comment38888684_25007136
[Chrome Inspector]: http://i.imgur.com/kSjX9Tr.png

I usually trace my `CSS` `stylesheet` by using the `Chrome` web browser.

I can see that some of my styles are being ignored by the inspection window of `Chrome` - the style is struck out with a black line.

I cannot see why it is being ignored. Usually, I follow all the styles using my eyes to see why it is ignored.

Can I know the structure (inheritance) information by Chrome or by other method?

How do I know why a CSS style is ignored?

You can change the User Agent string in Dev Tools:  

1. Open **Developer Tools** (<kbd>F12</kbd>)  
  [![Developer Tools][1]][1]
2. Show the **Console Drawer** at the bottom by hitting <kbd>Esc</kbd>  
  [![Console Drawer][2]][2]
3. Add the **Network Conditions** tab to the drawer  
  [![Network Conditions][3]][3]
4. Under **User Agent**, uncheck "Select automatically", and pick a browser you wish to emulate or customize the string however you'd like  
 [![User Agent][4]][4]


  [1]: https://i.stack.imgur.com/xuj0W.png
  [2]: https://i.stack.imgur.com/7UKZ4.png
  [3]: https://i.stack.imgur.com/hSqDP.png
  [4]: https://i.stack.imgur.com/X5zTs.png

What are the options to block the methods bellow with Chrome?

`navigator.appVersion`

`Info os.name`

as I was successfully profiled in

http://browserspy.dk/browser.php


I´d like to hide Browser and OS in order to avoid exploits. 

Is possible to spoof user-agent and OS with Chrome?

This just has to do with the way an empty `ContentEditable` area is rendered.  To prove it's not about the focus, add some text to your editable div, and then delete it.  When the last character is gone, the cursor will disappear

From the question [Setting the caret position to an empty node inside a contentEditable element][SO1]

>The selection/range model is based around indexes into text content, disregarding element boundaries. I believe it may be impossible to set the input focus inside an inline element with no text in it. Certainly with your example I cannot set focus inside the last element by clicking or arrow keys.
>
>It almost works if you set each span to `display: block`, though there's still some highly strange behaviour, dependent on the existence of whitespace in the parent. Hacking the display to look inline with tricks like float, inline-block and absolute position make IE treat each element as a separate editing box. Relative-positioned block elements next to each other work, but that's probably impractical.

---

You could also try adding a zero-width character like `&#8203;`



    document.getElementById('myspan').focus();



    #myspan {
        border: 0;
        outline: 0;
    }



    <span id="myspan" contenteditable="true">&#8203;</span>



[SO1]: https://stackoverflow.com/q/4063144/1366033

When you open this page (see [Live demo][1]) with Chrome :
 
    <span id="myspan" contenteditable=true></span>

CSS : 

    #myspan { border: 0; outline: 0;}

JS :

    $(myspan).focus();

the `contenteditable` `span` has focus (you can start to write things and you will see that it already had focus), but we don't see the "`I`" edit cursor.

**How to make that this cursor is displayed ?** (Remark : `outline:0` is needed, as well as the fact that the span is empty even with no white space).

*Note : With Firefox, the cursor is displayed.*


  [1]: http://jsfiddle.net/gs3p1a6r/3/show/

Edit cursor not displayed on Chrome in contenteditable

Could it have something to do with this line of [your css][1]?:



    ::-webkit-scrollbar {
      display: none;
    }

Yes, yes it could.

[1]: http://beta.elasticbeanstalk.com/assets/main-a904101e21bab32ce37699b96df2ae6b.css

I have following code:

    <div id="results" class="results" style="height: 590px; overflow-y: scroll"></div>

The id results will be filled by ajax. Firefox shows Scroll bar but Chrome does not display it.

Can anyone help me ? Here is the testing site too http://beta.elasticbeanstalk.com/

CSS not working in Chrome with Twitter Bootstrap

Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.

If you see the message `Source Map Detected`, the original file should *already* appear on the side file tree or the file explorer via <kbd>Crl</kbd> + <kbd>P</kbd>.  If you don't know the original file name, you can open the source map file itself.

1. The source map path can be identified by a `//# sourceMappingURL=` comment or the `X-SourceMap` header:

   [![sourceMappingURL][1]][1]

2. Open up the source map via url and look for the `sources` property for the original file name:

   [![source map file][2]][2]

3. The original file should be visible in the sources panel:

   [![original file in sources panel][3]][3]

### If you *don't* see the message `Source Map Detected` 

You can manually add an external source map by right clicking and selecting `Add Source Map`:

[![Add source map][4]][4]

### Additional Resources

* If that still doesn't work, you can try a [Source Map Validator][5]
* For webpack specifically, you can configure the [`devtool`][6] property

  [1]: https://i.stack.imgur.com/vMxCi.png
  [2]: https://i.stack.imgur.com/Kgi3K.png
  [3]: https://i.stack.imgur.com/2UUrT.png
  [4]: https://i.stack.imgur.com/ojoDU.png
  [5]: https://sourcemaps.io/
  [6]: https://webpack.js.org/configuration/devtool/

When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.

These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:
[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/70nAz.png


config:

    var path = require("path");
    var webpack = require("webpack");
    var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
    
    
    const PATHS = {
      app: path.join(__dirname, '../client'),
      build: path.join(__dirname, '../public')
    };
    
    module.exports = {
    
    
      entry: {
        app: PATHS.app + '/app.js'
      },
      output: {
        path: PATHS.build,
        filename: '[name].js'
      },
    
    
      devtool: "source-map",
      module: {
        loaders: [
          {
            test: /\.js?$/,
            loader: 'babel-loader',
            include: [
              path.resolve(__dirname, 'client'),
            ],
            exclude: /node_modules/
    
          },
    
          {
            test: /\.css/,
            loader: "style!css"
          }
        ]
      },
      resolve: {
        // you can now require('file') instead of require('file.js')
        extensions: ['', '.js', '.json']
      } ,
      plugins: [
        new WebpackBuildNotifierPlugin()
      ]
    
    };

