Can this CSS class be made to work in Internet Explorer 11?
.inactive {
filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28);
}
I attempted to implement the SVG grayscale filter but it was unsuccessful, causing issues in commonly used browsers. "Avoid using IE11" may be a common recommendation, but it is not a practical solution in this particular case.
When targeting specific styles for Internet Explorer 10 and 11, you can utilize the -ms-high-contrast media query provided by Microsoft. This particular media query will only be recognized in IE 10 and newer versions.
The -ms-high-contrast media query has two values: none and active. To ensure your CSS styles are applied to IE10+ regardless of the property's setting, you can use the following media query:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* Apply your IE10+ specific CSS styles here */
}
In the past, Internet Explorer versions 4.0 to 8.0 had a non-standard "filter" property that is now deprecated, IE 11 no longer supports this property.
To achieve greyscaling in IE 11, you could utilize an SVG overlay. Here's an example:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
svg {
background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
svg image:hover {
opacity: 0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>
</body>
(source: )
Simplified JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/
For more information about SVG filters, you can visit this blog post.
If SVG filter doesn't work for you, consider using the CSS Opacity property as an alternative method.
Currently, I have implemented a jQuery script that allows me to preview multiple images before uploading them. Although the functionality works well, I am facing difficulties customizing it to meet my specific requirements. <script> $(document).r ...
I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my sele ...
Looking to create a unique webAPP with different content displays based on how it is accessed. If the user opens the webAPP through their Safari browser Or if they open the webAPP from a webclip on their home screen The detection is functioning, as conf ...
I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...
I'm experiencing an issue with my navbar. I want it to stay at the top of the page when I scroll, but whenever I apply the "position: fixed;" property, the navbar disappears. Below is my HTML and CSS code: <nav> <div class="navbar"> <b ...
Apologies for asking what may seem like a silly question. I'm still new to using AngularJS and recently came across a neat little scroll directive on http://jsfiddle.net/88TzF/622/. However, when I tried implementing the code in the HTML snippet below ...
Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...
For my quiz on test practice with an array of questions, each question includes five radio buttons, but only one is correct. Initially, all five options have a gray background. Upon selecting a wrong option, it changes to red. If another incorrect option i ...
Is there a way to transform white color to red using only CSS, while leaving the rest of the colors unaffected? This should be accomplished without changing any other elements. ...
My approach to creating a row with 9 columns involved using custom CSS to set each column's width to 11.11%, resulting in equal distribution across the row. I then applied the "custom-column" class to populate the row data: .custom-column { widt ...
I'm looking for a way to animate the opening of a div so that it adjusts to the size of its content. The content is fetched from a separate search using .load, which means it could be just a single line (no result) or multiple results that vary in hei ...
https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...
I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...
1) I am encountering an issue with displaying CSS in a form preview tab. Despite setting the CSS, it does not reflect on the fields after clicking the preview button. 2) Are there alternative methods to open the tab in a new window rather than opening it ...
I am currently working on a JSP web application without the support of any framework, unfortunately. This application is intended to serve multiple customers, each with their unique set of colors and company logos. The overall layout of the CSS will remai ...
Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE. Website: SVG File: CSS: -webkit-mask: url("../img/feelfilms-logo.svg#logo_mask"); mask ...
Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...
As I work on creating a web application for personal use, my goal is to ensure it is mobile-friendly. However, I've encountered an issue where the background of my language page isn't displaying in full blue color as intended. Despite trying diff ...
<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...
I am currently learning ReactJS and encountering an issue when using jQuery with React JS for intlTelInput. I have installed npm jQuery and imported all the necessary code. Additionally, I have included all the required CSS and jQuery links in my index.htm ...