Add CSS helper classes / JS global flags to represent browser/platform
Summary
There are several browser specific CSS glitches that we face, mostly affecting IE11 & Edge, but at times also on Chrome & FF under certain operating systems. Fixing these specific bugs can be tricky as there may not be a common fix that stays ineffective in common browsers while fixing the issue target browser (eg; A CSS fix for Edge that is not intended to affect Firefox as they both share identical useragent string).
Similarly, certain JS behaviours are specific to certain browsers, or we don't want certain components (using specific browser feature) to be available in certain browser/platform combination. Thus, having a global flag representing platform can be helpful.
Proposal
Detecting browser and platform based on just useragent string is not effective and thus involves using very specific JS. Having a global snippet that allows us to detect the platform and add CSS classes like;
-
gl-browser-*
- Where
*
can be:ie
,edge
,firefox
,safari
orchrome
.
- Where
-
gl-platform-*
- Where
*
can be:macos
,linux
orwindows
.
- Where
Similarly, flags in JS can be represented as;
-
gl.is*
- Where
*
can be:IE
,Edge
,Firefox
,Safari
orChrome
- And for platforms,
*
can be:Mac
,Linux
orWindows
.
- Where
This will be helpful in writing fixes which target only certain platforms via specific selectors and conditions.
Caveats
Availability of such global flags can encourage writing point-fixes (without considering a common fix where using flags is not at all necessary), and this can quickly go out of hand if we're doing lot of browser-specific stuff. This issue is created as follow-up on this discussion on Slack.