CSS finally adds vertical centering in 2024
(build-your-own.org)
from otter@lemmy.ca to programming@programming.dev on 19 Aug 2024 06:42
https://lemmy.ca/post/27261082
from otter@lemmy.ca to programming@programming.dev on 19 Aug 2024 06:42
https://lemmy.ca/post/27261082
threaded - newest
Oh wonderful! Another 10 years and we can use it natively without polyfills!
It’s already supported by
96%87% of browsers currently in use.Yeah, pretty much as Flex at 97% which is a nice comparison.Edit: See mattd’s comment
I think this is what you should be looking at, which is at 82%
caniuse.com/mdn-css_properties_align-content_bloc…
Ah, that makes sense
How are those old chrome and safari versions still so prevailing? And what’s up with Samsung Internet, is it not a chromium based browser?
People who kids/grandkids setup their computers possibly?
But don’t those updates just happen automatically these days?
Probably stuck on an older os which doesn’t support the newest browser updates.
Yes, but so many?
Or they hate updates for some fake reason like “they want to control me”
.
Doesn’t stop your manager from requiring support for the other 4%.
Most websites these days refuse to support even Firefox.
Why are we not angrier about css generally?
BaCkWaRdS cOmPaTiBiLiTy 😵💫
I am blisteringly angry about CSS in general AND THIS FUCKING ISSUE IN PARTICULAR since 2005 at the very latest. Likely enough to up the average for several thousand people with only mild dislike for CSS.
If CSS had a church I would burn it down. In minecraft of course.
Because things were much worse in the beforetime
What, you didn’t enjoy slicing up images and arranging them in borderless tables?
Eh the software handled all that. Rounded corners tho… <shudder>
WYSIWYG editors were evil
Just a small gif (as png didn’t exist/widely supported) that had the rounded corner. Then if someone wanted to change the color or background you would have to redo all the images. Fun fun.
Nah it’s fine, we’ll just do the whole website in Shockwave.
The software? Are you talking about Adobe
DreamweaverDreamcrusher or something?My money's on Microsoft Frontpage
What a catastrophic attempt at a GUI website editor.
Imagine how I felt when they decided to teach us that in school, when I was already familiar with Dreamweaver… And notepad
Please indicate where IE touched you.
*gestures broadly at entire body
I put on my trenchcoat and fedora hat.
In my faux column
Before 1996?
I would say because a) there are zero alternatives, and b) it’s pretty powerful; you can generally do pretty much any layout even if it requires hacks, c) switching to something else is clearly infeasible so it’s not worth even asking for.
Just have to live with it (on the web at least).
d) we remember the world before it was introduced
<table />
It good
CSS 3 is solid, mate. You can do just about anything with it if you know what you’re doing.
Some of the pure CSS stuff I’ve seen is actually insane.
Obviously not actually for real world use, but a great example is github.com/kkuchta/css-only-chat
With pseudo sectors, flex, and grid, your options are amazing. I haven’t encountered a design I can’t build in a very long time.
csszengarden.com comes to my mind again.
It’s js being the problem in frontend development, not css
Compared to what? JS? (/joke)
What we were promised:
Content in one HTML document.
Styles in other CSS, able to apply any to completely alter the layout of the document.
What we got:
<div class=“mt mid flex lt-8 no-margin up-1”>
Well that came like 10 years too late lol
I don’t think I’ll ever use it considering it was already easily possible with flexbox, and before that (although dirtier) with tables as well.
Can we not do away with CSS/JS, learn from those mistakes and try something else? Pls, I beg you 🥺🙏
E: Sorry, forgot the /j Lighten up, Lemmy, not everything is a serious comment that needs your scrutiny or meticulous rebuttals.
Maybe we should start by doing away with x86?
Intel’s way ahead of you.
What would you replace it with? There are lessons to be learnt from the web, but to “fix” it is much harder
Flash and applets. Let’s just have a do over of the 90’s and early 00’s.
/s
Nah, just back to Gopher and 5k baud. As an aside: Gemini is pretty awesome
Frankly AS did a lot of things well
Please! I miss my Action Script 3, not this cheap wannabe TypeScript 😭
It’s a joke
The first pass of elm ecosystem solved it. Before elm, it was also solved by other frameworks. But people wanted to be able to reuse their components and not rebuild new ones. React provided the ability to reuse css, and dirty js code in the middle of your application. You already had an way bigger ecosystem because you didn’t have to learn and built a complete new system again.
Personally if I had the choice I believe a new start should start at the browser level. Stop supporting HTML/CSS/JS. Create a new app-centric DSL and not a document centric one like html/css/js.
Ideally something inspired from cocoa layout. And I am dreaming but not accept generic code on the client side and only support a small controlled API. It would solve so many security issues. Sure, the creativity in such an ecosystem will be severely reduced. But we will have a so much improved UX.
I get the reasoning but anything like that would just be abused to enshittify things further with unblockable ads and enforced DRM on everything. At least with the open standards there is the ability to adblock and manipulate certain annoyances at a browser level
* { display: flex; }i did valign years ago. /s
also i think more needs to be said about a push to localise css (and html, really). the fact that it still requires programmers to be versed in english is pretty sad.
English is the most spoken language outside of its home country and it uses the simplest alphabet.
It is a pretty sane choice.
You could write yourself a nice preprocessor
It’s a simple alphabet for computing because most of the early developers of computing developed using it and therefore it’s supported everywhere. If the Vikings had developed early computers then we could use the 24 futhark runes, wouldn’t have upper and lower case to worry about, and you wouldn’t need to render curves in fonts because it’s all straight lines.
But yeah, agreed. Very widely spoken. But don’t translate programming languages automatically; VBA does that for keywords and it’s an utter nightmare.
Or worse, Excel, which translates the function names but doesn’t do it automatically, so you can only open a spreadsheet if your Excel is configured to the same language as the spreadsheet was created in.
English source code is a universal language.
I’ve never seen a need for localization beyond domain terminology. And I think it would be a huge detrimental.
To implement it would be unnecessary significant complexity. Effort better spent elsewhere. And for programmers it’d be confusing. Think code snippets, mixing content, and the need for reserved word expansion or exclusive parsing scopes that would be even more complex and confusing.
Well, we’ve been vertically centring content with no-trick pure CSS for years now, so, good I guess?
What do you mean? How else would you center content without CSS?
There were tons of options with multiple HTML elements with a sequence of CSS properties to reliably provide vertical centering (and also use vertical space at the same time) back in the days.
Now, between flex and grid (mainly flex for me, I find them more convenient) all the HTML scaffolding we used to make this work can be removed to get the same result. That’s what I mean with “no trick”.
Oh, I thought you meant you were centering in some special way.
Is it just me or is the irony lost on the author? It says “align-content: center” but it’s only vertically aligned…
That’s because under flexbox for horizontal alignment you use a different property called
justify-content.Right, which isn’t confusing at all /s
There’s a learning curve but it makes sense once you’ve used it for a bit. I recommend the frog game: flexboxfroggy.com
Because we already have a way to center text horizontally…
Yes but my grief was with the naming… why not call it vertical-center? Just “center” is very confusing to me because it does not include horizontal.
Because of consistency with the rest of the box model
It’s worthless if you have to give it an explicit height, and also if it doesn’t have support in all browsers.