CSS 实用技巧速查表

本文根据 Devhints / CSS tricks 翻译。代码示例及版本范围沿用原文。

标题字距调整（Kerning）与连字（Ligature）

h1, h2, h3 {
  text-rendering: optimizeLegibility;
}

原生质感的 iOS 滚动效果

-webkit-overflow-scrolling: touch;
overflow-y: auto;

渐变文本

background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

文本描边

-webkit-text-stroke: 3px black;

参见：文本描边介绍

禁止 iOS 滚动

document.ontouchstart = (e) ->
  $pane = $(e.target).closest('.scrollable>div')
  if $pane.length is 0 or $pane[0].scrollHeight <= $pane.innerHeight()
    e.preventDefault()

%ios-scrollable {
  &, >div {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
  }

  >div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

曾适用于 iOS6，但现在未必依然适用。

UIWebView 优化

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;                /* disable text select */
  -webkit-touch-callout: none;              /* disable callout, image save panel (popup) */
  -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
}

a:focus {
  outline: 0; // Firefox (remove border on link click)
}

参见： http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/

参见： http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/

浏览器使用技巧（Hack）

免责声明

不建议使用，但若有需要，可供参考。请注意，厂商前缀（Vendor Prefixes）最终可能会被弃用。

仅限 Mozilla

@-moz-document url-prefix() {
  .box { color: blue; }
}

仅限 Webkit

@media all and (-webkit-min-device-pixel-ratio: 1) {
}