Op deze pagina staan een aantal handige css en javascript tips.
Zorg dat je code netjes wordt opgebouwd, de juiste doctype bevat, de juiste manier van scripts integreren en op de naamgeving. Bekijk ook altijd de crossbrowser compatibiliteit
Gebruik altijd de doctype die geschikt is voor wat je wil maken. Ik kies meestal voor XHMTL 1.0 Strict omdat dit minder eisen stelt aan de parser en de browser, daarnaast is nette code gewaarborgd bij deze standaard. De code is ook een stuk overzichtelijker zonder o.a. de target="_blank" zaken en alle inline stijlen zijn weggestopt in een stylesheet. De doctype die ik meestal gebruik (samen met een stukje head is deze):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
</head>
<body>
...
</body>
</html>
Het klinkt stom, want IE8 is nog in een beta stadium. Maar er zijn toch al een aantal mensen die deze browser uitproberen. Zorg er daarom voor om de IE8 beta compatibel te laten draaien met IE7 door middel van de IE8 compatibiliteits meta tag, dan kan er niets fout gaan. Als IE8 wordt gelanceerd ben ik benieuwd of deze tag nog in stand blijft ofdat ze eindelijk eens gebruik maken van de standaarden.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Zet javascript in de head en body altijd tussen CDATA haken zodat de browser hier niet over kan vallen
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
Geef anchors altijd een title="" mee al dan niet leeg
Geef afbeeldingen altijd een alt="" mee al dan niet leeg
Dit omdat er helaas bugs ontstaan bij het draaien van meerdere Internet Explorers door elkaar met bijvoorbeeld multiple IE van Tredosoft gebruik ik voor IE6 en IE8 virtual pc images. De links hieronder (voor ie6 en ie8) komen op de pagina uit waar de images kunnen worden gedownload.
De rest van de links gaat naar de desbetreffende browser download pagina.
Vanwege de leesbaarheid van de code in het head gedeelte van de website is het verstandig om stylesheets die altijd samen geladen moeten worden te combineren
Veel ontwikkelaars voegen stylesheets onder elkaar toe, terwijl ze samen gebruikt worden. Vanwege de netheid van de code in het head gedeelte van de pagina is het verstandig om deze samen te laden. Dit is een voorbeeld van de oude situatie
<link rel="stylesheet" href="css/default.css" media="all" type="text/css" /> <link rel="stylesheet" href="css/layout.css" media="all" type="text/css" /> <link rel="stylesheet" href="css/navigation.css" media="all" type="text/css" />
Aangezien deze op iedere pagina weer terug komen is zijn ze te combineren. Ik heb gekozen voor de default.css.
<link rel="stylesheet" href="css/default.css" media="all" type="text/css" />
Nu kun je in de default.css de andere stylesheets includen met:
@import url(layout.css) @import url(navigation.css);
Zorg er wel voor dat de andere stylesheets in dezelfde map staan
Je kan ook bijvoorbeeld de printstijlen direct in je stylesheet zetten. Dan hoef je er geen aparte print.css aan te maken. Een voorbeeld hieronder:
@media print {
body {font-size: 10px; background: #fff;}
img {display:none;}
}
@media screen {
body {font-size: 12px; background: #fff url(images/background.jpg) repeat-x;}
}
@media handheld {
body {font-size: 10px; background: #fff;}
}
Een javasript om eenvoudig flash bestanden toe te voegen aan de pagina.
Er zou eigenlijk nog een kleine workaround voor progressief laden in IE6 in moeten. Maar heb toch besloten deze niet toe te voegen om het niet onnodig complex te maken.
function insertFlash(container, file, showwidth, showheight) {
var replacement;
replacement = document.getElementById(container);
replacement.appendChild(
document.createElement(
"object",
{
type :"application/x-shockwave-flash",
data : file,
width : showwidth,
height : showheight
},
[
document.createElement(
"param",
{
name : "movie",
value : file
}
)
]
)
);
}
<div id="flashdemo"> </div> <script type="text/javascript">
//<![CDATA[
insertFlash('flashdemo','flash/300x250m.swf',300,230);
//]]>
</script>
In XHTML 1.1 is het 'target=blank' attribuut niet aanwezig, hoe gaan we dit oplossen?
De oplossing is om gewone links te gebruiken en die om te bouwen met een stukje javascript.
Het element target = "_blank" is niet aanwezig in XHTML 1.1, toch is het meestal wenselijk om een nieuw venster te openen bij het klikken op een link naar een externe pagina. Dit javascript moet je verder op weg helpen om dit voor elkaar te krijgen. Een voorbeeld van een normale link is hier te zien:
<a href="http://www.google.nl" title="paginatitel" >Page</a>
Om dit te doen moeten de links(anchors) geidentificeerd worden om er een klasse aan toe te voegen. Met behulp van een nieuwe style class in de stylesheet kan het icoon worden weergegeven bij die class
function externalLinks()
{
var hostname = window.location.hostname;
var a = document.getElementsByTagName("a");
function check(obj){
return (obj.className == "popup") ? true : false;
}
function set(obj){
obj.target = "_blank";
obj.className = "external";
obj.title = (!obj.title ? "Externe link" : obj.title + " (Externe link)");
}
for (var i=0;i<a.length;i++){
if(check(a[i])){
set(a[i]);
}
}
}
Het eindresultaat voor alle links naar externe locaties
<a href="pagina.html" class="external" title="paginatitel (Opent in een nieuw venster)">Page</a>
Eventueel is de link te stijlen door in de stylesheet dit in te vullen:
a.external img {
color: #ff0000;
}
Printen met behulp van javascript is vrij eenvoudig.
Om de hele pagina te printen gebruik je
<a href="javascript:window.print()">klik om te printen</a>
Je kunt er ook voor kiezen om maar een item op de pagina te printen. Geef aan dit item (div) een id mee zodat deze herkenbaar is. zorg er wel voor dat je maar een id maar een keer gebruikt. Je kunt niet meerdere dezelfde id's gebruiken.
<script>
function printenmaar()
{
var a = window.open('','','width=500,height=500');
a.document.open("text/html");
a.document.write('<html><head>');
a.document.write('<link rel="stylesheet" href="print.css" />');
a.document.write('</head><body>');
a.document.write(document.getElementById('printdezediv').innerHTML);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
<div id="printdezediv">tekst om te printen</div>
<input type="button" onclick="printenmaar()" value="print div">
Om "standaard" fonts te vervangen met eigen fonts kun je gebruik maken van sIFR.
Hoe werkt sIFR?
<link rel="stylesheet" href="css/sIFR-screen.css" media="all" type="text/css" /> <link rel="stylesheet" href="css/sIFR-print.css" media="all" type="text/css" /> <script src="js/sifr.js" type="text/javascript" /> <script src="js/sifr-addons.js" type="text/javascript" />
Deze code kan onderin de pagina. Dit is de configuratie. In deze configuratie worden alle h2 en h3's vervangen door sIFR afbeeldingen. Je kan ook specificeren welke classNames bijv. h4.subhead of h3.sidebox en daar bijvoorbeeld kleuren voor instellen.
De swf bestanden zijn de flash bestanden met daarin het font.
Zelf sIFR bestanden maken?
Bekijk deze website
<script type="text/javascript">
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */
if(typeof sIFR == "function"){
// This is the preferred "named argument" syntax
sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));
// This is the older, ordered syntax
sIFR.replaceElement("h2", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0);
sIFR.replaceElement("h4.subhead", "tradegothic.swf", "#660000", null, null, null, 0, 0, 0, 0);
sIFR.replaceElement("h3.sidebox","tradegothic.swf","#000000", "#000000", "#DCDCDC", "#DCDCDC", 0, 0, 0, 0, null);
sIFR.replaceElement("h3", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0, null);
};
//]]>
</script>