css-tricks.md

   1 ---
   2 title: CSS tricks
   3 category: CSS
   4 layout: 2017/sheet
   5 ---
   6
   7 ### Heading kerning pairs and ligature
   8
   9 ```css
  10 h1, h2, h3 {
  11   text-rendering: optimizeLegibility;
  12 }
  13 ```
  14
  15 ### Native-like iOS scrolling
  16
  17 ```css
  18 -webkit-overflow-scrolling: touch;
  19 overflow-y: auto;
  20 ```
  21
  22 ### Gradient text
  23
  24 ```css
  25 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  26 -webkit-background-clip: text;
  27 -webkit-text-fill-color: transparent;
  28 ```
  29
  30 ### Text stroke
  31
  32 ```css
  33 -webkit-text-stroke: 3px black;
  34 ```
  35
  36 See: [Introducing text stroke](http://www.webkit.org/blog/85/introducing-text-stroke/)
  37
  38 ### iOS Scrolling prevention
  39
  40 ```css
  41 document.ontouchstart = (e) ->
  42   $pane = $(e.target).closest('.scrollable>div')
  43   if $pane.length is 0 or $pane[0].scrollHeight <= $pane.innerHeight()
  44     e.preventDefault()
  45 ```
  46
  47 ```scss
  48 %ios-scrollable {
  49   &, >div {
  50     -webkit-overflow-scrolling: touch;
  51     overflow: auto;
  52   }
  53
  54   >div {
  55     position: absolute;
  56     top: 0;
  57     left: 0;
  58     right: 0;
  59     bottom: 0;
  60   }
  61 }
  62 ```
  63
  64 Relevant in iOS6, but maybe not anymore.
  65
  66 ### UIWebView optimizations
  67
  68 ```css
  69 * {
  70   -webkit-tap-highlight-color: rgba(0,0,0,0);
  71   -webkit-user-select: none;                /* disable text select */
  72   -webkit-touch-callout: none;              /* disable callout, image save panel (popup) */
  73   -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
  74 }
  75
  76 a:focus {
  77   outline: 0; // Firefox (remove border on link click)
  78 }
  79 ```
  80
  81 See: <http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/>
  82
  83 See: <http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/>
  84
  85 Browser hacks
  86 -------------
  87 {: .-three-column}
  88
  89 ### Disclaimer
  90
  91 Not recommended, but here they are if you ever need them. Note that vendor
  92 prefixes may go away eventually.
  93
  94 ### Mozilla-only
  95
  96 ```css
  97 @-moz-document url-prefix() {
  98   .box { color: blue; }
  99 }
 100 ```
 101
 102 ### Webkit-only
 103
 104 ```css
 105 @media all and (-webkit-min-device-pixel-ratio: 1) {
 106 }
 107 ```