Hello! I’m developing courses in HTML5 with Animate CC 2018 and was wondering, is there a way (code) to make sure my HTML5 works well on all browsers instead of designing for one specific browser? I’ve read some stuff on feature detection, polyfills, and shims. Is this the right direction? Thank you for your time.
A shim helps to secure something in place by filling the gap. Why would we need a shim? To fill a gap, of course.
HTML is not confined to just the tags we know about, it is actually, and has always been fully extendable. We can define our own tags and it would still work, though might not validate.
The problem arose when a certain browser vendor would not support such a notion so HTML5 would not run in that browser because it had so many new tags. In comes the shim using a neat trick of defining the tags with JavaScript and the browser support magically appeared. The browser was fooled into believing the tags existed all along.
In today’s world, talk of a shim is past its best before date. Shims are in the past.
A polyfill is also a gap filler, but not a void so much as software support. It can make an old browser seem newer by plugging in support for newer language constructs, constants, etc. A browser that does not support ES6 would need a polyfill to be able to run ES6 script in a page. Such a program would take the newer code and port it to the older language, rendering it viable to that browser’s scripting engine.
The need for this apparatus is still ever present so we cannot put them in the past like we could with shims. Sad truth is we are probably going to have live with them for a few more growth leaps, yet.
Feature detection is altogether different from the above. It does not fill any gaps or make up for software deficiencies, but simply checks if a feature works or not. A feature is something that can be talked to over a network. All communication over a network requires a handshake, and when one is not forthcoming, there can be no communication; hence, no feature present on the device.
None of the above takes into account media parameters involved in responsive design, or adaptive design, or accessibility, etc. Clearly, the one size fits all mentality does not fit in the real world of development. You will have to make your best fit like the rest of the world.
Thank you so much for your response! That was very informative. If we end up having to contract some of these modules out, for the sake of cohesion and simplicity, should we just design mainly for one browser?
One platform, maybe, yes, but not just one browser. Use the W3C specifications with no vendor prefixed style rules and create a well formed document structure that validates for a desktop (laptop included).
The HTML structure (document outline) comes first, then the presentation, then the behavior. Be sure the page does everything you want it to do in a desktop browser.
Layout is a critical concern and there is no lack of supports built in to modern browsers to aid in this pursuit. Flexbox, Grid, etc. are geared to responsive design, so work with them before turning to media queries.
The final phase will be the full-on responsiveness in any device. A well formed document should be fairly easy to bend and stretch with media queries. Bootstrap may even be a good fit at this stage and will adapt easily to a well formed outline.
Wow! Thank you again for your time and expertise. You are awesome!
1 Like