High SNR, minimum verbiage CSS code recipes. NEW!: check out this great CSS snippters compilation
- Superscripts and subscripts without breaking line spacing
- Ideal line length: 66 characters
- Letterspacing abbreviations
- Consistency between line spacing and paragraph spacing
- Consistency for blockquote margins
- Consistency for heading size
- Paragraph indent (exclusive with block paragraphs)
- Faithful rendering of verses, centered on the longest line
- Italicise foreign words (French and English)
- Force white background when printing
- Closing a float with minimal markup
- Highlight variables
- Highlight input
- Highlight code
- Localised quotations (French and English)
- Inline pairs (French and English)
- Post-It™
- Dialogs (French and English)
- Drop Caps
- Multiple columns CSS dashed list
Superscripts and subscripts without breaking line spacing
sup, sub {line-height:1px}
Ideal line length: 66 characters
max-width:44em
Letterspacing abbreviations
abbr {letter-spacing:0.1em}
Consistency between line spacing and paragraph spacing
p {
line-height:x;
margin-top:xem;
margin-bottom:xem
}
Consistency for blockquote margins
blockquote {margin:xem }
Consistency for heading size
No code yet, sorry! source
Paragraph indent (exclusive with block paragraph)
p+p {text-indent:0}
Faithful rendering of verses, centered on the longest line:
blockquote.verse pre { display:table; font-family:inherit; margin:0 auto; width:auto }
Italicise foreign words (French and English)
html:lang(fr) *:not(:lang(fr)), html:lang(en) *:not(:lang(en)) { font-style: italic }
Force white background when printing
<style type="text/css" media="print"> * { background:#fff !important; color:#000 !important }
Closing a float without extra markup
.bla:after {content:"";display:block;clear:both}
Highlight variables
var {
font-family:Courier,monospace;
font-style:normal
}
var:before {
content:"\003C"
}
var:after {
content:"\003E"
}
Highlight input
kbd { border:1px solid silver; font-size:0.90em; padding:0 0.25em }
Highlight code
code strong {background:#FFF2CC}
Localised quotations (English, French, German 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 */
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: "}
Post-It™
.post-it {
background:#ffffa1;
border:thin solid #ffc700;
font-family:cursive;
margin:0 25% 0 25%;
padding:.5em;
width:30%
}
Dialogs (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}
Drop caps on the first letter 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 improvement: convert px to ex (or em), exemplify with borders, background and a Google Webfont’s unifraktur.
Multiple 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
}
}
Ping : Des listes multi-colonnes et avec des tirets, en CSS | David Latapie