CSS? WTF!

Estelle Weyl

@estellevw

estelle.github.io/doyouknowcss?

If you need JS
With :checked
Intro

Counting

body {
  counter-reset: pagecount;
}
.slide {
  counter-increment: pagecount;
}
.slide:after {
  content: counter(pagecount);
  position: absolute; bottom: 2rem; left: 1rem;
}
counting

Counter

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
Test page
UI Selectors

Specificity

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

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 }
Being Specific

: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 }
Negation
CSS Specifishity Chart
Specifishity

!important

!important

multiple class declarations instead of !important

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

!Even More Important

Overriding !important

Animation Quirks

  • !important igored 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);
Animation Gotchas

steps(4, end)

@keyframes pedal { 100% {background-position: -360px 0;}}
  • 0%
  • 25%
  • 50%
  • 75%
  • 100%
Sprite Animation

Cubic Bezier

Understanding Cubic Bezier

Animated Backgrounds

Animated background images with SVG

Animating backgrounds with SVG

SVG Rocks!

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

Clown Car Technique

HOVER OVER ME!
Responsive Images

Object + Media Queries + SVG + CCimg

HOVER OVER ME!
Responsive Images

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>
Clown Car Code

@supports

@supports

<style>

Editing Styles Live

<style>

Understanding this slide deck

The end!

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