Do you use the @support rule?

[pziecina]

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.

[osgood_]

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]

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.

[osgood_]

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.

[pziecina]

Playing devils advocate now

If someone is looking for the quickest and most streamlined way to produce an rwd site, then would not bootstrap once version 4 is released, which hopefully will bring its footprint file size down by 30%, not be the quicker and easier method of development for most, especially when compared to the time and testing required for creating custom code?

[osgood_]

pziecina  wrote

Playing devils advocate now

If someone is looking for the quickest and most streamlined way to produce an rwd site, then would not bootstrap once version 4 is released, which hopefully will bring its footprint file size down by 30%, not be quicker and easier method of development for most, especially compared to the time and testing required for creating custom code?

No, not if you have coding experience. It would personally take me longer to find out what css has been applied and where. It also uses poor naming conventions and non html 5 components, you have to refactor the css, leaving a lot of redundant css attached in the background, which is something I will never be able to accept........... truely poor. Plus why would I want to keep flipping backwards and forwards - v3 to maintain my old websites and v4 to produce new ones.......a pointless workflow. Bootstrap is everything that is bad about web-development in my opinion as you have zero control over what goes into it or when something is supported....a very poor solution but maybe the best if you work in a team and are more or less 'forced' to use it or are an amatuer. However if you work as an individual website developer you should take more pride in what you produce and ditch poorly conceived frameworks (which are a one size fits all appproach) in favour of bespoke coding which takes no longer once you get up to speed. Lets face it Bootstrap is a serious of snippets - any reasonable developer can build their own, using their own naming convention and own css.

Also why learn a workflow that doesnt keep up with current trends, is always going to be 2 years behind, and quite possibly will be  dead once grid really does take off. Its more of a convienience solution than the correct solution and that's ok for amatuers in my opinion but a poor choice for professionals.

Its a NO from me