Suggestion: SD V3 default for...

User 379556 Photo


Registered User
1,533 posts

I suggest that SD V3 open a new (or newly converted from RSD) project with the @supports rules for Display Grid and Display Flex already set up in that order. One could delete or just leave unused either of those rules if one didn't need them.

The reasons are as follows -
(a) The @supports rules in main.css are in the order that they are set up.
(b) That order cannot be changed: if one tries to change the order by deleting an @supports rule and re-entering it lower down the list, one loses all the work one has done within that @supports rule.
(c) Browsers process the main.css file from top to bottom, with the result that an @supports Display Flex rule added after an @supports Display Grid rule has the following effect: the @supports Display Grid rule gets ignored by all browsers that support Display Flex.

The problem is illustrated by 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).

Frank
User 2903050 Photo


Registered User
260 posts

Maybe a little naive from myself but I am creating my site with fallback then grid. What browsers actually don't support flex? If they don't support flex then they won't support grid. So for me its fallback or a mixture of grid and flex box items together in a @support grid.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Here is a site where you can find out which browsers support what:
https://caniuse.com/#search=flex
Looks like there are some bugs in IE11, but the rest of them are in clear.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

Frank,
I am able to move the @support rule once they are created so you do not have to delete to change the order. On the far left side of the supports rules are up/down triangles that can be selected and dragged up or down.

My observations with your tests seem to actually work the way it should. The order should be Flex then Grid.

The only reason I can see that one might want to add a Display Flex is if you used Bootstrap 3 where the components are not made Flex. You would then use Fall back first (no using Flex or Grid Layout), Display Flex, and then Grid.

I believe you would only choose "Fallback first" or "Fallback first with Grid" if using Foundation 6 or Bootstrap 4.

I also now see where it would be a advantage as in the videos Coffeecup has made on Grid to do styling in Fall back First. Any styling done in Display Grid will overide Fall back First so you in effect are just duplicating the style if you are doing it in Display Grid. If you notice in the videos they switch to Fallback to make those changes so it keeps the main.css size down.

Other settings like margin, height of containers, and possibly text size may have to be duplicated in both Displays because of individual characteristics in the design setting. But that is what we are doing, creating two layouts.

Phil,

That is a good observation and I needed to hear it again....sometimes I can get "Way" off course.

Inger,

Thanks for the link, it is a very helpful and useful site and may prove very valuable when using Site Designer.


Bootstrap 5 CSS Grid.
User 379556 Photo


Registered User
1,533 posts

Twinstream wrote:
I am able to move the @support rule once they are created so you do not have to delete to change the order. On the far left side of the supports rules are up/down triangles that can be selected and dragged up or down.

Thanks for that - I'd tried clicking on them, and hadn't thought of dragging them.

Problem solved, so thanks again.

Frank
User 2903050 Photo


Registered User
260 posts

Call me stupid but why have flexbox and grid options easily available for fallback mode. Why not just have grid mode option for only in grid mode.
I am worried now I have flex box items in fallback mode?
User 244626 Photo


Registered User
811 posts

Phil Dias wrote:
Call me stupid but why have flexbox and grid options easily available for fallback mode. Why not just have grid mode option for only in grid mode.
I am worried now I have flex box items in fallback mode?


You know, it is what kind put me for a loop when trying to understand it all... seeing the additional flex and grid display options.

My first mistake was to start creating a grid in fallback mode. Nope not a good idea.

Finally I created a Display:Grid and began to understand the toggle Display button but that other Display:Flex option keep bugging me so I started playing with it too. That really confused me as it acts differently then Fallback mode.

Display:Flex seems to apply the "true" unprefixed Flex setting and does not pick IE11.
Fallback adds something to pickup IE11 for Flex.

Looking at your project everything looks right. You have fallback and grid display. Its ok to use Flex in fallback and ok to use Flex in Grid. I see on caniuse Flex has Global support of 97.3 %.
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

Twinstream wrote:


Display:Flex seems to apply the "true" unprefixed Flex setting and does not pick IE11.
Fallback adds something to pickup IE11 for Flex.

I am not sure I understand that? Could you explain please.

I am not having a go at Coffeecup because I love the new site Designer and endless possibilities it brings. My individual support I have had from them has been brilliant so far but I think it's been a big mistake not having adequate videos on the CSS grid with SD3 for its ongoing and potential new customers. Like you I made the mistake of starting in grid and realising I had to start again as none of the styles transferred to fallback. Flex mode was not really explained either.

The way I see it, have a basic layout with as much style as you can in fallback and then be mega wild ( I mean creative) in grid mode.

The idea of different colour backgrounds for fallback, flex abs grid modes was a fab idea.

User 244626 Photo


Registered User
811 posts

Phil Dias wrote:
Twinstream wrote:


Display:Flex seems to apply the "true" unprefixed Flex setting and does not pick IE11.
Fallback adds something to pickup IE11 for Flex.

I am not sure I understand that? Could you explain please.

I am not having a go at Coffeecup because I love the new site Designer and endless possibilities it brings. My individual support I have had from them has been brilliant so far but I think it's been a big mistake not having adequate videos on the CSS grid with SD3 for its ongoing and potential new customers. Like you I made the mistake of starting in grid and realising I had to start again as none of the styles transferred to fallback. Flex mode was not really explained either.

The way I see it, have a basic layout with as much style as you can in fallback and then be mega wild ( I mean creative) in grid mode.

The idea of different colour backgrounds for fallback, flex abs grid modes was a fab idea.



I believe how it works is that in Fallback Display when one picks Flex to Display a container, the vendor prefixes get added to the css. This is what adds the addtional support to IE (and Opera).

If you were though to pick the Display:Flex option and use that, there are no vendor prefixes attached. So IE is ignored (so is Opera). You could use @supports to pickup the other prefixes by chaining together rules but we are limited to very basic rules of @supports. If they could allow us better options, that would be neat. (But would probably over complicate things at this point).

Here is a example project that shows the difference in display between Fallback, Display:Grid, and Display:Flex.
If you view it in IE11 you see the first line responds for Fallback because of the added prefixes.

Attachments:
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

I just thought of something else....that may explain a need for Display:Flex.

If in Fallback you preview in IE11 and notice that its not responding to the way the other Browsers are displaying the same item or element using flex, you could adjust the settings in fallback to address the IE11 problem.

Then you could add a Display:Flex setting that would serve up the correct setting to reset for Browsers that properly support only the Display:Flex unprefixed version.
Bootstrap 5 CSS Grid.

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.