2020年MDN浏览器兼容性挑战与改进策略

2020

需积分: 10 136 浏览量更新于2024-07-15 收藏 1.82MB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

MDN-Browser-Compatibility-Report-2020 是一项针对 Web 开发者在跨浏览器兼容性问题上的深入研究。在这个报告中，MDN (Mozilla Developer Network) 针对2019年开发者需求评估中的主要痛点进行了细致分析，这些痛点包括但不限于： 1. 特定浏览器支持：开发人员必须应对像 Internet Explorer 11 这样的老旧浏览器，它们可能不支持最新的 Web 技术标准，这导致了额外的工作量和时间投入。 2. 框架与库文档问题：过时或不准确的文档使得开发者难以依赖于某些工具和技术，因为它们可能在不同浏览器上表现不一致，增加了理解和实现复杂功能的难度。 3. 跨浏览器兼容性问题：开发者经常需要避免或移除那些在多个浏览器中无法正常工作的特性，这不仅耗费时间，还可能影响用户体验。 4. 测试挑战：由于浏览器间的细微差异，确保网站和应用在各种环境下正常运行是一个艰巨的任务，需要大量的测试工作。 5. 一致性设计难题：设计师和开发者需要花费额外努力确保设计在不同浏览器上呈现出统一的视觉效果和功能表现，这对设计美学和用户体验提出了较高的要求。 MDN Browser Compatibility Report 通过一项调查研究，深入了解了这些问题的具体表现，并尝试找出解决方案。该研究包括对浏览器兼容性的问卷调查，以及对13位参与者的深度访谈。参与者们分享了他们在实际开发过程中遇到的问题和应对策略，这些信息对于改进 Web 开发环境和提升浏览器之间的互操作性至关重要。该报告不仅提供了当前浏览器兼容性的现状分析，还可能提出了一些技术建议、最佳实践以及未来可能的发展趋势，帮助开发者更有效地应对跨浏览器兼容性挑战，推动 Web 技术的进步和标准化。通过阅读这份报告，开发者可以了解到如何优化他们的开发流程，减少兼容性问题带来的困扰，从而提高开发效率和产品质量。

资源详情

资源推荐



Identified use cases include when JavaScript scrolling has been

implemented to address native scrolling shortcomings, such as overscroll

and scroll snapping.

● JavaScript: Most participants had no issues with the JavaScript language

itself, and many of them attributed this to use of transpilers like Babel. Even

those few participants that wrote mostly vanilla JavaScript without any

tooling didn’t feel that browser compatibility was a big problem. We suspect

that when survey participants selected “JavaScript (core language)”, this

was driven mostly by issues related to JavaScript, but usually not the core

language.



These and other findings are incorporated into the following section.



See appendix E for the full study goals and discussion guide, and appendix F for

partial interview transcripts.

 



I still find differences in flexbox and grid. I also had one with object fit

recently. When the image was 100% tall Chrome would shrink the image

height. Other browsers tried to show the full image height as expected.



I don't really like that chrome and firefox handles images inside flexbox

differently



Chrome's calculation of flex with overflow really bit me. While Firefox and

Safari were doing the calculation correctly. I had to read a bunch of bug

tickets to find out that adding min-height to my div was needed.



Chrome doesn't support the gap property with Flexbox.

https://bugs.chromium.org/p/chromium/issues/detail?id=762679



Internet Explorer (still supporting 11) especially regarding Flexbox.



Long standing bugs in only one browser, such as the flexbox bug with

fieldset in chrome. Just fix it already.



Flexbox also came up in some interviews. One participant reported this as their

main pain point, especially with vertical layouts:



Most of the problems I’ve had have been with Flexbox. Especially when you

apply Flexbox in a layout you have to be aware of the different syntax for

different browsers, and that’s really painful. If you forget something you can

have issues in some browsers. I’ve had a lot of problems with vertical

Flexbox and Safari, for example. Even having a specific syntax it doesn’t

behave the same way, I think, in vertical Flexbox. Where you apply Flexbox

to columns and not rows and want to center whatever content vertically,

I’ve had a lot of issues with that. Specifically things like flex auto, flex 100%,

I’ve been having to apply that specifically for Explorer and Edge. […] I

wasn’t able to fix it, so I had to get rid of Flexbox, finally, and apply table

displays for what I wanted to achieve. […] The layout was: everything was

vertically centered in the layout, the whole content, and it had to be always

centered in the screen, in the browser, and I couldn’t use Flexbox for that. I

also think we normally tend to use Flexbox for things that it’s not intended

for, and I think that’s because we didn’t have CSS Grid until now, until very

recently.



Another interview participant reported problems achieving the same height of

Flexbox layouts cross-browser:



We had a carousel, and all the slides should have the same height, the

height should be dependent on the highest slide. So Flexbox, Flexbox,

another Flexbox, all nested inside each other. We didn’t start from scratch,

obviously, we just used a slider component that was already there. The

slider component is not the issue here, in this case. Flexbox had

differences between Firefox and WebKit- or Blink-based browsers. We

couldn’t achieve these equal height slides on anything but Gecko. In

Gecko it worked fine, in all other browsers it did not, so we also needed to

have a JavaScript solution here. Doing layout calculations in JavaScript is

never clean, it always feels a bit dirty, but in this case the slider’s based on

JavaScript anyway, so we made this tradeoff. […] The way Glide.js works is

you get a container where all the slides are stored and it uses Flexbox for

display values, as far as I know. You should usually be able to give each

slide the same height, but it didn’t work in anything but Firefox. Don’t know

why.



Among the things that bug me the most, it’s mostly little differences in

Flexbox implementation. Of course we have to support IE11, but even in

other browsers you see a lot of differences. This is something you face

almost on a daily basis. You know your way around it, especially with IE11,

after a while. But I think there are still some bugs that remain, even in

modern browsers.



Finally, one interview participant expressed that Internet Explorer had been

especially problematic with regards to Flexbox:



All the Flexbox gotchas that IE has are pretty frustrating, and I’m intimately

aware of many of them. This is actually the first time I’ve not had to support

IE in my career, so it’s pretty nice. […] A lot of the flex issues were around

height and flex-grow or flex-shrink. Just simple things like explicitly setting

a height on the flex child would fix the issues.

Flexbox in Internet Explorer

Internet Explorer 11 supports Flexbox without prefixes but with a number of

well-known issues, many of which were fixed in Edge. Several comments

suggested that Flexbox is a bigger pain point when supporting Internet Explorer.



剩余119页未读，继续阅读

kylin_zdd1993

粉丝: 12
资源: 8

2020年MDN浏览器兼容性挑战与改进策略

MDN - JavaScript Guide (En)

mdn-search:CLI 在 Mozilla 开发者网络中搜索

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility added 920 packages in 3m

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#br

websocket mdn

js filereader读取文件 特殊字符串

完成一个类似 Image gallery (mdn.github.io) 的页面

left join 连接如null

微软官网html官方文档

菜鸟教程 w3 mdn

nnot read properties of null (reading 'parentId')

MDN与javascript.info, 哪个网站更权威

css3实现蒙板动画

前端开发需要什么证书

scrollintoview()

PDF.js预览base64

前端常用的网站以及其链接

HTML CSS JS 入门

推荐websocket学习网

最新资源

js filereader读取文件特殊字符串