When I dig through all the CSS3 toys, I ask myself several questions:
How can I use it?
What need does it fill?
How can I work around it for browsers that don’t support it?
I am having trouble with justifying using width:calc()! It is not that it is not needed; IE6 needs it badly; And, coding for other browsers to include non-standards IE6 needs it. But IE6 does not support it!
So when IE6 leaves the picture we have a standard compliant browsers. In a standard compliant world we have padding-left:fixed value and width:100% and absolute:position to overlay content from another divide onto the padding-left space. It works and with or without width:calc() I use two divides and a wrapper, which is the parent document or a parent divide. In other words I only need width:calc() on the browser where overlays do not work to standards and does not support the property as a fix.
To design for IE6 I need <table width=”100%”><td></td><td width=”fixed?”></td></table> something that should make even a hobbyist say, “No! don’t do it!”
Specifically IE6 has a problem with hiding other content on a <div style=”position:absolute; top:0px;width:100px; float:right”> This should fill a 100 pixel area on the right part of the screen – it does but it blocks the content on the left part of the screen. z-index can correct it when used only with IE6 as IE6 implementation is different and breaks other browsers.