I want write a different custom css for android, ios and desktop depending on the platform the app is on. Please how do i achieve this in framework7

Questions
1

something like
.material .navbar{
color: red:
}
.ios .navbar{
color: blue:
}
.aurora.navbar{
color: yellow:
}

// something like this

2

You could use Framework7’s device library to detect which operating system the client is using, and load the appropriate CSS code dependant on that. Device | Framework7 Documentation

The best method using pure CSS is Theme Based Rendering Theme Based Rendering | Framework7 Documentation

  • if-ios - element will be rendered only for iOS theme
  • if-not-ios - element will be removed/hidden for theme other than iOS
  • if-md - element will be rendered only for MD theme
  • if-not-md - element will be removed/hidden for theme other than MD
  • if-aurora - element will be rendered only for Aurora theme
  • if-not-aurora - element will be removed/hidden for theme other than Aurora
2 Likes
3

Thank you very much. i am very grateful.