feat(web): Clean up kmwOSK.css in preparation for eventual restyling,
- Dominant language
- Pascal
- Stars
- 534
- Forks
- 143
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 113
Description
### Describe the solution you'd like
I’ve been cleaning up redundancy in my CSS to make it more obvious what is going on with the light (iOS Light), mid (Android), and Dark (iOS Dark) themes of my Cameroon Keyboards:

https://github.com/silcam/Cameroon-Keyboard/blob/master/src/km/sil_cameroon_qwerty/source/sil_cameroon_qwerty.css
I’m using these CSS featueres:
1. Inherited CSS variables supported from 2016 to later (https://caniuse.com/css-variables), including Chrome 57, to make the themes consistent and make sense. I was able to remove the duplicate selectors I needed to distinguish iOS dark, iOS light and Android.
2. `:-webkit-any()` to combine key selectors where most of the selector was repeated.
3. rgba() style transparency for fades, because the `#00000055` syntax is too recent (CSS4).
Assumptions:
1. My keyboard’s glyphs were only fully supported in base fonts in Android 6.0 (Marshmallow), so I’m less interested in supporting Android 5. Keyman may still need to support Android 5, but I wonder how many active A5 devices they have.
2. Keyman 16 requires Keyman 16 for Android requires at least Chrome 57 (from 2019), and Keyman iOS requires OS 12.2, which came out in 2019. This means that we should be able to use CSS that was accepted/available by 2019, so pretty much CSS3. Chrome’s current versions don’t seem to support below devices Android 7, so Keyman may only support back to 7.0. The CSS menus on the KM16 Developer Server don’t seem to work in Android 5-7’s stock browsers.
3. If I’m right, some older devices, including Android 7, don’t seem to support gradients and transparency in keyboards (even though the browser should), but I could be mistaken. This means that simplified CSS fallback (solid colors) is still necessary. When did this support start?
4. PopUps and KeyTips will soon be available as children of the keyboard once this feature (9864 (https://github.com/keymanapp/keyman/issues/9864)) is released and reaches stable, and this will allow their CSS to be well constrained by the `.kmw-keyboard...` class, but I need to include a less-constrained version until that point.
#### Notes on my keyboard:
In my personal code, dozens of duplicate rules like `.kmw-keyboard-sil_cameroon_qwerty .kmw-key:[id*='T_0300']` turn into this more-readable array:
```
.kmw-keyboard-sil\_cameroon\_qwerty .kmw-key:\-webkit-any(
\[id\*='T\_0300'\],
\[id\*='T\_0301'\],
\[id\*='T\_0302'\],
\[id\*='T\_0303'\],
\[id\*='T\_0304'\],
\[id\*='T\_030C'\],
...
\[id\*='T\_1DC7'\]
)
```
I would prefer to use `is()` which is recently (2021) approved to replace `:-webkit-any()`, but the webkit version is more widely supported across browser versions though deprecated.
#### Questions:
* What is the earliest version of Android that you are currently testing Keyman under? Are you still testing 5.0?
* The biggest question is, can we use CSS variables in `kmwosk.css`?
* iOS supports dark and light modes for keyboards, is this possible in Android yet?
* I know my CSS design with gradients is probably way too colorful for the base CSS, so would you be interested in me trying to harmonize the colors and structure of the file at some point?
#### Next Steps:
Now I’m curious about cleaning/simplifying the `kmwosk.css` in preparation for eventual user-selected themes. Developer-level theming would only need to redefine the colors. Eventual user-selected themes should become more easy in the future if you only have to set a few base and accent colors instead of overpowering every rule. Since this is CSS-based, the options for doing so will rely on the earliest devices/browsers/CSS suppport that Keyman reasonably needs to support.
If I did this, I would probably rearrange the .css file, which might make "blame" tracking awkward. Would you want something a bit more 3D/textured like mine or something more "material"?
### Keyman apps
- [X] Keyman for Android
- [X] Keyman for iPhone and iPad
- [ ] Keyman for Linux
- [ ] Keyman for macOS
- [ ] Keyman for Windows
- [ ] Keyman Developer
- [x] KeymanWeb
- [ ] Other - give details at bottom of form
Contributor guide
Assessment
This issue has not been assessed yet.