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.
Just starting out with css, trying to get some practice. I'm attempting to position two divs on opposite sides of a parent div. Switching flex-direction from 'column' to 'row' causes the divs to disappear. #assignments-wrapp ...
My usual practice is to organize the rules in my CSS file to align with their corresponding elements in the HTML code. However, when it comes to global rules such as styling for input,textarea,p,tr,th, and so on, I wonder if there is a specific convention ...
Good evening. I am currently utilizing VUE along with MaterializeCSS. I have been trying to populate a selection menu without success. Although I am receiving the data from the database correctly, the options in the select tag remain blank when using V-F ...
Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...
I'm starting to feel frustrated with this situation... I have a solution where the CSS background is coming from a webservice. Currently, the system refreshes the entire page using HTML: <meta http-equiv="refresh" content="300" /> ... body { ...
Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside. For instance, the Page1.vue file is structured as follows (omitting style and scr ...
I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...
Despite spending hours reading numerous online sources, I am still struggling to fully grasp the CSS/HTML box model. Specifically, I am attempting to create sections with a ratio of 3:2, where 3 represents the width and 2 represents the height. https://i.s ...
Looking for a way to... <core-scaffold id="core_scaffold"> <core-header-panel mode="seamed" id="core_header_panel" navigation flex> <core-toolbar id="core_toolbar"></core-toolbar> <core-menu valueattr="label" ...
I am facing a challenge in creating a group of images for an album. There seems to be a significant gap on the right side, which cannot be resolved without using padding. However, adding padding only works for my current PC resolution and creates a larger ...
I found this code example here and decided to implement a collapsible panel using css/html/javascript: function toggleCollapsibleSectionWithAnimation() { this.classList.toggle("collapsible-active"); var buttonId = this.id; var sectionId = buttonId ...
Working with Angular 9 and ngx-toastr has presented me with an interesting challenge. I am tasked with creating custom toast styles that differ significantly from the default ones provided by toastr. Each toast in the set will have unique border colors, f ...
i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...
While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...
Upon visiting using IE7, you may notice that the two middle columns are being pushed down to the bottom of the page. I have attempted to resolve this issue by applying display:inline to both columns without success. Any assistance on this matter would be ...
I'm struggling with a design issue on my site where I have four divs in the center, each represented by a box with a box-shadow. Unfortunately, the colors of the shadows are getting mixed up and creating an unwanted effect. https://i.sstatic.net/NdAUB ...
I need to display a tooltip on the button when the search field is empty. Here is what I have attempted: // Enable hover feature const searchBtn = document.querySelector('.find__btn'); searchBtn.addEventListener('mouseover', () => ...
I am looking for a JavaScript function that will add the class "current_highlight" when an element with the class "activo2" also has the class "active". Here is my HTML code: <div class="navbar-header"> <button type="button " class="navbar-to ...
I am utilizing a Material UI Table. This is how I construct it: tableValues.map((curRow, row) => { tableRows.push( <TableRow key={this.state.key + "_row_" + row}> {curRow.map((cellContent, col) => { let adHocProps ...
I am currently exploring the use of JPList to sort on multiple items. As it stands, JPList searches like 'AND' when sorting (e.g. sorting based on an item with tags html, php and jQuery all together), but I am interested in filtering through all ...