MacMost Now 62: New Safari 3.1 Features

Gary Rosenzweig takes a look at what is new in Safari 3.1, including style-sheet animation, embedded Web fonts and the video tag.
You can also watch this video at YouTube (but with ads).
Video Transcript: Hi this is Gary Rosenzweig.
Not too long ago, Apple introduced Safari 3.1, a small upgrade to our favorite browser. This upgrade included a couple of new features that are worth taking a look at. Lets do that on this episode of MacMost now. 
The 3 features I'm talking about are embedded fonts, the ability to use video and audio tags in your web pages, and also the ability to do transitions with some of the elements on your page. Lets take a look at each one with an example. 
First lets take a look at transitions, so transitions are basically little style tags using css and they allow you to go ahead and add some simple things like fades or rotations. So for instance here we've got a style tag that adds a FadeTest class and this one we'll put an opacity of .25 here, one quarter opacity. And we'll basically do a linear transition of one second. To activate this transition, all we need to is use onmouseover and onmouseout. Now we can set the opacity to something different like 1 or .25. Now if you're not a web designer don't worry about it, here's the result which is what you'll be more interested in. Here's three boxes and they're kind of faded Grey boxes, but as you roll over each one they will come into focus, like that. So this will allow our designers to create interesting interfaces. You can also rotate boxes and do all the things to them like changing the colors and have them smoothly transition say from one color to the other. So this will really up the ante in terms of what you can do with cool web 2.0 interfaces using safari 3.1
Next lets look at embedded fonts. So you can see here I've got a piece of text here that uses an extremely weird font. Now this font is not on my machine and its probably not on yours either. But it doesn't matter because we're gonna use another style sheet definition here to describe our font, give it a font family name, a url to the TrueType font then we actually describe the div tag FontTest to use that font and we're using it at a large size just to demonstrate. Then this tag down here is simply using that class in just displaying this font. so again if you're not a web designer the important thing to know is that you can actually have web pages now that display interesting fonts and you don't have to have those fonts in your machine. So websites now is no longer restricted to just fonts that everybody has on all their machines. At least not for safari 3.1 users.
Now safari is also the first major to go with a new part of HTML that allows for video and audio to be embedded in web pages. Now of course we already see this all the time, its usually using the embed or object tag of internet explorer, is embedding usually flash or quicktime movies using the embed tag. but we've had an image tag for a long time since the beginning so why not add a video tag and an audio tag. well safari 3.1 is the first major browser to add these. So what we've got here is an example of a video tag and it basically specifies the video, which is in this case mp4, quicktime movie, really. And a width and a height and then its gonna use controls. And there we go, we've got a video embedded in very simply without having to add an embed tag. The only problem with this of course is that it will work with quicktime type movies not with flash video, which of course is the majority of web video, like stuff that's seen on youtube, you still have to use the embed tags for those.
Audio files work a little bit better as they should work with just about any audio format in a similar way.
Now of course this all academic kind of. I mean, if you're a web developer, you're probably not gonna use any of these things because you want your content to work on both Mac and Windows and you also want it to work in the cross platform, Firefox browser. Microsoft Internet Explorer and Firefox don't support any of these, so of course you're only gonna use them in cases, where you know the user is using safari. 
But in cases like our website we might get a chance to use them cause we know that most of the people that come to our site are using safari, and these things depreciate well. By that i mean, if you try to use say some the transitions, the transitions simply won't work if you're not using safari 3.1 . The elements will still be there, they may not fade in or fade out or rotate or whatever. so it's still a chance for us to use special effects for safari 3.1 users, while having pages that work perfectly fine for anyone else. The larger picture is that if safari 3.1 supports these then perhaps the other browsers will follow. firefox can follow very quickly and very easily with some of these because its an open source browser. Internet Explorer might take some time, but eventually we might see support for some or all of these in all browsers.
And of course since the Safari browser is the browser of the iphone, we may see some of these on websites specific to the iphone. For instance the embedded fonts can be very handy as you can't really install fonts on the iphone. So the ability to embed special fonts in a web page and have them work on the iphone will be a great plus for iphone web developers. Until next time, this is Gary Rosenzweig with MacMost Now.
MacMost Now 62: New Safari 3.1 Features

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information
