CSS

Example :

<div class="video-content">
    <!-- YouTube video code-->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/THEVIDEOID" frameborder="0" allowfullscreen></iframe>
</div>

To test retina display, just adjust the screen pixel ratio.

Media Print Emulate on Chrome

(Tested on Chrome Version 56)

HTML Unicode symbols From : 2000 To:2BFF

2010 ‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ ‛ “ ” „ ‟
2020 † ‡ • ‣ ․ ‥ … ‧
2030 ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › ※ ‼ ‽ ‾ ‿
2040 ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆
2050 ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞

Sizes : em and px

By default on all browsers 1em is equal to 16px. In px sizes are fix and can't zoom in or out but with em, sizes are relative to the parent element. If you need to use zoom feature, use en intend of px. You can also use a mixin SCSS or LESS like

Standard weights:

medium -> font-weight : 500;
semi-bold ->font-weight : 600;

Font Face

Example

Example :

<style>
#parent-div { display: flex; }
#el1 { order: 3; }
#el2 { order: 2; }
#el3 { order: 1; }
</style>

Compilers

1. COMPASS

Compass is a powerfull command line compiler

Install (Linux debian) : sudo apt-get install ruby-compass

Link : http://compass-style.org/help/documentation/command-line/

2. Koala

Word Wrap ( word-wrap )

Available values of word-wrap property: normal, break-word, initial, inherit

Example : Disable HTML word wrapping using CSS

.your-class{white-space:nowrap;}