• Firefox 3.5+
• Safari 3+
• Google Chrome
• Opera 10.50
• Internet Explorer 5.5+

CSS

.shadow {
  -moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */
  -webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */
  box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */
  /* Voor IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  /* Voor IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Nartuurlijk zal je de ms-filter & filter via conditional comments laden?

HTML

<script>
 for (x in document.write) { document.write(x);}
</script>

Misschien kan je met deze snippet wel een statement zetten voor je bezoekers van je website die nog steeds met IE6 je site bekijken??

CSS

HTML

<ul id="navbar">
<li><a href="#">Item One</a>
<ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li>
</ul>
</li>
<li><a href="#">Item two</a>
<ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li>
</ul>
</li>
</ul>

CSS

#navbar {
margin: 0;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 10em;
background-color: #69f;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#navbar li li a:hover {
background-color: #8db3ff;
}

JavaScript

<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
]]>

De CSS dient aangepast te worden voor IE6

De class .hover moet nu bij elke :hover worden bijgezet, dus eigenlijk 2 maal hetzelfde schrijven maar nu met een . i.p.v. :

CSS

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}

IE6 en minder

CSS

* html {}

IE7 en minder

CSS

*:first-child+html {}
* html {}

Alleen IE7

CSS

*:first-child+html {}

Alleen IE7 & moderne browsers

CSS

html>body {}

Alleen moderne browsers (niet IE7)

CSS

html>
/**/body {}

Recente Opera 9 en minder

CSS

html:first-child {}

HTML

<ul id="menu">
 <li><a href="#"> lorem </a></li>
  <li class="folder">
   <a class="submenu" href="#"> adipiscing </a>
    <ul>
     <li><a href="#"> dolor </a></li>
     <li class="folder">
      <a class="submenu" href="#"> consectetuer</a>
    <ul>
      <li><a href="#"> elit </a></li>
      <li><a href="#"> ipsum </a></li>
      <li><a href="#"> Donec </a></li>
    </ul>
   </li>
   <li><a href="#"> vestibulum </a></li>
  </ul>
  </li>
  <li class="folder">
   <a class="submenu" href="#"> consectetuer</a>
   <ul>
    <li><a href="#"> elit </a></li>
    <li><a href="#"> ipsum </a></li>
    <li><a href="#"> Donec </a></li>
   </ul>
  </li>
  <li><a href="#"> sit amet </a></li>
 </ul>

CSS

body {
behavior: url("csshover3.htc");
}
ul, li, a {
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
background:white;
list-style:none;
display:block;
margin:0;
padding:0;
}
li {
position:relative;
padding:1px;
font-size: 1.2em;
padding-left:26px;
background:url("images/item_moz.gif") no-repeat;
z-index:9;
display:block;
}
li.folder { background:url("images/item_folder.gif") no-repeat; }
li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */
ul a {
padding:2px;
border:1px solid white;
text-decoration:none;
display:block;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>a { width:auto; } /* others */
li a.submenu {
background:url("images/sub.gif") right no-repeat;
}
ul a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}

Sla volgende complete code op in een bestand met extensie .htc

JavaScript/HTC

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
//<![CDATA[
/**
 *	Whatever:hover - V3.00.081222
 *	------------------------------------------------------------
 *	Author  - Peter Nederlof, http://www.xs4all.nl/~peterned
 *	License - http://creativecommons.org/licenses/LGPL/2.1
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	howto: body { behavior:url("csshover3.htc"); }
 *	------------------------------------------------------------
 */
window.CSSHover = (function(){
var REG_INTERACTIVE = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i,
REG_AFFECTED = /(.*?)\:(hover|active|focus)/i,
REG_PSEUDO = /[^:]+:([a-z-]+).*/i,
REG_SELECT = /(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi,
REG_CLASS = /\.([a-z0-9_-]*on(hover|active|focus))/i,
REG_MSIE = /msie (5|6|7)/i,
REG_COMPAT = /backcompat/i;
var CSSHOVER_PREFIX = 'csh-';
var CSSHover = {
elements: [],
callbacks: {},
init:function() {
// don't run in IE8 standards; expressions don't work in standards mode anyway,
// and the stuff we're trying to fix should already work properly
if(!REG_MSIE.test(navigator.userAgent) && !REG_COMPAT.test(window.document.compatMode)) return;
var sheets = window.document.styleSheets, l = sheets.length;
for(var i=0; i<l; i++) {
this.parseStylesheet(sheets[i]);
}
},
parseStylesheet:function(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) {
this.parseStylesheet(sheet.imports[i]);
}
} catch(securityException){
}
}
try {
var rules = sheet.rules, l = rules.length;
for(var j=0; j<l; j++) {
this.parseCSSRule(rules[j], sheet);
}
} catch(securityException){
}
},
parseCSSRule:function(rule, sheet) {
var select = rule.selectorText;
if(REG_INTERACTIVE.test(select)) {
var style = rule.style.cssText,
// eg: "div li:hover" >>  "div li"
affected = REG_AFFECTED.exec(select)[1],
// that pseudo is needed for a classname, and defines the type of interaction (focus, hover, active)
// eg: "li:hover" >> "onhover"
pseudo = select.replace(REG_PSEUDO, 'on$1'),
// the new selector is going to use that classname in a new css rule,
// since IE6 doesn't support multiple classnames, this is merged into one classname
// eg: "li:hover" >> "li.onhover",  "li.folder:hover" >> "li.folderonhover"
newSelect = select.replace(REG_SELECT, '.$2' + pseudo),
className = REG_CLASS.exec(newSelect)[1];
var hash = affected + className;
if(!this.callbacks[hash]) {
sheet.addRule(affected, CSSHOVER_PREFIX + className + ':expression(CSSHover(this, "'+pseudo+'", "'+className+'"))');
this.callbacks[hash] = true;
}
sheet.addRule(newSelect, style);
}
},
patch:function(node, type, className) {
var property = CSSHOVER_PREFIX + className;
if(node.style[property]) {
node.style[property] = null;
}
if(!node.csshover) node.csshover = [];
if(!node.csshover[className]) {
node.csshover[className] = true;
var element = new CSSHoverElement(node, type, className);
this.elements.push(element);
}
return type;
},
unload:function() {
try {
var l = this.elements.length;
for(var i=0; i<l; i++) {
this.elements[i].unload();
}
this.elements = [];
this.callbacks = {};
} catch (e) {
}
}
};
window.attachEvent('onbeforeunload', function(){
CSSHover.unload();
});
var CSSEvents = {
onhover:  { activator: 'onmouseenter', deactivator: 'onmouseleave' },
onactive: { activator: 'onmousedown',  deactivator: 'onmouseup' },
onfocus:  { activator: 'onfocus',      deactivator: 'onblur' }
};
function CSSHoverElement(node, type, className) {
this.node = node;
this.type = type;
var replacer = new RegExp('(^|\\s)'+className+'(\\s|$)', 'g');
this.activator =   function(){ node.className += ' ' + className; };
this.deactivator = function(){ node.className = node.className.replace(replacer, ' '); };
node.attachEvent(CSSEvents[type].activator, this.activator);
node.attachEvent(CSSEvents[type].deactivator, this.deactivator);
}
CSSHoverElement.prototype = {
unload:function() {
this.node.detachEvent(CSSEvents[this.type].activator, this.activator);
this.node.detachEvent(CSSEvents[this.type].deactivator, this.deactivator);
this.activator = null;
this.deactivator = null;
this.node = null;
this.type = null;
}
};
return function(node, type, className) {
if(node) {
return CSSHover.patch(node, type, className);
} else {
CSSHover.init();
}
};
})();
// ]]>
</script>

Internet Explorer 6 & 7

CSS

foo {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

of

foo {
filter: alpha(opacity=80);
}

Internet Explorer 8

foo {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Meer info

Meer info over opacity voor ander browser kan je in deze CSS Snippet vinden.

HTML

<!--[if IE 6]>
hier komt de css voor IE6
<![endif]-->

CSS

.foo {
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='afbeelding.png', sizingMethod='scale');
}

Belangrijk

Het pad naar de afbeelding in de CSS, is ten opzichte van het HTML document, niet ten opzichte van de CSS.

Voor moderne browsers

HTML

<div id="fixed">DIV in position: fixed;</div>

CSS

#fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px;
background: gray;
}

Voor Internet Explorer 6

HTML

<div id="fixed">DIV in position: fixed;</div>

CSS

<!--[if lte IE 6]>
<style type="text/css" media="screen">
#fixed {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
}
</style>
<![endif]-->

HTML

<p id="content">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

CSS

#content {
    height:auto ! important;
    min-height:200px;
    height:200px;
    border: 1px solid #999;
}