Phillip Dias wrote:
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.

Frank Cook wrote:
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

Twinstream wrote:
Since we can chain together rules in a @supports why could not one add a (display:flex) supports and then add a (display:grid and not:display:flex) supports ? That would certainly separate out the css for the flex and grid display.

Frank Cook wrote:

I am very much a novice at this, and trying to learn. Considering such questions, even if hypothetical, can help clarify matters. The question raised creates in my thinking yet further questions.
1. Would the logic of that "and not" @supports rule mean that the only browsers which would take take notice of it would be browsers that do support CSS Grid Layout but don't support Flexbox? I suspect we may have to wait some time before such browsers appear.
2. What would one do when CSS Grid needs to incorporate flex containers? For example, centred menus which at lower viewports need more than one line, but at higher viewports are in one line only. As far as I can tell, Flexbox can do this easily without breakpoints, keeping the items in each line horizontally centred; CSS Grid seems incapable of making the items in the last line centred. I suspect that this may be something that is addressed in future developments of CSS Grid Layout.

I think the answer to item 1 may be 'Yes', and the response to item 2 may be someone revealing that it can be done in CSS Grid Layout without breakpoints.

Frank

Twinstream wrote:
The order would appear as follows in the @supports listing:
"Display:Grid"
"Display:Flex and (not(Display:Grid)"
...
I think this is what I am trying to achieve rather than mix css....which I think is the issue of cascading effect of css main style-sheet.

Is this a Logic pattern that works ?