Review

CSS: The Definitive Guide 3rd Edition

This book have lots of details. Mention the support of some very old browser, like IE 6 and IE 7. It also explain how the CSS algorithm runs, like calculation of line height, size of content box. It is pity that CSS3 is not included.

This book may be a little bit outdated, but it is still worth reading if you want to have a better foundation on CSS, but you still need other books to learn CSS 3 feature which are commonly used.

1 CSS and Documents

Replaced elements and non-replaced elements

  • content is replaced or not
  • (img is replaced), no actual content, the content is replaced by data outside HTML file
  • From MDN, their representation is outside the scope of CSS.

Alternate style sheet

  • Example: <link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="Big Text" />
  • Fecko-based browser support alternate style sheet. browser provide options to let user select the stylesheet.
  • Will it be downloaded even user not selected them?
  • What is the behaviour in other browser?

Some old browser does not support @import, which can use this ‘feature’ to hide css from old browsers

  • CSS cannot have nested comment, like /* /* nested comment */ */ is invalid

2 Selector

Pseudo-elements must be the last item in selector. p:first-line em is not valid, as the last item is em but not first-line. There are limited properties to be applied to first-line and first-letter pseudo-element.

3 Structure and the Cascade

  • Universal selector have no specificity: (0,0,0,0)
    • Universal selector will break inheritance
  • Attribute selector on id attribute is still consider attribute selector
    • It can be a temp fix on specificity war of ID
      • tr[id="totals"], specificity (0,0,0,1)
      • #totals, specificity (0,1,0,0)
  • Inherit value don’t have specificity, even universal selector can override
    • Universal selector will break inheritance
  • In CSS3 inline style override all non-important style
    • !important can be used to override inline style written by others
    • In CSS 2 inline style have the same specificity as id
  • Non-CSS style (html attribute) can be override by user or author style

Exception of downward propagation

There is upward propagation rule in HTML, background style in body element can be passed to the html element.
From this, if you apply the following CSS to <body />

1
2
3
4
5
body {
  height: 100px;
  width: 100px;
  background: black
}

the whole screen will be black, unless you apply html { background: white; } explicitly.

Three kinds of agent stylesheet

  • User agent stylesheet
    • The browser’s default style
  • Reader stylesheet
    • The style configure by user
  • Author stylesheet
    • The style provide by the website owner
  • Priority:
    • author > reader > user agent stylesheet
    • Seems reader does not work if we have reset script
  • But reader !important style override author style
    • Need confirm to test

Order to apply CSS on element with pseudo-classes

  • An element can have multiple pseudo class, if apply in wrong other, some styles will never be applied
  • The order: :link, :visited, :hover, :active
    • mnemonic “LoVe - HA”
  • Define all combination is also a solution

4 Values and Units

  • There are only 17 defined color in css 2.1, but CSS 3 have 140 color, which recongized by most browsers.
  • rgb(50%, 0%, 100%) is a valid color
  • The “web-safe” colors are those colors that generally avoid dithering on 256-color computer systems
    • Value can be express in multiple of 20%
    • I think we don’t need to care these nowadays

Length units

  • Valid units: in, cm, mm, pt, pc (picas)
  • em and ex stand for “em-height” and “x-height”
    • Different fonts with same em may have different ex, as the font design is different
      • But in practical, not all font have ex defined, will fallback to convention (0.5 em = 1 ex)
  • 1 em = 14 px
  • 12 pt = 1 pc
  • 72 pt = 1 in is only correct in classic mac, as the monitor have different ppi (pt per in).
    • Don’t assume OS can convert pt to accurate length on monitor, it is the reason to avoid pt.
  • in is a reliable unit
  • Absolute unit (in, cm, mm) is more useful in print media
  • px may scale when print, so it is defined as relative unit
  • ex is not commonly used, use em or px is better

List of value

  • number
  • color
  • uri
  • keyword
  • angle (deg, grad, rad)
  • time
  • frequency

5 Fonts

  • Don’t forget provide fallback for font family
  • Use quotation mark as font family may have special characters
  • Fonts have variant
    • Example: Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light, and Zurich Regular
    • font-weight is using different font variant
    • font-weight to font variant conversion is complex, check the book if needed.
  • lighter / bolder is relative value
    • Increase / decrease font-weight inherit by parent
  • Font size is the size of em box
    • From baseline to extra leading
    • Font size is not size of any characters
  • There absolutive and relative font size value keywords
    • Absolute keywords: (increase or decrease by a constant factor for each keywords)
    • Relative keywords: (larger / smaller) same factor as absolute keywords
      • Relative keywords in font size and weight is useful when define style of tags like <em>, <strong>
  • Percentage value in font-size is effectively cumulative
    • PS: Round off to integer
  • Small caps font variant
    • Instead of upper and lowercase letters, a small-caps font employs uppercase letters of different sizes.
  • font-stretch and font-size-adjust are not implemented

System fonts

These are used to take the font size, family, weight, style, and variant of elements of the operating system, and apply them to an element.

  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar

Font synthesis

From MDN, font-synthesis control the generaton of missing typefaces

6 Text Properties

  • text-indent

    • Only works on block level elements. Use padding in inline elements
    • Percentage is relative to the parent’s width
    • Always inherited the computed value, not declared value

  • text-align can be ugly when

    • the container is too narrow
    • the word are too long (can use hyphenation)

  • line-height

    • The line will be short when the children have a larger font size
    • Use factors (number without value) to overcome inheritances problem
      • Because the value is relative to font size

  • vertical-align does not work on block elements

    • We can use it to align inline-block and inline elements

  • text-decoration is not inherited, but the decoration is still appear in children (it is from parent, not children’s decoration)

    • To remove the children’s decoration, use text-decoration: none;
      • In other elements, we use initial

White space

  • pre: keep all, no auto line wrapping (no line break unless there are new line character)
  • pre-wrap: keep all space, and line wrap normally
  • pre-line: collapse the space within the same line, and line wrap normally

Text direction

direction affects the writing direction of text in a block-level element, the direction of table column layout, the direction in which content horizontally overflows its element box, and the position of the last line of a fully justified element.
For inline elements, direction applies only if the property unicode-bidi is set to either embed or bidi-override.
For top to bottom language, CSS 3 have writing mode

7 Basic Visual Formatting

  • margin can be negative, but size, padding and border cannot be negative
  • The computed value of percentage size is taken as the height of the containing block-level
  • Size auto is the minimum size that contain the whole content

Collapsing margin

Only vertical will collapse. not horizontal margins. For other case, refer to MDN.

  • anonymous text
    • the texts in inline elements but don’t inside the nested inline element
  • em box
  • inline box
  • content area
  • leading
    • height of the box = line-height (box of one line)
  • line box
    • shortest box bounds the highest and the lowest points of inline boxes (multi line inline box)
  • percentage value of vertical-align take value from line-height
    • Because vertical-align is align in line level, not block level
  • Line in the same block can have different computed value of line-height, if we use number without unit
    • It is computed base on height of elements in each line.
  • Characters are usually smaller than their em boxes
    • But cursives fonts usually have character glyphs larger than their em boxes.
  • Adding padding and borders does not affect the height of the inline box
  • Margin top and bottom does not apply to inline non-replaced elements
  • Inline replaced element is align to baseline
    • which may create a gap which is half leading
  • Computed value of display can change if an element is floated or positioned.

8 Padding, Borders and Margins

  • Percentage margin depends on parent’s width, even margin-top and margin-bottom
    • If margin-top and margin-bottom depends on parent’s height, there will be infinite loop
    • The treatment of percentage values for top and bottom margins is different for positioned elements
      • I guess it is because the size of element does not depends on parent anymore
  • Margin top and bottom does not work in inline element
    • Only line height, font size and vertical align can change the distance between lines
  • Default border value
    • border: none
    • weight: medium
    • color: foreground color
  • In CSS 2.1, the element’s background is the background of the content, padding, and border areas.
  • Border cannot have percentage value

9 Colors and Backgrounds

  • color properties also change border color of elements if border-color is not set.
  • Many form elements have border by default.
  • Foreground color can be inherited, but not background.
  • transparent is a color keyword
  • Background image with background color
    • Serve as fallback when image fail to load
    • Some image have alpha value
      • Background image is on top of background color
        • Need some extra CSS to set up image overlay
  • The background image-placement context in CSS 2 and 2.1 is the inner border edge
  • background-attachment attaches image to viewport

Class naming

It’s actually better to pick class names that describe the type of information contained within, not the visual effect you’re trying to achieve. It’s preferable to pick a class name which actually mean something and, more importantly, are independent of any presentational concepts. So we don’t need to rename if we want to change the visual effect

10 Floating and Positioning

Float

  • Float will convert the element to display: block
  • Negative margin can make a float element higher than parent
  • when the element is larger than parent it will overflow
  • An inline box that overlaps with a float has its borders, background, and content all rendered “on top” of the float.
  • A block box that overlaps with a float has its borders and background rendered “behind” the float, whereas its content is rendered “on top” of the float.
  • PS: the overlap behavior is independent of source order
  • Clearance is extra spacing added above an element’s top margin to push it past any floated elements
  • (percentage) max/min size is useful when use with float elements

Others

  • Beside overflow hidden, we can clip the content by clip
  • Clip can have negative value (use with overflow hidden?)
    • But the browser implementation is not consistent
  • top: auto; does not align the absolute positioned block vertical center
    • It is used to reset the top property

11 Table Layout

  • It is impossible to give table cell margin (browser will ignore them)
  • The position of first table column depends on language direction
  • The CSS specification discourages, but does not prohibit, the positioning of table cells and other internal table elements.
  • Table header and footer will be repeated in printed version, if the whole table is not fit in one page
  • CSS table layout pick the “row primacy” principle:
    • User explicitly define row, the browser find the column by calculation (we use tr but no col in table)
    • In another words, it is row-oriented
  • Anonymous table object - table with missing cell
    • Browser will insert the missing cell automatically
  • Table layer
    • Table elements: cell, row, row groups, columns, columns, table
  • Table style will be drawn first
  • Border spacing = cell margin
  • empty-cell: hidden; make browser set empty cell to display: none;

table-layout

  • auto: the table size is depends on the content
  • fixed: the table size is defined by the first row
    • fixed layout is fast to render, no need to go through all content
  • Vertical align content in table center is easy, can use vertical align directly
  • vertical-align will make browser ignore sub, super, text-top, and text-bottom when applied to table cells
  • Table layout can cause text wrap problem
    • fixed vs auto?

12 List and Generated Content

CSS does not define the behavior of nonnumeric counting styles for negative counter

13 User Interface Styles

  • There are default system style:
    • font
    • color
    • cursor
      • can have graphic cursor
    • outline

14 Non-Screen Media

  • Some suggested style to apply to printed version
    • Overwrite background and font color
    • No float and no column (width: auto)
    • Position element out side the page is not a good solution to avoid rendering
      • Because this produce lots of blank page in printed version
  • Some style for paged media
    • page-break-[before|after|inside] prevent page break insert to the elements
    • widow and orphan: min number of word when having a new page
    • There are detail page break rules explained in the book
  • running head: item appear in every page
    • use position fixed to implement running head

Projection

Not implemented by many browser

Speaker

The book mentions styles in CSS2. The CSS3 specification is not finalised.