Fallback First or Diplay Flex Support...

User 244626 Photo


Registered User
811 posts

What is the difference between using Fallback First and simply adding a new support query option Display Flex ?

Are they the same ? Can I just use Fallback First and not add a Display Flex query ? I know that I need a Display Grid support Query but confused about the other two.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

So I really do not see any difference in Fallback First and using @support Display Flex other than one is enclosed in a @supports. Why would we need Display Flex @supports is my question ?


.container-grid.Fallbackfirst {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}

@supports ((display: -webkit-flex) or (display: flex)) {
.container-grid.AtsupportFlexDisplay {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
}


I guess I will wait for the other videos coming....
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Ok so I made a simple layout with all three possibile displays. Fallback First (using Flex Display), @supports Display Grid, and @supports Display Flex (using Flex Display).

Here is the project file in the order as listed above.

My result shows that I would probably only want to use Fallback First (using Flex Display) and @supports Display Grid.

When using @supports Display Flex (using Flex Display) IE11 did not display correctly. Using Fallback First covers IE11, Edge, modern browsers, and a old XP Chrome that has Flex capability.

I welcome any feedback on other browsers.....
Attachments:
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,533 posts

I have been playing with Feature Queries in SD V3, and have come to conclusions, some of which I think are demonstrated by Twinstream's ThreeDisplay.rsd project -

(a) the support queries are placed in main.css in the same order as they are set up in the 'Add @support rule' box;
(b) where there are media queries, (a) above applies within each media query;
(c) the SD V3 canvas will naturally show the situation for each individual support query;
(d) in browsers (by contrast with the canvas at (c)above) the order of support queries in main.css is important, the css file being processed from top to bottom.

Because browsers that can handle CSS Grid Layout seem invariably also to be capable of handling Flexbox, it can be important not to put Display Grid before Display Flex in (a) above. I found that otherwise item (d) above can mean that the Display Grid styles can be overridden by the Display Flex styles in browsers that support CSS Grid Layout.

I have tried to illustrate this is the simplest possible way with the following files which have only one relevant setting, which is the top border colour -
https://fc7777.coffeecup.com/rgb-test-1.rsd (where I put the Display Flex last, and which displays the flexbox setting in Firefox);
https://fc7777.coffeecup.com/rgb-test-2.rsd (where I put the Display Grid last, and which displays the correct setting in Firefox).

I will be interested to learn of any corrections necessary regarding the conclusions at (a) - (d) above.

Frank
User 244626 Photo


Registered User
811 posts

Thanks for the tip Frank. I did have them backwards. Still learning about @supports.....
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

It almost seems easier to me to create anything in grid to "replace" containers made with flex by setting the flex containers display to "none" and then creating containers in grid display to replace them. In flex display then the grid containers display would be set to "none" that I am replacing.

At least this way (i would hope) any styles would stay with the containers and I would not have to worry about getting lost in the worry of if I am in the right view. Does this make any sense ?

I mean, layouts styles are going to be different such as height etc.....I am not going to be able to rely on grid being my last bubbling overide css layer to control flex ? :rolleyes:
Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,533 posts

It's tricky. If one sets display:none on a container then, of course, all its contents also fail to display. Alternate containers for the same content would seem therefore to involve duplicating the contents and therefore slowing page loading times (I assume that display:none items are still loaded by browsers).

I'm toying with various ideas for SD V3 as present, such as the following.
1. I have in mind always to start by setting the @supports rules to Display Flex and Display Grid in that order. Although I am likely to use only the Fallback First and Display Grid in practice, trying later to add Display Flex may be problematic as shown in the previous posts in this thread.
2. One can have a clear temporary indicator of the mode in which one is working by setting a 10px left border on the Body, which is different in each mode (e.g. solid green for Fallback First, dashed red for Display Flex, solid blue for Display Grid, as in https://fc7777.coffeecup.com/rgb-test-3.rsd). Although this will have to be removed before making pages public, it may have the further advantage of testing in 'Preview on...' what mode the chosen browser supports.
3. I intend to use just Fallback first and Display Grid unless I find an excellent reason for using Display Flex.
4. The only reasons I can think of for adding CSS Grid Layout to my current web pages are:
(a) better appearance, or
(b) improved functionality.
There seems no point in conversion to CSS Grid Layout otherwise.
5. I may, however, do the following with my RSD 2.5 pages even where I don't intend immediately to add CSS Grid Layout:
(a) import them to SD V3, setting up as in items 1 and 2 above;
(b) make the minimum changes that may be needed to ensure that the pages appear and work approximately as they did in RSD 2.5.
This should mean that
(i) I will be able to make any adjustments in SD V3 rather than going back to RSD 2.5;
(ii) future changes for better appearance or improved functionality will have been prepared for.

If anyone can see that any of the above notions may prove problematic, I will be glad to know of the likely problems.

Frank

User 244626 Photo


Registered User
811 posts

I think your observations are on point and useful.

I really like the idea of some kind of color identifier on the layoiut screen that could keep me focused on the display setting.
Coffeecup should add such a feature. Great idea !
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

I think for now my plan of attack is to use Bootstrap 4 with Display Grid only. This will allow me to design with no hassle or worry and be able to utilize all the features of Grid Layout and Flex too.

Anyone that visits my site that does not have a browser that supports the "true spec" of display:grid will have a friendly redirect to a simple Bootstrap 3 landing page that will not use Grid or Flex.

I wonder if we will ever see the day in the Future where a cutting edge browser does not support Flex anymore ? :)
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

What browsers or devices do not support flex?
As for not supporting grid its only old iPads isn't it and Microsoft with ie11 and Edge which lets face it are way behind the times anyhow.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.