WebKit on Mac OS X now has support for CSS 3D transforms, which allow you to position elements on the page in three-dimensional space using CSS. This is a natural extension of 2D transforms, which we described in an earlier blog post. 3D transforms have been supported on iPhone since 2.0, and now we’re please to announce that we have currently added support for Leopard and later.
If you want to jump right in and see a demo, make sure you’re running recent WebKit nightly build on Leopard or later, and load this example:
Yes, you set r187880 as the default browser and you use the Webkit app (note the icons for both apps - Safari is a silver trimmed compass, Webkit is gold). There's also an option to install the. (I had the case in Leopard, when some site was not rendering well in Safari and it did well in Leopard Webkit) Reply.
Here’s a screenshot for those not running a recent-enough WebKit (if you are, hover over it for a treat!):
Like many of the examples you’ll see here, this one combines CSS transforms with CSS transitions and animations to great effect.
Full deck solitaire. 3D transforms are applied via the same
-webkit-transform property as 2D transforms. For example, here’s how to rotate an element about the Y (vertical) axis:
There are several new transform functions available for use in the
- translate3d(x, y, z), translateZ(z)
- Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage.
- scale3d(sx, sy, sz), scaleZ(sz)
- Scale the element in x, y and z. The z scale affects the scaling along the z axis in transformed children.
- rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
- The first two forms simply rotate the element about the horizontal and vertical axes. Angle units can be degrees (deg) radians (rad) or gradians (grad). The last form allows you to rotate the element around an arbitrary vector in 3D space; x, y and z should specify the unit vector you wish to rotate around (we’ll normalize it for you).
- This function allows you to put some perspective into the transformation matrix. For an explanation of p, see below. Normally perspective is applied via the
-webkit-perspectiveproperty, but this function allows you to get a perspective effect for a single element, with something like:
- This function allows you to specify the raw 4×4 homogeneous transformation matrix of 16 values in column-major order. Have fun with that!
We’ve also extended one other CSS transform property, and implemented the four other 3D-related properties described in the spec:
-webkit-transform-origin now accepts three values, allowing you to specify a z offset for the transform origin.
-webkit-perspective is used to give an illusion of depth; it determines how things change size based on their z-offset from the z=0 plane. You can think of it as though you’re looking at the page from a distance p away. Objects on the z=0 plane appear in their normal size. Something at a z offset of p/2 (halfway between the viewer and the z=0 plane) will look twice as big, and something at a z offset of –p will look half as big. Thus, large values give a little foreshortening effect, and small values lots of foreshortening. Values between 500px and 1000px give a reasonable-looking result for most content.
The default origin for the perspective effect is the center of the element’s border box, but you can control this with
Here’s an example that shows how perspective works:
The interesting thing about
-webkit-perspective is that it does not affect the element directly. Instead, it affects the appearance of the 3D transforms on the transformed descendants of that element; you can think of it as adding a transform that gets multiplied into the descendant transforms. This allows those descendants to all share the same perspective as they move around.
We’ve described how you can assign 3D transforms to elements and make them look three-dimensional with some perspective. However, so far, all the effects are really just painting effects. Those transformed children are still rendering into the plane of their parent; in other words, they are flattened.
When you start to build hierarchies of objects with 3D transforms, flattening is not what you want. You want parents and children to live in a shared three-dimensional space, and to all share the same perspective which propagates up from some container. This is where
-webkit-transform-style comes in.
Leopard Webkit Pro
-webkit-transform-style has two values:
flat: This is the default value, and gives the behavior described above; transformed children are flattened into the plane of their parent (think of the 3D transform as simply a painting effect).
preserve-3d: This value states that the element to which it is assigned does not flatten its children into it; instead, those children live in a shared 3D space with the element.
Here’s an example that shows transform-style in action:
A common pattern, therefore, is to have content that looks like this:
Here both ‘leaf’ and ‘box’ share the same 3D space, so both appear with the perspective specified on the container. ‘box’ can also be rotated with a transition or animation, and ‘leaf’ will move around as ‘box’ moves, in perspective.
One thing you may have noticed in these demos is that it’s quite common to have a 3D transform that flips an element around so that you can see its reverse side. In some cases you don’t want the element to appear at all in this situation (say, for example, you want to position two elements back-to-back, so you need to hide the one that’s facing away from the viewer). This is the reason for the last 3d-related property,
-webkit-backface-visibility. Its two values—
visible (the default), and
hidden—specify whether the element is visible or not when that element is transformed such that its back face is towards the viewer.
Here’s a final example that shows backface-visibility in action, along with more 3D goodness, animations and transitions:
For more information, see the CSS working drafts on 2D transforms, 3D transforms, transitions and animations. There is also documentation in the Safari Reference Library.
We hope you have a blast with these new features, and share your creations with us. If you find bugs, please report them at bugs.webkit.org.
2013 – A while back, I explained why TenFourFox is without a doubt the best browser option for anyone running Mac OS X 10.4 Tiger on a PowerPC Mac. Today I follow that up by looking at two contenders for the best browser on OS X 10.5 Leopard.
Safari is a perfectly competent browser, and Leopard supports Safari 5.0.6, which is a step forward from version 4.1.3 on Tiger. And if you want a version of Safari that’s a bit more up-to-date, there’s the experimental Leopard WebKit project, which lets you run Safari with an updated version of WebKit (currently r134862, where it’s been for a long, long time).
Safari supports lots of other extensions, although for some reason Apple doesn’t let you search them.
Best of all, Safari on Leopard supports LastPass, a great free password manager for modern Macs and PC and Linux systems that also supports OS X 10.4 (but only with TenFourFox) and 10.5 (with both Safari/WebKit and TenFourFox/Aurorafox). There are also iOS and Android versions, although they are not free.
By downloading the AdBlock extension, you can get rid of a lot of the ads that clutter up pages and slow load time, although we should remind you that these ads are a big part of what keeps most of the Web free.
Another useful Safari extension is ClickToFlash, which prevents Flash content from loading, replacing it with a placeholder. If you click on the placeholder, you can access the Flash content, assuming it’s compatible with the version of Flash on your Leopard PPC Mac (The last supported version is Flash 10.1, although there is a workaround that sometimes does the job.)
TenFourFox and Aurorafox
These two browsers are brothers under the hood. TenFourFox is an adaptation of Firefox 17 for PowerPC Macs, with two different G4 versions (if you’re running Leopard on a G4, you’ll probably end up using the 7450/G4e version) and a G5 version, so any PPC Mac running Leopard can run it. The current version of TenFourFox is 17.0.7.
Aurorafox is based on the same code as TenFourFox 17.0.2, so it’s a bit older and a bit less secure, and it’s compiled specifically for OS X 10.5 Leopard, where TenFourFox will also run on OS X 10.4 Tiger. This gives Aurorafox some advantages, particularly in displaying text, as it can take advantage of improved graphics routines within Leopard.
Aurorafox is also available with an alpha build of Firefox 20, and TenFourFox currently has a development version of Firefox 22, but for stability, stick with the polished release version 17.
As offshoots of Firefox, TenFourFox and Aurorafox can use the same extensions. I have essentially the same capabilities as mentioned with Safari using LastPass, Adblock Plus, Flashbock, and NoScript.
Safari Takes Third Place
Leopard Webkit Vs Tenfourfox
Safari for Leopard is very outdated in terms of features, speed, and security, while Firefox (and hence TenFourFox and Aurorafox) remain under development.
Further, Safari doesn’t support full page mode. That may not sound like much, since no software written in the Leopard era supports full page mode, but TenFourFox and Aurorafox are modern browsers that do support full page mode. On a big display, it’s not such an issue, but the smaller your screen, the more you’ll relish it. Browsing on a 12″ PowerBook G4 with its 1024 x 768 pixel display is much better in full page mode. Much, much better.
TenFourFox Takes Second Place
Although the functionality is virtually identical between TenFourFox and Aurorafox, Aurorafox is optimized for OS X 10.5 Leopard and much less demanding of your old PPC Mac’s limited resources. It’s a perfectly good browser, but why not use the more efficient alternative?
Aurorafox Takes Top Honors
And so we crown Aurorafox as the best browser to use with Mac OS X 10.5 Leopard. It does everything TenFourFox does, does some things better than TenFourFox, and is nearly as secure.
The Camino browser, an early merging of the Mozilla/Firefox engine with Mac OS X graphics routines, remains eminently usable, although it hasn’t been updated in years and is probably the least secure browser you’re likely to consider. That said, it’s fast and efficient. It has taken a back seat in my daily use, but that’s only over the past year, and it continues to be very useful as one tool in our process of migrating old Low End Mac content to WordPress.
Opera remains in use by a small percentage of the market, showing up at about 1% in our site analytics, which gives it 5th place among desktop browser and 4th place on Macs. That’s about the same level as the Android browser found on smartphones and tablets, and a good 50% higher than Camino’s current share. Opera 10.63 is the last version compatible with OS X 10.5 and PowerPC Macs.
Webkitplugin Windows 10
Just because something comes with your computer doesn’t mean it’s the best solution. Just as Internet Explorer became a malware magnet on older versions of Microsoft Windows, Safari for Leopard has fallen far behind in the security department. Nor does it have modern features such as full screen mode, which is wonderful on smaller displays.
In the end, there are lots of options, so try a few to see which fit your needs and style. And if Leopard on PowerPC still rocks your world, be sure Aurorafox is one browser you give a try.
Keywords: #tenfourfox #bestmacbrowser #aurorafox
Short link: http://goo.gl/3eBtpx