Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Hidden Features Of CSS

The Hidden Features Of CSS

Learn how CSS works under the hood, how to optimize your CSS for performance and buttery-smooth animations, and discover a few features CSS has to offer you might not have know about but should be using. Plus, a few ninja SCSS tricks to boot.

Kevin Dees

October 17, 2019
Tweet

More Decks by Kevin Dees

Other Decks in Programming

Transcript

  1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

    initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style>body { background: red; color: #fff;}</style> </head> <body> Content <link rel="stylesheet" href="footer.css"> </body> </html>
  2. <!DOCTYPE html> <html lang="en"> <head> ... <style>body { background: red;

    color: #fff;}</style> </head> <body> content <link rel="stylesheet" href="sidebar.css"> sidebar <link rel="stylesheet" href="footer.css"> footer </body> </html>
  3. CDN

  4. <head> <meta charset="utf-8"> <title>JS and CSS preload example</title> <link rel="preload"

    href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <script src="main.js" defer></script> </body>
  5. ▸ ID, e.g. #header ▸ Class, e.g. .promo ▸ Type,

    e.g. div ▸ Adjacent sibling, e.g. h2 + p ▸ Child, e.g. li > ul ▸ Descendant, e.g. ul a ▸ Universal, i.e. * // Attribute, e.g. [type="text"] ▸ Pseudo-classes/-elements, e.g. a:hover
  6. VARIBALES $cols: 12; $gutter: 20px; @for $col from 1 through

    $cols { .col-#{$col} { $pw: percentage($col/$cols); width: calc(#{$pw} - #{$gutter - $gutter / $col }); } }
  7. @mixin reset-list { list-style: none; } nav ul { @include

    reset-list; li { display: inline-block; } }
  8. nav ul { list-style: none; } nav ul li {

    display: inline-block; }
  9. /* default color */ :root { --color: blue; } div

    { --color: green; } .myclass { --color: red; } /* applies the --color property at all the above levels */ * { color: var(--color); } <p>blue</p> <div>green</div> <div class="myclass"> red <p>red</p> </div>
  10. @supports (display: grid) and (flex: 1) { /* your rules

    */ } @supports not (display: grid) or (flex: 1) { /* your rules */ }