CSS platform detection ?

druppy

Hi, I tried to understand how Quasar sets things up for the Stylus when loading styles, like platform detection.

I know it makes a mat and ios class depending on the scheme selected, but I can’t find any CSS class that is related to the platform detection and not just the scheme. It this true (btw. this info really need to be in the “Platform detect” doc) ?

The reason for this is that we, in one project, don’t want to change style on IOS (at the moment), but we really like to compensate for IOS in the more generic CSS (like iframes).

rstoenescu

The starter kit imports your app’s Material or iOS theme depending on quasar build [theme] command. This creates a webpack “macro” like __THEME which contains “mat” or “ios”. Then, in /src/main.js you got:

// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
// require(`./themes/app.${__THEME}.styl`)
// 2. or, use next line to activate DEFAULT QUASAR STYLE
require(`quasar/dist/quasar.${__THEME}.css`)
// ==============================

Did I understand correctly what you were looking for?

rstoenescu

You can build an iOS app with Material theme too… you are not forced to build it with iOS theme. Just an example. The platform detection is one thing (happens in Quasar’s JS) and the theme is another thing.
Your platform can be ios but your theme either Material or iOS.

bl

I understand the distinction between theme and platform, but I just realized that the only css indication is a class on the body, but this is not related to the detection code but only to the theme. So no, I was not looking for __THEME, but it is a useful thing to know

These theme things are all injected in the quasar init code, last time I looked, and I thought that we could benefit from a platform related class too, so platform quirks in css can be globally controlled by this. If this was the case I could write CSS like this :

.ios_platform iframe {
    width: 1px
    min-width: 100%
}

If ios_platform was set on the body tag along with the theme (ìosor mat`) it would be really nice, and we have all detection ready anyway at this point.

Btw…can 0.14 select theme automatically (or be setup for this) ?

rstoenescu

platform-ios or platform-android is already being added to body tag.
Dynamic change of theme is not possible unfortunately.

bl

Perfect, I had not checked 0.14 css setup yet, seems like a good time to do this really soon.

Have you any idea how hard it will be to make dynamic theme change ?

rstoenescu

@bl Very. Back in the old days, Quasar supported dynamic theme change, but then Webpack came along with its good and bad parts. One of the bad parts of it is that this was not possible anymore. Not saying it can’t be done, but doing it requires a hell lot of investigation and workarounds.

bl

Ok, so … if we could make WebPack build the two themes as two separate css bundles, we could load these after platform detection ?

I tried to do this (separating the css file from the main bundle), as we like our customers design requests separate from the main logic, but at the moment we let the http server do the mapping of these files.

No More Posting New Topics!

CSS platform detection ?