Usefull tricks and tips which i gain from working on projects

css-tricks-n-tips.md

TIPS

• If parent has overflow hidden and child has backface-visibility: hidden; then fonts on chrome <= 37 render blurry due to the are converted to and image upscaled.

• What is the difference between perspective and transforms perspective property
  • http://stackoverflow.com/questions/25910933/what-is-the-difference-between-perspective-and-transforms-perspective-propertie
  • http://desandro.github.io/3dtransforms/docs/perspective.html

FONTS

• [Youtube - Bram Stein: The State of Web Typography] (https://www.youtube.com/watch?v=VbCqFQ1sTYQ&list=WL&index=2) - great speech about fonts, their browser supports

• Unquoted font family names in CSS

• browser support:

  • woff >= ie9
  • woff2 - chrome,opera

• Use unicode-range to split fonts (exmaple latin and chinese characters) - only webkits

• font-kerning(safari) + font-feature-settings: "kern" on; (everything except safari <=ie9) for kerning

• better justification using hyphenation - set lang on html element or document and hyphens: auto (everything except <=ie9)

  • https://github.com/bramstein/hypher
  • https://code.google.com/p/hyphenator/
  • limit hypenation frequency by using hyphenate-limit-lines: 1; to odd number of hypenate or hyphenate-limit-lines: no-limit;
  • hyphenate-limit-last: always; /* or none */
  • hyphenate-limit-chars: 7 3 5; - where 7 - wordlength, 3 - min char before split, 5 - characters till end of word
  • hyphenate-character: auto - can change with other unicode symbol, for shits and giggles.

Snippets

/*iOS similar font*/
font-family: 'Helvetica Neue', sans-serif;
font-weight: lighter;

/* Spotify fullpage background image blur on 640x640px */
-webkit-filter: blur(15px) brightness(0.5);
opacity: .6;