How to support Tailwind CSS in older browser versions in Hyvä theme?

General

Hyva Tutorials
-
General
-
How to support Tailwind CSS in older browser versions in Hyvä theme?

How to support Tailwind class in older browser version_

Tailwind CSS is a popular utility-first CSS framework that allows developers to rapidly build modern and responsive user interfaces. It provides a wide range of pre-built utility classes that can be easily customized to create unique designs.

However, one challenge that developers often face is ensuring that their Tailwind CSS-based websites are compatible with older browser versions. In this article, we will explore how to support Tailwind CSS in older browser versions of the Hyvä theme.

As of the current moment, the incorporated Alpine.js version in Hyvä 1.3.0 is 3.12.3, which extends compatibility to Safari on iOS versions 12.2 (rolled out on 2019-03-25) and more recent iterations.

It’s worth noting that for the Tailwind CSS classes employed by Hyvä, the requisite Safari version on iOS is 14.5, which became available on 2021-04-21.

Native Alpine.js 3.12.3 vs the Hyvä Bundle

The original Alpine.js 3.12.3 inherently caters to Safari on iOS 13.4 (unveiled on 2020-03-24) due to its utilization of the Nullish coalescing operator.

However, in the case of Hyvä 1.2.6, it incorporates a modified iteration of Alpine.js that extends support to Safari on iOS 12.2.

Enabling compatibility with earlier versions necessitates the implementation of JavaScript polyfills for specific methods and the revision of Tailwind classes within templates.

New to Hyvä?? Learn about the Hyvä Theme from basics!

Alpine and Tailwind v2 versions of Hyvä

The most straightforward approach to accommodate older browsers is to base your development on a Hyvä version that integrates Alpine.js and Tailwindcss v2. As of the current writing, the most recent release featuring Alpine.js and Tailwind v2 is 1.1.25.

No Support

Kindly note that support for Hyvä releases in the 1.1.x series has been discontinued. Ongoing development and new features are exclusively tailored for versions that leverage Alpine v3 and Tailwind v3.

Nevertheless, opting for an older Hyvä release could be a viable decision, particularly when older browser support is essential, and the existing feature set adequately meets your requirements.

In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. However, it does not support any version of Internet Explorer, including IE 11.

queueMicrotask

Incorporating a polyfill for queueMicrotask will broaden compatibility to include Safari on iOS 12.0.

For example:

Copy Code

<script>
if (typeof window.queueMicrotask !== 'function') {
    window.queueMicrotask = function(callback) {
        Promise.resolve()
            .then(callback)
            .catch(e => setTimeout(() => {
                throw e;
            }));
    };
}
</script>

Array flat and flatMap

Integrating a polyfill for Array.prototype.flat and Array.prototype.flatMap will expand compatibility to encompass even earlier versions of Safari on iOS.

For example:

Copy Code

<script>
if (!Array.prototype.flat) {
    Object.defineProperty(Array.prototype, 'flat', {
        configurable: true,
        value: function flat () {
            var depth = isNaN(arguments[0]) ? 1 : Number(arguments[0]);

            return depth ? Array.prototype.reduce.call(this, function (acc, cur) {
                if (Array.isArray(cur)) {
                    acc.push.apply(acc, flat.call(cur, depth - 1));
                } else {
                    acc.push(cur);
                }

                return acc;
            }, []) : Array.prototype.slice.call(this);
        },
        writable: true
    });
}
if (!Array.prototype.flatMap) {
    Object.defineProperty(Array.prototype, 'flatMap', {
        configurable: true,
        value: function flatMap (callback) {
            return Array.prototype.map.apply(this, arguments).flat();
        },
        writable: true
    });
}
</script>

Required CSS changes

In conjunction with Alpine.js integration, adjustments are essential for styling purposes as well. Specifically, Hyvä Tailwindcss relies on the gap property within flexbox for styling across various templates, utilizing Tailwind classes such as gap-x-2, gap-x-4, gap-y-0, gap-y-1, gap-y-2, and gap-y-16.It’s important to note that Safari for iOS started supporting the gap property for flexbox from version 14.5, which was released on April 26, 2021.

Copy Code

class="flex gap-x-2"

To ensure compatibility with older versions of Safari for iOS, modify the Tailwindcss classes to utilize the space property. For instance, replace gap-x-2 and gap-y-2 with space-x-2 and space-y-2, respectively. This adjustment should be made for every instance where the gap-* classes are employed in conjunction with flex.

Copy Code

class="flex space-x-2"

The Tailwind classes in the form of space-* correspond to the CSS property margin, which enjoys universal support across all versions of Safari on iOS. It is essential to review the layout after each modification and be ready to implement further adjustments if necessary.

Adding content to the page <head>

To ensure compatibility with older versions, we suggest incorporating the polyfill code directly within the <head> section of your page. To render a template within the <head>, it’s imperative to declare a child for the head.additional block.

For example:

Copy Code

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
>
    <body>
        <referenceContainer name="head.additional">
            <block name="head.alpinejs.polyfills" 
                   template="Magento_Theme::page/js/alpinejs-polyfills.phtml"/>
        </referenceContainer>
    </body>
</page>

That’s it !!

Thanks & Happy Coding!

More resources on Hyva themes: