Develop Reference

Fallback Backgrounds when Image is missing

I want to have a fallback Background only if the Image that is supposed to be the Background is missing.
This is what I got:
background: url(\'img/items/image.png\') , url(\'img/items/fallback.png\')
But in this case both backgrounds are shown at the same time.
Don´t know why.

As you can notice from the comments under your post, there is no such thing as a fallback but you always can find a way to solve the problem. Also keep in mind that sometimes when you come up with an unusual solution there is always be a price: performance, readability, etc.
For your situation I can suggest some ideas how you can solve that:
Use two images (those mustn't be transparent)
background-image: url("defaultImage.png"), url("backupImage.png"); background-position: 0 0, 0 0; background-repeat: no-repeat, no-repeat;
Use two nested HTML elements, for instance. Styling them and add background-image for both.
In css add pseudo elements through :before{content:" "; background:url(backup.png); display: block; position:absolute;}

Custom cursor creating shivering svg

I am trying the customise the cursor when it is over some svg files to indicate to the user the possibility to click.
I stated for a tuto from https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals, changed jquery part to javacript and added the cursor's customisation (css and JS)
Unfortunately when I add those 2 lines of code :
customCursor.style.top = (e.pageY-10)+"px";
customCursor.style.left = (e.pageX-10)+"px";
it makes the svg image hover "shivering"(sorry i do not find a better word to describe it). Some time the element is not even highlighted and also I have noticed the behavior is even different on chrome and firefox
See the code
If I remove even one of those line the svg file looks good, no more cursor customisation but it behave good.
I am running out of ideas and I need fresh ones to solve it....
Thanks in advance for your help.

At the moment the cursor is intercepting pointer events and causing the hover to be removed. That then gets rid of the cursor, reinstating the hover etc etc etc.
Give the cursor the CSS property pointer-events: none;
cursor {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
z-index:10;
pointer-events: none;
}

Applying :focus CSS to input-field in shadowDOM and :focus CSS to shadow host

I'm currently working on a custom element which is basically a slightly augmented version of an input element, hosting all of its building blocks (including an input element) in a shadow DOM.
When the internal input element has focus, the host element should be styled with a colored outline and box-shadow, as seen below:
Therefore the focus and blur event handlers of the input toggle an attribute "focussed" on the host element with the encapsulated styles looking like this:
:host([focussed]) {
transition: outline 0.3s ease-in-out;
outline-color: var(--focus-color, var(--default-focus-color)) !important;
box-shadow: 0px 0px 3px var(--focus-color, var(--default-focus-color)) !important;
}
What I don't like about this approach:
Exposing a custom attribute on the host that needs to be observed, in order to ensure the correctness of the visually represented state (e.g. consumer calls setAttribute('focussed', ''))
Alternatives I considered:
Of course my first thought was to encapsulate the attribute within the shadow DOM (or even toggle a class) on a container element filling out the space of the host element, but the problem is that overflowing contents such as outline and box-shadow seem to be forcefully hidden by the host element - which seems kind of logical.
I could dictate a fixed padding on the host element to ensure the visibility of the outline and shadow, but this would require considering different browser rendering behaviour of box-shadow and would feel counter-intuitive for custom styling by the consumer.
I'm looking for a best practice approach here and I would very much appreciate your educated thoughts on this one.

this.attachShadow({
mode: 'open',
delegatesFocus: true
})
works in Chrome, Edge, Opera, not the others (yet)
This styles the input (in shadowDOM) itself with:
:focus {
transition: outline 1s ease-in-out;
outline: 2px solid var(--focus-color,blue);
box-shadow: 10px 0px 10px var(--focus-shadow-color,red);
}
And styles the host element with (global) CSS:
:focus {
outline: 5px solid green;
}
Full explanation and playground JSFiddle
use Chrome/Edge/Opera first, then see lacking behaviour in others:
https://jsfiddle.net/WebComponents/Lpqyg201/
It has some pointers for click/focus/blur workarounds.
For FireFox , Safari support I would add something not too fancy that can easily be removed.
For now it is unclear to me what the time frame at Mozilla and Apple is,
maybe Supersharp knows

Can't figure out how to fix CSS for 3rd party library element

I am trying to figure out a way to override an odd default in Plotly.js
If you drill down into the class "title-group" title text for ploty.js polar scatter example then you will see that it has an automatic white text-shadow which is hideous when you use anything but a white background. I would like to be able to nullify that text-shadow, but I can't figure out the css to do it. Can it be done? I was thinking that I could somehow make a div around my plot and force all children elements to use a text-shadow with 0 width and 0 height.
So as of now I have this code:
CSS File:
div#polarScatterPlotCSS {
text-shadow: 2px 2px #ff0000 !important;
color: rgb(0,0,255) !important;
}
JSX File:
<div id="polarScatterPlotCSS">test
<div id="polarScatterPlot">abc
</div>
</div>
I can see the style applied to "test" and "abc" and even to the text in the legend of my Polar Scatter Plot, which means the Plotly.js chart is affected. The legend text never had a text-shadow though. The title and axis of the plot have the bizarre default text-shadow and are not being overriden :(

In addition to the above CSS-based solutions, I'll point out that Plotly.js has an API for controlling this in the layout object for polar plots. This allows you to avoid using !important.
layout: {
font: {
outlineColor: 'transparent' // or repeat layout.paper_bgcolor here
}
//...
}

if you write the same parameter in a new rul and add !important(before the semicolon, it will override the original setting.
To just "erase" a setting, it depends on the parameter: In some cases you would write none !important(or even _without the !important), in others initial
in your case it's probably text.shadow: none;, and if that's not enough write text.shadow: none !important;

this did it for me:
div#polarScatterPlotCSS > * text {
text-shadow: none !important;
}

customize the style for specific jquery-ui dialog box not all the dialogs?

i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:
but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:
.ui-widget-header {
background: #343434 !important;
border: none
}
.ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
.ui-dialog {
background: #343434 !important;
border: thin 1px;
}
and js code for this signin dialog (id="signinDialog") is:
$(document).ready(function() {
$("#signinDialog").dialog({
width : 600,
resizable : false,
modal : true,
autoOpen : false,
position : ['top', 157]
});
function openLoginPopup() {
$("#signinDialog").dialog("open");
}
after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:
I have been stuck in this issue from morning and tried lot of ways to resolve, like
this but all fell flat. Atlast i have to ask this.
I want all dialogs remain same except signin/signup dialog after customization.

Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.
Using jQuery for the close button, for instance:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");
Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");
Along with a css rule:
.mySpecialClass{
background: #1C1C1C !important;
}

If i'm not misunderstanding you it seems you are indeed changing the layout of all dialogues. This because the selector ".ui-dialog" will match all dialogues in your application.
If you only want to specifically style your signin dialog, you need to specifically select only these elements. You should be able to do this as follows:
#signinDialog.ui-dialog {
background: #343434 !important;
border: none
}
#signinDialog .ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
#signinDialog .ui-dialog {
background: #343434 !important;
border: thin 1px;
}