3/31/08
7:06 am

Testing New Safari 3.1 Features

The following is a test of the transitions feature new to Safari 3.1. Here is the style tag that makes the first test possible:

<style>
div.FadeTest {
  border: 2px solid black;
  width: 100px;
  height: 40px;
  opacity: .25;
  -webkit-transition: opacity 1s linear;
}
</style>

Then each of the following boxes uses HTML code that looks like this:

<div class=FadeTest onmouseover="this.style.opacity = 1;"
onmouseout="this.style.opacity=.25">
Box 1.
</div>

Roll over the boxes to see them transition to full opacity. This will only work if you are using Safari 3.1, of course.

Box 1.
Box 2.
Box 3.

The following is a test of the Web fonts feature new to Safari 3.1. Here is the style tag that makes this test possible:

<style>
@font-face {
  font-family: "Flames";
  src: url(http://macmost.com/macmost/Flames.ttf) format("truetype");
}
div.FontTest { font-family: "Flames"; font-size: 36pt; }
</style>

Then the class FontTest is used to create this div below. It will use the special font, which is most likely not on your computer. This will only work in Safari 3.1, of course.

This is a test.

This is a test of the new <video> tag. It looks like this:

<video
src="http://blip.tv/file/get/Macmost-MacMostNow61MacMostIPhonePages569.mp4"
controls width=320 height=180></video>

Here it is in action: