00:00 Here, we have a simple div that is being styled using TypeStyle. For example, we can use TypeStyle to bump up the font size to 30 pixels, and we can set the background color to an RGBA value. With CSS, you sometimes need to provide fallback values for all browsers.
00:22 As an example, you might want to provide a graceful fallback for browsers that do not support the RGBA CSS function. In raw CSS, you would simply duplicate the CSS key-value pair -- in our case, the background-color key -- and write the fallback value, followed by the graceful upgrade value.
01:06 In order to support graceful fallbacks, TypeStyle allows you to provide an array instead of a single value for a CSS property. For example, I can go ahead and cut this RGBA value and use it as a singleton within the array.
01:22 Now, we get the opportunity to duplicate this value, providing the graceful upgrade, preceded by the fallback value. This gives us the same behavior as raw CSS because TypeStyle will essentially generate the same style sheet.
01:40 Another kind of fallback needed in CSS is vendor prefixing. For this purpose, TypeStyle allows you to provide keys with a dash in them. All dashes are preserved by TypeStyle when generating the CSS. For example, we can add smooth touch scrolling support for all iOS devices using the -webkit-overflow-scrolling property, and setting it to touch.
02:04 You are encouraged to move stuff with vendor prefixes into semantic names. For example, I can move the scroll handling into a variable. I'll bring in types from TypeStyle, create a new scroll mixin variable of type nested CSS properties.
02:20 I will go ahead and paste in the -web-overflow-scrolling handling that I copied previously, and also specify that the element should show a scroll bar automatically if required. Now, I can use the scroll object as a mixin whenever I need smooth touch scrolling support.