Widget - CSS properties ignored

[s_lefebvre]

Hi,

I have a problem with my CSS on a custom widget.

When I write this CSS code to my widget :

.desaturate {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.desaturate:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.panel-app:hover {
  -webkit-filter: brightness(97%);
  filter: brightness(97%);
}

The page is loaded with only this CSS : 

<style type="text/css" id="v296d731bdb2453c03ca3f9c41d961988-s" widget="U Store - Applications">
.v296d731bdb2453c03ca3f9c41d961988 .panel-app:hover {
	-webkit-filter: brightness(97%);
}</style>

At start, I think CSS property "filter" was ignored but it doesn't work with "-webkit-filter: grayscale...".

Where is the script to ignore these properties ? And why these properties are ignored ?

Thx

[brianclauzel]

I am also experiencing the same issue, not being able to use the filter style in my SP

Theme. If anyone knows what is causing css to ignore this and not allow any styling

after the filter is read, I would really appreciate an explanation. Thanks!

[brianclauzel]

I figured out a way around this issue. 

You need to use "-webkit-filter: unquote("grayscale(100%)");" for your filter to work. I didn't try just "filter" or any other variation for different browsers, but I'm pretty sure they would work fine with this method.

this is my css:

.top-content {
-webkit-filter: unquote("grayscale(100%)");
-webkit-transition: -webkit-filter ease 1s;
}

.top-content:hover {
-webkit-filter: unquote("grayscale(0%)");
}

And here is a screenshot of what this would look like:

[Brian Workman]

Hi Brian! It's Brian! A different Brian from the future!

You can still use `filter` (I hate using prefixed properties!)!

It's, ok, well, it's a little bit ew, but, it works! You can interpolate the filter property, like so:

`#{'filter'}: unquote("blur(500px) invert(75%) drop-shadow(16px 16px 20px blue)");`

And then you don't need to use the prefixed filter.

It is a pick your poison, of course, but, prefixed properties are not really guaranteed to stick around, and I suspect the SASS interpolation trick should continue to work.

[Barrilito van D]

Hi, I was wondering, the css that you used and what you say that is being loaded differs quite a lot. It looks like all styling in the "desaturate" class is not being loaded. So despite the dicussion on filter and web-kit filter I was wondering more about why or what the reason is for the styling to dissapear.  I do know that desaturate is a scss function, so perhaps you can not use that as a class name?  Could you perhaps test this and give it another classname in your code and in your style?  And what happens if you move this styling out of your widget to the stylesheet of your portal page?  Curious...

Regards!

[s_lefebvre · Accepted solution]

2 years later working with widgets, it seems css not understanded by Servicenow is just ignored.