http://estelle.github.io/wtf

CSS? WTF!

Estelle Weyl

@estellevw

estelle.github.io/wtf?

If you need JS
With :target

CSS is Awesome

↪

Vertical Centering

↪

Horizontal 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;}

v.

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

multiple IDs instead of !important

#TheirWidget {background-color: blue !important;}
#3rdPartyWidget {background-color: white;}

v.

#TheirWidget#TheirWidget {background-color: blue ;}
#3rdPartyWidget {background-color: white;}

!Even More Important

↪

any(a, b) selector

↪

Animation Quirks

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

* No iteration if at same time as end

steps(4, end)

↪

Cubic Bezier

↪

Animation Timing Function

↪

Cubic Bezier

↪

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

↪

Animated Backgrounds

Animated background images with SVG

Please don't! Putting animation behind content is bad for usability and accessibility

Original by Graham Pyne
↪

background-blend-mode

↪

SVG Rocks!

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

CSS Shapes

↪ Photo: kristinausk

CSS Shapes 2

↪

CSS Shapes with SVG Masking

↪

CSS Shape Editor

↪

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

↪
Github Repo 
<input id="zip" type="tel" name="zipcode" class="masked" 
  placeholder="XXXXX" pattern="\d{5}" title="5-digit zip code">

progressively enhanced with JS to: 

<label for="zip">Zip Code</label>
  <span class="shell">
    <span aria-hidden="true" id="zipMask"><i>123</i>XX</span>
    <input id="zip" type="tel" name="zipcode" pattern="\d{5}" 
    class="masked" title="5-digit zip code" maxlength="5" data-placeholder="XXXXX">
  </span>
Github Repo
Github Repo 
<fieldset class="mgr" id="address">
<legend>Select an address to edit:</legend>
<div>
  <a class="backward" data-move="backward" data-mgr="shipping-addresses" hidden></a>
  <ul class="mgr-labels left0">
    <li>
      <label for="address1">
      Instart Logic<br/>
      US Headquarters<br/>
      450 Lambert Avenue<br/>
      Palo Alto, CA 94306
      </label>
    </li>
    <li>
      <label for="address2">
      Instart Logic<br/>
      India Office<br/>
      6th Floor , HM Vibha Towers<br/>
      Hosur Rd, Adugodi<br/>
      Bengaluru — 560029
      </label>
    </li>...
  </ul>
  <a class="forward" data-move="forward" data-mgr="shipping-addresses" hidden></a>
  </div>
  <ul id="addressradios" class="mgr-radios">
    <li>
      <input type="radio" name="shipping-addresses" data-value="0" id="address1" checked><span></span>
    </li>
    <li>
      <input type="radio" name="shipping-addresses" data-value="1" id="address2"><span></span>
    </li>...
  </ul>
  </fieldset>

@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/wtf/

Resources