Reset.css files are used to resolve browser inconsistencies when it comes to styling.
Is there something similar for JavaScript inconsistencies across browsers like a reset.js?
For example this "reset.js" library would define a prototype for the String trim() method as specified in this question since (among other things) IE8 does not support this.
I know libraries like jQuery can be used to overcome these inconsistencies but having something like a reset.js could help when using 3rd party JavaScript libraries that do not use jQuery.
Yes, there are polyfills to do exactly that. But there are so many things you'd need to fix that you can't put all fixes in one single script :-)
Have a look at the HTML5 Cross Browser Polyfills list.
If you're specifically interested in EcmaScript compliance, there are ES5 shims to retrofit missing or incorrectly implemented methods like String::trim; yet they can't fix the engine bugs (identifier-keywords, NFEs, …).
I don't know of one that is/does exactly what you asked in a single library and as far as I know there are quite a lot of people against 'patching' the built in JavaScript objects, and some libraries (e.g. ExtJS) that did this in previous versions have changed and do now deliver the functionality in custom utility functions.
On the other hand there are a ton of smaller and larger shims to bring missing functionality to older browser, especially dealing with HTML5 inconsistencies.
Related
There are many ES6 features that look great like => syntax, Map object, and a long etc.
To be honest I'm kind of tired of checking if there is support for addEventListener due to ie8 attachEvent, and I wouldn't like that kind of pain coming back to my life.
So how, would you deal with this new posibilities? (or how will you, lets say, in a year or so). Would you not use them for basic actions but to add another layer of extra functions? Would you use it just for apps that you know you will be running in browsers that support them? Would you wait untill there is at least 90% of support?
I understand these are great features but for short to medium term usage it seems that you'd need to double your code checking and fallbacking for support.
Any enlightment about this subject?
EDIT: Please, don't mark this as duplicate. Notice I'm not asking how to check for support, I'm asking if it is wise to start using it, or it is better to wait. I'm also asking if the support check is the best option, not how to do it, or if there are other ways to proced while designing your code.
tl;dr: Make use of transpilers and polyfills.
Whether or not you should use new features primarily depends on your target environment and how exactly you are using new features. E.g. if you are targeting only the latest browser version, then you won't have an issue. Have to support IE8? That could be more difficult.
In general though, you should start using new features as soon as possible, and make use of tools that help you with that.
There are two aspects to look at:
New APIs
New syntax constructs
APIs
New API's can often (but not always) be polyfilled. I.e. you include a library which checks whether certain parts of the API exist, e.g. Map, and provides an alternative implementation if it doesn't.
These alternative implements may not be 100% equivalent or may not be as performant as a native implementation, but I'd say they work for 95% for all use cases.
The nice thing about polyfills is that you will be automatically using the native browser implementation if it is available.
Syntax
Making use of new syntax constructs, such as arrow functions or classes, is a bit more complex (but not much). The biggest issue is that browsers who do not support the syntax cannot even evaluate your code. You can only send code to the browser that it can actually parse.
Fortunately many of the new syntax elements, such as arrow functions, are really just syntactic sugar for things that are already possible ES5. So we can convert ES6 code into their ES5 or even ES3 equivalent.
Several such tools, called transpilers, have emerged over the last one or two years. Note that the transpiler has to convert your code before it is sent to the browser. This means that instead of simply writing your JS file and directly include in your page, you need to have a build step that converts the code first (just like we have in other languages, like C or Java).
This is different from how we wrote JS a couple of years ago, but having a build step has become increasingly more accepted by the JS community. There are also many build tools that try to make this as painless as possible.
One drawback is, unlike with polyfills, that you won't magically be using the native features if they become available. So you could be stuck with shipping the transpiled version for a long time, until all your target environments support all the features you need. But that's probably still better than not using the new features at all.
You can use BabelJS or Google Traceur
You have to include in your build process a step to transform ES6, ES7 code to Javascript compatible with todays browsers. Like a gulp or grunt task. Babel has a list of supported tools here
I'm using pretty recent CSS features such as viewport units and flex-boxes. These are great for making fluid layouts, and to get rid of extra-markup and dirty CSS hacks.
I'm using prefix-free to handle some vendor-prefix issues, but that got me thinking, is there any sort of script that can detect the use of recent CSS features and somehow make calculations in order to render the elements that use that feature correctly? (if the browser doesn't support those features, of course)
The site I'm making makes use of Bitcoins and WebSockets (and to my knowledge, socket.io falls back to long-polling), so I guess maybe many of the users will be somewhat "tech-savvy" and have recent browsers, but I don't really know what to expect, honestly. And it'd suck if the site looked completely broken for some people.
I'm the sole developer of this and the idea of making a bunch of the layout compatible with older browsers is... well, daunting. I just got started so I might as well use old CSS techniques, but I'd really like to use the latest stuff.
It really sucks that there is a lot of new, cool stuff, but old browsers are holding everyone back...
Thank you.
What you're looking for is commonly called a "polyfill".
There are many polyfills available... usually several for each feature. You can find packages like Webshim which come with many out of the box: http://afarkas.github.io/webshim/demos/
Use http://caniuse.com/ to check for browser compatibility. It often links to polyfills in the comments section.
I have been looking for a server side library that is able to capture all scripts used on an HTML page, and convert them to IE (<9) compatible (e.g., handling things like getter / setters, missing types etc.). However I am not having much luck finding one.
Does anyone know if such a library? Am I dreaming thinking I will be able to find / build such a thing?
My preference is first node.js, second POSIX, however any suggestions would be much appreciated.
Edit: I think it is worth noting that I am not referring to something which handles differences in the IE DOM (although that would be helpful), but rather something that handles javascript language differences.
There are what you call shims, like ES5-shim. Though not thoroughly complete, they create support for ES5 functionality for legacy browsers. This is client-side code though.
Looking through the Mozilla JavaScript site, I see that JavaScript 1.8 has a lot of great functions. In most cases it has code you can add to extend prototypes of the basic types in the case that the function is not implemented on the user's browser. Is there a library that you can use to add all those functions and therefore use JavaScript 1.8 freely in your code?
You are probably looking for a shim.
Check out the es5-shim: https://github.com/kriskowal/es5-shim/
Modernizr has a pretty exhaustive list (wiki) of alternative polyfills or shims (look under ECMAScript 5 for your needs):
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Also, not all features can be provided by shims or polyfills. You could start an issue (remember to search and read the README first) for a feature that you want but isn't provided and the developer might tell you if it's not possible.
Since this version has lots of syntax differences (mentioned by Rob W), there are only two way this can be done
Somebody would have to write a JS interpreter in JavaScript, which would be good awful slow.
Write a server side compiler that turns JavaScript 1.8 into EcmaScript.
No, there isn't one out there.
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/