Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

CSS: WTF?

Estelle Weyl (Instart Logic)
9:00am–9:40am Thursday, June 22, 2017
Web Platform Foundations
Location: 210 CG Level: Intermediate
Secondary topics:  Accessibility, CSS3, HTML5
Average rating: ****.
(4.67, 6 ratings)

Who is this presentation for?

  • Frontend engineers and people who love and hate UI engineering

Prerequisite knowledge

  • A working knowledge of CSS and HTML

What you'll learn

  • Understand the power of CSS and jump back into it (instead of relying on frameworks that were necessary when few knew how to support IE6-8)

Description

If you think outside the box, you can solve almost anything with CSS. Join Estelle Weyl to learn the power of CSS, as she covers several CSS WTFs. Depending on your perspective, that can mean “wonderfully terrific feature” or, very often, “what the @#$%!.” Once you realize the power of CSS, you’ll want to jump back into it (instead of relying on frameworks that were necessary when few knew how to support IE6-8).

Topics may include:

  • Vertical centering many ways
  • Nifty tricks, like counting form errors, that can be done with generated content (sans JavaScript)
  • CSS selector madness, including stupid pet tricks like #myId to overwrite third-party CSS, attribute selectors, and picking the item that is the seventh to last from a list, or something like that
  • Understanding specificity, inheritance, and the cascade
  • Overwriting !important without killing specificity and avoiding !important by using the above mentioned stupid pet tricks
  • Animation, including using animation sprites to create the appearance of someone dancing, riding a bike, or something equally entertaining
  • Shaping images and making text flow around them
  • Reducing transparent PNG file size by using CSS masking
  • Using iconography in an accessible manner
  • A CSS only modernizr (no JavaScript necessary)
  • Two different ways of creating a slide deck that works without JavaScript and how to make it more accessible
Photo of Estelle Weyl

Estelle Weyl

Instart Logic

Estelle Weyl started her professional life in architecture and then managed teen health programs. In 2000, Estelle took the natural step of becoming a web standardista. She is the Open Web and performance evangelist for Instart Logic and has consulted for Kodak Gallery, SurveyMonkey, Samsung, Yahoo, Visa, and Apple, among others. Estelle shares esoteric tidbits learned while programming and detailed grids of CSS3 and HTML5 browser support in her blog. She is a coauthor of Mobile HTML5, CSS3: The Definitive Guide, and HTML5 and CSS3 for the Real World. While not coding, Estelle works in construction, dehippifying her 1960s throwback abode.