[data-whatintent='mouse'] *:focus does not apply to <a> and <button> elements

mbdoch commented 6 years ago

Hello!

The following css has different effects in different browsers:

[data-whatintent='mouse'] *:focus {
  outline: none;
}

Safari 11.0.3: works on every element :)
Firefox 59.0.2: does not work on

Chrome 65: does not work on and

Have I missed any step to make it work in all of them? Thanks!

ten1seven commented 6 years ago

@mbriantoc that should do it, but this code snippet doesn't give me much context around what's happening in your app. I can give you two things to try in those browsers:

Make sure the JavaScript is loading and working

Open your browser's developer tools so you can inspect the markup as you interact with the page.

Are there any errors in the console?
Do you see <html lang="en" data-whatinput="initial" data-whatintent="initial"> when the page loads?
Does the data-whatintent attribute change to mouse when you move your mouse? Does data-whatinput change when you click somewhere on the page (don't click on a link or button that would cause a page reload).

Isolate your CSS from what should work

Visit the demo page https://ten1seven.github.io/what-input/ in your browsers. Do things work for you there? I've tested that page in the browsers you've listed so that should help us know if you have a plugin or setting that's doing something.

Let me know what you find!

mbdoch commented 6 years ago

Hi @ten1seven

Thanks for the hints!

I was comparing the behaviour of your demo and my app (which is an AngularJS app btw) and the only difference I found is that, in my app, when clicking on any element, the data-whatclasses attribute appears with the value of the element's classes.

Is that expected?

ten1seven commented 6 years ago

Correct! data-whatclasses displays the classes of the focused (or clicked) element so that you can do very specific styling if desired, like:

[data-whatintent="mouse"][data-whatclasses*="my-class"] .parent-of-my-class {
   /* special styling because I know that .my-class was interacted with */
}

mbdoch commented 6 years ago

Hi @ten1seven

I found out we have a mixin dealing with the style when focus is on the links in the navigation. That's why it didn't work for the elements.

The lib works just fine! Thanks a lot :)

ten1seven commented 6 years ago

Great to hear!

ten1seven / what-input

[data-whatintent='mouse'] *:focus does not apply to <a> and <button> elements #81

Make sure the JavaScript is loading and working

Isolate your CSS from what should work