1. postcss-opacity
PostCSS plugin to add opacity filter for IE8 and legacy browsers
postcss-opacity
Package: postcss-opacity
Created by: iamvdo
Last modified: Fri, 24 Jun 2022 10:31:54 GMT
Version: 5.0.0
License: MIT
Downloads: 36,025
Repository: https://github.com/iamvdo/postcss-opacity

Install

npm install postcss-opacity
yarn add postcss-opacity

PostCSS Opacity Build Status

PostCSS plugin that adds support for legacy browser opacity alternatives.

Example

 postcss([
	require('postcss-opacity')
])
 /* Input example */
.foo {
  opacity: .5;
}
 /* Output example */
.foo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .5;
}

Legacy

Support for IE 5-7, Safari 1.X, Netscape

 postcss([
	require('postcss-opacity')({
		legacy: true	
	})
])
 /* Input example */
.foo {
  opacity: .5;
}
 /* Output example */
.foo {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: .5;

  /* Safari 1.x */
  -khtml-opacity: .5;

  /* Modern browsers */
  opacity: .5;
}

See PostCSS docs for examples for your environment.

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code