Apr 17, 2020 Apple’s Safari browser (based on Webkit) is really the only choice on iOS, for example. Still, it’s concerning. Let’s take a look at the four major options—Chrome, Edge, Firefox, and Opera. ::-webkit-scrollbar-thumb — the draggable scrolling handle.::-webkit-scrollbar-track — the track (progress bar) of the scrollbar.::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
Firefox is the anti-google browser. Sure it may look similar to it just like all other modern web browsers, but it is the last widely used web browser to not be based on chromium and its WebKit engine (it uses its own Gecko engine). This makes for a much more private and secure browsing experience as google cannot steal your data. The -moz-appearance and -webkit-appearance properties are non-standard versions of this property, used (respectively) by Gecko (Firefox) and by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support -webkit-appearance, for compatibility reasons.
- published:
- 2009.02.17
- topics:
- css
- javascript
- mobile
WebKit based browsers like Safari have had CSS Transforms for quite awhile now, allowing developers to skew, translate, rotate, and scale HTML elements or the entire page with CSS alone. The Firefox 3.1 betas also now have CSS transformations. These CSS properties can also be animated with JavaScript, although finding documentation for how to do it in Firefox 3.1 was a bit of a hassle. Let me show you how it is done.
Update: CSS Transforms are now available in Safari, Chrome, Firefox 3.5+, IE9+, and Opera. Check out my patch that enables setting and animating CSS Transforms with jQuery.
Quick Review of the Basics
First, a quick rundown of the properties themselves. For WebKit, the CSS property is -webkit-transform and for Firefox the property is -moz-transform. (Update: For IE9 the property is -ms-transform.) These are browser specific implementations of the draft CSS3 property transform. The value for these properties should be a list of transformation functions which will be applied to the styled element in order. Some of these functions include skew(), translate(), rotate(), and scale(). Refer to the CSS Transform announcements from WebKit and Mozilla for more information. A short example using these properties without animation follows. If you are using Safari, Google Chrome, WebKit, Firefox 3.5+, or IE9 (Platform Preview 7+) the box in the center should look like the screenshot.
Lorem ipsum dolor sit amet.
Finding the Transformation Properties in the DOM with JavaScript
In order to animate these CSS Transform properties with JavaScript, we need to find the HTML element whose CSS properties we want to animate in the page DOM, and then find the specific CSS properties we want to change in the DOM node.
Firefox Webkit Css
WebKit in particular makes this very easy. The transform properties can be accessed in a variety of ways. Webkit and Safari users should see 3 rotated boxes.
This is tdiv2.
Firefox 3.1 turns out to be more stubborn and requires case sensitivestyle.MozTransform (or the equivalent style['MozTransform']). Firefox 3.1+ users should see a single rotated box.
It wasn't actually until after I found this quirk about Firefox that I realized WebKit even supported style.WebkitTransform, so in the meantime for Firefox I was trying style.mozTransform and style['-moz-transform'] — neither of which work! I couldn't actually find any information online about what the CSS Transform property was named in the DOM nodes for Firefox, and I almost had myself convinced that you couldn't change it via JavaScript. But, I was very determined, so I dipped into the Firefox 3.1 source code, and I found my answer on line 9 of this diff file.
Update: For IE9 (Platform Preview 7+), the JavaScript property for CSS3 transforms is msTransform.
Deciding Which Property to Use
If we want our animations to work in both WebKit and Mozilla browsers then we need a method to detect whether we should be using the property MozTransform or WebkitTransform. We also want to build in some forward compatibility by checking to see if the CSS property transform is defined. Here is a straightforward method of detection to best demonstrate the concept:
(Updated to show support for IE9 and Opera.)
Animating the CSS Transformations with JavaScript
Now that we have a way of identifying which CSS Transform property to modified for the current browser, we can animate that property. The most basic example of animation is a persistent change over a timed interval using the JavaScript built-in function setInterval().
Moving on to more complex animations, or animations based on user action, quickly becomes more difficult. As I'm sure you already have noticed, many JavaScript libraries have popped up over the last several years — jQuery, Prototype, and YUI just to name a few — and they all tend to deal with the tricky subject of event based animations their own way. The animation tools for my current JavaScript library of choice, jQuery, sadly fail us when it comes to CSS Transformations. The following code samples do not work as expected:
I have filed a feature request. Hopefully, when jQuery supports these CSS properties it will internally make the distinction between MozTransform and WebkitTransform. In the meantime I may explore some plugin options. Update: Check out my jQuery patch that adds support!
Animating CSS Transformations with CSS Transitions
One thing that WebKit based browsers like Safari and Chrome currently have that even Firefox 3.1 doesn't have yet are CSS Transitions. This powerful tool lets you create animations in and out of the CSS :hover state, for example, using pure CSS and no JavaScript. Here are a couple quick demos best enjoyed in WebKit or Safari:
Firefox Webkit-search-cancel-button
This is tdiv7. Hover for 'Cinema Newspaper' effect.
Linux Webkit Browser
These properties have a lot of potential for subtle user visual feedback, and also for richly interactive web content. Of course, they could also quickly become far more annoying than even <blink> or <marquee>. With CSS Transforms still only available in beta versions of Firefox, and not available in Internet Explorer, they currently have limited practical use. With Safari being the exception to the rule here, iPhone web apps are one place where these CSS3 draft properties can shine.