CSS Filter Generator for full compatibility with Internet Explorer

Looking for suggestions on a CSS generator that supports writing image filter declarations in IE syntax, along with web-kit and filter compatibility.

The specific properties I would like to replicate in IE are:

    filter: grayscale(1) contrast(1) brightness(1);
    mix-blend-mode: luminosity;
    opacity:.5;

    filter: invert(42%) sepia(39%) saturate(2795%) hue-rotate(350deg) 
    brightness(100%) contrast(90%);

Any assistance in translating these properties or providing references would be highly appreciated.

cssinternet-explorerfilter

Answer №1

For an efficient solution to adding prefixes to your code, check out this autoprefixer tool created by ymatuhin.

If you want to learn more about vendor prefixes and their importance, take a look at this informative article by Prefixr.

Answer №2

Grayscale doesn't seem to be compatible with Internet Explorer.

If you're looking for a solution, check out this helpful page

One workaround could be adding an additional div positioned absolutely for IE, covering the element with a background opacity.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you recommend a resource that provides a comprehensive breakdown of which CSS elements are compatible with each internet

Can anyone recommend a comprehensive resource, such as a book or website, that provides a complete list of CSS elements and their compatibility with the major web browsers? Specifically, I am interested in information regarding compatibility with IE8 and F ...

htmlcssbrowsercross-browser

Tips on modifying classes within specific sections of HTML tables

I attempted to create calendar-like tables, In my script, I am trying to handle events being registered. My goal is to change the classes of cells from 2 to 5 when they are clicked on, and change the cell colors from first to hovered to aqua. For this p ...

javascriptjqueryhtmlcss

Achieving a tidy layout with child divs inside a parent div

I'm struggling to figure out how to arrange objects with margins inside a parent div. Initially, I thought using float would do the trick, but I quickly realized it wasn't the solution. This results in an unsightly amount of space. The divs that ...

htmlcss

Semi-fixed positioning with flex layout

I am encountering an issue with angular's flex-layout. I have implemented two divs with fxFlex, each containing a mat-card. My goal is to keep the right mat-card vertically fixed while maintaining responsive behavior when resizing the window. Does any ...

angularcssflexboxangular-flex-layout

Site optimized for mobile devices

I need to create a website that is optimized for mobile devices like Android, iPhone, and Blackberry, as well as desktop and tablet. The screen resolutions of these devices can vary greatly. My supervisor has suggested developing one site that can adjust ...

phpcss

What is the method for adjusting the subheader color on a Material UI card component?

How can I change the subheader text color to white in a Material UI Card with a dark background? Here is my code: const useStyles = makeStyles(theme => ({ menuColor: { backgroundColor: theme.palette.primary.main, color: '#ffffff', ...

cssreactjsmaterial-ui

Items in a CSS masonry container with a 'column count' feature showcasing drop shadows that elegantly span across multiple lines

I've been experimenting with CSS column count to create a masonry effect for my items. Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the dr ...

cssdatagridtwitter-bootstrap-3

Styling HTML Select Box Options

My goal is to display the user's name and email within an option of a select box: <option>Adda <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caabaeaeab8aafb2aba7baa6">[email protected]</a></option& ...

javascripthtmlcssdrop-down-menu

CSS search icon malfunctioning

Within my CSS, I have included the code snippet below: #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; ...

htmlcss

iOS Safari: Full-width header with fixed position exceeding viewport width

Encountered an issue specific to Safari on iOS. Creating a page with a fixed position header that spans the width of the viewport. The content consists of multiple images that should scroll horizontally while the header remains in place during scrolling. ...

htmlioscsssafari

Dynamic header that adjusts to fit window size fluctuations

I'm currently working on a website and trying to make it responsive by adjusting to changes in the browser window size. I'm having trouble changing the header height based on the window size unlike how it works for my pictures in CSS: #l ...

javascriptjqueryhtmlcssresize

Creating a dynamic webpage: Adjusting image sizes to match changes in outer div dimensions

Currently, I am working on a web page that will feature several small images. My goal is to display these images in two columns and have them adjust their size as the window dimensions change. Feel free to check out my jsFiddle: Upon resizing the window, ...

htmlcssresizeresponsive-design

Utilize the .not() filter function in JavaScript

I am trying to apply a filter of not(.pseudo-element) using JavaScript, but I am unsure how to add it. So far, I have been able to extract #app from the DOM with the following code: const app = document.getElementById('app') app.style.filter ...

javascripthtmlcss

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

Creating a page turn effect during the loading of a page within an iframe

Is there a way to create a page turn effect similar to reading a book for an iframe that is loading dynamic content? Any suggestions would be greatly appreciated. Link: ...

jqueryhtmlcss

Firefox fails to trigger HTML drag event

After successfully implementing draggable header columns on a table using Chrome as my browser, I encountered an issue when testing it in Firefox (version 17.0.1). It seems that the drag event does not fire in Firefox, although the dragstart event does. ...

javascriptcsshtmlfirefox

Bootstrap - Unintentionally triggering automatic scrolling on the page

Recently, a strange issue has started occurring on my website. I haven't made any changes to the index that could have caused it. When using the regular web address, the page automatically scrolls down. But when I type in www.domain.uk/#, everything w ...

htmlcsstwitter-bootstrap

Please include text beneath the input group addon class

Hey everyone, I'm facing some issues with my layout. Whenever the input fields are empty or null, I encounter errors. I want to ensure that the input text and input group addon have equal heights. Also, upon clicking the submit button, I use jquery/aj ...

javascriptjqueryhtmlcss

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

javascriptphphtmlcsshead

What is the best way to distinguish the Footer from the Content?

While I was honing my skills in crafting a website using only HTML and CSS, I encountered an issue. I couldn't figure out how to place the footer beneath the content properly. My goal was to clearly separate each section - header, content, and footer. ...

htmlcss