0

I am working on a project using latest versions of Angular ( version 5) and Bootstrap (4).

After few weeks of developement, some features started to squawk on Safari. and I am not even sure if all features are still working as expected in IE.

As a modern frontend developer using latest javascript and css frameworks that clearly doesn't support old browsers.

Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.

Should I care about browser compatibility ?

And If I have to care, what should I do to fix these errors ?

I am looking for recommendations to make better decisions.

Badis Merabet
  • 13,970
  • 9
  • 40
  • 55
  • 1
    Awesome. Yes, yes you should concern yourself with browser compatibility. Especially as a front end developer. – Narm Apr 05 '18 at 21:12
  • Would down voter and people requesting to close this question explain why it's not a legitimate question, please ? – Badis Merabet Apr 05 '18 at 21:29
  • But shouldn't the creators of those various frameworks take responsibility to fill those gaps for various browsers taking into accounts best practices. At the end they are the ones who invented the frameworks. that's why I specified frameworks, not vanilla js or css. – Badis Merabet Apr 05 '18 at 21:33
  • I didn't down vote, but I did flag it in accordance with SO policy that states "primarily opinion-based" questions should be closed. This is most definitely an opinion based question. It is a good topic for discussion but will not yield one concise empirical answer. – Narm Apr 05 '18 at 21:39
  • Narm , thanks for letting me know. but I think that most of SO questions will not yield to concise empirical answers. the goal is to optimize thinking processes to select better choices and make better decisions . – Badis Merabet Apr 05 '18 at 21:47
  • You shouldn't care about it. Fix the errors by suggesting everyone to switch to proper browser and ignore everyone who opposes to that. You may get yourself fired eventually but that's ok, because asking random people who don't know anything about your project to make important decision for you was a good idea after all. – Estus Flask Apr 05 '18 at 23:53
  • Seriously, what kind of answer did you expect? It's about how many % users you are ready to discard and the amount of working hours that are required to not discard them. Nobody can decide that for you. This solely depends on your demographics and project. – Estus Flask Apr 05 '18 at 23:57
  • 1
    Thanks estus ! from your two comments, this is the important part I care to hear: " .. It's about how many % users you are ready to discard and the amount of working hours that are required to not discard them. .. " .. not asking anyone to make decisions for me. I am asking what are main thinking mechanisms to help making better decisions. the problem with technical people (most of SO guys ) is they think in binary ( 0/1, true/false, ... ) for SO questions and answers. they tend to think about trade-offs to consider as opinions – Badis Merabet Apr 06 '18 at 08:27
  • @NadisMerabet It's about userbase vs. work trade-off. Sometimes you can afford to discard 10% of users, and sometimes you can afford only 1%... *depending on a project*. It depends on what exactly incompatibility results in. If a website is fully readable but has layout and interactivity problems, this may be better than blank screen... or not, *depending on a project*. E.g. https://angular.io/ is empty in older browsers, including a lot of mobile ones, and this sucks because these are the only docs for the framework. The wording of the question wasn't good. Try also Quora. Hope this helps. – Estus Flask Apr 06 '18 at 11:59
  • Indeed, it helps. Thank you ! – Badis Merabet Apr 06 '18 at 13:33

4 Answers4

4

It really depends on your audience/projects. Do you care about people using IE6+? Do you care if your website is not 100% the same depending on the platform?

In the field, people will generally say that it's important that your website is the same across all desktop browser, and that you should develop mobile first.

However, I really like this talk about CSS Grid, where Rand-Hendriksen says that we shouldn't care if the website is different. When talking about CSS Grid, a modern layout system for CSS, he says that if the browser does not support it, he just fallback to the mobile layout.

Should you be concerned about browser compatibility? Yes, to a certain extinct, but you don't have to abuse it. React/Angular will not break compatibility but the HTML/CSS/JS you write inside of it could.

Kerry Gougeon
  • 1,317
  • 12
  • 18
  • More importantly; what does your intended customer base intend to use? If their IT departments says nothing but IE7, you better work on that platform. Stupid to be sure; but it happens – BradleyDotNET Apr 05 '18 at 21:18
  • I totally agree with you guys when you said that my vanilla html/css/js could break compatibility. that's why i specified in my question usage of frameworks (angular, bootstrap). in bootstrap docs they said they support IE10+ . is this enough to enforce the users to upgrade or switch their browsers ? once I have installed an old linux and tried to login to facebook. the whole site was broken. and js popup get displayed for me to upgrade browser. – Badis Merabet Apr 05 '18 at 21:42
  • That’s why I said it really depends of your audience. There’s not much users still using IE6/9 but some business still enforce the usage of those. I know I would not care for any project I make personally or if my product doesn’t target those kind of business. – Kerry Gougeon Apr 06 '18 at 00:28
4

As far as for Internet Explorer you can use polyfiles. just go to the polyfills.ts at your src folder.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';

for css differences I recomand using scss which adds competible styles to all browsers.

Udi Mazor
  • 1,646
  • 2
  • 15
  • 30
  • Why should I use them my self ? why are not included by default in frameworks (css and js) to fill those gaps for various browsers ? – Badis Merabet Apr 05 '18 at 22:06
2

Yes, you do. Nuances exist even between modern browsers. See Different behavior of flexbox with (overflow-y) scroll on Safari, Firefox and Edge VS Chrome

But it's easy. Using a CSS compiler like Sass will take care of virtually every possible inconsistencies between browsers.

Andrew
  • 7,201
  • 5
  • 25
  • 34
  • If the frameworks like bootstrap 4 clearly stated they only support IE10+ , why should I care as frontend developer to support them. and If I have to care, what sould I do to fix these errors ? – Badis Merabet Apr 05 '18 at 22:10
  • 1
    @BadisMerabet I never said you should support all browsers. Your question is whether or not you should consider multiple browsers when you build your app. Also, bootstrap is a framework, and frameworks are very opinionated. If you want to use bootstrap and accept its limitations, then you have to take it at face value.Your question is being posed to an entire community of developers with different opinions on the matter. – Andrew Apr 05 '18 at 22:17
  • Understood. thanks ! – Badis Merabet Apr 05 '18 at 22:22
0

Browser compatibility depends entirely on the what you are developing. It's important to think about who you're users are. Internet Explorer 11 is usually a perfectly fine earliest Microsoft Browser to support.

As far as the issues in Safari are concerned, it might helped if you clarify the specific issues you have so that they can be addressed.

Polyfills are also a good solution if IE6+ is truly a concern. See Udi's anwser for that.

Jonathan Mongeau
  • 110
  • 7