构建跨浏览器兼容网站的八个技巧

Posted 2021-04-30 21CTO

21CTO 导读：在这篇文章中，将介绍Web开发者可用于开发出优秀的跨浏览器应用程序的不同工具、流程和框架。

开发者需要花时间了解Web浏览器的发展历史，然后再了解它们的工作原理，就可以清楚地了解构建和测试交叉兼容网站的需求。

如果你曾经在 IE6、Netscape的时代开发过前端，会了解那时候制作的难度。

在当今 Web 开发时代，在Firefox，Chrome，Safari，Opera和IE之间，我们也不能假设自己的网页在这些浏览器上看起来都很好，在每个人的计算机上都能正常工作，因为这些浏览器的个性化会对您的页面造成影响。

但是，了解跨浏览器对Web应用程序的重要性是一回事，而它的开发则是另一回事。

虽然几乎不可能在每个浏览器上看到完全相同的设计，但有几种方法可以确保开发者为用户提供一致的体验。

在这里，我们向您提供一些让网站交叉保持兼容的几个技巧：

• 保持代码简洁 - 在编码时要考虑质量而不是数量。

  不要将十行代码实现只需要三行代码就能搞定的功能。简洁的代码不仅更易于跨浏览器友好，在需要调试兼容性时，也能更容易于维护。

  
  

• 使用框架 - 像Foundation和Bootstrap这样的CSS框架，会给前端开发者提供标准的样式表代码，使人们能够更容易地做出交叉兼容的网站。如果你愿意花时间熟悉这些框架的某些功能，那么构建响应式Web应用程序会变得更快更容易，这些还可以帮你在移动浏览器中让应用程序外观与行为变得更正常。

  
  

• 定义正确的文档类型 - DocType是html代码中的第一行，用于描述将在您的应用程序中使用的HTML 版本类型。由于不同的浏览器有不同的标准和规则，定义好Doctype或渲染引擎会为让浏览器渲染页面更顺利。

  
  

• CSS Reset - 每个浏览器都有一套不同的默认CSS规则。这需要用CSS重置样式表来确保浏览器遵循相同的基本规则并始终如一。需要将其中一个 CSS作为页面第一个样式表添加，除非我们使用已有的框架。

  
  

• HTML验证 - 验证HTML和CSS以防止出现问题是个好想法。我们使用W3C HTML Validator和CSS Validator确保HTML代码没有错误，如果不是，需要立即修复它。接下再验证，最好是达到80分以上。

  
  

• 条件注释 - 条件注释允许您链接不同浏览器的样式表，这在涉及Internet Explorer常见的样式偏差Hacker时非常有用。

  
  

• 允许有一些差异 - 除非它是非常基础的样式，几乎不可能在每个浏览器上有一模一样的设计。无论开发者遵循什么规则，表格和排版等细节都可能有所不同。我们主要关注点不应该是在每个浏览器上使设计看起来相同。相反，应该确保它看起来可以接受并且可以使用，不会有不合适的元素或阻止某些用户访问某些功能。

  
  

• 不要跳过跨浏览器测试 - 在前端开发过程中，这些技巧并不能完全覆盖。尽管大家都试图避免它，但很可能意外地编写一些在浏览器中不起作用的东西。这就需要开发者需要在交付前检查网站是否适用于不同的浏览器。

我们可以使用CrossBrowserTesting之类的工具，可以在超过1,500个浏览器中执行测试操作，不用担心用户从不同的计算机访问页面时会看到特别大的不同。

编译：21CTO 社区