The Hidden Features Of CSS

CSS POTLUCK

BENIFITS OF A POTLUCK

THE HIDDEN Features of CSS

CRITICAL PATH

NOTHING RENDERS UNTIL THE CRITICAL PATH IS DONE

UNTIL CSS IS DONE-DONE NOTHING RENDERS

GOOGLE DOESN'T LIKE RENDER BLOCKING CSS

INLINE THE CSS

<!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>

DON'T @import

BODY LINKS

<!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>

FIREFOX

JS IS BLOCKED BY CSS!

CDN FOR CSS CAN BE BAD

BASE 64 ENCODED IMAGES IN CSS BE BAD

HTTP2 DOWNLOADS LOTS OF FILES AT

JAVASCRIPT DEFER AND ASYNC

JS IS BLOCKED BY CSS!

ASYNC CSS?

<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>

CSS PROCESSING ORDER

KEY SELECTOR

#NAV LI A {}

DON'T OVER QUALIFY SELECTORS #nav li a {} #nav a
{} better yet .nav-link {}

METHODOLOGIES ▸ Atomic ▸ OOCSS ▸ SMACSS ▸ BEM

▸ Tailwind ▸ Tachyons

PARSE SPEED

#nav .nav-link .nav-link span .nav-link * *

▸ 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

EXPENSIVE CSS PROPERTIES NTH-CHILD, FILTER, BOX-SHADOW

INEXPENSIVE POSITION, SCALE, ROTATION AND OPACITY

LAYOUT PAINT COMPOSITE

CSS TRIGGERS HTTPS://CSSTRIGGERS.COM/

COMPOSITE BE LIKE requestAnimationFrame

SCSS TRICKS

VARIBALES $cols: 12; $gutter: 20px; @for $col from 1 through
$cols { .col-#{$col} { $pw: percentage($col/$cols); width: calc(#{$pw} - #{$gutter - $gutter / $col }); } }

FUNCTIONS

#{ $var and func() }

background: inline-svg("<svg><path fill='##{$brand-primary-icon}' d='...'/></svg>");

@function inline-svg($string) { @return url('data:image/svg+xml,#{url-encode($string)}'); }

CONDITOIONALS

$base-transition: 250ms all ease-in-out; $transitions: true; .#{$card}-details { background: #fff;
@if ($transitions) { transition: $base-transition; } }

$card: card; .card { &-enclosed {} &.active, &:hover, &:focus {}
}

.card-enclosed {} .card .active, .card :hover, .card:focus {}

SASS @extend AND MIXINS

.error { border: 1px #f00; background-color: #fdd; &--serious { @extend
.error; border-width: 3px; } }

.error, .error--serious { border: 1px #f00; background-color: #fdd; } .error--serious
{ border-width: 3px; }

@mixin reset-list { list-style: none; } nav ul { @include
reset-list; li { display: inline-block; } }

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

IE 9, 10, 11 DIE JANUARY 10TH?

CSS VARABLES

:root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); }

SCOPING

/* 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>

@supports

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

HOUDINI

Thanks, Kevin @kevindees https://kevdees.com

The Hidden Features Of CSS

The Hidden Features Of CSS

More Decks by Kevin Dees

Other Decks in Programming

Featured

Transcript