runemartin.com

@media screen {
  * html legend {
    margin: -24px 0 0 0;
    position: fixed;
    line-height: 1.4;
  }
}

Skjult visuelt, men tilgjengelig for talesyntese, leselist, el.l.

.offscreen {
  position: absolute;
  height: 1px;
  width: 1px;
  left: -10000em;
  top: auto;
  overflow: hidden;
}

height/width på 1px heller enn 0 sørger for at objektet ikke forsvinner fra nettleserens DOM. Å sette top: -10000em er unødvendig, da dette kan flytte scrollbaren oppover når objektet får fokus.

Kilde: WebAIM: CSS in Action: Invisible Content Just for Screen Reader Users

a:hover, a:active { outline: none; }

Kilde: 24 ways: Don't loose your :focus

Når lenkeblokka har transparent bakgrunn vil kun teksten bli klikkbar. Problemet løses ved å gi den en bakgrunn, f.eks. et transparent bilde - eller et bilde som ikke engang finnes.

#menu a.storlenke {
  position: absolute;
  width: 10em;
  height: 10em;
  *background: url(not-an-image); /* star hack for IE7 */
}

Kilde: Webfreak.no: IE7, position absolute and background/event transparency
og: WeLoveCSS: Seeking workaround for absolutely-positioned IE7 block-level link tag

button {
  padding: 6px 12px;
  *padding: 2xp 3px; // IE star hack
}

button::-moz-focus-inner { // FF reset of inner padding
  border: 0;
  padding: 0;
}

• Tom clear-div i bunnen av wrapper
• overflow: auto eller hidden på wrapper
• :after-deklarasjon på wrapper

All About Floats

Bruk en egen tom div med negativ bunnmargin lik halvparten av høyden på innholdet som skal sentreres.

<div id="pusher">
  <div id="content">
    Content here
  </div>
</div>

#pusher	{
  float:left; 
  height:50%; 
  margin-bottom:-120px;
}

#content {
  clear:both; 
  height:240px; 
  position:relative;
}

Kilde: In the Woods - Vertical Centering With CSS

Få hele den hierarkiske nummerrekka (f.eks. 2.1.7) foran hvert listepunkt.

ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counters(item, ".") ". "; counter-increment: item }

Kilde: Is it possible to add subitems into an ordered list?
Mer om lister: Automatic numbering with CSS Counters

box-shadow: inset 0 -10px 10px -11px rgba(0, 0, 0, .5), 
  inset 0 10px 10px -11px rgba(0, 0, 0, .5);

background: #abc url(img.png) 0 0 repeat;
background: -moz-linear-gradient(top,  rgba(0,0,0,0), rgba(0,0,0,.2)), url(img.png) 0 0 repeat;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.2))), url(img.png) 0 0 repeat;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

CSS text truncation with ellipsis…

http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

-webkit-touch-callout: none; /* disable callout, image save panel */
-webkit-user-select: none; /* disable cut copy paste */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Remove link highlight in webkit */
-webkit-overflow-scrolling: touch; /* Proper scrolling in overflown divs*/