CSS? WTF!

Estelle Weyl

@estellevw

estelle.github.io/doyouknowcss?

If you need JS
With :target

CSS is Awesome

↪

Vertical Centering

↪

Aligning by baseline

↪

Counting

↪

Counter

↪

UI Selectors

:enabled   :invalid      :placeholder-shown
:disabled  :in-range     :user-error
:checked   :out-of-range :indeterminate
:default   :required     :read-only
:valid     :optional     :read-write
[aria-required]
[aria-invalid="true"]
↪

Specificity

              *   { 0 - 0 - 0 }
li, p, ::before   { 0 - 0 - 1 }
 .class, [type]   { 0 - 1 - 0 }
    #soPowerful   { 1 - 0 - 0 }

Being specific...

            ul > li   { 0 - 0 - 2 }
            ul   li   { 0 - 0 - 2 }

            li ~ li   { 0 - 0 - 2 }
li:nth-of-type(n+2)   { 0 - 1 - 1 }

            h1 + h2   { 0 - 0 - 2 }
          header h2   { 0 - 0 - 2 }

:not()

                       li  { 0 - 0 - 1 }
                  :not(li) { 0 - 0 - 1 }

               .someClass  { 0 - 1 - 0 }
          :not(.someClass) { 0 - 1 - 0 }

                  #someId  { 1 - 0 - 0 }
             :not(#someId) { 1 - 0 - 0 }

     input[type=checkbox]  { 0 - 1 - 1 }
input:not([type=checkbox]) { 0 - 1 - 1 }
CSS Specifishity Chart
↪

!important

↪

multiple class declarations instead of !important

.disabled {cursor: default !important;}
p.btn {cursor: pointer;}
.disabled.disabled.disabled {cursor: default;}
p.btn {cursor: pointer;}

!Even More Important

↪

Animation Quirks

  • !important ignored in @keyframe & original values
  • animation-name: identifier (not string).
  • Applied in order declared.
  • Original values used if missing 0% or 100%.
  • animation-iteration-count: O+ || infinite;
  • Events: 1 animationstart, n animationiterations, 1 animationend
  • Characters: animation-timing-function: steps(n, end);

steps(4, end)

↪

Cubic Bezier

↪

CSSKeyframeRules:
deleteRule(), appendRule(), findRule()

↪

Animated Backgrounds

Animated background images with SVG

↪

SVG Rocks!

  • image
  • animatable
  • @media
  • viewport = container
  • supported
  • raster
  • data-URI
  • masking

CSS Shapes

↪

CSS Shapes 2

↪

CSS Shapes

↪

Clown Car Technique

HOVER OVER ME!

Object + Media Queries + SVG + CCimg

HOVER OVER ME!

Clown Car

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329"
  preserveAspectRatio="xMidYMid meet">
 <title>Clown Car</title>
 <style>
  svg {
    background-repeat: no-repeat;
    background-size: auto;
  }
 @media screen and (max-width: 300px) {
  svg {background-image: url(images/small.png);
  }
 }
 @media screen and (min-width: 301px) and (max-width: 600px) {
  svg {background-image: url(images/medium.png);}
 }
 @media screen and (min-width: 601px) and (max-width: 900px) {
  svg {background-image: url(images/big.png);
  }
 }
 @media screen and (min-width: 901px) {
  svg {background-image: url(images/huge.png);
  }
 }
 </style>
</svg>

CSS Masking

jpeg plus framemask less than transparent png
88KB + 4KB < 551KB 

div {
  background-image:url(images/frame.jpg);
  mask: url(images/framemask.png);
}

Masking Example

↪

Material Design Icons

↪

Icon Fonts

↪

Icon Fonts

↪

Font Squirrel

↪

Subsets of Google Fonts

↪

@supports

↪

<style>

↪

Other features

<pre contenteditable>
  pointer-events: none;

  -webkit-user-modify: read-write-plaintext-only;
  -moz-user-modify: read-write;
  user-modify: read-write;
</pre>

<style>

The end!

http://estelle.github.io/doyouknowcss/

Resources