Pampour

normalize.css

Feb 6th, 2014
245
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.84 KB | None | 0 0
  1. /* =============================================================================
  2.    normalize.css
  3.    2011-07-06T20:20 UTC
  4.    //github.com/jonathantneal/normalize.css
  5.  
  6.    Normalize.css is a customisable CSS file that makes browsers render all
  7.    elements more consistently and in line with modern standards. We researched
  8.    the differences between default browser styles in order to precisely target
  9.    only the styles that need normalizing.
  10.  
  11.    How comment documentation is written:
  12.    Comments: (anchor) (type of change) (summary of issue) in (affected browsers)
  13.    Url: (url related to above comment)
  14.  
  15.    To be concise, comments are restricted to a length of 77 characters or less.
  16.  
  17.    What 'types of change' mean:
  18.    Addresses: Changes involving downgrades for greater cross-browser consistency
  19.    Corrects: Bug fixes and corrections to unexpected visual quirks
  20.    Improves: Improvements based on popular usage and html5 recommendation
  21.    ========================================================================== */
  22.  
  23.  
  24. /* =============================================================================
  25.    Base
  26.    ========================================================================== */
  27.  
  28. /*
  29.  * Corrects block display not defined in IE6/7/8/9 & FF3
  30.  */
  31.  
  32. article,
  33. aside,
  34. details,
  35. figcaption,
  36. figure,
  37. footer,
  38. header,
  39. hgroup,
  40. nav,
  41. section {
  42.     display: block;
  43. }
  44.  
  45. /*
  46.  * 1. Improves visual focus of mouse in all browsers
  47.  * 2. Corrects text resizing oddly when font size is set using ems in IE6/7
  48.  *    http://clagnut.com/blog/348/#c790
  49.  * 3. Corrects page centering in all browsers regardless of content height
  50.  * 4. Improves visual appearance of containers during a delegated click in mSaf
  51.  *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
  52.  * 5. Corrects text resizing oddly after orientation change in all handhelds
  53.  *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
  54.  */
  55.  
  56. html {
  57.     cursor: default; /* 1 */
  58.     font-size: 100%; /* 2 */
  59.     overflow-y: scroll; /* 3 */
  60.     -webkit-tap-highlight-color: transparent; /* 4 */
  61.     -ms-text-size-adjust: 100%; /* 5 */
  62.     -webkit-text-size-adjust: 100%; /* 5 */
  63. }
  64.  
  65. /*
  66.  * 1. Addresses text resizing limitations in IE6/7
  67.  *    Improves text sizing inconsistency in all browsers
  68.  *    Known issue: text sizing unnecessary for 'form'
  69.  * 2. Improves margins set oddly in IE6/7 FF3/4 S5 C10
  70.  */
  71.  
  72. body,
  73. form,
  74. input,
  75. button,
  76. select,
  77. textarea {
  78.     font-size: 100%; /* 1 */
  79.     margin: 0; /* 2 */
  80. }
  81.  
  82.  
  83. /* =============================================================================
  84.    Links
  85.    ========================================================================== */
  86.  
  87. /*
  88.  * Improves appearance when active or hovered in all browsers
  89.  * people.opera.com/patrickl/experiments/keyboard/test
  90.  */
  91.  
  92. a,
  93. a:active,
  94. a:hover {
  95.     outline: none;
  96. }
  97.  
  98. /*
  99.  * Addresses outline set oddly in C10
  100.  */
  101.  
  102. a:focus {
  103.     outline: thin dotted;
  104. }
  105.  
  106.  
  107. /* =============================================================================
  108.    Typography
  109.    ========================================================================== */
  110.  
  111. /*
  112.  * Corrects styling not present in IE6/7/8/9 S5 C10
  113.  */
  114.  
  115. abbr {
  116.     _border-bottom: expression(this.title ? '1px dotted' : 'none');
  117. }
  118.  
  119. abbr[title] {
  120.     border-bottom: 1px dotted;
  121. }
  122.  
  123. /*
  124.  * Corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10
  125. */
  126.  
  127. b,
  128. strong {
  129.     font-weight: bold;
  130. }
  131.  
  132. /*
  133.  * Corrects styling not present in S5 C10
  134.  */
  135.  
  136. dfn {
  137.     font-style: italic;
  138. }
  139.  
  140. /*
  141.  * Corrects styling not present in IE6/7/8/9
  142.  */
  143.  
  144. mark {
  145.     background: #FF0;
  146.     color: #000;
  147. }
  148.  
  149. /*
  150.  * Corrects font family displayed oddly in IE6 S5 C10
  151.  * en.wikipedia.org/wiki/User:Davidgothberg/Test59
  152.  */
  153.  
  154. pre,
  155. code,
  156. kbd,
  157. samp {
  158.     font-family: monospace, monospace;
  159.     _font-family: 'courier new', monospace;
  160.     font-size: 1em;
  161. }
  162.  
  163. /*
  164.  * Improves readability of pre-formatted text in all browsers
  165.  */
  166.  
  167. pre {
  168.     white-space: pre;
  169.     white-space: pre-wrap;
  170.     word-wrap: break-word;
  171. }
  172.  
  173. /*
  174.  * Addresses CSS quotes not supported in IE6/7
  175.  */
  176.  
  177. q {
  178.     quotes: none;
  179. }
  180.  
  181. /*
  182.  * Addresses quote property not supported in S4
  183.  */
  184.  
  185. q:before,
  186. q:after {
  187.     content: '';
  188.     content: none;
  189. }
  190.  
  191. /*
  192.  * Improves appearance in all browsers
  193.  */
  194.  
  195. small,
  196. sub,
  197. sup {
  198.     font-size: 75%;
  199. }
  200.  
  201. /*
  202.  * Improves appearance in all browsers
  203.  * gist.github.com/413930
  204.  */
  205.  
  206. sub,
  207. sup {
  208.     line-height: 0;
  209.     position: relative;
  210.     vertical-align: baseline;
  211. }
  212.  
  213. sup {
  214.     top: -0.5em;
  215. }
  216.  
  217. sub {
  218.     bottom: -0.25em;
  219. }
  220.  
  221.  
  222. /* =============================================================================
  223.    Lists
  224.    ========================================================================== */
  225.  
  226. /*
  227.  * Improves appearance of navigation-specific lists
  228.  */
  229.  
  230. nav ul {
  231.     list-style: none;
  232. }
  233.  
  234. /* =============================================================================
  235.    Embedded content
  236.    ========================================================================== */
  237.  
  238. /*
  239.  * Corrects display not defined in IE6/7/8/9 & FF3
  240.  */
  241.  
  242. audio[controls],
  243. canvas,
  244. video {
  245.     display: inline-block;
  246.     *display: inline;
  247. }
  248.  
  249. audio {
  250.     display: none;
  251.     _display: expression(this.controls ? 'inline' : 'none');
  252.     *zoom: 1;
  253. }
  254.  
  255. audio[controls] {
  256.     display: inline-block;
  257. }
  258.  
  259. /*
  260.  * 1. Improves readability when inside 'a' in all browsers
  261.  * 2. Improves visual appearance when scaled in IE7
  262.  *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
  263.  */
  264.  
  265. img {
  266.     border: 0; /* 1 */
  267.     -ms-interpolation-mode: bicubic; /* 2 */
  268. }
  269.  
  270. /*
  271.  * Corrects overflow displayed oddly in IE9
  272.  */
  273.  
  274. svg:not(:root) {
  275.     overflow: hidden;
  276. }
  277.  
  278.  
  279. /* =============================================================================
  280.    Forms
  281.    ========================================================================== */
  282.  
  283. /*
  284.  * Corrects alignment displayed oddly in IE6/7
  285.  */
  286.  
  287. legend {
  288.     *margin-left: -7px;
  289. }
  290.  
  291. /*
  292.  * Improves appearance in all browsers
  293.  */
  294.  
  295. button,
  296. input,
  297. select,
  298. textarea {
  299.     -webkit-appearance: none;
  300.     border-radius: 0;
  301.     vertical-align: baseline;
  302.     *vertical-align: middle;
  303. }
  304.  
  305. /*
  306.  * 1. Corrects FF3/4 setting it using !important in the UA stylesheet
  307.  * 2. Corrects spacing displayed oddly in IE6/7
  308.  * 3. Corrects inability to style clickable 'input' types in iOS
  309.  */
  310.  
  311. button,
  312. input {
  313.     line-height: normal; /* 1 */
  314.     _overflow: expression(this.type == 'button|reset|submit' ? 'visible' : ''); /* 2 */
  315. }
  316.  
  317. /* 3 */
  318.  
  319. button,
  320. input[type="button"],
  321. input[type="reset"],
  322. input[type="submit"] {
  323.     overflow: visible;
  324. }
  325.  
  326. /*
  327.  * Addresses box sizing forced to border-box in IE6/7
  328.  */
  329.  
  330. input[type="checkbox"],
  331. input[type="radio"] {
  332.     box-sizing: border-box;
  333. }
  334.  
  335. /*
  336.  * Addresses sizing set oddly to searchfield in S5 iOS C10
  337.  * Known issue: -moz included to future-proof
  338.  */
  339.  
  340. input[type="search"] {
  341.     -moz-box-sizing: content-box;
  342.     -webkit-box-sizing: content-box;
  343.     box-sizing: content-box;
  344. }
  345.  
  346. /*
  347.  * Addresses inner padding displayed oddly in S5 C10 on OSX
  348.  */
  349.  
  350. input[type="search"]::-webkit-search-decoration {
  351.     -webkit-appearance: none;
  352. }
  353.  
  354. /*
  355.  * Corrects appearance displayed oddly in FF3/4
  356.  * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
  357.  */
  358.  
  359. button::-moz-focus-inner,
  360. input::-moz-focus-inner {
  361.     border: 0;
  362.     padding: 0;
  363. }
  364.  
  365. /*
  366.  * 1. Corrects scrollbar displayed oddly in IE6/7/8/9
  367.  * 2. Improves readability and alignment in all browsers
  368.  */
  369.  
  370. textarea {
  371.     overflow: auto; /* 1 */
  372.     vertical-align: top; /* 2 */
  373. }
  374.  
  375. /* =============================================================================
  376.    Tables
  377.    ========================================================================== */
  378.  
  379. /*
  380.  * Improves visual appearance in all browsers
  381.  */
  382.  
  383. table {
  384.     border-collapse: collapse;
  385.     border-spacing: 0;
  386. }
Advertisement
Add Comment
Please, Sign In to add comment