Browser compatibility is critical for ensuring that a website displays and performs properly across several web browsers. Every browser renders code differently, thus compatibility testing is critical for reaching a larger audience. It involves evaluating how a website appears in several browsers such as Chrome, Firefox, Safari, and Internet Explorer.

As the number of mobile users grows, interoperability with mobile platforms becomes increasingly important.

Before

Before Rails 7.2, browser compatibility was detected using the browser gem

gem "browser"

To detect whether a browser can be considered as modern or not, we create a method that abstracts our versioning constraints.

def modern_browser?(browser)
  [
    browser.chrome?(">= 65"),
    browser.safari?(">= 10"),
    browser.firefox?(">= 52"),
    browser.ie?(">= 11") && !browser.compatibility_view?,
    browser.edge?(">= 15"),
    browser.opera?(">= 50"),
    browser.facebook?
      && browser.safari_webapp_mode?
      && browser.webkit_full_version.to_i >= 602
  ].any?
end

After

Rails 7.2 will introduce allow_browser to help us specify the minimum browser versions required for the application

We can set the allow_browser to our ApplicationController as below to restrict support to browsers that natively support webp images, web push, badges, import maps, CSS nesting + :has

class ApplicationController < ActionController::Base
  allow_browser versions: :modern
end

We can also customize the allow_browser method to specify browser versions as in the example below

class ApplicationController < ActionController::Base
  allow_browser versions: { safari: 16.4, firefox: 121, ie: false }
end

In the above method, allow_browser will allow all versions of Chrome and Opera and only Safari above 16.4+ and Firefox 121+ but no versions of “Internet Explorer” (ie) is allowed

If the application does not support Safari, then we can disable it by setting safari as false

class ApplicationController < ActionController::Base
  allow_browser versions: { safari: false }
end

A browser that is blocked will by default be served the file in public/426.html with a HTTP status code of 426 Upgrade Required.