css gap safari polyfill

Polyfilling Flex Gap

gap is a very useful CSS property that allows to set separation or glutter between children elements in a layout.

gap is a shorthand to set row-gap (vertical gap) and column-gap (horizontal gap) in one declaration.

Unfortunately, gap global support is not very complete, specially in Safari. At the time of this writing, it has 71.56% support due primarily to lack of support in Safari (it started supporting gap for flex containers since iOS 14.5 launched on April 26, 2021).

Important: gap support for flexbox containers is lower than on grid containers, which has a global support of 92.9%

Depending on our target users, they may use old browsers. If you check your website usage and notice that an important part of your users use browsers that don't play well with the gap property on flexbox, you may need to use a polyfill instead.

Simulating Flex Gap

Let's start with the following markup:

We build a container with 8 children. I've ommited styling classes to keep it simple.

Here's the class of the container:

We defined a flex container that allows elements to wrap.

This produces a grid-like view of four elements per row as shown below:

Now, let's try to add a separation between each item within the container. Let's try to add margin between elements by using the Adjacent Sibling Combinator (* + *) :

Here's how it looks:

It doesn't work because when items span more than one column, from the second item on, there's extra margin to the left. This is because we're applying margin to every children that follows another children. You can read more about the Adjacent Sibling Combinator here .

To fix the issue with the extra margin at the left and top, we can add negative margins to the parent like this:

Now our layout looks as expected:

Now that we have a working layout with gaps, here's how our code looks like:

You can customize the margins whenever you want to simulate row-gap and column-gap using CSS properties :

You can't add border that surrounds the content because inner elements have a margin applied to the left.

Since we use margins on both the parent and children elements, if we try to have multiple levels of nesting involving our solution, it won't work because we're trying to modify the margin between elements. Below is an example on this that shows how a little margin is added to the elements.

If you can use gap , go ahead and do it. Your code will be easier to manage and less error-prone. If you can't, make sure that you apply a polyfill that is easy to change in the future so you can evaluate it again in, let's say 1 year or whatever makes sense to you!

flex-gap-polyfill v 4.2.0

Flex gap polyfill.

This is a pure CSS polyfill using PostCSS to emulate flex gap using margins.

Known limitations

• Must use a wrapper div when using margin: auto or background .
• Percentage gaps aren't reliable if the container is not full width of parent container
• Width of flex items with percentages vary slightly from spec because of negative margin on container.

View the demo page for various test cases of the polyfill in action.

The polyfill emulates flex gap by adding margins to each child element and applying a negative margin to the container.

• NEW Now works regardless of whether display: flex and gap are used in the same rule (see Options for ways to optimise)
• Works with unlimited nested elements with any combination of units, px > px, px > %, % > %, etc
• No additional class names or divs needed (except when using margin: auto or background )
• Works even when margin already exists on element (inline styles not supported)
• Style margin, borders and padding as normal
• Supports gap , row-gap and column-gap

Browser support

Supports all current modern browsers, Edge, Firefox, Chrome, Safari, Opera (any browser that supports calc() and var() ).

Add Flex Gap Polyfill to your project:

Use Flex Gap Polyfill to process your CSS:

Or use it as a PostCSS plugin:

Type : Array Default : undefined

When true polyfill will only apply when display: flex | inline-flex and gap are used in the same rule. Provide an array of selectors to match additional rules. Can be strings or regexes . Inlcude /* apply fgp */ within a rule to manually apply the polyfill.

flexGapNotSupported

Type : String Default : false

Manually specify a selector to use when flex gap is not supported by detection via JavaScript , eg flexGapNotSupported: '.flex-gap-not-supported' .

webComponents

Type : Boolean Default : false

When true polyfill will also target slotted elements

9 months ago

3 years ago

4 years ago

flex-gap-polyfill

A PostCSS polyfill for adding gap between flex items

Usage no npm install needed!

Flex gap polyfill.

This is a pure CSS polyfill using PostCSS to emulate flex gap using margins.

Known limitations

• Must use a wrapper div when using margin: auto or background .
• Percentage gaps aren't reliable if the container is not full width of parent container
• Width of flex items with percentages vary slightly from spec because of negative margin on container.

View the demo page for various test cases of the polyfill in action.

The polyfill emulates flex gap by adding margins to each child element and applying a negative margin to the container.

• NEW Now works regardless of whether display: flex and gap are used in the same rule (see Options for ways to optimise)
• Works with unlimited nested elements with any combination of units, px > px, px > %, % > %, etc
• No additional class names or divs needed (except when using margin: auto or background )
• Works even when margin already exists on element (inline styles not supported)
• Style margin, borders and padding as normal
• Supports gap , row-gap and column-gap

Browser support

Supports all current modern browsers, Edge, Firefox, Chrome, Safari, Opera (any browser that supports calc() and var() ).

Add Flex Gap Polyfill to your project:

Use Flex Gap Polyfill to process your CSS:

Or use it as a PostCSS plugin:

Type : Array Default : undefined

When true polyfill will only apply when display: flex | inline-flex and gap are used in the same rule. Provide an array of selectors to match additional rules. Can be strings or regexes . Inlcude /* apply fgp */ within a rule to manually apply the polyfill.

flexGapNotSupported

Type : String Default : false

Manually specify a selector to use when flex gap is not supported by detection via JavaScript , eg flexGapNotSupported: '.flex-gap-not-supported' .

webComponents

Type : Boolean Default : false

When true polyfill will also target slotted elements

• By logging in you accept our terms of service and privacy policy

flex-gap-polyfill Release 4.2.0

Release 4.2.0 toggle dropdown 4.2.0 4.1.2 4.1.0 4.0.6 4.0.5 4.0.4 4.0.3 1.1.0 4.0.2 4.0.1.

A PostCSS polyfill for adding gap between flex items

Homepage Repository npm CSS Download

Documentation

Flex gap polyfill.

This is a pure CSS polyfill using PostCSS to emulate flex gap using margins.

Known limitations

• Must use a wrapper div when using margin: auto or background .
• Percentage gaps aren't reliable if the container is not full width of parent container
• Width of flex items with percentages vary slightly from spec because of negative margin on container.

View the demo page for various test cases of the polyfill in action.

The polyfill emulates flex gap by adding margins to each child element and applying a negative margin to the container.

• NEW Now works regardless of whether display: flex and gap are used in the same rule (see Options for ways to optimise)
• Works with unlimited nested elements with any combination of units, px > px, px > %, % > %, etc
• No additional class names or divs needed (except when using margin: auto or background )
• Works even when margin already exists on element (inline styles not supported)
• Style margin, borders and padding as normal
• Supports gap , row-gap and column-gap

Browser support

Supports all current modern browsers, Edge, Firefox, Chrome, Safari, Opera (any browser that supports calc() and var() ).

Add Flex Gap Polyfill to your project:

Use Flex Gap Polyfill to process your CSS:

Or use it as a PostCSS plugin:

Type : Array Default : undefined

When true polyfill will only apply when display: flex | inline-flex and gap are used in the same rule. Provide an array of selectors to match additional rules. Can be strings or regexes . Inlcude /* apply fgp */ within a rule to manually apply the polyfill.

flexGapNotSupported

Type : String Default : false

Manually specify a selector to use when flex gap is not supported by detection via JavaScript , eg flexGapNotSupported: '.flex-gap-not-supported' .

webComponents

Type : Boolean Default : false

When true polyfill will also target slotted elements

The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.

See all contributors

Something wrong with this page? Make a suggestion

Export .ABOUT file for this package

Last synced: 2023-08-23 20:41:58 UTC

Login to resync this project

The curious case of flexbox gap and Safari

• 28 Apr 2021

Update at the end

The gap property was first introduced to add inner grid spacing but was extended in the spec to work with flexbox. With one line of code, you can replace something like this:

That’s nice, but Safari doesn’t support gap in flexbox just yet. Normally I’d just reach for @supports :

Unfortunately, Safari already supports gap in grid , so this doesn’t work. This is one of those weird cases where there is no easy CSS-only solution, though there have been proposals for workarounds .

This has left me scratching my head. You could polyfill with JavaScript or use PostCSS , but at this point, is it worth it? That’s a question that all frontend developers have to weigh from time to time, and there’s no one-size-fits-all answer.

I will probably wait until Safari supports flexbox gap in the latest two versions before using it, mainly because it doesn’t take that much more CSS to achieve the same effect. The only drawback is I cannot change the margins of the flex container. This can be overcome with an extra wrapper element, but then you’re starting to complicate the markup.

If you want to read more about the flexbox gap issue, check out this post from Ahmad Shadeed . And if you found this post helpful, please like it on Dev Community and let me know on Twitter .

Until tomorrow!

As of Safari 14.1, flex gap is now supported ! This brings me one step closer to replacing my object styles that do the same thing. I typically wait until something is supported in the last two versions of the evergreen browsers (or can be worked around).

I would still love to have a way to use @supports , but I’ll take what I can get. Anyway, happy coding!

A blog by franleplant

I talk about Programming, Tech Culture and random stuff.

Subscribe to our mailing list!

How to use css flex gap in unsupported browsers.

Written by franleplant : Tech Lead and Software developer with a degree in Engineering. Woodworker, all things Javascript, Rust and Software Architecture. Github

I recently have been writing a decent amount of CSS and one of the things I have really enjoyed is the new grid layout and specially the grid gap property that let’s you set the distance, sometimes called gutter , between the grid cells which is actually a supper common thing to do.

IMPORTANT the gap property only modifies the distance between cell items , and it does not affect the distance of those cell items to the edges of the grid container.

It turns out that the gap property can also be used with flex layout and it solves so many problems!

But there are still some browsers that don’t support the gap property while using the flex layout among which you can find safari , see compatibility table , so below there is a really easy method to simulate the gap between flex box items.

With flex gap #

You get something like this:

• yellow: a trivial wrapper, not involved in the actual layout.
• pink: the flex container, it only shows through the gaps .
• black: the flex items.

Without flex gap #

We can easily simulate the gap property with a slightly more complicated method of giving each item half of the size of gap via margin and offsetting the container by giving it a negative margin of that same amount. This is because the gap property only affects the distance between items and it does not affect the distance between items and the edges of the flex container.

As you can see, the flex container will eat up some space of its parent, the wrapper , which is going to be most of the time necessary to render things as you would expect with gap .

Comparing #

The end result is about the same, but you might need to wrap it up in another container for more flexible composition.

Check the example code , let me know if you have any questions.

Instantly share code, notes, and snippets.

brunobertolini / safari-flex-gap-polyfill.css

• Download ZIP
• Star ( 0 ) 0 You must be signed in to star a gist
• Fork ( 0 ) 0 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save brunobertolini/52364a674dcb65db43cda815a24a8bbd to your computer and use it in GitHub Desktop.

A New Container Query Polyfill That Just Works

There is now a polyfill for Container Queries that behaves as perfectly as a polyfill should:

• You conditionally load it when you detect the browser doesn’t support Container Queries.
• You write CSS as you normally would, including current-spec-compliant Container Queries syntax code.
• It just works.

It’s pretty great to have a container query polyfill that is this easy to use and from Chrome itself, the first-movers as far as early test implementations. Looks like Surma put it together — thanks Surma!

There was a Container Query polyfill from Jonathan Neal called cqfill that predates this. I’m not sure if it’s officially deprecated, but it required extra non-spec CSS to work and PostCSS processing, so I’d consider it deprecated in favor of this newer polyfill.

Loading the polyfill is like this:

You can pull it from npm or use as a <script> , but this way seems best to me to keep things light and easy.

Then you’re free to use the syntax for a container query in CSS. Say you have a weather widget in HTML. You’ll need an extra wrapper element for your queries. That’s just the rule: you can’t query the thing you style .

The wrapper is instantiated as a container:

Then you write any global styling for that component, as well as container query scoped styles:

Container Queries polyfill example

Here’s that slightly more fleshed-out demo of the Container Query polyfill using an actual weather widget:

I first saw this over on Bramus’ blog , and he’s got a classic card demo going with this Container Query polyfill. Scroll up and down. You’ll see a row of bear cards at the top (if your browser window is wide enough), and then similar bear cards in different layout positions below that change into nicer formats when they can, based on the container query.

Container Query polyfill browser support

The polyfill docs say:

The polyfill relies on  ResizeObserver ,  MutationObserver  and  :is() . Therefore, it should work in all modern browsers, specifically Chrome/Edge 88+, Firefox 78+ and Safari 14+.

There are all sorts of other minor little caveats covered in those docs, including what it does and doesn’t support. Seems like mostly niche stuff to me — the main/typical use cases are covered.

A game changer?

As I write, we’ve seen behind-flag support for Container Queries in Chrome, and it is an official spec draft now:

Today's CSSWG call: 🥳 First Public Working Draft of Contain Level 3 (container queries) 🥳 FPWD of Cascade Level 6 (scope) This means the proposals have graduated to being official work-in-progress specifications. Still a lot to do before browsers ship, but it's a big step! — Mia, on Bass (@TerribleMia) December 8, 2021

That’s extremely exciting and points heavily toward browsers actually shipping with Container Queries, even if the syntax changes a bit on the way (it already has a number of times). But, of course, we have no idea if/when Container Queries do ship — and when that magical threshold is crossed, we also don’t know where we can use them without much worry, like we can with flexbox and grid now.

That “just use it” date is probably a decent ways off, but if you’re into the idea of polyfilling and being careful with progressive enhancement, I’d say the date for using Container Queries could be right now-ish. Looks to me like the polyfill script comes across the wire at 2.8kb, so it’s fairly trivial in size for something so important.

I suspect this polyfill will skyrocket usage of Container Queries in this coming year.

The fact that your styles only correctly apply after a JavaScript file is downloaded and executed puts sites into Flash of Unstyled Content (FOUC) territory. Here’s a video recording where I can see it on my own demo. I’m not sure there is a way around this other than intentionally delaying rendering, which is generally considered a no-no. Similar to loading web fonts, FOUC is probably a good thing as it means your content is never hidden or delayed, even if the shifts aren’t ideal. The FOUC should go away once browser support lands and the polyfill stops loading at all.

Have fun polyfilling container queries! I’d love to see more demos of it.

This is so exciting! Especially if we could finally start loading image sizes based on the image’s container’s size instead of the window width.

https://github.com/w3c/csswg-drafts/issues/5889

I’m stoked for this. That said, why did you style “desktop first”? Aren’t we supposed to style for “mobile” by default, then work bigger?

Normally I’m not too opinionated on which “direction” you work, but in this case, I think you’re right. Because of the FOUC, I think it’s best to build the component with default styles that work in smaller spaces, then let it enhance to re-style in a large space if possible.

The demo is a good example of this, where the default of all the days of the week in a horizontal row will have a bad time of fitting in a small space before the polyfill kicks in. So yeah, I totally should have done it the other way.

I’m excited for this. I’m trying to add it to a React project — I’m getting pretty good at actually writing React, but bundling not so much. How do you actually get this into a React project?

Hi, I have a problem. I have done all settings and I wanted to use @container. However, Chrome doesn’t seem like detecting the query. I inspected that “container: inline-size” was detected by checking css of a container div but I tried to increase and decrease the size of the browser and nothing happened.

I would appreciate if you could give me a solution.

I’d suggest cq-prolyfill is a better solution than CQfill as it gives container queries for all CSS properties: width, height, colour, text alignment, etc. Works with data attributes if you don’t want to use a pre-processor. Uses MutationObserver along with other DOM events. [https://ausi.github.io/cq-prolyfill/demo/]

This does not appear to be working in Firefox, where it is needed the most. I’m seeing different results for your examples on Firefox vs Chrome. (Firefox 106.0.5 (64-bit) on MacOS 12.6.1)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Polyfill.js

Css polyfilling made easy, introduction.

Polyfill.js is a library designed to make writing CSS polyfills much, much easier. It's an abstraction library that takes care of the boilerplate, so you can focus on what your polyfill actually does.

For most CSS polyfills, the hardest part is not the polyfill logic itself, it's the boring stuff, the stuff that the browser is supposed to do for you: downloading the CSS, parsing it, and finding the parts you care about. If the CSS contains media queries, you need to deal with them, detect when they apply, and manually listen for changes.

Furthermore, on the Web today, most polyfills exist isolated from each other, which means they all repeat the same expensive tasks. Polyfill.js solves this problem. It provides a common API for Polyfill authors to hook in to, so all the hard work happens only once at most. The stylesheets are downloaded, parsed, and stored in a cache so additional requests don't do double work.

Download Version 0.1.0

Development — 28KB, with comments Production — 3.6KB, minified Full Project — ZIP format

Browser Support

Polyfill.js has been tested in all modern browsers and supports Chrome, Firefox, Safari, Opera, and Internet Explorer 7+.

How It Works

Polyfill.js makes writing your own CSS Polyfill easy by breaking it down into the following three steps:

1) Include the Polyfill.js library on your page.

It doesn't really matter where you put it, as long as it appears after the stylesheet(s) containing the rules you want to polyfill.

2) Create a new Polyfill Instance

You create a new instance of the Polyfill object by passing in one or more keywords representing the CSS features you want to polyfill. The keywords can be declaration keywords (property-value pairs) or selector keywords.

The following expression creates an instance to polyfill the :local-link CSS pseudo-class:

3) Register Event Callbacks

Once you have your polyfill instance, you simply register two callbacks: doMatched() and undoUnmatched() . When the page first loads and Polyfill.js has done all its work behind the scenes, the doMatched() callback is invoked and is passed a list of CSS rules that contain the specified keywords and match the current media.

If the media values change (usually by resizing the browser window) and new rules match, the doMatched() callback will be invoked again, each time being passed the newly matched rules.

If the media value changes and some rules no longer match, the undoUnmatched() callback is invoked and passed a list of rules that previously matched but no longer do.

Position Sticky

"Sticky" is a new CSS position value to allow elements to stick in place only after a specified scroll position is met. This is most commonly used for navigation elements to stick in place after you start scrolling down the page.

Local Links

Local links ( :local-link ) is a new CSS pseudo-class for styling anchor tags that point to URLs within the current domain.

The Polyfill.js API consists of three public objects: Polyfill , Ruleset , and Rule . Only Polyfill is accessible in the global scope, the others are passed as arguments to callback functions.

The Polyfill Object

Create a new polyfill object. (Note: the new operator is optional.)

• selectors : {Array} a list of strings to match against CSS selectors.
• declarations : {Array} a list of strings to match against CSS declarations (property-value pairs). The format of the string must be prop:value . The string may optionally include an asterisk which will match any number of characters, e.g. display:*flex will match vendor prefixes. (Note: whitespace on either side of the colon is not significant.)
• exclude : {Array} a list of link element ID attributes. If the exclude option is present, all stylesheets but the ones with those IDs will be downloaded.
• include : {Array} a list of link element ID attributes. If the include option is present, only those stylesheets will be downloaded. (Note: exclude and include cannot be used together)

returns {Polyfill} the newly created instance

Register a callback to be invoked whenever new rules match the passed keywords. This happens as soon as the page is loaded as well as when media changes. The callback is invoked with a Ruleset object that contains all of the newly matched CSS rules.

callback {Function}: the function called

returns {Polyfill} the current Polyfill instance

Register a callback function to be invoked whenever previously matched rules no longer match. This could be because the media changed or the polyfill was destroyed.

callback {Function}: A callback function. Each invocation is passed a Ruleset object which contains all of the newly matched CSS rules.

Fetch all the CSS rules that match the current media. (Note: rules that are not in a media block always match.)

returns {Ruleset} a Ruleset object containing all of the currently matched rules.

Destroy the polyfill instance by removing any media listeners and invoking the undoMatched callback.

returns {undefined}

The Ruleset Object

Iterates over a Ruleset invoking a callback for each Rule object in the Ruleset. Callbacks are invoked with the Rule object as their only arguments.

callback {Function}: the function called per iteration

returns {Ruleset} the current instance

Returns the Rule instance at the specified index.

index (Number): the index of the rule to return

returns {Rule} the Rule object at the specified index.

Returns the number of rules in the Ruleset

returns {Number}

The Rule Object

Returns the full selector as a string. If the rule contains more than one selector they are joined with a comma.

returns {String} the full selector

Returns an object map of the CSS declaration. (Note: since an object cannot have duplicate keys, duplicate CSS property values ignored. If you need to access duplicate CSS values, you can manually inspect the Rule instance for the raw data.)

returns {Object} the rule's declaration

Returns a string of the media query value. If the rule contains more than one media query value (e.g. a nested rule) the media values are joined on and .

returns {String} the full media query

A Complete Example

Putting it all together, this is all the code you'd need to write a functioning polyfill for the new CSS property :local-link , which allows you to style links based on whether their href attribute points to a URL on the same domain (ok, there's a little more to it than that, but you get the idea) .

Note: This example uses jQuery:

flex-gap-polyfill

• 1 Dependency
• 2 Dependents
• 36 Versions

Flex Gap Polyfill

This is a pure CSS polyfill using PostCSS to emulate flex gap using margins.

Known limitations

• Must use a wrapper div when using margin: auto or background .
• Percentage gaps aren't reliable if the container is not full width of parent container
• Width of flex items with percentages vary slightly from spec because of negative margin on container.

View the demo page for various test cases of the polyfill in action.

The polyfill emulates flex gap by adding margins to each child element and applying a negative margin to the container.

• NEW Now works regardless of whether display: flex and gap are used in the same rule (see Options for ways to optimise)
• Works with unlimited nested elements with any combination of units, px > px, px > %, % > %, etc
• No additional class names or divs needed (except when using margin: auto or background )
• Works even when margin already exists on element (inline styles not supported)
• Style margin, borders and padding as normal
• Supports gap , row-gap and column-gap

Browser support

Supports all current modern browsers, Edge, Firefox, Chrome, Safari, Opera (any browser that supports calc() and var() ).

Add Flex Gap Polyfill to your project:

Use Flex Gap Polyfill to process your CSS:

Or use it as a PostCSS plugin:

Type : Array Default : undefined

When true polyfill will only apply when display: flex | inline-flex and gap are used in the same rule. Provide an array of selectors to match additional rules. Can be strings or regexes . Inlcude /* apply fgp */ within a rule to manually apply the polyfill.

flexGapNotSupported

Type : String Default : false

Manually specify a selector to use when flex gap is not supported by detection via JavaScript , eg flexGapNotSupported: '.flex-gap-not-supported' .

webComponents

Type : Boolean Default : false

When true polyfill will also target slotted elements

• postcss-plugin

Package Sidebar

npm i flex-gap-polyfill

Git github.com/limitlessloop/flex-gap-polyfill

github.com/limitlessloop/flex-gap-polyfill#readme

Downloads Weekly Downloads

Unpacked size, total files, last publish.

9 months ago

Collaborators