วีดีโอ

Yep exactly. We should have been able to vertically center things with block elements years ago. I guess having so many alternatives really slowed progress on having it implemented for block elements.

From what I tried it looks to be the same as flex. The only difference I noticed was how margins collapse. Flex stacks margins on top one another, block merges the top and bottom margins together.

@nomadshiba - good call out. That is my bad. I misspoke.

why not con-align-tent?

Like this's the real problem!?

@@mahmoudzakria6946 There was no problem to begin with. However, this naming changes the word order once again. Perhaps there is a reason, but from text-align perspective there is a PHP4 developer naming CSS attributes now. Cognitive load, etc. Naming is the simplest thing to do consistently, but here we are. Wrap this bastard into well named utility classes immediatelly.

lol. Should be a metric on MDN and caniuse. Before GTA6: yes.

we got "align-content: center;" before GTAV.......

We almost got GTA6 before we got align: center! That’s the weirder part.

Impressive.

this property came out out over 10 years ago.... so you could just use this

@@NotJayUU and how many browsers actually supported it, as opposed to just claiming that they did? To be fair, I wouldn’t know. This is more of a me problem, but at the time I needed to support websites that were being accessed in South America where you could only assume that they would have the version of the browser that came with whatever OS they were running. That’s what I was trying to communicate with the “+” but I get that is really not clear at all.

@@Vendavalez there's a website caniuse, it's good for checking this stuff. 2015 was when it was supported in all major browsers

Now you may begin to heal.

So what's your purpose

That you can. Using the display property. You more or less mimic the structure of a table with divs. And apply the appropriate display property. e.g. <table> = display: table; <tr> = display: table-row; ... etc. I wouldn't recommend it though. It's a lot easier just to use a table. There is a lot of accessibility goodness when you use the semantically correct HTML tags. If it isn't actually a table, I would look into using display grid.

@@DevDiveIn That's very good to hear! Thank you. The problem with using Tables, at least 15 yrs ago when I was active, was how Web Crawlers interpret them. Tables are expected to contain tabular data, and not contextual content. Do you know if Accessibility tools like Screen Readers will be able to handle websites designed with tables today?

@Rovsau - Ya I don't miss those table days, or IE 6 for that matter ;) If the content belongs in a table, then screen readers prefer you use the html tag. When you use a divs by default screen readers lose reference to what other divs belong in the same row/col. You have to do some work to reimplement that functionality so screen readers can read it properly. If you're laying out an entire site. I wouldn't use tables or the div equivalent, there are much better alternatives now. Screen readers would try and read your site as a table which it is not. display: grid does pretty much the same thing as tables (and more), and is much more robust and flexible. I have a video on it if that helps. th-cam.com/video/B6QddhvpUUo/w-d-xo.html

Because image is by default an inline element. It is easier to imagine the image as just another big character in the text.

Yeah, web design is “awesome”.

Yeah, but the problem with revamping html is older browser support. I never get why there's so much importance on supporting old browsers, especially now that Windows 7 has been discontinued and Windows 10 is going soon too. So the majority will be updated to many recent browsers. But it's a matter of making a website accessible to everyone. We have plenty of frameworks now too. And I know the React peeps won't get over their ex if and when html gets a major revamp. It also depends a lot on bigger corporations that decide on a standard for the web.

@@cake3014 people still use windows xp, trust me

@@Endrit719then just create a legacy mode that will replace the code with legacy compatible or something, most sites aren’t even compatible with old browsers

​@@Endrit719 I know that that is the case but I don't get why 😮‍💨😮‍💨😮‍💨

@@cake3014 Not everyone cares about new technology and companies want to deliver websites to maximum amount of people, general population not being tech savvy enough isn't a good argument to abandon backwards compatibility. Yes you can revamp HTML which will work thousand times better than old HTML but try selling a fact that it will only work for 50% of users to any client and get ready to be laughed at.

ya... this came out in 2012, I don't get why every is acting like this is something crazy...

Because if I understood correctly it's not using grid or flex. It works directly on block elements

It was only released on March 19th 2024. It works on display: block. What you were using only worked with display: flex or grid. The support now is only about 79% align-content on display block, unlike the 96% align-content on display flex

​@@NotJayUU why are y'all acting like some kind of OGs while knowing nothing about the topic

@@theseangle ?

justify-content ?