Bill Brown

1
Advanced CSS
Bill Brown TheHolierGrail.com
2
Laying the Foundation

• Websites come from a dysfunctional family.
• Your HTML source is the foundation of your site.
• The better the foundation, the more effectively
  this dysfunctional family can communicate.

3
DOCTYPE

• The !DOCTYPE declaration tells the browser which
  flavor of HTML you're using.
• Without it, browsers have to guess.
• Some browsers didn't do so well on their SATs.
• They guess wrong.

4
Standards

• Definitions are standards. Standards are
  definitions.
• Not choosing a set of definitions leaves your
  site vulnerable to interpretation.

5
Does X Mark the Spot?

• The first of two questions related to DOCTYPE is
  whether or not you are using XHTML.
• No current version of Internet Explorer processes
  XHTML correctly.
• I advise against it.

6
Strict v. Transitional

• The second question is whether you will use
  Strict or Transitional.
• Newly created documents or sites should use
  Strict.
• Archived or legacy documents should use
  Transitional.

7
Validation

• You validate your site to ensure that you're
  living up to the standards you've set in your
  DOCTYPE.
• A great many CSS rendering errors can be
  squelched in this step alone.

8
ltBgted ltBRgteakfast Code

• Just because your site validates doesn't mean
  your job is done.
• Using ltbgt instead of ltstronggt.
• Or worse instead of lthgt tags.
• ...can create havoc later on.

9
CSS Reset

• Sets default styles for all tags.
• Some love em, some hate 'em.
• The effectiveness of resetting the browser's
  default style choices often depends on the
  complexity of the build.

10
CSS Frameworks

• A pre-packaged library of styles intended to make
  standards-compliant coding easier and more
  accessible.

11
The Debate

• Possibly bloated code.
• Used as a cure-all by designers who don't
  understand CSS.
• Flexibility and limitations.

12
The Holy Grail

• Three columns, often with fixed width sidebars
  and fluid center.
• Allows Content column to appear first in source.
• Any column may be the longest.
• Semantically slim, CSS lean.
• See demo.

13
The Holier Grail

• Rules of semantics applied less zealously.
• Has several one, two, and three column formats.
• Uses several different layouts.
• Same source code.
• See demo.

14
Styling for JavaScript

• Class the HTML element.
• Class the BODY element.
• Include external style sheet.
• stylepropertyvalue overrides all CSS styles
  except !important.
• See demo.

15
External Style Sheets

• In large projects, scripted styles might be
  stored in a separate style sheet for ease of
  maintenance.
• These style sheets may be included with simple
  JavaScript.

16
Classes or Inline Style?

• Re-classing an element in the DOM takes longer
  than setting the style attribute of an element.
• Inline Styles have a specificity higher than all
  other CSS rules except !important ones.

17
HTTP Requests

• HTTP requests are expensive.
• 80 of the end-user response time is spent on
  the front-end. Most of this time is tied up in
  downloading all the components in the page
  images, stylesheets, scripts, Flash, etc. - Yahoo

18
The Problem

• Large websites or sites using CSS Frameworks with
  lots of external files will see a dramatic
  slowing of initial site display.
• Affects _at_import, ltlinkgt, ltscriptgt, url(), ltimggt.

19
Caching In

• Creation of sub-domains for hosting support files
  can help with this process.
• css.domain.com CSS Files
• js.domain.com JS files
• img.domain.com - Images

20
Rounded Corners

• Rounded corners are popular features on sites
  these days.
• Widespread support for border-radius is years
  away.
• Support for border images is also likely to be
  unavailable for a while.

21
Square Hole, Round Pegs

• Monitors are square.
• Browsers are square.
• Paper is square.
• Seems that only recently have we become aware
  that a screen is not paper.

22
With Images

• See demo.

23
Without Images

• See demo.

24
Sprite Backgrounds

• Fewer HTTP requests
• Less overhead for graphics
• Requires significant work before it can be
  implemented
• Effect is often ruined by font resizing

25
Creating Sprites

• Generally done with a graphic editor like
  Photoshop or GIMP.
• Requires a good deal of setup time.
• Maintenance is difficult without native graphic
  files.

26
Using Sprites

• See demo.

27
More Caching In

• Using sprites not only reduces the amount of
  initial HTTP requests, it also caches images for
  future use.
• Sprites are generally recommended for large sites
  like Yahoo or Google.

28
Tabbed Panels

• Less popular as a static HTML element with the
  advent of AJAX.
• Can actually be used for static and dynamic
  content.
• Requires JavaScript to be truly effective in a
  live site.

29
Ten Pounds of Stuff

• Great for Login/Registration.
• Also functions well as a tabbed menu interface.
• Popular news stories or articles.
• Oh, how we love to cram.

30
CSS Only

• See demo.

31
A Little JavaScript

• Better with some scripting...
• See demo.

32
Vertical Centering

• CSS vertical-alignmiddledoesn't do what you
  think it does.
• vertical-alignmiddle works for ltimggt and lttdgt.
• Block element centering requires wrappers.

33
Known Height

• See demo.

34
Unknown Height

• See demo.

35
Evil Takes Form

• Developers hate forms.
• Designers hate forms.
• Users hate forms.
• Forms are the fundamental method in which a user
  communicates with a website.

36
Where Forms Went Wrong

• Many form elements are replaced by the browser or
  the operating system.
• Redundant designltselectgt, radio buttons and
  checkboxes.
• Virtually impossible to achieve cross-browser
  consistency.

37
Beyond Your Control

• ltlegendgt element, while serving a key role in
  accessibility breaks on nearly every browser.
• Styling of form elements can be disabled in IE.
• Many advise against styling the appearance of
  form elements.

38
Making Due

• See demo.

39
Turning the Tables

• Tables are intended to use tabular data.
• They were NEVER intended for layout, while it was
  accepted in some situations.
• Use tables to display your site's tabular data.

40
Never, EVER Use Tables...

• Using lttablesgt means you can't sit with the cool
  kids at the lunch table.
• They make it easier to create an inaccessible
  website.
• They actually lessen your ability to effectively
  style your site.
• Search engines and screen readers don't handle
  tables as well as they do semantic code.

41
Except...

• When you have to.
• Knowing the rules means you can break the rules
  this is different than blind ignorance.
• And of course...when displaying tabular data.

42
Your Site is Not Tabular Data

• A site stored in a database still displays a
  single page at a time.
• Displaying a single record does not tabular data
  make...
• A check in your checkbook is not in tabular
  format, nor are invoices, etc.

43
Table Styles

• lttheadgt, lttfootgt, lttbodygt
• ltcolgt, ltcolgroupgt
• ltcaptiongt
• Tables are broken, too.
• See demo.

44
On the Menu

• If content is King, your menu is the Queen.
• Prominent placement.
• Hiding sub-menus?
• Your menu is a list, even if it's horizontal.

45
CSS Hover Menus

• Hover is a behavior which is perhaps best handled
  by JavaScript.
• CSS Hover menus are awful with a laptop touchpad.
• That being said...see demo.

46
Whateverhover

• To support IE6, use whateverhover.
• Use css expressions with caution.
• If you're using Prototype, jQuery, etc.,
  capitalize on that rather than whateverhover.

47
Bullet Replacement

• See demo.

48
Definition Lists

• My favorite tag family.
• See demos.

49
List Issues

• Cross-browser application of margin and padding
  is inconsistent.
• IE's white space bug

50
Image Replacement Techniques

• Confusing moniker.
• IRT is replacing a block of text with an
  alternate image, used to represent the text.
• Ideal for headers.

51
Why?

• Keeps markup clean.
• Theoretically makes a site more accessible.
• Some images are for style only and are not part
  of content.

52
The Many...

• FIR
• LIR
• YAIRM
• Phark
• Phark Revised
• Pixy's Solution

53
Many...

• TIP
• IFR
• SIFR
• Single Pixel
• Radu Method
• Leahy/Langridge

54
Methods

• Dwyer Method
• Glider/Levin Method
• Lindsay Method
• Shea Enhancement
• See demo.

55
Problems

• Images on, CSS off.
• Images off, CSS on.
• To hide or not to hide?
• Screen readers?
• A clever hacker can hide content in these blocks.

56
Drop Shadows

• Two main types.
• Text Shadowing.
• Box Shadowing.
• As with rounded corners, there is no convenient
  CSS rule currently in place cross-browser.

57
Text Shadowing

• See demo.

58
Box Shadows with Images

• See demo.

59
Box Shadows without Images

• See demo.

60
Better Opacity

• Several CSS options exist to handle opacity.
• IE uses a proprietary setting to achieve two
  different types of opacity.

61
The Problem

• The CSS opacity rule is inherited so child
  elements cannot be returned to full opacity with
  this rule.
• The same inheritance applies to IE's alpha filter.

62
The Solution

• The use of a combination of RGBA, PNG and IE's
  gradient filter on the background are often
  better.
• See demo.

63
Style Families

• CSS covers a lot of ground. It's often useful to
  create style families.
• Fonts, Forms, Layout, Format and Theme are some
  ways to group various styles.

64
Layout

• Layouts are often referred to as fixed-width,
  fluid-width, or elastic-width.
• Fixed width layouts are defined in pixels.
• Fluid width layouts use percents.
• Elastic width layouts are generally defined in
  ems.

65
Format

• Formats are generally referred to as being one,
  two, or three columns.
• Grid formats allow for a different manner of
  positioning elements, but can be volatile and
  react unexpectedly to font sizes.

66
Theme

• De-coupling your theme from your other style
  sheets has many benefits.
• Not the least of which is that you need change
  only one style sheet or set of styles to change
  the look of your site without breaking the layout
  or format.

67
Forms

• Forms, being so notoriously difficult to style
  are perhaps the best candidate for a style
  family.
• A default set of styles for form elements can
  save you a ton of headaches.

68
Scripted Elements

• Using a method to identify scripted elements will
  also save time and stress later on.
• Easier to style for printing.
• Helps eliminate FOUC.

69
Media Specific Styling

• Style sheets should specify whether they are
  meant for the screen, for printing, or for
  handhelds.
• Media queries will soon allow for more specific
  media targetting.

70
Screen, Projection

• Styles in a style sheet marked mediascreen,
  projection do not affect the printed document.
• Make sure your scripted elements are in this
  style sheet or marked mediascreen, projection

71
Print

• The importance of a Print Style Sheet cannot be
  overstated.
• Hide your menu, GoogleAds, other screen essential
  data.
• Show URLs for links.
• Be green save paper.

72
Handheld

• More and more users are visiting your site with a
  Blackberry, iPhone or any one of the myriad of
  other small screen devices available.
• Make your site more accessible to them with a
  special style sheet.

73
Media Queries

• CSS3 extension to media types.
• Supported by Safari 3, Opera, and Firefox 3.1
  (Alpha).
• _at_media all and (min-width 640px)
  media-queries-1 background-color 0f0
  
• Means an end to JavaScript checks for screen
  resolution.

74
Browser Troubleshooting

• Most of the browser bugs for CSS rendering are
  already documented.
• Check Google.
• If you're still having trouble, or want help
  checking on other browsers, try CSS-D.

75
Bug v. Lack of Support

• A bug is when a browser is doing something
  incorrectly.
• Lack of support is when it won't do it at all.
• Vastly different, though the appearance can be
  similar.

76
FOUC

• Flash of Unstyled Content.
• Occurs when a page is displayed without any style
  information, then is styled suddenly.
• Not only for IE.
• An external style sheet is the generally accepted
  fix.

77
Specificity(aka Weight aka Importance)?

• All CSS rules have a specificity which looks like
  thisA-B-C-D-E or 1,3,0,0,12
• A !important (add 1 for user !important)?
• B inline styles
• C element Ids
• D classes, attribute, pseudo-classes
• E tags
• 0. Not a base 10 system.

78
IE Background Image Caching

• No real CSS cure.
• Some JavaScript suggestions.
• HTAccess solutions exist.
• Pre-caching the images in other elements seems to
  work well.

79
The IE Toolkit

• displayinline
• positionrelative
• hasLayout - zoom1 - height1 - id
  displayinline-block id displayblock

80
Conditional Comments

• Target Internet Explorerlt!--if
  IEgtlt!endif--gt
• Target IE less than IE7lt!--if lte IE
  6gtlt!endif--gt
• Only works for IE5.5

81
Why I Won't Hack

• Messy code.
• Unreliable.
• Better solutions exist.
• In many cases, modifying the HTML source code is
  a more robust solution.

82
Best Practices

• This list is culled from my own experience as
  well as the CSS-D list.
• There are no concrete rules.
• Knowing the rules means you can break the rules.

83
Semantic v. Pedantic

• Semantics means using only the right tag for the
  right content.
• Pedantic means the zealous application of the
  rule above.
• Pedantically speaking, tags like ltdivgt and ltspangt
  serve no purpose.
• Realistically speaking, one can not always apply
  semantics.

84
CSS Signature

• Allows users to set customized style settings for
  your site.
• Also allows for tricks with specificity.
• CSS Signatureltbody idmyFancyWebsitegt

85
Minifying

• Two versions of style sheets
• Expanded, pretty development version with
  comments.
• Minified production version.
• Both serve a purpose.
• Minified sheets reduce the amount of download
  time.

86
Shorthand Syntax

• Background, border, font, margin, padding are all
  shorthand syntax.
• margin-top 0margin-bottom 1emmargin-left
  automargin-right auto
• ...is the same as margin0 auto 1em

87
TRouBLed Borders

• The order of numbers in shorthand syntax is
  essential.
• They always occur in this orderTop, Right,
  Bottom, Left
• Except background-position, which
  usesleft/right top/bottom (center)?

88
LVHFA

• The order in which the pseudo-classes are defined
  can also be important to specificity.
• Best orderalink, avisited, ahover, afocus,
  aactive

89
Don't BelieveEverything You Read

• Not all the solutions available are the best
  solutions.
• There are still sources out there touting tables
  as the best way to control site layout.
• When asking for advice, take everything with a
  grain of salt.

90
Formatting Code

• During development, do not compact your code.
• Use a minifier to compact it when you're through
  but keep a formatted version.
• You will get more help and save yourself
  headaches if your code is readable.

91
Stealing Beauty

• No need to re-invent the wheel.
• If an elegant solution exists to a problem you're
  having, by all means, use it.
• Most solutions are published online for exactly
  that reason.

92
Practice, Practice, Practical

• CSS is deceptively easy to use. No need for
  special software or compiling. It can be tricky,
  however and like most things...
• You have to practice with it.

93
Testing 'Til it Hurts (or Breaks)?

• When you have a new site or new set of CSS
  rules...break them.
• Figure out what must be done to break your style.
• Decide if this is within your threshold.
• All designs break, even tabular ones.

94
Zero is Zero

• Most minifiers will do this for you, but for the
  record...
• 0px 0 0em 0
• Mathematically speaking, zero of anything is
  zero.
• Save yourself some typing.

95
Print Style Sheet

• The importance of a print style sheet cannot be
  overstated.
• Stop creating javascriptprint() links and
  capitalize on the power of CSS media.
• It's green.

96
K.I.S.S.

• Convoluded, complicated HTML and CSS solutions
  are rarely necessary.
• Keep your code formatted.
• Keep your code simple whenever possible.

97
Things to Avoid

• These are the things that you should never, ever
  do under any circumstances whatsoever...
• ...unless, of course, you have to.

98
body font-size 12px

• Font sizes set in pixels can't be changed by IE
  users.
• Setting a font size lower than 100 assumes
  control of the user's browser in a way that is
  considered obtrusive.

99
body line-height 12px

• This is a real bear to hunt down months later
  when you change font sizes on a site.
• The px is superfluous.
• Line-height1.5 makes the line height 1.5 times
  the height of the font.

100
classbig-red-left

• What happens when the boss (or the client) wants
  this same box to be a small, centered box with a
  blue border?
• Classnames should relate to content, no style.

101
Bad Tags

• ltbgt - use ltstronggt
• ltigt - use ltemgt
• ltugt - underlining is for links use
  text-decoration if you need
• ltmarqueegt - bad, bad, bad
• ltblinkgt - worse, worse, worse

102
Copy-Paste, Copy-Paste...Copy-Whaaaa?

• Using a solution which already exists is
  fine...if you understand what it does.
• Avoid copy-paste without understanding what it is
  you're copying and pasting.

103
Frames??!!

• If you thought using tables kept you away from
  the cool kids table...
• Frames will get you beat up after school.
• Unnecessary, inaccessible and cumbersome to code.

104
d1 d2 d3 ... margin 0

• Specificity overkill.
• Harder to maintain.
• Difficult to override.
• Generally not needed.

105
It Works in IE!?

• Never code in Internet Explorer first, even if
  that's your primary audience.
• Like it or not, IE is the buggiest browser around
  with the lowest level of support for CSS styles.
• Use Firefox.

106
CSS3 Promises and Problems

• CSS has been around for years.
• The recent popularity of CSS2.1 has put increased
  pressure on the developers to create CSS3
• Which means we'll be able to use...

107
All This Exciting Stuff

• New rules for borders.
• New rules for backgrounds.
• New rules for colors.
• New text effects.
• New rules for user interface.
• New selectors.
• And more...

108
Borders

• Multiple border colors.
• Border-imageand border-corner-image.
• Border-radius.
• Box-shadow.

109
Backgrounds

• Background-origin.
• Background-clip.
• Background-size.
• Multiple backgrounds.

110
Color

• HSL colors.
• HSLA colors.
• Opacity.
• RGBA colors.

111
Text Effects

• Text-shadow.
• Text-overflow.
• Word-wrap.

112
User Interface

• Box-sizing.
• Resize.
• Outline.
• Nav-top, nav-right, nav-bottom, nav-left.

113
Selectors

• attvalRepresents an element with the att
  attribute whose value begins with the prefix
  val.
• attvalRepresents an element with the att
  attribute whose value ends with the suffix val.
• attvalRepresents an element with the att
  attribute whose value contains at least one
  instance of the substring val.

114
Basic Box Model

• Overflow-x and overflow-y.

Content

• Generated and replaced content.

115
Other Modules

• Media queries.
• Multi-column layout.
• Web fonts.
• Speech.

116
...That We Can't Use.

• Many modules still in working draft status.
• Even when they're complete, designers who need to
  support IE will likely be using workarounds for
  years to come.

117
Custom Troubleshooting

• Questions, comments and specific issues.

118
CSS Resources

• See CSS Resources handout.