Develop Reference

How to properly assign style.backgroundClip = "text"?

I am having trouble with one line of code. I have been searching the web for hours now and had to resort to stack overflow. When I run this code, it does nothing. Here is the code:
e.style.backgroundClip = "text";
When I researched this, I found that the "text" is not officially existing, however if I use this in the css with background-clip it works. If you have any idea why this is not working, please help. I am using a device running iOS 8 if that helps.
I AM USING A PROGRAM CALLED "EXPRESSO HTML"

Setting text as the value for background-clip property is not a recognised value in the specification:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#Values
You could force the element to take the inline styling like so:
el.setAttribute("style", "-webkit-background-clip:text");
Notice it also takes the -webkit- vendor prefix. I think only Chrome supports it, I may be wrong.
Fiddle: http://jsfiddle.net/crwk2mac/
Since this variation of background-clip is not well supported, it would not be advisable to use it without decent and well tested fallbacks. This would be best done in CSS and could give you a real headache trying to implement entirely in javascript.

Add span inside <option> tag and style it

I would like to add span before text inside <option> tag and style it (it should represent color in select menu). However it does't seem to work...
How to make this piece of code working?
JsFiddle: http://jsfiddle.net/bartuz/08e0L9j2/2/
It seems example above does work in Firefox only... what about other browsers?

This will depend on your web browser. In the latest version of Firefox, it works fine. However, it doesn't work in the latest version of Internet Explorer.
Your question is a bit loaded - and I suspect that's why it got downvoted - you are asking why it's not working, rather than how to get it to work.
It's not working because it's not really a supported feature of selectboxes (yet!)
I'd suggest you look into using JavaScript to achieve the same result (and specifically, the jQuery UI selectmenu) which should support this type of 'advanced' select box.

An option element isn't allowed to have child elements.
I've extended your same answer, but instead applied the background color to the option element as demonstrated in this jsfiddle link:
https://jsfiddle.net/go4zee/6L0jjjoa/
$('#tag_item_color option').each(function () {
var color = $(this).text();
console.log(color);
$(this).closest("option").css({"background-color":color});
})

You shouldn't rely on the fact that your hack works on Firefox, does not mean it should on Chrome too.
Anyway, styling selects was always frustrating and there's no easy way to customize native select elements.
If you're looking for a way to style the native select elements, maybe this will help:
https://catalin.red/making-html-dropdowns-not-suck/

Reliably detecting <img> tag support for SVG

I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).
Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.
What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):
if(SVGSupported()) {
$('#header img#logo').attr('src','themes/newTheme/logo.svg');
/* More specified image replacements for CSS and HTML here */
}
Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.

This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.

For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:
// From the Modernizr source
var inlineSVG = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();
if( inlineSVG ){
alert( 'inline SVG supported');
}
So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.

A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

I've been meaning to write a blog post about this, but here's a snippet that should work:
function SVGSupported() {
var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
var img = document.createElement('img')
img.setAttribute('src',testImg);
return img.complete;
}
Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.
I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/
It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js

Get value from uncomputed css style with javascript / jquery

I have a small question concerning css styles and javascript / jquery. Lets say i define the following css style.
.myStile { padding: 5px }
Now I'd like to access the property of padding while not writing an html element to the document. I came up with the following idea which only works with Firefox (IE and Chrome say NaN)
var div = $('<div class="myStile />');
var padding = parseInt(div.css('padding-left'), 10);
is there a way to make this work in IE and Chrome (well trident and webkit I guess) as well? I know that one's able to read whole css files via javascript (and get the class, the properties and so on ...), but that seems to be a bit overkill.

Thanks meo for your comment. This post answers the question. Here's a google find which answers the "other browsers than chrome, firefox, safari" issue.

Is nodeIndex a valid DOM element property in IE?

I came across some javascript at work today that used jQuery to fetch two elements. It then used elem.nodeIndex to determine the position in the elements parent for each element. Nothing is setting this property anywhere and I do now see a reference to it in the msdn, mdc, or anywhere else.
I stepped through this javascript in FireFox with FireBug and tested the code in chrome and opera. I am sure nothing was trying to set this property. However, I can't find any information on this nodeIndex property anywhere.
Does nodeIndex exist as a DOM property in IE, or did I miss something while debugging my code?
UPDATE: I asked the same question on the jQuery list and they confirmed the property is for internal use only.:

It looks like it's jQuery that's adding nodeIndex to nodes in some cases.

Well, the easy answer is: If it isn't documentated anywhere like MDC, MSDN or W3, then it isn't a 'real' DOM property.
The idea of using nodeIndex, is also wrong, why would you want to do that?