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:
I’ve been a huge fan of the ‘final‘ modifier in Java for function arguments and variables. While there’s some debate on their usefulness for performance, they definitely add in readability and understanding of code as developers are instantly notified by modern IDE’s and when they try to reassign such values as the compiler will indicate the error.
NOTE: Use of final for classes or functions often contradicts the paradigm of Object Oriented programming as you’ll be restricted from extending or overriding those items!
In my testing, you don’t need to fully embrace HTML5 markup to take advantage of the “offline” functionality, you simply need to add the attribute and related files to your existing website/page. Any modern browser that supports HTML5 should automatically recognize the offline content and use it when appropriate, unfortunately no version of MSIE yet supports this.
<html manifest="/offline.appcache">
In that file, you must then specify the offline behavior, something like this is a good start:
CACHE MANIFEST
#This is to provide minimal HTML5 offline capabilities
#MIME mapping must be 'appcache=text/cache-manifest'
#Reference to this file is per page, you can have different ones in an app.
#Common image files and css may be 'cached'
CACHE:
/index.html
/css/offline.css
NETWORK:
*
FALLBACK:
/ /offline.html
On the server side, you’ll have to serve up that file with the appropriate MIME type (text/cache-manifest, for ApacheHTTPD you simply need to add one line to httpd.conf:
AddType text/cache-manifest .appcache
REFERENCES: