CSS3 - know your arsenal

CSS3 - Know your arsenal

crayon arsenal

CSS for fun and profit

  • Defines look and feel of your web products
  • Centralises the visual - change once, apply everywhere
  • Results in overall smaller documents
  • Separation of concerns - leave the visuals to those who want them
  • Eases maintenance - much easier to change a colour than to create lots of new images
  • Very simple and powerful access to the document

CSS for pain and suffering

  • Browser support issues
  • Syntax very different to programming languages
  • Specificity - hard to pronounce, tough to understand
  • Overly attached to the document, no reset possible
  • Browser quirks (FOUC and friends)
  • Hundreds of "best practices", no consensus

Dangers when dealing with CSS

plugs in plugs in plugs

Pestering the elderly

IE6

Browser favoritism

        .button {
          color: white;
          background: -webkit-linear-gradient(green,yellow);
        }
      

Browser favoritism (fixed)

        .button {
          color: white;
          background: green
          background: -webkit-linear-gradient(green, yellow);
          background: linear-gradient(green, yellow);
        }
      

Chasing a misguided dream

many devices

Let's dive in!

Great selector support

Please enter your search term and hit the button

Lots of length units - some dynamic

  • %
  • px
  • em
  • rem
  • vw
  • vh
  • vmin
  • vmax
  • in
  • cm
  • mm
  • pt
  • pc
  • ex
  • ch

The lengths of CSS

Fun with pseudo selectors

  • :link
  • :visited
  • :hover
  • :active
  • :focus
  • :target
  • :root
  • :only-child
  • :empty
  • :nth-child(n)
  • :nth-last-child(n)
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :first-child
  • :last-child

https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes

Accessing child nodes

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Typography and Fonts

        @font-face {
          font-family: 'DesignerTwitcher';
          src: url('/fonts/comicsans-with-papyryus-capitals.ttf');
        }
        body { font-family: 'DesignerTwitcher', serif }
      

https://developer.mozilla.org/en-US/docs/CSS/@font-face

Mediaqueries

        @media (min-width: 700px) and (orientation: landscape) {
          #sidebar { display: none;}
        
        }
      

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Gradients

oooohhh…

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_gradients

Shadows

        selector {
          box-shadow: horizontal vertical blur spread colour inset;
        }
        
Shadow

Transforms

Bumblebee

3D Transforms

Optimus Prime

Transitions

        element {
          transition: property, property time delay;
        }
       
Transition

Animations

Club Med

Flexbox

  • One
  • Two
  • Three

Experiments

the cat in the box

Scoped stylesheets

<style type="text/css">
  p {color: blue;}
</style>
<p>I feel so blue</p>
<div>
  <style type="text/css" scoped>
    p {color: hotpink;}
  </style>
  <p>Feeling hot</p>
</div>
      

Saving the day with scoped CSS

Variables?

@var header-color color #006;
@var main-color color #06c;
@var secondary-color color #c06;
a { color: var(main-color); }
a:visited { color: var(secondary-color); }
h1 { 
  color: var(header-color);
  background: linear-gradient(left,var(main-color), #fff);
}

Mixins?

@mixin error { background: #fdd; color: red; }
div.error {
  border: thick solid red;
  padding: .5em;
  @mixin error;
}
span.error {
  text-decoration: underline;
  @mixin error;
}

Nested selectors?

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

(Pre)compilers - LESS, SASS, Compass

Danger of obesity

How to save paper

Using CSS with care

hazmat minifig

OOCSS / SMACCS

CSS survival guide

  • Write CSS to make maintenance as easy as possible
  • What gets created is important, not how few lines you write
  • Keep up to date - hacks tend to linger too long
  • Prefixes are to try things out - don't rely or trust them
  • If you can avoid images - do it
  • Embrace the squishiness

CSS no-nos

  • Avoid highly specific selectors - you kill reusabilty
  • !important is not a toy!
  • Inline styles are a very, very last resort
  • Avoid drop shadows and gradients on animated elements
  • IDs are unique, are you sure the thing you style will always be?
  • Lots of files are good in production, bad in the final product
  • There is no such thing as "this will always be 10 characters"

Thanks

that's all firefox