CSS3 Best Practice

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

CSS3 Training Course 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.

Course contents — 1 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

Course contents — 2 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

Course contents — 3 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

Course contents — 4 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

Course contents — 5 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

Course contents — 6 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

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.