How well supported is the document.getElements() function. Additionally, is there a javascript reference page that has detailed browser support information somewhere. I usually use the mozilla docs, but I was wondering if there is something better.
I actually can't find any documentation on document.getElements() but when I do things like:
document.getElements("div a");
It works great in chrome, ff, safari, ie8 and ie6-9 via IETester. I think IETester may use the same javascript engine for all browsers though (not sure about that).
There is no such thing as document.getElements... I'll bet your coding in Jsfiddle and don't realize that the mootools lib is included ;)
Have a look:
http://jsfiddle.net/Zevan/pRKzy/
quirksmode.org is a pretty good resource for things like this (though not fully updated on IE9, as it's a moving target at the moment).
Note: they don't have an entry for document.getElements() specifically (are you sure you're getting this name right?), but in general it's a pretty complete reference, here's an example - check out .querySelectorAll() (which does what you describe...).
Probably you are looking for querySelecterAll function:
elementList = parentNode.querySelectorAll(selectors);
This is most handy and much usable function.
To check how your requested feature is supported among browsers you can use "Can I Use" site:
https://caniuse.com/#search=querySelectorAll
On this site you can check not only functions but HTML attributes and CSS capabilities too
Related
We are using data- prefix in our html tags to attach some data to our elements. We can get that data by this.dataset property in Chrome and as we are too lazy to check if our functions work under different browsers/engines(by the way i have to support FF and Chrome only, no safari, no IE), now our app is failing under FF because FF does not know what is "this.dataset". Is it going to be supported by FF too(our app is not going to be ready for a month or more), or should we re-write our code?
The patch for dataset support is not going to ship in a Firefox release until at least August. So if you need something in a month, you shouldn't rely on it.
See https://bugzilla.mozilla.org/show_bug.cgi?id=560112 for details.
In the meantime you can use polyfills for dataset so you can use that API:
http://eligrey.com/blog/post/html-5-dataset-support
https://github.com/remy/polyfills/blob/master/dataset.js
I'd rewrite it, as I haven't seen anything in gecko to suggest this is coming soon, and it's not particularly hard to write.
You may be interested to know that jQuery has it's $.data() method that does what you want – you may want to look at the source to see how they tackle this, or just to use it as is.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 12 years ago.
Improve this question
I am working on my first project that requires me to worry about cross browser compatibility. Since this is my first time doing so, I dont know how to go about completing the project. I am specifically worried about IE. Should I complete my project in a more graceful browser then hack it to work in IE, or should I simultaneously build my program up in both environments?
Design your site to work in standards complaint browsers first. I always start with Firefox, even when developing on my company Intranet (where everyone uses IE). Doing so will let you focus on getting your markup and CSS correct. This is what is most important.
The important thing to note is that you'll want to "future proof" your site, and concentrating on a standards compliant browser will help you do that.
Then, once you're confident your site is looking correct (validators are your friend!), try it out in the versions of IE you want to support. In order to get your layout to look OK in IE, I strongly suggest using different stylesheets for each version of IE, using conditional comments.
Also, you should note that many others have been in the same scenario as yourself, and there is quite a bit of help available. One popular method of forcing IE to behave is the ie-7.js project.
Lastly, be mindful of the top IE bugs, such as:
IE6 Box Model Bug
IE6 transparent PNG images (I have used this fix in the past)
A few tips:
Code to Standards — Start by ensuring that what you've just developed works in Firefox and Chrome, and then verify it in IE. I'll usually then check it out in Safari. It's always better to make sure your markup/code works in a more standards compliant browser first.
Validate Early, Validate Often — You don't want your design to look perfect in one browser, find out that it's broken in another, discover that to fix the broken layout you needed to correct some invalid HTML/CSS, only to find that now the first browser looks wrong.
Progressive enhancement — will be your friend. Start basic, with simple HTML and simple CSS, and no JavaScript whatsoever. Repeat tips #1 and #2, then move on to more complex styles and layout. Contiue this iterative process until you are happy with the design in all browsers. Only then should you consider JavaScript to polish the site.
Check each browser often — Don't develop the entire website in a single, compliant browser like Firefox, and then decide to "see what's broken" in IE. If you've got a complex, dynamic website, there could be MANY problems in Internet Explorer. Trying to decipher each one when they are compounding on each other is a nightmare.
Reset Stylesheet — As #Eir mentioned in the comments, find a good reset stylesheet. Although, they have fallen out of favor for some people, I find putting every browser on the same footing from the start helps tremendously.
Use a Framework — I find CSS Frameworks to be excessive, but some people swear by them, so to each his own. On the other hand, as soon as you have made it to the JavaScript phase of development, I highly recommended using jQuery or MooTools. They are very focused on circumventing cross-browser inconsistencies.
Let JSLint hurt your feelings — Even when using a JavaScript framework, there are certain standards of coding to which JSLint will help you conform. Some of the options are a bit overly strict, but I promise that if you clean your scripts through this tool often enough during development, you will almost never encounter those strange times when everything seems to work in all browsers except IE.
And some great tools! Everything in the above list you should consider mandatory practice. The following can spice it up for you in a pinch, but is optional:
CSS Browser Selector — it is rare that you will need this, but if all else fails, it's way cooler than using a separate stylesheet just for one browser (I despise conditional comments). It basically adds classes to your <html> tag, so you can do things like the following in your main stylesheet: .ie7 #header {/*stylese here for IE7 only*/}. It supports a lot of browsers on many operating systems. And it's fast.
Browsershots — Nothing beats the real thing, but if you can't install a suite of browsers, this and other tools like it can help.
IE6 CSS Fixer — I outright refuse to debug my designs in IE6. I coerced my company (via many chagrin-filled meetings with IT and management) to drop support for it (thank god). It's just counter-productive to waste so much time forcing this pile-of-ahem... Anyway, if you aren't like me and need to support IE6, this tool can help.
Also you should focus on resetting css like this
OOoooo, good question:
here's my take:
Decide which browsers you are supporting. I suggest IE 7 + 8, FF, Chrome and Safari as in order of importance. (only support IE6 if you absolutely have to!). It helps if you know your userbase here.
Use a css reset. Different browsers have different default styles. a css reset gives you a consistent base.
Keep your markup as simple as possible. Follow Standards (and see progressive enhancement on Stephen's answer).
Test every step of the way on your target browsers. That way you can correct problems right away. http://crossbrowsertesting.com/ is the best resource for this, but there are free ones for screenshots as well.
Avoid Hacks as much as possible. Most cross-browser issues these days can be solved without resorting to hacks.
Ask questions here when you get stuck. If this is your first project dealing with browsers, you will get bewildered by inconsistencies. We all face these issues, and are glad to help.
Be ok with the fact that webpages are not going to look exactly the same in all browsers. (once again, see progressive enhancement).
Good luck coding!
I develop for Firefox first, and then work out the IE buggery. Rarely do I "hack" it, rather find something that works in both, or at worst use IE conditional comments. Just one coder's preference. Always a good idea to test with Safari, too.
Two big advantages of Firefox are: the Error Console, and the Firebug plugin.
there is alot of greate tools that makes life alot easier for you there is for example a
css framework called blueprint you could use, it has already everything set for every specific browser so that you get the same outcome in all browsers. And using jquery as your javascript framework does add an extra insurance that you'll have it working in most browser.
but remeber there is no such thing as 100% cross browser compatibility for all the browsers and all the versions in world.
In theory would be best to develop for all browsers at once, always testing for every browser...
Realistically, that rarely happens... I typically develop/test with firefox. when I introduce complex javascript or css, I check in ie... this tool is incredibly handy for checking all versions at once... google ie tester.
By checking all browsers at regular intervals, and when you make complex changes, you ensure that major features are compatable :)
Also, ensuring that all of your code is valid is not only good practice, but helps identify cross browser issues.. google w3schools validator :)
Using javascript libraries such as jquery also aid in cross browser compatability, and some even come with css libraries as well. These libraries are purpose built for quick, reliable features that are typically cross browser guaranteed.
Finally, before launching, use launchlist to check that all works: http://lite.launchlist.net/
Hope all that makes sense and helps with your first project :)
I was wondering if there are any packages available out there to make CSS3 capabilities available to browsers that do not support it yet.
The way I envision this, and I've been unable to find anything via search, is the JS would detect the browser and load its own library that essentially do the CSS3 functions using JavaScript.
I know there is a JS library to make PNG files work property on older IE browsers, I was wondering if anybody's been working on something to allow other things to work as well.
This would allow developers to utilize CSS3 in their web applications, and let the JS handle the comparability. I'd be willing to pay for something like this.
Thank you.
I recently came across a rather elegant new solution for CSS3 in IE. I think it's pretty close to what you want: http://css3pie.com/
The closest thing I have found to doing this is Dean Edwards' IE scripts. I don't think it fully supports all CSS3 features yet (as most of CSS3 is still in the works and hasn't been solidified), but what it will do, is allow you to use all common CSS selectors that normally don't work in earlier versions of IE. It really helps to make IE a more standards compliant browser and avoid the use of CSS hacks and/or multiple stylesheets. I've been looking for anything about CSS3 support in his script and haven't found anything yet. Like I said, it mostly allows the use of all the selectors, plus it does have a PNG fix built into it. Bonus!
http://code.google.com/p/ie7-js/
For your info, there's also such a pack to do stuff from allowing :hover in other stuff than anchors, there's also stuff to fix IE's screw-ups of the DOM etc.
But I don't think there's a definitive list/pack to do what you want.
If there was, it would have taken on the internet like a storm ;).
I don't believe there is such a library yet. It would be alot of work, and most are satisfied with graceful degradation in old browsers rather than trying to implement the missing features in javascript. However, there is a library that does the first half: feature detection. It's call modernizr: http://www.modernizr.com/
It's always a big problem for web designers to make their page look good in all the commonly used browsers. What are the best ways to deal with this fact?
For CSS:
Use a reset (like Meyer or YUI) to "level the playing field" before your style is applied
Style for the weirdest browser that you have to support (like IE6), make it look right, then change what you need to for more modern browsers. Trust me, this is much easier than doing it the other way around!
For Javascript, I'd use a framework like jQuery or YUI since they go a long way in abstracting away most of the browser-specific quirks you're likely to encounter.
Good luck!
Use well supported libraries - don't try and start from scratch. For example, JQuery handles a lot of browser issues for you.
Test, test, test and learn from experience.
Use virtual machines to test in different IE versions. Download them here:
http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en
Try avoiding hacks - css or js to target browsers unless really necessary.
As others said, jQuery might help a lot in Javascript to irons out the pesky browser differences.
A proper doctype on the page so that it renders in standars compliant mode.
Test in a standards compliant browser like Firefox first when you develop. If you test in Internet Explorer first, you will most likely write code that uses some of the rendering bugs in IE to make it look like you want, and then you will have a hard time to make it work in any other browser.
You will most likely have to tweak the layout to avoid some of the rendering errors in IE. Different versions have different rendering errors so you need to test several. Add an X-UA-Compatible meta tag to keep IE 8 from rendering in compatibility mode.
Use the html elements as originally intended. Links to navigate, header tags for headlines, et.c. That way the code is more likely to work as intended, and search engines will do a better job indexing the pages.
For javascript you can't go wrong with jQuery.
There's no universal way to ensure that everything always works. For CSS, a reset stylesheet goes a long way to standardizing looks between browsers; for JS, use a library like jQuery that handles browser compatibility issues in a sane way.
Definitely JQuery, or Mootools or prototype..or some other JS library.
IMHO stick to good JavaScript Library like jQuery, which promises to be crossbrowser
Using a good lib to make your js more cross browser safe is a good start. Also using a css framework like 960.gs or blueprint is a good choice for the css. Basically you need to do a full css reset.
I have a flash object interacting with a javascript function. The interaction works fine in every browser except in IE (all versions)
I have tried with swfobject and with classic embeding. AllowScriptAccess is set to "always". Is there any cause for this flaw ?
Thanks
If you're using ExternalInterface, the problem may be related to the way you're attempting to reference the object in JavaScript. Take a look at my answer to this question -- it might not be exactly the same issue, but my answer provides an end-to-end example of ExternalInterface that's been tested on IE, too, so you might want to compare it to your own to see whether anything's missing or out of place.
If that doesn't help, though, try posting some code, so we can have a look at what's going on and maybe diagnose the problem more specifically.
If you are running the test from a file instead of testing it on a webserver it might be because security settings.