Use fallback values in TypeStyle for better browser support
You can increase the browser support of your CSS using fallback values and vendor prefixes. This lesson covers using vendor prefixes and fallback values (single prop multiple values) with TypeStyle. It also shows best practices for maintaining variables in the presence of vendor prefixing.
[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.
[00:49] With CSS in JS, because of the way JavaScript works, you can have a given key -- for example, background-color -- only once. Since we are using TypeScript, it will even complain if you try to duplicate a key by mistake.
[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.
What about using postcss with auto vendor prefixes? Manually setting all vendor classes and fallback is not cool.