Advanced CSS Techniques

Presenter: Jon Kinney

Email: [email protected]
 Overview
Brief history of CSS (How did we get here)

Quirks Mode -VS- Strict Mode

Doctypes, and the Box Model

Hacking CSS support for IE

The future of CSS (Table layouts done right)

CSS Frameworks

Advanced Tips and Tricks

 History
CSS wasn’t originally intended for layout. IE3

Look at a typical site and identify the grid

What was the easiest way to make the grid

work?... Tables... so what’s the problem?

HTML Tables are intended for the display of

spreadsheet-like tables of data.

Designers stick the blocks of their pages

into table cells, forming the two-dimensional
grids they craved.
 History cont.
Over time CSS support improved and when IE5 was
released some bold developers created ways to
achieve CSS layouts without the use of tables.

IE 6 released in August 2001 further improving

standards compliance which allowed for even more
complex CSS layouts, and then... nothing.

IE development stopped for almost 4 years. IE 7 beta

released July 2005.

Internet Explorer 7 was finally released to the public

on October 18, 2007 (over 6 years after IE 6)
 Overview
Brief history of CSS (How did we get here)

Quirks Mode -VS- Strict Mode

Doctypes, and the Box Model

Hacking CSS support for IE

The future of CSS (Table layouts done right)

CSS Frameworks

Advanced Tips and Tricks

Quirks Mode -VS- Strict Mode
What is quirks mode and why does it exist?
http://www.quirksmode.org/css/quirksmode.html

A browser feature that was implemented for

IE6 and later browsers to continue rendering
old sites according to the quirks (original
proprietary) rules, if so desired. Note: IE 5
and earlier browsers are permanently locked
in quirks mode.

Standards mode allows developers who “know

what they are doing” to force the browser
to be more standards compliant. How?
 Overview
Brief history of CSS (How did we get here)

Quirks Mode -VS- Strict Mode

Doctypes, and the Box Model

Hacking CSS support for IE

The future of CSS (Table layouts done right)

CSS Frameworks

Advanced Tips and Tricks

 Doctypes, and the Box Model
XHTML 1.0 Transitional (allows target) and forces the
browser to render in almost strict or “A” mode.
Detect your mode (http://www.snippetstash.com/public/126)

Box Model Diagram (http://www.w3.org/TR/CSS2/box.html)

http://www.guistuff.com/css/css_boxmodel.html
Complication: almost strict mode
*Images had bottom margin (not removable)

In strict mode <img /> is an inline element, which means that

some space should be reserved for possible descender
characters like the letters g, j, or q. Of course an image
doesn’t have descender characters, so the space was never
used, but it still had to be reserved.

The solution was to explicitly declare images block level

elements: img {display: block}.

Nonetheless browser vendors, Mozilla especially, thought this

was such a confusing situation that they introduced "almost
strict mode". This was defined as strict mode, but with images
continuing to be blocks, and not inline elements.

Most common doctypes, trigger almost strict mode. The

treatment of images is by far the most important difference
between almost strict mode and really strict mode.

http://hsivonen.iki.fi/doctype/
 Overview
Brief history of CSS (How did we get here)

Quirks Mode -VS- Strict Mode

Doctypes, and the Box Model

Hacking CSS support for IE

The future of CSS (Table layouts done right)

CSS Frameworks

Advanced Tips and Tricks

Hacking CSS support for IE
CSS Resets

Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)

Yahoo CSS Reset (http://developer.yahoo.com/yui/reset/)

Reproduce Bugs (http://css.tests.free.fr/en/debugging_css_msie.php)

Hacks & Conditional Comments

http://www.maratz.com/blog/archives/2005/06/16/
essentials-of-css-hacking-for-internet-explorer/
 Overview
Brief history of CSS (How did we get here)

Quirks Mode -VS- Strict Mode

Doctypes, and the Box Model

Hacking CSS support for IE

The future of CSS (Table layouts done right)

CSS Frameworks

Advanced Tips and Tricks

 The Future of CSS
A new era - IE 8
When IE 8 arrives we will finally have all
major browsers supporting standards
compliance according to the CSS2.1 spec.

IE 8 passes the Acid2 tests

http://www.webstandards.org/action/acid2/guide/

One of the major features???

CSS Tables for easy layout! (demo later)
 Overview
Brief history of CSS (How did we get here)

Quirks Mode -VS- Strict Mode

Doctypes, and the Box Model

Hacking CSS support for IE

The future of CSS (Table layouts done right)

CSS Frameworks

Advanced Tips and Tricks

 CSS Frameworks
What is it? - a predefined set of html and
css that gives the user a grid upon which to
place items for layout.

Some popular flavors...

960 Grid System (http://960.gs/)

Blueprint (http://www.blueprintcss.org/)

Elements (http://elements.projectdesigns.org/)
 Overview
Brief history of CSS (How did we get here)

Quirks Mode -VS- Strict Mode

Doctypes, and the Box Model

Hacking CSS support for IE

The future of CSS (Table layouts done right)

CSS Frameworks

Advanced Tips and Tricks

Advanced Tips & Tricks
Tools of the trade

Intro tips

Pixels VS EM

Positioning info

2 Column floated layout

Footer stuck to the bottom of a page

Styling forms and buttons

 Tools of the trade
A Virtual Machine (I prefer Windows XP still)

IE Tester - http://www.my-debugbar.com/wiki/IETester/HomePage

Firebug - inspect mode is really convenient

Firefox plugin - Web Developer (validating)

http://riddle.pl/emcalc/

http://www.cleancss.com/

http://colorschemedesigner.com/

TIP! :> Keep your CSS Neat and Alphabetized

- http://alphabetizer.flap.tv/index.php
 Intro Tips
Different ways to target elements
(depends on where the indicator is specified)
a.class_name (can have multiple classes)
ul#ul_id_name li (rarely used)
#ul_id_name li (one ID per page)
 Pixels VS EM
(who what where when why to resize)

My friend Brian is partially blind and he says

use Px not EM... people will resize with the
computer not the browser
What is an em? Classically, an em (pronounced emm) is
a typographer’s unit of horizontal spacing and is a
sliding (relative) measure. One em is a distance equal
to the text size. In 10 pixel type, an em is 10 pixels;
in 18 pixel type it is 18 pixels. Thus 1em of padding is
proportionately the same in any text size.

http://www.clagnut.com/blog/348/
 Positioning
Normal flow is the default scheme used for
positioning. It applies to any element that
does not specify position:absolute or fixed
and is not floated.

In this scheme, block boxes flow vertically

starting at the top of their containing block
with each placed directly below the
preceding one. Inline boxes flow horizontally
from left to right.
You should note that vertical margins are
collapsed in the normal flow. That is, instead
of adding the bottom margin of a box to the
top margin of the one immediately below it,
only the larger of the two values is used, as
illustrated here.

http://www.brainjar.com/css/positioning/default.asp
2 Column Floated Layout
Requirements

Explicit widths of each column

One of the 2 column’s background’s needs

to be a solid color
 Footer Stick!
Define all heights as 100% up through
“body” and “html” for container elements.

Have a footer outside the “container”

Define a “push” area

Make sure the heights and negative margins

are the same.

Advanced tip... show full expanding header

and footer
 Styling Forms
Make the large and consistent across a large
set of browsers.

http://www.thechoppr.com/blog/2008/01/07/
applying-css-to-forms/

Border: http://www.tizag.com/cssT/
border.php
 Styling Buttons
Icon set from FamFamFam
http://www.famfamfam.com/

Tutorial
http://particletree.com/features/rediscovering-the-button-element/
 CSS Menus
Drop down
http://www.seoconsultants.com/css/menus/horizontal/

Horizontal expanding
http://green-beast.com/experiments/css_menu_descriptions.php
 IE 8 CSS Tables
Checkout sitepoint.com and look for
“Everything you know about CSS is wrong”

Demo
 General Web Info
General Web Design Guidelines
http://psd.tutsplus.com/designing-tutorials/9-essential-principles-for-good-web-design/

Web Safe Fonts

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Convert to Image first for safe display on the web
(http://www.fonts500.com/)

Useful resources
CSS/Design - http://www.alistapart.com/
General Web Development - http://sitepoint.com
Most complete CSS resource - http://reference.sitepoint.com/css
http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml