CSS

From eBabel wiki
Jump to: navigation, search

Order of a pseudo selectors

a:link (or just a)
a:visited
a:focus
a:hover
a:active

http://meyerweb.com/eric/css/link-specificity.html

LOVE and HATE

CSS Drive, Slackerbabe quote:

Just think 'LOVE' (LV) and 'HATE' (HA).... The selectors she is referencing is for anchor elements:

a:link a:visited a:hover a:active

Fonts

For many years, I have only worked with two main fonts when making web pages: Verdana and Arial. My CSS would read something like:

body {
   font-size: 0.8em;
   font-family: Verdana, Arial, sans-serif;
}

However, nowadays, there are much nicer fonts to look at on my favourite platforms: Mac OS, Windows and Ubuntu.

body {
   font-size: 0.8em;
   font-family: "Lucida Grande", "Segoe UI", "Droid Sans", Verdana, Arial, sans-serif;
}

Lucida Grande looks good on Macs, Segoe UI on Windows and Droid Sans on Ubuntu. The order from left to right goes from the preferred choice (if supporter) to the more common, uglier options.

Font sizes

The default font-size of browsers on desktops is 16 pixels.

It's good practice to scale font sizes with the "em" unit rather than pixels. For a basic text that has three levels of headings;

  1. main (and single) h1 as title of the page,
  2. section titles (one or several) h2 for groups of paragraphs and
  3. sub-title (none, one or several) h3 for a sub-section or a single paragraph,

I recommend the following relative em font sizes:

body {
   font-size: 0.8em;
   font-family: "Lucida Grande", "Segoe UI", "Droid Sans", Verdana, Arial, sans-serif;
}
h1 {
   font-size: 1.3em;
}
h2 {
   font-size: 1.2em;
}
h3 {
   font-size: 1.1em;
   font-weight: normal;
}

Retina images

<style>
.container-class {
  background-image: url('${item.image.src}'); /* Non-retina image */
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .container-class {
    background-image: url('${item.image.src}'); /* Backend needs to insert the @2x image here. */
  }
}
</style>

Browser support

Check which features are supported in which browser version.

Semi transparent background but readable content like text

We use the opacity filter applied to a div that is positioned behind the content. The trick here is that opacity actually affects the content of the box. If we only use this, than the boxes would be half-transparent and the content unreadable. The solution is to use a separate div that is positioned below the content.

Using position: relative on the container, and position: absolute on a direct descendent.

This element has width and height of 100% and a negative z-index, and receives background color and transparency using opacity and a filter for IE.

todo: add sample code from the Visual Studio project Delta Lloyd Verzekering on my Windows laptop