| 20 | Using Cross-Browser Opacity |
We saw how browsers can be awkward in the previous task, needing different ways to define rounded borders. However, the differences don’t stop there. Changing the opacity of something is simple in Firefox, Safari, and Opera because of this handy function: opacity. Opacity in most browsers is defined from 1, meaning fully opaque, to 0, meaning completely invisible.
Life’s never so simple, though. Internet Explorer requires us to use a different method—something called filter. It takes a value between 0 and 100 instead, in this style:
| | filter: alpha(opacity = 60); |
Depending on how you view opacity, either the 0--1 or the 0--100 scale can be more logical. It’s pretty easy to convert between the two.
| What To Do... ... |
Get Pragmatic Guide to Sass now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
