- From: Simon Pieters via GitHub <sysbot+gh@w3.org>
- Date: Fri, 19 Oct 2018 11:58:03 +0000
- To: public-css-archive@w3.org
Here are some of my web compatibility findings.
Most common values
==
* [most common -webkit-appearance values in httparchive](https://gist.github.com/zcorpan/191f7d0183b7b41c8d44fc6fe12ac0d7)
* [most common -moz-appearance values in httparchive](https://gist.github.com/zcorpan/1a5d0dc3279a3495e14f53f2b16fa1e4)
* [most common -webkit-appearance values in Chrome and Edge per MS's data](https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/css/-webkit-appearance/)
* [most common -moz-appearance values in Firefox per MS's data](https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/css/-moz-appearance/)
Analysis of -moz-appearance and -webkit-appearance values
==
* [most common combinations of non-equal -moz-appearance and -webkit-appearance values in httparchive](https://gist.github.com/zcorpan/499ee4e1f8f1a60f13e0fe43bcfb7fdf)
- This can help inform the [web compat impact of unshipping certain values from gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=1496720#c14).
* [most common style rules (including selector) containing -webkit-appearance or -moz-appearance (excluding 'none') in httparchive](https://gist.github.com/zcorpan/2ca390b9b7c46eac9e38736a76184f5d)
- `menulist-button` on `select` (switches to an alternative gray theme in safari/chrome on macOS)
- `6216,.wsite-com-checkout-section .wsite-form-field select{-webkit-appearance:menulist-button;border:1px solid #ccc}`
- `push-button` on buttons (should give themed appearance like it does by default):
- `5202,".plugin-search_tags .search-tags-submit-button { -webkit-appearance: push-button; padding: 2px 4px; }"`
- `textfield` on `input type=search` (they are 'searchfield' by default):
- `3041,input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}`
- `textfield` on `input type=number` (hides the step buttons in Firefox)
- `1083,"input[type=""number""]{-moz-appearance:textfield}"`
- `caret` on `input`, `textarea`, `select` (suppresses painting of borders in safari/chrome)
- `405,"ul.token-input-list li input { border: 0; width: 350px; padding: 3px 8px; background-color: white; -webkit-appearance: caret; }"`
- `26,"/* 6.1 buttons */a.button, a.comment-reply-link, #commentform #submit, .submit, input[type=submit], input.button, button.button, #wrapper .woo-sc-button { [...] -webkit-appearance: caret; /* remove input shadowing on ios */ -moz-appearance: caret; /* mobile firefox too! */ }"`
- `5,.m-mobile textarea{font-size:16px !important;-webkit-appearance:caret;-moz-appearance:caret;appearance:caret}`
- `4,".page-ios .block-form select,.page-ios .block-form textarea,.page-ios .block-form input{-webkit-appearance:caret;-moz-appearance:caret}"`
- `checkbox` on `input type=radio`
- `18,input[type=radio].radio-checkbox{-webkit-appearance:checkbox;-moz-appearance:checkbox;-ms-appearance:checkbox;-o-appearance:checkbox}`
- `radio` on `input type=checkbox`
- `8,"input[type=""radio""],input[type=""checkbox""]{-webkit-appearance:radio!important;apperenace:radio!important}"`
- `menulist-text` on `select` (like `caret` afaict)
- `8,"select{ -webkit-appearance: menulist-text; }"`
- `-apple-pay-button` (only supported by safari)
- `157,.nt3_cl{-webkit-appearance:-apple-pay-button;display:inline-block;width:100%;min-width:180px;height:40px;border:1px solid #000;background-repeat:no-repeat;background-color:#fff;background-position:50% 50%;border-radius:5px;cursor:pointer}`
- Browser-specific hacks
- `1,"}@media print{@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal){html,body{margin:30px 0 !important;}"`
--
GitHub Notification of comment by zcorpan
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3024#issuecomment-431339106 using your GitHub account
Received on Friday, 19 October 2018 11:58:08 UTC