MSIE5 added support for CSS expressions or “Dynamic Properties”, however MSIE8 ‘deprecated’ their use and prevents their use in Standards Mode.
While powerful because this allowed you to script your CSS dynamically, there were two primary problems.
REFERENCES:
Even when you’ve used conditional includes, there are often cases where MSIE just will not cooperate with your CSS manipulations. In those cases, it can often be attributed to the hasLayout property of the element. To correct this quirk, setting zoom:1; will often “convince” MSIE to work in the way you expect it to (like other browsers!)
<style type="text/css">
.someclass {
/* your CSS definitions */
zoom:1;
}
</style>
REFERENCES:
Ideally all JavaScript and CSS definitions should be external to the content of an HTML page, in some cases it’s simply not practical. If you’ve migrated to XHTML markup of your page, this can often lead to XML validation errors. The use of a CDATA escape can fix most issues, though you may have to cleanup some of the actual code to resolve other issues, particularly with some special characters that are expected to be encoded.
Here are a few examples of CDATA implementation in HTML tags:
<script type="text/javascript">
/* <![CDATA[ */
...
/* ]]> */
</script>
<script type="text/javascript">// <![CDATA[
...
// ]]>
</script>
<style type="text/css">
/* <![CDATA[ */
...
/* ]]> */
</style>
I recently got into some heavy refactoring of legacy code and in an effort to “fix” some JavaScript that was directly manipulating ‘style’ attributes on a DOM element and thus introducing maintenance and specificity issues I found that it would be “easier” to add a CSS class that I would write dynamically… leading to many headaches along the way and this bit of knowledge.
“For MSIE, you cannot simply write a ‘textNode’ into the DOM for HTML STYLE tags, you must use ‘cssText'”
function createClass(cls,txt){
var obj = document.createElement('style');
if(obj){
var head = document.getElementsByTagName('head')[0];
if(head){
obj.setAttribute('type','text/css');
obj.setAttribute('media','all');
var val = '.' + cls + '{' + txt + '}';
var nod = document.createTextNode(val);
if(obj.styleSheet){// MSIE
obj.styleSheet.cssText = nod.nodeValue;
} else {
obj.appendChild(nod);
}
head.appendChild(obj);
}
}
USAGE:
createClass('noshow','display:none;');
REFERENCES:
As I often find myself cleaning up legacy webapp codebases, this item seems pretty common, particularly for sites that were using TABLE based layouts.
<table cellpadding="0" cellspacing="0">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>
With modern browsers, this is easily accomplished with some simple CSS, as you might need some distinction between different tables or have some cases that require padding or spacing, you MIGHT consider assigning a CSS class as I have below.
<style type="text/css">
table.modern{
border-collapse: collapse; /* 'cellspacing=0' equivalent */
}
table.modern td,
table.modern th{
padding: 0; /* 'cellpadding=0' equivalent */
}
</style>
<table class="modern">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>
I recently found a case where WebKit (Chromium, and Safari) was acting as if ‘overflow-x:visible;‘ was set in cases where text could not be wrapped inside a DIV due to a lack of spaces or hyphenation as it was a java stack trace. In this case I had to explicitly set the ‘word-wrap:break-word;‘ attribute for the problematic DIV.
.breakword { word-wrap: break-word; }
Also, for Unicode languages where there are other rules to complex to describe here…
.wordbreak { word-break: keep-all; }
I’ve recently run into a problem when attempting to create a CSS file for print media because some local JavaScript on the page was manipulating the style attributes on the page. Due to specificity issues, it can be very difficult to “correct” the elements to provide proper output. Here’s a new (to me) trick that I just found.
You can override the local style attribute (and any manipulated at runtime with JavaScript) by adding the the [style] modifier to your CSS declaration.
div#someid[style] {
/* your CSS here */
}
This is an odd MSIE proprietary attribute (‘hidefocus‘) that is used to remove the dotted border (outline) of the focused elements, usually links or images, in the page. Modern CSS is much more robust and should be used in most cases for valid HTML.
The example below requires you to add the class specifically to elements, but your design may allow for you to do so for as elements of larger components of your design.
<style type="text/css">
.hidefocus:focus {
outline: none;
}
</style>
<a href="#" class="hidefocus" hidefocus="true">Some link</a>
NOTE: You should still provide some sort of visual focus mechanism for accessibility purposes, even when you prevent the default behavior.
REFERENCES:
Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.
textarea {resize:none;}
REFERENCES:
MSIE7 and later by default use an image resizing algorithm that means that scaled down images can look blocky and rasterized. To solve this and make them smoother, we simply enable a much better resizing algorithm that is available in MSIE that produces results similar to what you’d expect from most image editing software.
/* bicubic resizing for non-native sized IMG */
<style type="text/css">
img { -ms-interpolation-mode: bicubic; }
</style>