Does HTML's data attribute work in IE6?
I'm using the attribute like this <img id="charm_1" data-code='sdfsdfsdfsdf' data-price='100' class='addition_image' src="img/misc/donut.png" width="55" height="55" alt="Donut">.
As you can see there are 2 data attributes (price and code). I can get this with jQuery using the .data() method and it all seems to work in IE7/8/9. Does this work in IE6? I don't have a copy of IE6 to test this.
IE6 -- and indeed all other browsers on the market -- have always been perfectly happy for you to define your own custom attributes on an element.
The use of data- as a prefix was formalised in the HTML5 standard, but browsers have always supported it, and don't even really require the data- prefix.
The data- prefix is recommended because it is now part of the standard, so there's a chance that a future browser may be more picky about it, and also because of the new dataset property that was added to HTML5 DOM specification at the same time to support it.
Obviously you can't use the dataset property, as very few browsers support it (not even newer ones, let alone older ones), but you can of course always use the good old getAttribute() method instead (which is what jQuery does).
To find out about browser support for new properties, I recommend the CanIUse.com site. For example, here is their page about data- attributes: http://caniuse.com/#search=dataset. They have full browser support tables for a wide range of features.
Hope that helps.
You can use IETester in order to test your websites on the different versions of IE and yes it those work on IE6 , IE has supported getAttribute() from IE4 which is what jQuery uses internally for data().
Related
I've been working on a small project, which changes site content on load.
I used data-*attributes, and after job has been done (script replaces what has to be replaced) they would get removed.
However, I realized my very own attributes worked also. So instead of
data-myAttribute="value"
I could simply used
myAttribute="value"
What is browser support on those attributes?
(My very own attributes worked on Chrome v57)
You can pretty much add any attribute you want to any HTML tag. However, this is not supported by the HTML standard. It does work in pretty much any browser, but it might not be supported in the future. In addition, HTML validators will reject your HTML as invalid if you use non-standard attributes.
The whole reason we have data-* attributes is because those are standardized and are guaranteed to be supported and accepted by validators, and also are guaranteed to not clash with any future attributes that might get added to HTML.
Do not use custom attributes without the data-* prefix, as that might make your HTML break without any warning as the HTML standard evolves.
As for the question itself: As this is non-standard, browser support is not documented.
I think this is absolutely ludicrous.
Given
HTML
<div id = "statCounter"></div>
Javascript
var statCounter = 5;
Executing
console.log(statCounter);
// logs <div id = "statCounter"></div>
How can this be? How absurd is this?!!?
http://jsfiddle.net/rkkj58nw/
This was a feature implemented in IE (presumably as a syntax sugar to avoid peppering your code with getElementById() in the long ago days before frameworks, I'm talking 1999).
Originally, other browsers such as Netscape didn't have this misfeature. But at some point some non-IE browsers started to implement this feature to be compatible with corporate websites that uses IE specific features.
I'm not entirely sure but I believe by now this is specified in some standard (either ECMAScript or HTML5 or something else). So now all browsers implement this "feature".
I was just forced into a browser upgrade (IE8 to IE11) while in the middle of testing. I've lost some essential functionality with some javascript that suddenly doesn't work in my .NET site.
This section of the code was written when I was in grade school, so I'm not extremely familiar with it, but what seems to be the problem is a call to form.all. I have to assume that call was built into javascript at some point - there's no definition for it in the code.
There are 7 "if statements" that use form.all and they are all written the same way:
if(form.all(cTag + "PersonNum") != null)
form.all(cTag + "PersonNum").value = personNumber;
The error:
JavaScript runtime error: Object doesn't support property or method 'all'
In newer versions of JavaScript, is there a version of form.all that performs the same action? All I really need is for someone to point me in the right direction.
A weird note: the same JavaScript code IS working in production on IE11
EDIT Ok, I found a line that was minimized. It looks like form is a created variable.
var form = document.forms(0);
EDIT2 Compatibility view/mode was the solution after all. I had added our production site's domain to the compatibility list and didn't think about it; adding 'localhost' fixed the issue. You just have to set it to the right domain first for it to work :)
Check the browser compatability mode when your running in production it's probally on IE8.
You can use obj.getElementsByTagName("*")
You could also add an All method to the prototype if it's not there.
IE introduced an all property for certain DOM objects (e.g. document) but it was never part of any W3C standard. It allowed access to DOM objects by name or ID using:
var element = document(elementNameOrID);
or
var element = document[elementNameOrID];
that is, it is a property that could use the same syntax as a method. Neat. Some other browsers supported it for compatibility, but it pretty much went out of use with IE 6 (not sure when IE started supporting getElementById, I think it was IE 5). But IE continued to think name and ID attributes were the same thing until IE 8 in standards mode.
Support for all has been dropped from IE 11 in standards mode.
If form is a reference to a form element, and cTag + "PersonNum" is the name of a form control, then the simplest fix is to change:
form.all(cTag + "PersonNum").value
to
form[cTag + "PersonNum"].value
which takes advantage of named form controls being made properties of the form that contains them. This behaviour is standardised and supported by browsers from the very beginning (i.e. every where) and is future proof (it's not going to change).
Is there a generic way in javascript to check if the css property is supported by current browser or not?
I am currently using "document.compatMode" to check if it is quirks or not. But there must be a way to check specific to a property.
You can do this, ex:
typeof document.body.style.borderRadius
In supported browsers, it should return 'string'. In non supported, it will be 'undefined'
There is a new DOM API CSS.supports for that purpose. FF, Opera (as supportsCSS) and Chrome Canary already implement this method.
For cross-browser compatibility you can use my CSS.supports polyfill
Example:
CSS.supports("display", "table");//IE<8 return false
But, you still need to specify browser prefix for prefixing css properties. For example:
CSS.supports("-webkit-filter", "blur(10px)");
I suggest to using Modernizr for feature-detection.
No.
There's not.
I have a handful of code that uses the DOM to parse and traverse some XML data. It works fine on Gecko and WebKit but, of course, IE absolutely chokes on it. Is there a library for an XML DOM that supports:
getAttributeNS
localName
namespaceURI
Support for IE7 is about as far back as I need to go.
You can use jQuery to safely and easily parse XML in Internet Explorer. This tutorial Easy XML Consumption using jQuery will give you a more in-depth information on how you can do it.
Not sure if you want to go this route, but this can be done with MSXML using their nonstandard way of doing things. MSXML 3.0 comes with IE 6 and later.
I haven't actually done this ;-) but this might be what you need:
IXMLDOMNamedNodeMap.getQualifiedItem looks like getAttributeNS
http://msdn.microsoft.com/en-us/library/ms757075.aspx
IXMLDOMNode has a namespaceURI property.
http://msdn.microsoft.com/en-us/library/ms763813.aspx
IXMLDOMNode.baseName looks like localName
http://msdn.microsoft.com/en-us/library/ms767570.aspx