css technieken toegelicht
DESCRIPTION
Vrijwel alle websites worden tegenwoordig gestijld met behulp van CSS. Vaak worden hierbij diverse (soms zeer omslachtige) technieken gebruikt, terwijl het in dezelfde situaties ook mogelijk is om nette code te gebruiken.Binnen deze presentatie zullen diverse (onbekende) technieken en 'best practices' worden besproken. Hiermee wordt het stijlen met behulp van CSS zo eenvoudig en efficiënt mogelijk, wat nettere code en betere prestaties op de verschillende browsers tot gevolg zal hebben.TRANSCRIPT
CSS Technieken Toegelicht
Robin Poort (@rhcpoort)
Owner Tweepixels Webdesign (@tweepixels)
PFCongres, September 2011
Robin Poort
Follow me on Twitter: @rhcpoort and @tweepixels
A Solid Foundation
Reset
FrameworksCheatsheets
ShorthandSpecificityClear &
Clearfix
Commenting
Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
Source: http://meyerweb.com/eric/tools/css/reset/
Source: http://960.gs/demo.html
<div class=”clear”></div>
&<div class=”clearfix”></div>
HTML markup
<div class=”wrapper”>
Lorem ipsum
<div class=”floatbox”>
Floating box
</div>
</div>
Result
CSS
.wrapper {
background: #FFF;
border: 5px solid #29BDBD;
margin: 10px;
padding: 10px;
}
.floatbox {
background: #FFF;
border: 5px solid #333;
padding: 10px;
float: right;
}
HTML markup
<div class=”wrapper”>
Lorem ipsum
<div class=”floatbox”>
Floating box
</div>
<div class=”clear”></div>
</div>
Result
CSS (in 960 grid system)
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
HTML markup
<div class=”wrapper clearfix”>
Lorem ipsum
<div class=”floatbox”>
Floating box
</div>
</div>
Result
CSS (in 960 grid system)
.clearfix:before,.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
Most frameworks come with built-in clear & clearfix classes.
div.example {
background-color: #FFFFFF;
background-image:
url(img.png);
background-position: left
top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #000000;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
}
div.example2 {
font-family: Arial, sans-
serif;
font-size: 12px;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
list-style-type: disc;
list-style-position: inside;
list-style-image:
url(img.png);
}
div.example {
background: #FFFFFF url(example.png) left top repeat-x;
border: 1px solid #000000;
margin: 10px;
padding: 10px 15px 20px;
}
div.example2 {
font: bold italic small-caps 1em/1.5em Arial,sans-serif;
list-style: disc inside url(example.png);
}
When using shorthand CSS make sure you use the correct order for the values.
Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
Source: http://www.w3.org/TR/CSS2/cascade.html
!important
.example {color: red !important}
Overrules
<div class=”example” style=”color: blue;”>
Using !important might confuse you or other developers later. Use with caution!
Commenting
▪Do it for yourself
▪Do it for others
▪When using hacks and adjustments
/* As headers */
h3 {font-size: 1em;}
H3 {
font-size: 1em; /* Just this line */
color: red;
}
Good to Know
Class stacking
.class.class
Floating & position: absolute
CSS selectors#id.class
HTML markup
<div class=”container”>
<div class=”absolute”>
Absolute
</div>
<div class=”floatbox”>
Floating box
</div>
<div class=”clear”></div>
</div>
Result in IE7
CSS
.container {
position: relative;
z-index: 1;
}
.absolute {
right: 10px;
position: absolute;
top: 10px;
z-index: 2;
}
.floatbox {
float: left;
}
HTML markup
<div class=”container”>
<div>
<div
class=”absolute”>
Absolute
</div>
</div>
<div class=”floatbox”>
Floating box
</div>
<div class=”clear”></div>
</div>
Result
CSS
.container {
position: relative;
z-index: 1;
}
.absolute {
right: 10px;
position: absolute;
top: 10px;
z-index: 2;
}
.floatbox {
float: left;
}
HTML markup
<div class=”container”>
<div class=”IE-div”>
<div
class=”absolute”>
Absolute
</div>
</div>
<div class=”floatbox”>
Floating box
</div>
<div class=”clear”></div>
</div>
Result
CSS
.container {
position: relative;
z-index: 1;
}
.absolute {
right: 10px;
position: absolute;
top: 10px;
z-index: 2;
}
.floatbox {
float: left;
}
<div class=”class stacking”></div>
HTML markup
<div class=”blockBigBoldRed”>
Example
</div>
<div class=”blockBigBlue”>
Example
</div>
Result
CSS
.blockBigBoldRed {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
font-size: 2em;
color: red;
font-weight: bold;
}
.blockBigBlue {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
font-size: 2em;
color: blue;
}
HTML markup
<div class=”block”>
<div class=”bigFont”>
<div class=”boldFont”>
<div
class=”redFont”>
Example
</div>
</div>
</div>
</div>
<div class=”block”>
<div class=”bigFont”>
<div class=”blueFont”>
Example
</div>
</div>
</div>
CSS
.block {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
}
.bigFont {font-size: 2em;}
.redFont {color: red;}
.blueFont {color: blue;}
.boldFont { font-weight: bold;}
Result
HTML markup
<div class=”block bigFont boldFont
redFont”>
Example
</div>
<div class=”block bigFont blueFont”>
Example
</div>
Result
CSS
.block {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
}
.bigFont {font-size: 2em;}
.redFont {color: red;}
.blueFont {color: blue;}
.boldFont {font-weight: bold;}
Make sure you divide all classes in the markup with spaces.
.class.class
HTML markup
<div class=”block bigFont redFont”>
Example
<div class=”caption redFont”>
Example
</div>
</div>
Result
CSS
.block {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
}
.bigFont {font-size: 2em;}
.redFont {color: red;}
.caption {
background: #CCC;
padding: 10px;
}
HTML markup
<div class=”block bigFont redFont”>
Example
<div class=”caption redFont”>
Example
</div>
</div>
Resultaat
CSS
.block {
background: #FFFFFF;
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
}
.bigFont {font-size: 2em;}
.redFont {color: red;}
.caption {
background: #CCC;
padding: 10px;
}
.caption.redFont {color: darkred;}
There are spaces between classes in the markup but not in your CSS file.
#id.class
HTML markup
<div id=”bar1” class=”grid_4”>
Example
</div>
<div id=”bar2” class=”grid_4”>
Example
</div>
<div id=”bar3” class=”grid_4”>
Example
</div>
CSS
.grid_4 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
width: 300px;
}
HTML markup
<div id=”bar1” class=”grid_4”>
Example
</div>
<div id=”bar2” class=”grid_4”>
Example
</div>
<div id=”bar3” class=”grid_4”>
Example
</div>
CSS
.grid_4 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
position: relative;
}
#bar1.grid_4 {margin-left: 0;}
#bar3.grid_4 {margin-right: 0;}
Very useful CSS selectors
E F Matches any F element that is a descendant of an E element.
E > F Matches any F element that is a child of an element
E.
E + F Matches any F element immediately preceded by a
sibling element E.
E:first-child Matches element E when E is the first child of its
parent.
E[foo] Matches any E element with the "foo"
attribute set (whatever the value).
E[foo="warn"] Matches any E element whose "foo" attribute value
is exactly equal to "warn".
E[foo~="warn"] Matches any E element whose "foo" attribute value
is a list of space-separated values, one of which
is exactly equal to "warn".
Source: http://www.w3.org/TR/CSS2/selector.html
E > F
HTML markup
<div class=”blog”>
<p>Introduction</p>
<div class=”story”>
<p>Lorem ipsum dolor</p>
<div class=”date”>
<p>Date</p>
</div>
</div>
</div>
CSS
.blog p {
font-family: Arial, sans-
serif;
font-size: 1em;
color: #555;
}
.story p {
font-size: 1.3em;
color: #111;
}
E > F
HTML markup
<div class=”blog”>
<p>Introduction</p>
<div class=”story”>
<p>Lorem ipsum dolor</p>
<div class=”date”>
<p>Date</p>
</div>
</div>
</div>
CSS
.blog p {
font-family: Arial, sans-
serif;
font-size: 1em;
color: #555;
}
.story > p {
font-size: 1.3em;
color: #111;
}
E + F
HTML markup
<div class=”blog”>
<h1>Title</h1>
<h2>Subtitle</h2>
<h2>Subtitle</h2>
<p>Lorem ipsum</p>
<h2>Subtitle</h2>
<p>Lorem ipsum</p>
</div>
CSS
h1 {
margin: 0 0 1em 0;
font-size: 2em;
}
h2 {
margin: 0 0 .5em 0;
font-size: 1.4em;
color: #000;
}
E + F
HTML markup
<div class=”blog”>
<h1>Title</h1>
<h2>Subtitle</h2>
<h2>Subtitle</h2>
<p>Lorem ipsum</p>
<h2>Subtitle</h2>
<p>Lorem ipsum</p>
</div>
CSS
h1 {
margin: 0 0 1em 0;
font-size: 2em;
}
h2 {
margin: 0 0 .5em 0;
font-size: 1.4em;
color: #000;
}
h1 + h2 {
margin-top: -1em;
font-style: italic;
}
E:first-child
HTML markup
<div class=”blog”>
<h1>Title</h1>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
CSS
h1 {
margin: 0 0 1em 0;
font-size: 2em;
color: #222;
}
p {
color: #444;
margin-bottom: 1em;
}
.blog p:first-child {
font-family: serif;
font-style: italic;
color: #000;
}
E:first-child
HTML markup
<div class=”blog”>
<h1>Title</h1>
<div class=”story”>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
</div>
CSS
h1 {
margin: 0 0 1em 0;
font-size: 2em;
color: #222;
}
p {
color: #444;
margin-bottom: 1em;
}
.story p:first-child {
font-family: serif;
font-style: italic;
color: #000;
}
E[foo="warn"]
HTML markup
<label>Name</label><br />
<input type="text" />
<label>Gender</label><br />
<label>
<input type="radio" />Man
</label>
<label>
<input type="radio" />Woman
</label>
CSS
input[type="text"] {
width: 200px;
border: 1px solid #CCC;
background: #F5F5F5;
padding: 5px;
}
input[type="radio"] {
margin-left: 1em;
}
CSS in use
Attribute Styling
Drop Caps
Google Fonts
Styling Images
Source: http://www.google.com/webfonts?subset=latin&sort=pop
HTML markup
<!-- place in <head> section -->
<link href=”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu”
rel=”stylesheet” type=”text/css” />
<!-- place in </head> section -->
<h1>Title</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
CSS
h1 {font-family: 'Yanone Kaffeesatz', arial, serif;}
p {font-family: 'Ubuntu', arial, serif;}
Don't use too many Google Fonts at the same page because MSIE can't handle that.
HTML markup
<ul>
<li><a class=”doc-icon” href="test.doc">Lorem ipsum
dolor</a></li>
<li><a class=”pdf-icon” href="test.pdf">Sit amet
consect</a></li>
<li><a class=”xls-icon” href="test.xls">Lorem ipsum
dolor</a></li>
<li><a class=”png-icon” href="test.png">Sit amet
consectet</a></li>
</ul>
CSS
li a.doc-icon {background: url(doc.gif) no-repeat; }
li a.pdf-icon {background: url(pdf.gif) no-repeat; }
li a.xls-icon {background: url(xls.gif) no-repeat; }
li a.png-icon {background: url(png.gif) no-repeat; }
HTML markup
<ul>
<li><a href="test.doc">Lorem ipsum dolor</a></li>
<li><a href="test.pdf">Sit amet consectetuer</a></li>
<li><a href="test.xls">Lorem ipsum dolor</a></li>
<li><a href="test.png">Sit amet consectetuer</a></li>
</ul>
<ul>
<li><a href="http://twitter.com/finishjoomla">Twitter</a></li>
<li><a
href="http://www.facebook.com/profile.php">Facebook</a></li>
<li><a href="http://www.linkedin.com/company/">Linkedin</a></li>
<li><a href="http://www.youtube.com/user/">Youtube</a></li>
</ul>
CSS
li a[href$='.doc'],
li a[href$='.pdf'],
li a[href$='.xls'],
li a[href$='.png'],
li a[href*='twitter.com'],
li a[href*='facebook.com'],
li a[href*='linkedin.com'],
li a[href*='youtube.com'] {
padding-left:40px;
min-height:24px;
display:inline-block;
line-height:24px;
}
This won't work on IE6 and only on IE7+ when a Doctype is declared.
CSS
li a[href$='.doc'] {background: url(doc.gif) no-repeat; }
li a[href$='.pdf'] {background: url(pdf.gif) no-repeat; }
li a[href$='.xls'] {background: url(xls.gif) no-repeat; }
li a[href$='.png'] {background: url(png.gif) no-repeat; }
li a[href*='twitter.com'] {background: url(twitter.gif) no-repeat; }
li a[href*='facebook.com'] {background: url(facebook.gif) no-repeat; }
li a[href*='linkedin.com'] {background: url(linkedin.gif) no-repeat; }
li a[href*='youtube.com'] {background: url(youtube.gif) no-repeat; }
This won't work on IE6 and only on IE7+ when a Doctype is declared.
HTML markup
<p>
<span class=”dropcap”>L</span>orem ipsum dolor sit amet,
consectetur adipiscing elit...
</p>
CSS
p {font-family: Arial, sans-serif;}
span.dropcap {
font-size: 3em;
color: #29BDBD;
float: left;
margin: 10px 10px 0 0;
display: block;
}
HTML markup
<p class=”dropcap”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
CSS
p.dropcap {font-family: Arial, sans-serif;}
p.dropcap:first-letter {
font-size: 3em;
color: #29BDBD;
float: left;
margin: 10px 10px 0 0;
}
This won't work on IE6 and only on IE7+ when a Doctype is declared.
HTML markup
<p class=”dropcap”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
CSS
p.dropcap {font-family: 'Old Standard TT', Times, serif;}
p.dropcap:first-letter {
font-family: 'UnifrakturMaguntia', Times, serif;
font-size: 3em;
color: #29BDBD;
float: left;
margin: 10px 10px 0 0;
}
HTML markup
<img class=”img1” src=”image.png” alt=”image” />
CSS
img.img1 {
background: #FFF;
padding: 2px;
border: 2px solid #AAA;
}
HTML markup
<img class=”img2” src=”image.png” alt=”image” />
CSS
img.img2 {
background: url(seamless.png);
padding: 4px;
}
Make sure the background image is a seamless pattern.
HTML markup
<img class=”img3” src=”image.png” alt=”image” />
CSS
img.img3 {
background: url(seamless.png);
padding: 3px;
border: 1px solid #000;
}
HTML markup
<img class=”img4” src=”image.png” alt=”image” />
CSS
img.img4 {
background: #000;
padding: 1px;
border: 2px solid #FFF;
outline: 1px solid #AAA;
}
The outline property is not supported by IE6 and IE7.
Questions?