High SNR, mini­mum ver­biage CSS code recipes. NEW!: check out this great CSS snipp­ters com­pi­la­tion Super­scripts and sub­scripts without brea­king line spacing Ideal line length: 66 characters Let­ters­pa­cing abbreviations Consis­tency...

High SNR, mini­mum ver­biage CSS code recipes. NEW!: check out this great CSS snipp­ters com­pi­la­tion

1. Super­scripts and sub­scripts without brea­king line spacing
2. Ideal line length: 66 characters
3. Let­ters­pa­cing abbreviations
4. Consis­tency bet­ween line spa­cing and para­graph spacing
5. Consis­tency for blo­ck­quote margins
6. Consis­tency for hea­ding size
7. Para­graph indent (exclu­sive with block paragraphs)
8. Fai­th­ful ren­de­ring of verses, cen­te­red on the lon­gest line
9. Ita­li­cise foreign words (French and English)
10. Force white back­ground when printing
11. Clo­sing a float with mini­mal markup
12. High­light variables
13. High­light input
14. High­light code
15. Loca­li­sed quo­ta­tions (French and English)
16. Inline pairs (French and English)
17. Post-It™
18. Dia­logs (French and English)
19. Drop Caps
20. Mul­tiple columns CSS dashed list

---

Super­scripts and sub­scripts without brea­king line spacing

sup, sub {line-height:1px}

example | source

Ideal line length: 66 characters

max-width:44em

example | source

Let­ters­pa­cing abbreviations

abbr {letter-spacing:0.1em}

example | source

Consis­tency bet­ween line spa­cing and para­graph spacing

p {
	line-height:x;
	margin-top:xem;
	margin-bottom:xem
}

example | source

Consis­tency for blo­ck­quote margins

blockquote {margin:xem }

example | source

Consis­tency for hea­ding size

No code yet, sorry! source

Para­graph indent (exclu­sive with block paragraph)

p+p {text-indent:0}

source

Fai­th­ful ren­de­ring of verses, cen­te­red on the lon­gest line:

blockquote.verse pre { display:table; font-family:inherit; margin:0 auto; width:auto }

source

Ita­li­cise foreign words (French and English)

html:lang(fr) *:not(:lang(fr)), html:lang(en) *:not(:lang(en)) { font-style: italic }

source

Force white back­ground when printing

<style type="text/css" media="print"> * { background:#fff !important; color:#000 !important }

source

Clo­sing a float without extra markup

.bla:after {content:"";display:block;clear:both}

source

High­light variables

var {
  font-family:Courier,monospace;
  font-style:normal
}

var:before {
content:"\003C"
}

var:after {
content:"\003E"
}

source

High­light input

kbd { border:1px solid silver; font-size:0.90em; padding:0 0.25em }

source

High­light code

code strong {background:#FFF2CC}

source

Loca­li­sed quo­ta­tions (English, French, Ger­man and Spanish)

/* http://david.latapie.name/blog/localised-quotations/ */
q:before { content: open-quote; }
q:after  { content: close-quote; }
*:lang(de) > * { quotes: "\201E" "\201C"; }	/* German */
*:lang(en) > * { quotes: "\201C" "\201D" "\2018" "\2019"; }	/* English */
*:lang(es) > * { quotes: "\00AB" "\00BB"; }	/* Spanish */
*:lang(fr) > * { quotes: "\00AB\202F" "\202F\00BB" "\201C" "\201D" "\2018" "\2019"; } /* French */

source

Inline pairs (French and English)

dl.run-in, dl.run-in dd			{margin:0}
dl.run-in dt, dl.run-in dt:after	{font-weight:bold}
dl.run-in dt				{display:run-in}
dl:lang(en).run-in.colon dt:after	{content:": "}
dl:lang(fr).run-in.colon dt:after	{content:"\00a0: "}

example | source

Post-It™

.post-it {
    background:#ffffa1;
    border:thin solid #ffc700;
    font-family:cursive;
    margin:0 25% 0 25%;
    padding:.5em;
    width:30%
}

example | source

Dia­logs (French and English)

ul                          {list-style:none}
ul li q:lang(fr)            {quotes : '«\202F' '\202F»' "“" "”" "‘" "’"}
ul li q:lang(en)            {quotes : "“" "”" "‘" "’"}
ul li:first-child q:before  {content:open-quote}
ul li:first-child q:after   {content:no-close-quote}
ul li q:before              {content:no-open-quote'\2012';padding-right:0.5em}
ul li q:after               {content:no-close-quote}
ul li:last-child q:after    {content:close-quote}

example | source

Drop caps on the first let­ter of the first paragraph

p:first-child:first-letter {
    color:#903;
    float:left;
    font-family:Georgia;
    font-size:75px;
    line-height:60px;
    padding-top:4px;
    padding-right:8px;
    padding-left:3px
}

Areas for impro­ve­ment: convert px to ex (or em), exem­plify with bor­ders, back­ground and a Google Webfont’s unifraktur.

example | source

Mul­tiple columns CSS dashed list

.columnlist {
	margin:1em 0;
	padding-left:1em;
	-moz-column-count:2;-webkit-column-count:2;column-count:2;
	-moz-column-gap:2.5em;-webkit-column-gap:2.5em;column-gap:2.5em
}

.multilistdash {
	margin:1em 0;
	padding-left:1em
}
		
.multilistdash li {
	display:inline-block;
	*display:inline /*The leading asterisk is an IE workaround*/;
	*zoom:1 /*The leading asterisk is an IE workaround*/;
	width:100%;
	padding-left:2em;
	text-indent:-2em
}

.multilistdash li:before {
	content:'\2014';
	margin-right:0.75em;
	font-weight:bold;
	font-size:1.3em
}
		
.multilistdash ul {margin-left:0}
.multilistdash li li {display:block;}
.multilistdash li li:before {content:'\2014 ';}

	@media only screen and (min-width:48em) {
		.multilistdash {
		-moz-column-count:2;-webkit-column-count:2;column-count:2;
		-moz-column-gap:2.5em;-webkit-column-gap:2.5em;column-gap:2.5em
		}
	}

	@media only screen and (min-width:48em) {
		.multilistdash {
		-moz-column-count:3;-webkit-column-count:3;column-count:3;
		-moz-column-gap:2.5em;-webkit-column-gap:2.5em;column-gap:2.5em
		}
	}

example | source