Webkit css 黑科技

特性：设置的最小字号只用于显示，不用于计算，而Firefox在计算上也遵循最好字号规则，如rem可能以最小字号为基准

css样式：

input:-webkit-autofill box-shadow: 0 0 0px 1000px #fff inset; // 不能清除

summary::-webkit-details-marker // firefox 使用 display

-webkit-text-security: 文本输入框显示成密码一样

-webkit-text-stroke-width/color // firefox 48 支持

-webkit-text-fill-color // firefox 48 支持，不改变输入光标的颜色

-webkit-box-reflect 倒影

用svg渐变/图案填充/描边 svg的text元素。fill: url("#gr-simple");填充还可以带svg动画;填充还可以是gif图片

-webkit-user-modify: read/write/plaintext/only

::-webkit-scrollbar 可以隐藏滚动条

-webkit-line-clamp

-webkit-box-orient

-webkit-tap-highlight-color: rgba(0,0,0,0);默认点击按钮会有一个灰色的外框 // :-moz-any-link:active

-webkit-overflow-scrolling: touch; 弹性滚动特性，继承属性。如果滚动元素占全屏并且滚动不在顶部或者底部（js控制）还能阻止ios页面橡皮条，这样做transform动画就不会闪了。能解决 ios 滚动条被 z-index 覆盖的问题。

-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/

在使用webkit flex老语法时，将flex子元素也加上display: flex属性

backdrop-filter: blur(5px) // 对盒子下面的内容裁切并进行滤镜处理，轻松实现毛玻璃(vibrancy)效果，chrome 50只对文字有效

// 标准草案是先将滤镜应该到下面的内容，再裁切到盒子中（模糊滤镜导致外部像素侵入盒子中）

background-image: cross-fade(url("logo-box.png"),url("logo-bare.png"),50%) // 分别调整各个背景的透明度

// apple 支持 background: filter(url(path/to/img.jpg), blur(5px)); // 返回一个值

// firefox 支持element() 可以一战（隐藏元素也能放进去）

属性

meta标签属性 name="format-detection" content="telephone=no,email=no,adress=no"

点击视频音频控制栏事件不会冒泡，Firefox冒泡（应该比较符合合理）