Should we still "slash out" of some tags in 2024? Plus Grid v. Flexbox

[Under S.]

Hi,

Every 4-5 years, it's time to update my personal websites. Naturally, each revision introduces new considerations and methodologies. I'm not a serious coder, I just pick up what I need along the way.

When I first started, it was encouraged to 'slash' out of tags that don't have a closing tag (for XHTML reasons). Ex.: <meta /> <br/> etc.

Since it's about that time to update my sites, what's the word on slash-closing tags in 2024? I'm more than happy to maintain the practice if there's even an ounce of benefit to it on any level; but if it only serves to out me as someone who hasn't gotten the memo that these are useless now, I'll get with the times. 😃

(Noticed WIRED and APPLE still slash out of theirs, while GOOGLE and YOUTUBE do not.)

Added question : if backward compatibility and browser performance are concerns, do you recommend GRID or FLEXBOX in situations where both would work, and why?

Thanks!

[BenPleysier]

Does this answer your question?

CSS Grid is a two-dimensional system, meaning it can handle both columns and rows, unlike Flexbox which is a one-dimensional system (either in a column or a row). Another core difference between CSS Grid and Flexbox is that CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.

[osgood_]

Since it's about that time to update my sites, what's the word on slash-closing tags in 2024? I'm more than happy to maintain the practice if there's even an ounce of benefit to it on any level 😃

By @Under S.

Self closing tag are mostly meaningless these days, you can safely forget them.

Added question : if backward compatibility and browser performance are concerns, do you recommend GRID or FLEXBOX in situations where both would work, and why?

Thanks!

By @Under S.

It's not a question of GRID 'OR'  FLEXBOX - you should be using grid and flexbox together in the same layout to leverage their best qualities. Grid is highly efficient at creating complex main-structures which house your content, whereas Flexbox is highly efficient for laying out content within the main-structure itself.

Grid is much harder to learn whereas Flexbox is a lot simpler. Both can be used in combination with each other, which I think is the best workflow, or both can be used independently.

[Under S.]

Grid is much harder to learn whereas Flexbox is a lot simpler.

I picked up Grid first, but will give Flexbox a bit more of my time since it seems to handle dynamic content better. Turns out the following code does pretty much everything I need it to do (ie, create a dynamic-width "row" box that will space out a dynamic amount of direct children evenly across the entirety of the width available).

.flex {
  display: flex;
  width: 100%;
  gap: 1.5em;
  flex-direction: row;
}

<div class="flex">
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>

I was stunned by how easy this was... at least, until I tried it with less text in the Content area. When there isn't enough of it to fill the width of the DIV, said DIV won't be as wide as it should be (which is to say 33% since there are 3 of them). Then I tried this :

.flex > div {
	flex-grow: 1;
}

Which fixed everything. Whether there's enough text to fill each DIV or not, they all grow to 33% of the Flexbox.

Could you tell me if there's a way to tell the CONTAINER to make the children flex-grow, instead of targeting said children like I'm doing here? Thanks!

[osgood_]

Unlike Grid where you can set the specific width of the columns on the parent containers css there's not away to do this with Flex to my knowledge, you have to target the divs inside the Flex container by using flex-basis or as you have done flex: 1.

[Ben M]

Added question : if backward compatibility and browser performance are concerns, do you recommend GRID or FLEXBOX in situations where both would work, and why?

Thanks!

By @Under S.

As quick as today's world is changing, backwards compatibility is meaningless. As your site has been running for quite awhile you should have analytics telling you who is using it to help guide your decision. But with that said, if your personal site lends to your career and is about being cutting edge, forget about backwards compatibility and showcase what you can do. You can suggest to your users to upgrade if they have not already.

[Nancy OShea]

Use of the Forward Slash (/) varies.  

1) What type of document is it -- XML, SVG, XHTML transitional, XHTML strict, or HTML5?

2) Self-closing tags no longer exist in HTML.   However they do exist in  XML, XHTML, and SVG (e.g., <circle cx="50" cy="50" r="50" />).

VOID ELEMENT

https://developer.mozilla.org/en-US/docs/Glossary/Void_element

XML/HTML DOC TYPES:

https://www.w3schools.com/xml/xml_elements.asp

https://www.w3schools.com/tags/tag_doctype.ASP

[Nancy OShea]

Metaphorically, you wouldn't put a square peg in a round hole. Similarly, the choice to use CSS Grid or Flexbox comes down to the project you're working with and the extent to which precision may be required to achieve a desired responsive layout.

Sometimes Grid is better, sometimes Flexbox is better. It varies. They work & behave differently thus they are not interchangeable like goal posts at a soccer match.  They're more like a toothbrush vs. a paint brush.  Use the one that works best for your situation. 😁

To assuage concerns you may have about browser support, both CSS Grid (level 1) & Flexbox are more than 97% supported.  Backwards compatibility for browsers that don't exist anymore is tantamount to counting the number of dancing angels on a pinhead.  Happy counting!  😇

https://caniuse.com/