Skip to main content
U
Under S.
Inspiring
April 20, 2024
Question

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

  • April 20, 2024
  • 5 replies
  • 824 views

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!

This topic has been closed for replies.

5 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 20, 2024

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/

 

Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 20, 2024

    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 O'Shea— Product User & Community Expert
      B
      Community Expert
      Ben MCommunity Expert
      Community Expert
      April 20, 2024
      quote

      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.

        O
        osgood_
        Legend
        April 20, 2024
        quote

        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.

         

        quote

        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.

          U
          Under S.Author
          Inspiring
          April 21, 2024
          quote

          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!

          O
          osgood_
          Legend
          April 21, 2024

          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.

            BenPleysier
            Community Expert
            BenPleysierCommunity Expert
            Community Expert
            April 20, 2024

            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.

             

             

             

             

            Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices