Skip to main content
pziecina
pziecina
Legend
June 2, 2017
Question

Do you use the @support rule?

  • June 2, 2017
  • 1 reply
  • 559 views

A few days ago i posted a reply saying that i would now use css grid and flexbox layouts.

The reason i wrote that was that after experimenting, i found that by using @support i could create a flexbox fallback for none grid supporting browsers very easily using the @support rule. This got me wondering if many people know about, know how to use or would use @support rules to easily create fallbacks.

All modern browsers, (except IE11 and below) and devices, (android from 4.4, iOS from v7) support the use of the @support rule.

My question is, do you know about and use the @support rule, and if not would it be a property that you think is usefull and would use if it was better supported in your prefered code editor, (or ide)?

css feature queries, (@support) -

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

Note: A polyfill for IE and none supporting devices does exist, but i do not think we really require one.

This topic has been closed for replies.

1 reply

O
osgood_
Legend
June 2, 2017

pziecina  wrote

A few days ago i posted a reply saying that i would now use css grid and flexbox layouts.

The reason i wrote that was that after experimenting, i found that by using @support i could create a flexbox fallback for none grid supporting browsers very easily using the @support rule. This got me wondering if many people know about, know how to use or would use @support rules to easily create fallbacks.

I must confess I know nothing about @support

However I'm not sure I want to produce what is effectively 2 workflows to manage a website using grid and flexbox as a fall back option just incase a browser doesn't support grid, one solution is enough in the production environment for me, I think.

pziecina
pziecinaAuthor
Legend
June 2, 2017

Thats just it Os, using @support with css grids for the layout, and flexbox for the components, would mean the fallback could be as simple as placing the css grid code inside the @support rule, and using the display: flex, flex-flow: row wrap outside the @support rule to create the fallback layout.

Also if used with media-query, it would allow css grid layouts to be used for desktop, and flexbox for mobile devices. Which is what i have found to be the best way to use both.

O
osgood_
Legend
June 2, 2017

pziecina  wrote

Thats just it Os, using @support with css grids for the layout, and flexbox for the components, would mean the fallback could be as simple as placing the css grid code inside the @support rule, and using the display: flex, flex-flow: row wrap outside the @support rule to create the fallback layout.

Also if used with media-query, it would allow css grid layouts to be used for desktop, and flexbox for mobile devices. Which is what i have found to be the best way to use both.

But its all extra code/testing that needs to be composed and managed. I dont believe in this approach if you are producing a commercial project, its just extra work which the client is not going to pay for.

It's ok for you and me when we are testing in our free time but as I keep saying once I start on a commercial project I just need to get it produced in the quickest and most streamlined way I possibly can, not give myself extra headaches.

Whilst I am seeing a lot more traction in terms of talking up grid it's mainly from those that are not producing commercial websites day in day out but mostly offering tutorials or personal websites. There will come a time when that crosses over to those that do produce websites on a commercial basis just as Flexbox is now considered a mainstream workflow - I dont feel that with grid at this moment - its still in its infancy waiting to 'grow' up a bit more.

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices