每个Web开发人员的主要目标是使用现代直观的设计构建网站，从而提供流畅，无缝的用户体验，无论他们使用哪种浏览器上网。
近几十年来，互联网见证了前所未有的大规模繁荣。截至2018年12月，全球互联网用户超过41亿，网络上的网站接近19.4亿。
因此，这意味着全球观众可以通过多种方式扩展网站。这就产生了跨浏览器兼容性的难题，这给开发人员带来了巨大的挑战。随着浏览器及其版本的数量每年以如此快的速度增长，尝试使网站在所有浏览器中显示和执行一致的任务是每个开发人员的噩梦。
然而，由于跨浏览器测试可能是繁琐且耗时的，因此它是每个测试周期的必要阶段。虽然几乎不可能在每个浏览器上显示和使用相同的网站，但仍有许多方法可以提供一致的用户体验并覆盖更广泛的目标受众。
在本文中，我们将探讨一下跨浏览器兼容性问题及其发生的原因，具有特征检测功能的CSS如何更有利于浏览器检测，以及在设计网站时实现近乎完美的浏览器兼容性的提示。
为什么浏览器会不一致地渲染内容
在深入研究跨浏览器兼容性和CSS与特征检测之前，必须基本了解互联网浏览器的工作原理以及发生兼容性问题的原因。
在浏览网页时，无论何时单击链接或在浏览器中键入URL，都会引导Web浏览器发出服务器请求，要求加载您要搜索的内容并在浏览器中显示。这是通过使用渲染引擎来完成的，该引擎负责解析HTML和CSS代码并在屏幕上显示解析的内容。
由于每个浏览器都有自己的渲染引擎，因此所有浏览器都不会以相同的方式显示内容。因此，网站的布局和外观可能会有明显的差异。
Safari使用'Webkit'渲染引擎，谷歌Chrome使用'Blink'（早期的webkit）以及所有基于铬的浏览器，如Microsoft Edge和Opera，Firefox使用'Gecko'，最后，Internet Explorer使用'Trident'。较早版本的Opera使用'Presto'。
每个前端开发人员最可怕的敌人是浏览器之间不一致的功能支持。这意味着网站在开发人员选择的浏览器的开发阶段出现并完美地工作，但最终可能会在最终测试阶段完全看不到其他浏览器。
浏览器偏好偏差
无论拒绝多么强烈，每个开发人员都有一个秘密的“浏览器偏好偏见”。开发人员在网站开发过程中依赖的浏览器是评估网站性能的标准。大多数开发人员自然偏向于谷歌Chrome，谷歌Chrome在全球拥有领先的市场份额，并且拥有最强大的开发人员工具套件。这可能会导致开发人员忽视和忽略Mozilla Firefox，Safari，Opera和臭名昭著的Internet Explorer等浏览器。
在任何情况下，开发人员都不应忽视对任何可能被一小部分目标受众使用的浏览器的支持。即使谷歌Chrome和Mozilla Firefox以及Safari的市场份额接近90-95％，这个统计数据，根据网站的性质和其他因素，可能被证明是欺骗性的。浏览器偏好因地理位置和年龄人口统计而异。例如，Safari在美国以外使用的次数要少得多，IE仍然是老一代的首选浏览器。
浏览器市场份额
谷歌Chrome是明显的市场领导者，市场份额至少达到67％，其次是Firefox落后11％。值得注意的是，臭名昭著的Internet Explorer（经常被开发人员忽视）在2018年仍保持着近7-10％的市场份额。这一事实进一步扩大了开发人员注意跨浏览器兼容性的必要需求。您可以进一步使用Google分析或任何其他网络分析工具来确定大多数网站访问者首选的浏览器。如果浏览器或浏览器版本的份额低于1％，则开发人员应将其视为主要负责为您的网站带来流量的优先级。
需要跨浏览器兼容的CSS
近年来，我们目睹了CSS中新的强大功能的出现，这催生了新的现代设计趋势。但是，由于跨浏览器兼容性问题，大多数新引入的强大CSS3属性并非所有主流浏览器普遍支持。在没有回退的情况下，这些属性不会被浏览器解释并完全被忽略，这会对您的网站在较旧的，不受支持的浏览器上的设计造成严重破坏，尤其是可怕的IE。CSS Grid，Flexbox，CSS Blend Modes和3D变换等新的令人兴奋的功能将网页设计的范围推向了新的高度。但是，由于对跨浏览器支持的怀疑，许多开发人员采用这些新推出的速度很慢。
这是一个简短的部分，可帮助您了解不同Web浏览器不支持的CSS属性。您可以使用“ 我可以使用” 平台查找各种浏览器和浏览器版本的受支持和不受支持的元素。
最新版本的Internet Explorer不支持的CSS属性（v.11）：
最新版本的Firefox不支持CSS属性：
最新版本的Google Chrome不支持CSS属性：
最新版本的Opera不支持CSS属性：
最重要的是，某些浏览器也不支持某些HTML元素和属性。例如，任何版本的IE或Edge都不支持表单属性“占位符”。
下一次我们继续讲解如何检测不同的浏览器
