OS/Browser detection

[Twyar]

Hi,

Would it be possible to add utility classes to detect certain browsers or operating systems ?

I currently have a little dropdown on my website where people can add an appointment to their calendar.

Preferably I would like Apple Calendar to be only visible on iOS devices.

So I am thinking of something like the classes

• platform-ios: Targets iOS devices
• platform-android: Targets Android devices
• platform-windows: Targets Windows devices

That way could do this for example:

<div class="hidden platform-ios:block">
    <!-- content -->
</div>

I know there's javascript packages as well for detecting a device, and you could use a simple use agent check to render an element or not. But I think it could be nice to have something so you could do

platform-ios:bg-red as well

Thoughts ?

[mybearworld]

Is that a thing you can do with CSS only? Otherwise, I'd suggest doing this with JavaScript and write a small plugin to do this. https://play.tailwindcss.com/UHV8p9ynTJ

[BLamy]

Viewing this on iOS mobile safari shows “Linux” and nothing else.

[mybearworld]

Yes, you'd have to use JavaScript to add the proper class.