网站支持哪些浏览器友好提示_您的网站应支持哪些浏览器？

网站支持哪些浏览器友好提示

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

The question “which browsers should my website/app support?” is often raised by clients and developers. The simple answer is a list of the top N mainstream applications. But has that policy become irrelevant?

问题“我的网站/应用程序应支持哪些浏览器？” 通常由客户和开发人员提出。 简单的答案是前N个主流应用程序的列表。 但是该政策变得无关紧要了吗？

什么是最常用的浏览器？ (What are the Most-used Browsers?)

The top ten desktop browsers according to StatCounter for May 2017 were:

根据StatCounter ，2017年5月排名前十的桌面浏览器是：

1. Chrome — 59.37% market share
   Chrome-59.37％市场份额
2. Firefox — 12.76%
   Firefox-12.76％
3. Safari — 10.55%
   Safari-10.55％
4. IE — 8.32%
   IE — 8.32％
5. Edge — 3.42%
   边缘-3.42％
6. Opera — 1.99%
   歌剧-1.99％
7. Android (tablet) — 1.24%
   Android(平板电脑)-1.24％
8. Yandex Browser — 0.48%
   Yandex浏览器-0.48％
9. UC Browser — 0.41%
   UC浏览器-0.41％
10. Coc Coc — 0.33%
    Coc Coc-0.33％

Mobile now accounts for 54.25% of all web use so we also need to examine the top ten phone browsers:

现在，移动设备占所有网络使用的54.25％，因此我们还需要检查排名前十的手机浏览器：

1. Chrome — 49.23%
   Chrome-49.23％
2. Safari — 17.73%
   Safari-17.73％
3. UC Browser — 15.89%
   UC浏览器-15.89％
4. Samsung Internet — 6.58%
   三星互联网— 6.58％
5. Opera — 5.03%
   歌剧-5.03％
6. Android — 3.75%
   Android-3.75％
7. IEMobile — 0.68%
   IEMobile — 0.68％
8. BlackBerry — 0.26%
   黑莓-0.26％
9. Edge — 0.15%
   边缘-0.15％
10. Nokia — 0.12%
    诺基亚-0.12％

The worldwide statistics don’t tell the whole story:

全球的统计数据并不能说明全部情况：

• Patterns vary significantly across regions. For example, Yandex is the second most-used Russian browser (12.7% share). Sogou is the third most-used browser in China (6.5%). Opera Mobile/Mini has a 28% share in Africa.
  不同地区的模式差异很大。 例如，Yandex是俄罗斯使用率第二高的浏览器(占12.7％)。 搜狗是中国使用量排名第三的浏览器(6.5％)。 Opera Mobile / Mini在非洲拥有28％的份额。
• New browser releases appear regularly. Chrome, Firefox and Opera receive updates every six weeks; it would be impractical to check versions going back more than a few months.
  新的浏览器版本会定期出现。 Chrome，Firefox和Opera每六周收到一次更新； 检查几个月以上的版本是不切实际的。
• The same browsers can work differently across devices and operating systems. Chrome is available for various editions of Windows, macOS, Linux, Android, iOS and ChromeOS, but it’s not the same application everywhere.
  相同的浏览器在设备和操作系统之间的工作方式可能不同。 Chrome适用于Windows，macOS，Linux，Android，iOS和ChromeOS的各种版本，但并非到处都是相同的应用程序。
• There is an exceedingly long tail of old and new, weird and wonderful browsers on a range of devices including games consoles, ebook readers and smart TVs.
  在各种设备(包括游戏机，电子书阅读器和智能电视)上，新旧，怪异而奇妙的浏览器的尾巴都非常长。
• Your site’s analytics will never match global statistics.
  您网站的分析将永远不会与全球统计数据匹配。

浏览器是如此不同吗？ (Are Browsers So Different?)

Despite the organic variety of applications, all browsers have the same goal: to render web pages. They achieve this with a rendering engine and there is some cross-pollination:

尽管有各种各样的应用程序，但是所有浏览器都有相同的目标： 呈现网页 。 他们使用渲染引擎实现了这一目标，并且存在一些异花授粉：

1. Webkit is used in Safari on macOS and iOS.
   Webkit用于macOS和iOS上的Safari。
2. Blink is a fork of Webkit now used in Chrome, Opera, Vivaldi and Brave.
   Blink是Webkit的分支，现已用于Chrome，Opera，Vivaldi和Brave。
3. Gecko is used in Firefox.
   Gecko用于Firefox。
4. Trident is used in Internet Explorer.
   Internet Explorer中使用了Trident。
5. EdgeHTML is an update of Trident used in Edge.
   EdgeHTML是Edge中使用的Trident的更新。

The majority of browsers use one of these engines. They’re different projects with diverse teams but the companies (mostly) collaborate via the W3C to ensure new technologies are adopted by everyone in the same way. Browsers are closer than they’ve ever been, and modern smartphone applications are a match for their desktop counterparts.

大多数浏览器使用这些引擎之一。 他们是具有不同团队的不同项目，但是公司(大多数)是通过W3C合作以确保每个人都以相同的方式采用新技术。 浏览器比以往任何时候都更紧密，现代智能手机应用程序非常适合台式机。

However, no two browsers render in quite the same way. The majority of differences are subtle, but they become more pronounced as you move toward cutting-edge technologies. A particular feature may be fully implemented in one browser, partially implemented in another, and non-existent elsewhere.

但是，没有两个浏览器以完全相同的方式呈现。 大部分差异都是细微的，但是随着您朝着尖端技术发展，它们之间的差异变得更加明显。 特定功能可能完全在一个浏览器中实现，部分在另一浏览器中实现，而在其他浏览器中不存在。

我的网站可以在每个浏览器中工作吗？ (Can My Site Work in Every Browser?)

Yes. Techniques such as progressive enhancement (PE) establish a baseline (perhaps HTML only) then enhance with CSS and JavaScript when support is available. Recent browsers get a modern layout, animated effects and interactive widgets. Ancient browsers may get unstyled HTML only. Everything else gets something in between.

是。 诸如渐进增强(PE)之类的技术会建立基线(也许仅HTML)，然后在有支持时使用CSS和JavaScript进行增强。 最近的浏览器具有现代布局，动画效果和交互式小部件。 古代的浏览器可能只会获得未样式化HTML。 其他所有东西之间都有一些东西。

PE works well for content sites and apps with basic form-based functionality. It becomes less practical as you move toward applications with rich custom interfaces. Your new collaborative video editing app is unlikely to work in the decade-old IE7. It may not work on a small screen device over a 3G network. Perhaps it’s possible to provide an alternative interface but the result could be a separate, clunky application few would want to use. The cost would be prohibitive given the size of the legacy browser user base.

PE具有基本的基于表单的功能，非常适合内容站点和应用程序。 随着您转向具有丰富自定义界面的应用程序，它变得不那么实用。 您新的协作视频编辑应用程序不太可能在拥有十年历史的IE7中运行。 它可能无法通过3G网络在小屏幕设备上使用。 也许可以提供其他接口，但是结果可能是一个很少有人想要使用的单独的，笨拙的应用程序。 考虑到旧版浏览器用户群的规模，这一成本将是过高的。

网站所有者建议 (Site Owner Recommendations)

Site owners should appreciate the following fundamentals and constraints of the web.

网站所有者应理解以下网络基础和约束。

The web is not print! Your site/app will not look identical everywhere. Each device has a different OS, browser, screen size, capabilities etc.

网络无法打印！ 您的网站/应用在任何地方看起来都不相同。 每个设备具有不同的操作系统，浏览器，屏幕尺寸，功能等。

Functionality can differ Your site can work for everyone but experiences and facilities will vary. Even something as basic as a date entry field can has a diverse range of possibilities but, ideally, the core application will remain operable.

功能可能会有所不同您的站点可以为每个人使用，但是体验和设施会有所不同。 即使是最基本的日期输入字段，也可以具有各种各样的可能性，但理想情况下，核心应用程序将保持可操作性。

Assess your project Be realistic. Is this a content site, a simple app, a desktop-like application, a fast-action game etc. Establish a base level of browser compatibility. For example, it must work on most two-year-old browsers with a screen width of 600 pixels over a fast Wi-Fi connection.

评估您的项目是现实的。 这是内容网站，简单应用程序，类似于桌面的应用程序，快速动作游戏等吗？建立浏览器兼容性的基本级别。 例如，它必须能够在大多数使用两年的浏览器上运行，并且通过快速Wi-Fi连接的屏幕宽度为600像素。

Assess your audience Don’t rely on global browser statistics. Who are the primary users? Are they IT novices or highly technical? Is it individuals, small companies or government organisations? Do they sit at a desk or are they on the move? No application applies to everyone — concentrate on the core users first.

评估您的受众群体不要依赖于全局浏览器统计信息。 谁是主要用户？ 他们是IT新手还是技术高超的人？ 是个人，小公司还是政府组织？ 他们是坐在办公桌前还是在移动中？ 没有适用于所有人的应用程序-首先专注于核心用户。

Examine the analytics of your existing system where possible but appreciate the underlying data. If your app doesn’t work in Opera Mini, you’re unlikely to have Opera Mini users. Have you blocked a significant proportion of your market?

在可能的情况下检查现有系统的分析，但要了解基础数据。 如果您的应用程序无法在Opera Mini中运行，则您不太可能拥有Opera Mini用户。 您是否封锁了很大一部分市场？

Change happens It’s amazing that a web page coded twenty years ago works today. It won’t necessarily be pretty or usable but browsers remain backward compatible. (Mostly. The <blink> tag can stay dead!) However, technology evolves. The more complex your site or application, the more likely it will require ongoing maintenance.

发生变化令人惊讶的是，二十年前编码的网页今天可以运行。 它不一定漂亮或可用，但浏览器仍然向后兼容。 (通常。 <blink>标签可能会失效！)但是，技术在不断发展。 您的站点或应用程序越复杂，就越需要持续维护。

Web开发人员建议 (Web Developer Recommendations)

With a little care it’s possible to support a huge variety of browsers.

稍加注意，就可以支持各种各样的浏览器。

Embrace the web! The web is a device-agnostic platform. Content and simpler interfaces can work everywhere: a modern laptop, a feature phone, a games console, IE6, etc. Learn the basics of progressive enhancement. Even if you choose not to adopt it for your full application, there will be pockets of functionality where it becomes invaluable.

拥抱网络！ Web是与设备无关的平台。 内容和更简单的界面可以在任何地方工作：现代笔记本电脑，功能手机，游戏机，IE6等。了解渐进增强的基础。 即使您选择不为整个应用程序采用它，功能也会变得无价之宝。

Adopt Defensive Development Techniques Consider the problem before reaching for the nearest pre-written module, library or framework. Understand the consequences of that technology before you start. Frameworks should provide a browser support list because they have been tested in limited number of applications.

采用防御性开发技术在寻求最接近的预先编写的模块，库或框架之前，请考虑该问题。 在开始之前，请先了解该技术的后果。 框架应提供浏览器支持列表，因为它们已经在有限数量的应用程序中进行了测试。

Learn about browser limits and quirks. For example, if you’re considering an SVG chart, be aware that it can look odd in IE9 to 11 and fail in IE8 and below. That doesn’t mean it’s a binary choice of rejecting SVGs or abandoning IE support. There are always compromises which do not incur significant development. For example:

了解有关浏览器限制和怪癖的信息。 例如，如果您正在考虑SVG图表，请注意，它在IE9至11中看起来可能很奇怪，而在IE8及以下版本中会失败。 这并不意味着它是拒绝SVG或放弃IE支持的二元选择。 总有一些妥协不会带来重大的发展。 例如：

• accept SVG rendering is weird but it remains usable
  接受SVG渲染很奇怪，但是仍然可以使用
• only show a table of data in IE, or
  仅显示IE中的数据表，或者
• provide an SVG download which IE users can open elsewhere.
  提供IE用户可以在其他地方打开的SVG下载。

Test early and test often You cannot possibly test every device, but developing for a single browser is futile.

尽早测试并经常测试您可能无法测试所有设备，但是为单个浏览器进行开发是徒劳的。

Continually test your project in a variety of applications. Leaving testing to the end will have catastrophic consequences. It’s easy for us to blame tools and browser inadequacies, but the majority of issues can be rectified during the development process if they’re spotted early.

在各种应用程序中不断测试您的项目。 最后进行测试将带来灾难性的后果。 我们很容易将责任归咎于工具和浏览器不足，但是如果发现得早，大多数问题可以在开发过程中纠正。

That’s not to say everything must work identically in every browser every time. Feature regressions are inevitable. For example:

这并不是说每次浏览器中的所有功能都必须相同。 特征回归是不可避免的。 例如：

• Progressive Web Apps do not work offline on iPhones and iPads — but online operation is fine.
  渐进式Web应用程序无法在iPhone和iPad上脱机工作-但可以在线运行。
• CSS Grid is not supported in IE — but float, flexbox or full-width block fallbacks should be acceptable.
  IE不支持CSS Grid，但可以接受float，flexbox或全角块后备广告。
• The desktop edition of Firefox does not show a calendar for date fields — but users can still enter one.
  桌面版Firefox不会显示日期字段的日历，但用户仍然可以输入日历。

Install a selection of browsers on your development PC. Mac and Linux users can obtain Microsoft Edge and IE testing tools at developer.microsoft.com/microsoft-edge/. It’s more difficult for Windows and Linux users to test Safari; online test services such as BrowserStack are the easiest option.

在开发PC上安装各种浏览器。 Mac和Linux用户可以在developer.microsoft.com/microsoft-edge/获得Microsoft Edge和IE测试工具。 Windows和Linux用户测试Safari更加困难。 在线测试服务(例如BrowserStack)是最简单的选择。

Modern browsers have excellent mobile emulation facilities, but use a few real devices to appreciate touch control and performance on slower hardware and networks.

现代浏览器具有出色的移动仿真功能，但是使用一些实际设备来欣赏速度较慢的硬件和网络上的触摸控制和性能。

Use HTTPS on your end

最终使用HTTPS

The web is gradually making HTTPS the preferred protocol, and this trend is going to continue. Google Chrome is even starting to indicate that non-HTTPS sites as insecure, which is a good reason for you to configure your site to use HTTPS. Our web hosting partner, SiteGround, for example, made it easy for their clients to make the move to HTTPS. To do that, they automated the installation of Let’s Encrypt SSL certificates for all new WordPress accounts, and for existing ones, they made the switch to HTTPS possible with just a click.

网络逐渐使HTTPS成为首选协议，并且这种趋势还将继续。 Google Chrome浏览器甚至开始表明非HTTPS站点不安全，这是将您的站点配置为使用HTTPS的充分理由。 例如，我们的网络托管合作伙伴SiteGround使他们的客户可以轻松地迁移到HTTPS。 为此，他们自动为所有新的WordPress帐户安装了Let's Encrypt SSL证书，对于现有的WordPress帐户，他们只需单击一下即可切换到HTTPS。

您尚未回答问题！ (You Haven’t Answered the Question!)

The question “which browsers should you support?” has become too restrictive. Presume your answer was just “Chrome”:

问题“您应该支持哪些浏览器？” 变得过于严格。 假设您的答案只是“ Chrome”：

• which devices and OS is it running on?

  它在哪些设备和操作系统上运行？

• what range of screen sizes will be supported?

  支持哪些屏幕尺寸范围？

• which version are you referring to? The latest? Chrome 10 and above?

  您指的是哪个版本？ 最新的？ Chrome 10及以上版本？

• what happens when a new version of Chrome is released?

  发行新版本的Chrome会怎样？

• what will happen in other browsers when Chrome effectively becomes your application’s runtime?

  当Chrome有效地成为您应用程序的运行时时，在其他浏览器中会发生什么？

Providing a browser support list has become impractical for client-facing projects. Perhaps the best answer is: “we’ll develop your project according to presumed demographics then test as in many devices, OSes, browsers, and versions as possible according to budget and time constraints”. Even then, you’ll miss that aging Blackberry the CEO insists on using.

对于面向客户的项目，提供浏览器支持列表已变得不切实际。 最好的答案可能是： “我们将根据假定的人口统计学来开发您的项目，然后根据预算和时间限制在尽可能多的设备，操作系统，浏览器和版本中进行测试” 。 即使那样，您仍会错过CEO坚持使用的老化Blackberry。

Develop for the web — not browsers.

为网络开发- 而不是浏览器 。

翻译自: https://www.sitepoint.com/browsers-website-support/

网站支持哪些浏览器友好提示