4 ms·

If you're truly having issues with CSS and rendering different sizes, I'd recommend taking the time to really learn CSS inside and out. I find it incredibly sim

If you're truly having issues with CSS and rendering different sizes, I'd recommend taking the time to really learn CSS inside and out. I find it incredibly simple nowadays to do both Mobile/Desktop (+Tablet) with CSS and media queries. I may have agreed with you in the past, but not so much anymore.

kilburn 6y ago
There are still some things that are impossible to achieve with CSS alone, even if you have the luxury of only needing to work with evergreen browsers (remember we are speaking of content-heavy sites here, which are the most prone to still have to support older browsers). Example: I have a stack of boxes of varying heights. On mobile they are fine as is (one below the other). On tablet I want them in two columns but displayed in column order without gaps. On desktops I want three columns. This is dynamic data, so the number of items and their heights will vary, but my CMS allows the user to mark at which box(es) new columns should start: mobile tablet desktop a a c' a b* d* b* b d c c' d* ' indicates this element starts a new column for tablets (two-column layout) * indicates the element starts a new column for desktops (three-column layout) Can you achieve this with HTML/CSS alone? How? - CSS columns won't work because Safari doesn't support break-brefore in a columns context. - Flexbox won't work because you don't have a defined height for the container (so you can't use flex-direction: column + flex-wrap). - CSS grid won't work because you'll get a grid (i.e.: gaps between elements when the boxes have varying heights). - Ye-olde-floats won't work because you'll get weird gaps too when the sizes change. - You cannot wrap the elements in column-divs because you can't do it for both tablet and desktop simultaneously. Also, you need to be very confident in all of the above to know that is is not possible, instead of getting sucked into trying, getting to an "almost there" point and then realizing it doesn't work under X condition. In contrast, with React you can just generate 1/2/3 wrapper divs depending on whether the current width is mobile/tablet/desktop and call it a day. It takes you all of 5 minutes to do so and the margin for surprises is 0. Edit: reworded why flex won't work to address nawgz's comment.
- nawgz 6y ago
  >Flexbox won't work because you don't have a fixed height Are you saying the issue is that flexbox will force everything to have the same height? I am relatively sure that `flex: 0 0 fit-content;` on the children and `flex-wrap: wrap; flex-direction: column;` on the parent will do what you want
  - kilburn 6y ago
    > Are you saying the issue is that flexbox will force everything to have the same height? No, I'm saying that you will not get columns unless you specify a fixed height for the container. Since you don't know the total height you want for the container, this is not a valid solution.
    - nawgz 6y ago
      Ah yeah, I see your point. Fair enough. However, if you're already using wrapper divs, it seems to me like you do some math on your boxes after the initial render to balance them. Either that or you literally just group them into 3 groups and accept whatever artifacts (read: column height mismatches). Either way, there is a CSS-only solution of sorts. Render the parent with 0 height, iterate over the children groups to find your max column height (remember - you already do this grouping with your wrapper divs), set your component height to your max of the 3 groups with 200ms transition, and you have a sweet CSS-only animated solution Might not be worth it - in my approximation it's not - but I guess that could depend on your domain.
- 9HZZRfNlpR 6y ago
  What about 'order' attribute? https://developer.mozilla.org/en-US/docs/Web/CSS/order https://developer.mozilla.org/en-US/docs/Web/CSS/order Also if css can't do it why go you need react when you can do it in few lines of css? Not not difficult to rearrange elements based on viewport size.
- davidwparker 6y ago
  I would tend to use grid for this, and no, I wouldn't use HTML/CSS alone, if there's a dynamic dataset. The intent with my comment is you don't need to render different views entirely, but that there are CSS tools (col-span-1, 2, ... ) + grid that work really well. That said, I also don't have to support older browsers. We're content heavy, but traffic is so small from Safari, older IE, etc. so we're fine with using newer features.

kilburn 6y ago

There are still some things that are impossible to achieve with CSS alone, even if you have the luxury of only needing to work with evergreen browsers (remember we are speaking of content-heavy sites here, which are the most prone to still have to support older browsers). Example: I have a stack of boxes of varying heights. On mobile they are fine as is (one below the other). On tablet I want them in two columns but displayed in column order without gaps. On desktops I want three columns. This is dynamic data, so the number of items and their heights will vary, but my CMS allows the user to mark at which box(es) new columns should start: mobile tablet desktop a a c' a b* d* b* b d c c' d* ' indicates this element starts a new column for tablets (two-column layout) * indicates the element starts a new column for desktops (three-column layout) Can you achieve this with HTML/CSS alone? How? - CSS columns won't work because Safari doesn't support break-brefore in a columns context. - Flexbox won't work because you don't have a defined height for the container (so you can't use flex-direction: column + flex-wrap). - CSS grid won't work because you'll get a grid (i.e.: gaps between elements when the boxes have varying heights). - Ye-olde-floats won't work because you'll get weird gaps too when the sizes change. - You cannot wrap the elements in column-divs because you can't do it for both tablet and desktop simultaneously. Also, you need to be very confident in all of the above to know that is is not possible, instead of getting sucked into trying, getting to an "almost there" point and then realizing it doesn't work under X condition. In contrast, with React you can just generate 1/2/3 wrapper divs depending on whether the current width is mobile/tablet/desktop and call it a day. It takes you all of 5 minutes to do so and the margin for surprises is 0. Edit: reworded why flex won't work to address nawgz's comment.

nawgz 6y ago
>Flexbox won't work because you don't have a fixed height Are you saying the issue is that flexbox will force everything to have the same height? I am relatively sure that `flex: 0 0 fit-content;` on the children and `flex-wrap: wrap; flex-direction: column;` on the parent will do what you want
- kilburn 6y ago
  > Are you saying the issue is that flexbox will force everything to have the same height? No, I'm saying that you will not get columns unless you specify a fixed height for the container. Since you don't know the total height you want for the container, this is not a valid solution.
  - nawgz 6y ago
    Ah yeah, I see your point. Fair enough. However, if you're already using wrapper divs, it seems to me like you do some math on your boxes after the initial render to balance them. Either that or you literally just group them into 3 groups and accept whatever artifacts (read: column height mismatches). Either way, there is a CSS-only solution of sorts. Render the parent with 0 height, iterate over the children groups to find your max column height (remember - you already do this grouping with your wrapper divs), set your component height to your max of the 3 groups with 200ms transition, and you have a sweet CSS-only animated solution Might not be worth it - in my approximation it's not - but I guess that could depend on your domain.
9HZZRfNlpR 6y ago
What about 'order' attribute? https://developer.mozilla.org/en-US/docs/Web/CSS/order https://developer.mozilla.org/en-US/docs/Web/CSS/order Also if css can't do it why go you need react when you can do it in few lines of css? Not not difficult to rearrange elements based on viewport size.
davidwparker 6y ago
I would tend to use grid for this, and no, I wouldn't use HTML/CSS alone, if there's a dynamic dataset. The intent with my comment is you don't need to render different views entirely, but that there are CSS tools (col-span-1, 2, ... ) + grid that work really well. That said, I also don't have to support older browsers. We're content heavy, but traffic is so small from Safari, older IE, etc. so we're fine with using newer features.