CSS? WTF!

Estelle Weyl

@estellevw

instartlogic.github.io/p/wtf?

If you need JS
With :checked

Intro

Making web and mobile applications
fast, secure, and easy to operate.

JS Streaming
HTML Streaming
Image Optimization

Machine Learning
Application Virtualization
Intelligent CDN

AdBlock UnBlocking

About Instart Logic

CSS is Awesome

↪

Vertical Centering

↪

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 }

:not

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

↪

More than 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);

Animation rules

steps(4, end)

↪

Sprite Animation

Cubic Bezier

↪

Understanding Timing

Cubic Bezier

↪

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

↪

CSSKeyframeRules

Animated Backgrounds

Animated background images with SVG

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

Original by Graham Pyne

Animated SVG as Backgrounds

background-blend-mode

↪

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

↪

Shapes with SVG

CSS Shape Editor

↪

CSS Shape Editor

CSS Shapes with SVG Masking

↪

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

↪

Masking Example

Material Design Icons

↪

Material Design Icons

Icon Fonts

↪

Icon Fonts

↪

Font Squirrel

↪

Subsets of Google Fonts

↪

Subset

@supports

↪

Testing browser support

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

Understanding this slide deck

The end!

http://instartlogic.github.io/p/wtf/

Resources

This talk: http://instartlogic.github.io/p/wtf/
Specificity: http://estelle.github.io/selectors/
Specificity: www.SpeciFISHity.com
Flexbox Deep Dive: http://estelle.github.io/flexbox/
Animation Deep Dive: http://estelle.github.io/animation/
Material Design: http://google.com/design/icons
Icon Names/Numbers: https://github.com/google/material-design-icons/
Font Squirrel: www.fontsquirrel.com/tools/webfont-generator
Google Fonts: www.google.com/fonts
Optimizing Google Fonts: http://deanhume.com/
CSS Shapes Editor: razvancaliman.com/writing/css-shapes-editor-chrome/
Shape Examples: http://codepen.io/collection/lrmwd/