How to apply a CSS style only to devices that do not have a mouse?

Asked

Viewed 49 times

0

I need to hide an "X" icon when the device is in a web resolution with the pointer cursor and keep on touch devices (e.g., tablet and mobile).

I don’t know if I need to use the media pointer, to remove the icon in this case.

I tested this CSS, but I couldn’t solve it:

 .menu-web__logo-icon-x {
    color: white;
    cursor: pointer;
    min-width: 28px;
    min-height: 28px;
    margin-left: auto;
    margin-right: 16px;
   }
 }

 @media (cursor: pointer) {
   .menu-web {
     .menu-web__logo-icon-x {
       display: none;
      }
     }
   }

How can I create a media query to determine whether the user owns (or not) mouse?

html css cursor
  • 2

    Do you consider the touchpad a mouse? If you have a mouse connected on the touch device, what is the expected behavior?

  • I am not considering the fact that the user uses a mouse in touchpad, I did not think about this behavior if use a mouse for example on the tablet.

  • This can help you https://answall.com/questions/351537/qual-a-diff%C3%a7a-entre-o-media-query-Pointer-e-any-Pointer

  • I realized that media query pointer: fine, does not work in older browsers like IE8. There is some other possibility that works with that browser in particular?

1 answer

1


The media Feature pointer allows you to make a query to determine which type of cursor the user’s device has.

According to the documentation, three test values are possible:

Test value Description
none The mechanism of input primary does not include any pointing device.
coarse The device of input primary includes a pointing device with limited precision.
fine The device of input primary has a device for pointing with good precision.

Thus, its media query can use the test value none to determine whether the user is on a mobile device with no equipment to point to (such as a mouse).

Example:

/** Por padrão, assumiremos que o usuário possui um dispositivo para apontar. */
.no-pointing-device { display: none; }
.has-pointing-device { display: block; }

/** Media query para testar casos nos quais o usuário não tem dispositivo para apontar. */
@media (pointer: none) {
  .no-pointing-device { display: block; }
  .has-pointing-device { display: none; }
}
<h1 class="no-pointing-device">Você não tem mouse conectado</h1>
<h1 class="has-pointing-device">Você tem mouse conectado</h1>

The question code didn’t work because the query cursor: pointer is not valid. Note that the test pointer does not exist in the table above.

  • Thanks for the help, it worked using the value pointer: fine!

Browser other questions tagged html css cursor

You are not signed in. Login or sign up in order to post.