CSS3 Best Practice

1-day Web Design Course in CSS3 Best Practice — CSS3-08

CSS3 TrainingCourse Overview

This CSS3 best practice training course is designed to establish benchmarks for designers and developers who want to deploy CSS3 in a robust, usable, and accessible way.

It covers less ground than our CSS3 Essentials training course mainly to allow greater time to consider and practice techniques which enhance:

  • Productivity — for designers and developers
  • Robustness and usability — for end-users

The other major factor determining the narrower range of topics is the need to re-cap best practices which have been available since CSS2 (1998), but which have not been as widely deployed — typically because critical features of CSS2.1 were missing from, or broken in, the most popular web browser.

CSS3 TrainingCourse Contents

Introduction — Backgrounds and New Contexts

  • New contexts and paradigms
    • Mobile
    • Graceful degradation vs. progressive enhancement
    • Flexible vs. Adaptive design
    • Eternal principles: usability and proportion
  • CSS standards, versions and history:
    • CSS3 vs. CSS2.1 vs. CSS2
    • IE's un-dead non-standard behaviours
    • IE6 & IE7 quirks mode — still in IE8/IE9 compatibility modes
    • hasLayout bugs — still in IE8/IE9 compatibility mode
  • Structuring and commenting CSS code
    • Specificity and the cascade
    • Planning and maintaining style sheets
  • Writing code, more quickly, robustly and scalably
    • The case for frameworks
    • Using a flexible but simple HTML/CSS framework
    • E.g. Compass — integrate Haml, Sass, YUI, Blueprint, etc.
    • CSS variables, 'mixins', selector scoping, file management
  • The non-obvious, lesser-known, 'tricky', aspects of the box model
    • Boxes: inline, block, inline-block, table types, etc.
  • How floats and clearance work
    • The non-obvious, lesser-known, 'tricky' bits
    • Non-standard behaviours — IE's hasLayout property
  • Margin collapse
    • Understanding the non-obvious bits
    • Cross-browser issues
  • Absolute and relative positioning
    • Increasing usage with modern browsers and media
    • When to use one, the other, and both together
    • Gotchas and workarounds

New, and newly usable CSS features

  • 'Advanced' CSS2/CSS2.1 selectors
    • Previously un-used because of IE6/IE7
  • New CSS3 selectors
  • New CSS border and background properties
  • Legacy browsers and graceful degradation
  • Managing legacy code
  • Typography
    • CSS techniques for balance, proportion and rhythm
    • Using web fonts
    • Text shadows
    • Text stroke
  • Backgrounds and borders
    • New CSS3 and advanced CSS2.1 features
    • Rounded-corner boxes — fixed width and flexible
    • The sliding doors technique
    • Multiple background images
    • The border-radius property
    • CSS3 drop shadows
    • Opacity and colour — RGBa, HSL, HSLA
    • CSS3 Gradients
    • Reflection
    • Masks
    • Sprites
  • CSS3 transitions — taster
  • CSS3 transformations — a taster
  • Gracefully degrading type and graphics

Page Layout — Grids and Wireframing

  • Grid theory and CSS grid techniques
  • Adaptive grids and designs
    • adjust to window re-sizing
    • mobile, screen, print design from one code base
    • using media queries
  • Centering designs on a page — horizontally and vertically
  • Creating two- and three-column float-based layouts
  • Creating fixed-width, liquid, and elastic layouts
  • Creating equal height columns
  • Nesting grids — proportionally, no overflows
  • CSS frameworks for page layout
    • Popular frameworks and tools
    • Frameworks versus CSS systems
    • i.e off-the-shelf vs. custom vs. hybrid frameworks

Bug fixing and testing

  • Overview — principles and approaches
    • How to be 'lazy' — in a good way
    • Reducing bug fixing and testing time/effort
  • How to track down CSS bugs
  • hasLayout 'bugs'
  • Hacks and filters
  • The most common browser bugs and their fixes
  • Graded browser support
  • Testing tools
  • Testing techniques
  • Testing IE

Styling Links, Lists and Menus

  • Usability concerns
  • Links
    • Ordering link selectors — using the cascade
    • Inline vs. sidebar vs. form buttons vs. menu vuttons, etc.
    • Using attribute selectors to distinguish link types
    • External links
    • Visited links
    • Buttons
    • Pure CSS tooltips
  • Lists
    • Standard list-styling techniques
    • Advanced CSS markers and bullets
    • Advanced definition lists
  • Nav Bars
    • Creating vertical and horizontal nav bars
    • Sliding doors tabs
    • Pure CSS drop-downs
    • CSS image maps
  • Creating remote rollovers
  • Gracefully degrading link, list and menu styles

Forms and Tables

  • Form design
    • Styling for different form controls
    • CSS form layouts
  • Data Tables
    • Attractive and accessible
    • Using CSS3 and advanced CSS2.1 selectors
  • Gracefully degrading form and table styles

CSS3 TrainingFurther Details

Course Objectives

On completion of this CSS3 best practice training course, delegates will be able to:

  • Know which features of CSS3 can be reliably deployed in current browsers
  • Ensure robust fallbacks for CSS3 features which lack universal browser support
  • Code CSS more quickly and with greater confidence
  • Write less CSS code to create the same functionality and visual effect
  • Write more easily-maintained CSS
  • Test CSS more effectively and completely
  • Debug CSS code more quickly
  • Develop recipes and templates for common and repetitive web design tasks

Target Audience

Experienced and knowledgable:

  • Web Designers
  • Web Developers

Training Pre-requisites

Knowledge and practical experience of managing:

  • Advanced HTML 4.01 and/or XHTML 1.0
  • CSS2.1
  • CSS Box Models — including Internet Explorer quirks mode variants
  • Internet Explorer's non-standard hasLayout property
  • The most common visual bugs associated with Internet Explorer's non-standard modes
  • Hand coding with an advanced HTML- and CSS-aware text editor

All of the above are covered in our advanced CSS training course in cross-browser compatibility (CSS-05)

Training Style

This CSS3 best practice training course is among our most hands-on, practical, courses. At least 50%, and often more, of the class contact time is devoted to hands-on practical exercises. All the HTML5, CSS3 and intermediate code used in the course is expected to be hand-coded.