一些不为人知的css样式

html {
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  text-rendering: optimizeLegibility;
  -webkit-backface-visibility: hidden;
  -webkit-user-drag: none;
}

大佬给我的清楚一些高级样式的表，下面一一讲解

1. -webkit-touch-callout: none;

微信浏览器如果js中的点击事件，长按会弹出一个javascript提示的菜单栏，有打开和取消两个选项。IOS要取消这一个默认事件，可以在父元素使用-webkit-touch-callout:none;来禁止掉这个菜单弹出。

该CSS样式有两个可以取的值：default：此值表示显示默认的callout ；none：此值表示禁用callout

安卓不支持这个css样式，安卓就直接使用HTML5提出的contextmenu事件，阻止事件默认行为就可以了。

$(document).bind('contextmenu', function(e) {
      e.preventDefault();
});

2. -webkit-font-smoothing: antialiased;

font-smoothing: antialiased;

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。

font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。

（1）Webkit在自己的引擎中支持了这一效果。

-webkit-font-smoothing它有三个属性值：

• none：对低像素的文本比较好
• subpixel-antialiased：默认值
• antialiased：抗锯齿很好

body{
   -webkit-font-smoothing: antialiased;
}

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰。加上之后就顿时感觉页面小清晰了。

（2）Gecko也推出了自己的抗锯齿效果的非标定义。

-moz-osx-font-smoothing: inherit | grayscale;

这个属性也是更清晰的作用。

例子：

.icon {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

（3）Ionic框架在样式中多加了一条

font-smoothing: antialiased;

这是坐等font-smoothing标准化，有备无患么

3. -webkit-text-size-adjust: none;

text-size-adjust: none;

1. 当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}
2. -webkit-text-size-adjust放在body上会导致页面缩放失效
3. body会继承定义在html的样式
4. 用-webkit-text-size-adjust不要定义成可继承的或全局的

4. -webkit-tap-highlight-color: transparent;

禁止高亮
在iphone上的a标签点击后a标签会晃一下，当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景，其实是高亮作的妖，用这个属性可以防止这个情况。

5. -webkit-user-select: none;

CSS3属性,用来禁止用户选择某个层内的文本

或许你常常不希望用户在你的网站上选择文本，无论是否是出于版权的原因。通常大家会有js来实现，另一个方案就是，将-webkit-user-select 和-moz-user-select 的值设为none。

请谨慎使用这个属性：因为大部分用户是来查看信息的，他们可以复制并存储下来以备将来之用，所以这种方法既无用也无效。如果你禁用了复制粘贴功能，用户还是可以通过查看源文件来获取到他们想要的内容。搞不懂这个属性为什么会被webkit和gecko支持。

但是可能会出现另一个问题，该选中的无法选中
1 去掉body的 -webkit-touch-callout:none;但是不切实际
2 其他能选文本复制的地方 （下面的） 的文本先手动选择一下。然后再去选择你要选的就可以了；不实际；
3后来发现必须 父元素加个-webkit-user-select:text;才有效，单独子元素即使加-webkit-user-select:text!important也无效

6. text-rendering: optimizeLegibility;

CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。
auto
浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。
optimizeSpeed
浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。
optimizeLegibility
浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题
geometricPrecision
浏览器在绘制文本时将着重考虑几何精度， 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

7. -webkit-backface-visibility: hidden;

backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。

• visible 背面是可见的。
• hidden 背面是不可见的。

8. -webkit-user-drag: none;

指定整个元素应该是可拖动的而不是其内容。

-webkit-user-drag: auto | element | none;

auto
使用默认的拖动行为。

element
整个元素是可拖动的，而不是其内容。

none
元素不能被拖动