Tag Archives: CSS3

Thoughts on CSS width:calc()


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!”

I like the property though. I just can not honestly see where I need it. For Javascript makes it possible to change one value instead of two — which can lead to smoother animations — But for attractive animations many properties need to be changed at the same time anyway.

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.

Advertisements

width: calc(100%-300px)


CSS calc appears to be supported in the plans for both firefox and IE new releases. Nothing is yet known about Webkit, Chrome and Opera support time frames.

Where this is needed is in floating design styles which have a fixed width element that must be included. So the last column needs to take all the space that is left over; as it stands now the floating element only takes up the space it needs or is given. The background of the element does not extend all the way to the side. The work around is using layers.

Neon is cool – But the practical reasons for CSS3 shadows


The CSS3 style for neon is: text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

There are more practical reasons for CSS3 shadows – readability. When text is place on images or the contrast color is low the text becomes hard to read. A large amount of all text show on top of video uses a background make it more readable. The shadow is basically a custom background for the text; Shaped to the letter and font … and no where is it written that shadows must be black.

CSS gradients vs images and vs SVG


CSS gradients work in IE based browsers, Webkit (chrome, Apple eg Safarie, Ipod, Iphone), and Mozilla (Firefox) … however they do require different style tags. (see below).

When compared to images: CSS gradients give a little bit of performance increase. An image used for a background gradient is normally very small around 5,000 bytes. Unless there are over 10 gradients being used these images are not going to make much of an impact. These images are downloaded using the same connection that downloaded the HTML so we are only talking about bandwidth savings when the pages are designed correctly.

Animation is a game changer. With jQuery these divides can be animated and the background color itself can be changed / animated.

HTML5 SVG blows away jQuery in its ability to animate graphics … giving CSS gradients a short window of opportunity. SVG is a graphics language with more years in the making than jQuery.

Here is an example of the CSS markup for gradients

.mygradient {
background: -webkit-gradient(linear, left top, left bottom, from(#008), to(#fff));
background: -moz-linear-gradient(top, #008, #fff);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF);

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF)”;

}

Cross browser CSS3 hover on non-anchor tags


All browsers but Internet Explorer handle hover on tags other than the anchor tag; the anchor tag is most often used for links. By using CSS hover one can make for example a drop down menu, by causing elements to appear when the mouse is placed over them; Without, using javascript.

The solution to Internet Explorer lack of hover support comes from a method to extend the functionality of the browser with behavior files.

Peterned created csshover3.htc specifically to allow CSS3 hover to be used today with all browsers. It is used by adding the following to a html page inside a style tag.

body { behavior: url("csshover3.htc"); }

csshover3.htc must be loaded onto the host. … Peterned has directions. An example CSS only menu is also shown. … the behavior program then looks at the CSS of the page and enables hover to work on any style class that is using it.

CSS rounded corners in all browsers


IE does not support CSS3 rounded corners at this moment. However IE does have a method of extending their support for different styles which can be included in the style sheet. These IE style extensions are called behaviors.

On Google code site exists border-radius.htc when this file is uploaded to a site. It can be called using:

<style>
.rounded-corners {
behavior: url(border-radius.htc);
}
</style>

The complete solution would then become …

<style>
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
</style>
<!–[if IE]><link rel=”stylesheet” href=”ie.css” type=”text/css” /><![endif]–>

Note: if the behavior: url address is not absolute it is relative from the browser html page not the css page.