Reinhold Weber
// about
I am a german web developer, web designer, css expert, php/mysql developer & ruby on rails enthusiast. I follow the latest web trends and develop stable web solutions using a combination of PHP5, MySQL, XHTML, CSS, and Javascript. » more about me
// tags
// recent posts
- CSS Anatomy - a stylesheet deconstructed - w3.org/style/css
- IE6 can officially blow me
- CSS Anatomy - a stylesheet deconstructed - nytimes.com
- Random but useful css snippets from all over
- CSS 3 - The future shines bright
- CSS Anatomy - a stylesheet deconstructed - apple.com
- Confessions of a CSS developer
- Effective CSS workflow techniques
- Zend Studio keyboard shortcuts and effective workflow
- Really cool CSS diagnostics script
- Unfinished initial css skeleton script
- Five Elements of my Style
- My database design process
- 40 signs you really are a lousy PHP programmer
- Cheatsheet: HTML 5 differences from HTML 4
// elsewhere
CSS Anatomy - a stylesheet deconstructed - w3.org/style/css
Sunday Jul 27th, 2008 @ 15:37:07
In part 3 of the CSS anatomy series welcome the mother of web standards websites w3.org/Style/CSS, the World wide Web Consortiums's website on Cascading Stylesheets. Like you probably can guess, it's all there from browser hacks for IE3! to advanced CSS3 magic.
Someone knows their browser quircks
/* All other browsers */
/* Sent to all browsers except IE3 */
body {
font-family: Verdana, "Myriad Web", Syntax, sans-serif;
margin-top: 3em;
margin-bottom: 3em;
margin-left: 12%;
margin-right: 8%;
padding: 0;
}
:link, :visited {
/* text-decoration: none; */
/* font-weight: bold; */
}
h1:first-line {
border-bottom: none; /* bug in Konqueror 3.1 */
font-style: italic }
pre {
margin-left: 1.5em;
text-align: left } /* Safari 1.0b doesn't do this by default */
a:hover * { /* Work-around for Konqueror 3.1 */
background: inherit }
/* Fix for Firefox 2, which cannot justify Hindi */
p:lang(hi) {text-align: left}
li:lang(hi) {text-align: left}
A:visited, A:active { color: #906; /* border: none -- breaks NS 4.x */ }
A:link IMG, A:visited IMG { border-style: none }
A IMG { color: white } /* The only way to hide the border in NS 4.x */
/* Why o why does this break Netscape 4.x?
IMG {
border: none
}
*/
/* I'd like to use
background: transparent url(semi4x4.png)
but semi-transparent backgrounds seem to slow down the various
browsers a lot... */
div.back {background: #567}
div.section div.back {background: #777}
/* Should be a:visited:hover, a:link:hover but Opera Linux
doesn't support that yet */
a:hover {
background: #CFF;
}
/* Like threepart, but with fixed menus */
@import "threepart.css";
/* The child selectors are a hack to hide these rules from WinIE6,
which gets confused by 'fixed' */
body>div#Menu,
body>div.map { position: fixed }
They define style rules for a vast collection of media types
/* The following is for windows that aren't tall enough for
the fixed menu. Use the scrolling menu instead. */
@media screen and (max-height: 27em) {
body div.map {position: absolute}
}
@media screen, projection, print, handheld {
.hide {
display: none;
color: white } }
@media print {
/*
* Don't print the menus. Make the title large enough
* to take half a page. Print a W3C logo in the
* upper left corner.
*
* Once columns are in CR or Rec, add
* 'column-width: 17em; column-gap: 2em' to BODY and
* 'column-span: all' to H1, because most paper is much
* wider than the optimal line length.
*/
div.banner, div#Logo, div.map, div#Menu {display: none}
body, html>body {margin: 0; padding: 0}
body:before {display: block; content: url(../Icons/w3c_main.png)}
h2 {color: black}
h1 {border: none; color: #aa7; padding: 2em 0.5em 1em 0;
margin: 0.5em 0; text-transform: uppercase;
font-size: 600%; line-height: 1; font-weight: normal}
h1:first-line {font-style: inherit}
}
@media screen and (max-height: 27em) {
body div.map {position: absolute}
}
/* Simple style sheet for displaying on handheld devices */
/* Workaround for Netfront bug. Netfront applies the "handheld" style,
but forgets to disable the "screen" style. Here we reset the most
important properties to their defaults. */
h1:first-line {font-style: normal}
body {position: static}
html>body {padding-right: 0}
div.map, div.banner {position: static; width: auto}
body>div.map {position: static; width: auto}
The extended use of selectors is pretty impressive, although many developers know about the selectors introduced with CSS 2.1 they are a rare find in stylesheets today. There still is, and justifiably so, doubt about cross-browser implementation of advanced selectors. In times where according on target audience more than 30% of web users still use IE6 this may be a wise decision. Also something you don't see quite often is the use of the CSS 2.1 language pseudo-class serving content depending on your language.
div > p:first-child, body > p:first-child, td > p:first-child {
margin-top: .75em;
margin-bottom: .75em;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
border-bottom: 0;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, div + p, p.initial {
margin-top: .75em;
margin-bottom: .75em;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
border-bottom: 0;
}
span.date:after {
content: "\A0\A0" }
p.stb, .hint + p.stb { /* Small thematic break */
text-indent: 0;
margin-top: 0.6em }
p.hint + p, p.alt-hint + p, p.skip + p, p.metadata + p {
text-indent: 0;
margin-top: 1em }
/* Various other languages */
div.map:lang(de):before {content: "Lokale Links"}
div.map:lang(es):before {content: "Enlaces locales"}
div.map:lang(fr):before {content: "Liens locaux"}
div.map:lang(it):before {content: "Link nella pagina"}
div.map:lang(nl):before {content: "Lokale links"}
div.map:lang(pt):before {content: "Links locais"}
div.map:lang(sr):before {content: "\41B\43E\43A\430\43B\43D\438 \43B\438\43D\43A\43E\432\438"}
div.banner a[rel=home] {
float: left; margin-right: 1em }
/* Links to translations. Each language a different color. Colors are random */
.translations a[hreflang] {background: hsl(0,0%,83%); padding: 0 0.15em}
.translations a[hreflang|=be] {color: hsl(100,57%,24%); background: hsl(100,57%,83%)}
.translations a[hreflang|=cs] {color: hsl(140,57%,24%); background: hsl(140,57%,83%)}
.translations a[hreflang|=de] {color: hsl(60,57%,24%); background: hsl(60,57%,83%)}
.translations a[hreflang|=el] {color: hsl(190,57%,24%); background: hsl(190,57%,83%)}
Now this is something cool I've never seen used before, styles defined for the "aural" media type along with the voices of Harry & Betty :-). The aural rendering of a document , already commonly used by the blind and print-impaired communities, combines speech synthesis and "auditory icons." (W3C page for aural media type).
/* ****************** speech ************** */
@media aural {
h1, h2, h3,
h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90 }
h1 { pitch: x-low; pitch-range: 90 }
h2 { pitch: x-low; pitch-range: 80 }
h3 { pitch: low; pitch-range: 70 }
h4 { pitch: medium; pitch-range: 60 }
h5 { pitch: medium; pitch-range: 50 }
h6 { pitch: medium; pitch-range: 40 }
li, dt, dd { pitch: medium; richness: 60 }
dt { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn { pitch: high; pitch-range: 60; stress: 60 }
s, strike { richness: 0 }
i { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u { richness: 0 }
a:link { voice-family: harry, male }
a:visited { voice-family: betty, female }
a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
blog comments powered by Disqus