Skip to content

feat(preset-mini): add default mouse media as alternative to @hover#3233

Merged
antfu merged 1 commit intounocss:mainfrom
chu121su12:feat/mini-media
Oct 23, 2023
Merged

feat(preset-mini): add default mouse media as alternative to @hover#3233
antfu merged 1 commit intounocss:mainfrom
chu121su12:feat/mini-media

Conversation

@chu121su12
Copy link
Member

Due to how tagged pseudo works (group-x, etc), it is difficult to weave @hover support.

This PR copy one of media-x variant default theme (mouse) from preset-wind so we can use media-mouse variant in preset-mini to add the @hover media query without adding the :hover pseudo. Note that media-x is separate from group-x, so to combine you may need to, well, combine the syntax (see test) or use shortcut. I personally think that this combination is better served via shortcut to keep the atomicity of the variant.

Reference:

mouse: '(hover) and (pointer: fine)',

This should help #3076 with only preset-mini.

@netlify
Copy link

netlify bot commented Oct 14, 2023

Deploy Preview for unocss ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit fff3a31
🔍 Latest deploy log https://app.netlify.com/sites/unocss/deploys/652aa11b7586cc00084f3a4d
😎 Deploy Preview https://deploy-preview-3233--unocss.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@chu121su12 chu121su12 marked this pull request as ready for review October 14, 2023 14:29
@chu121su12 chu121su12 requested a review from antfu as a code owner October 14, 2023 14:29
@antfu
Copy link
Member

antfu commented Oct 15, 2023

Would that make sense to be media-mouse-hover: or shortcut as hover-mouse:, to be more explicit?

/cc @LittleSound I remember you were working on a similar things, wonder if you have any feedback on this?

@LittleSound
Copy link
Contributor

Would that make sense to be media-mouse-hover: or shortcut as hover-mouse:, to be more explicit?

/cc @LittleSound I remember you were working on a similar things, wonder if you have any feedback on this?

Responding to hover events on mobile webpages can be quite tricky. To overcome this, I usually write hover:bg-primary as sm:hover:bg-primary to make it only work on larger screens. Of course, this doesn't truly detect whether it's a mouse or not, it's just generally touchscreen devices have smaller screens. If this PR can provide a better solution, I'm looking forward to it.

@antfu antfu merged commit 901f10c into unocss:main Oct 23, 2023
@chu121su12 chu121su12 deleted the feat/mini-media branch October 23, 2023 09:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants