CSS is, in fact, awesome (2021)
css-tricks.com
css-tricks.com
Bad defaults are the bane of one's existence
An effect like in the logo only happens if you set an explicit width which is less than the longest word.
By using “width” you are explicitly opting out of the default “expand to fit”.
You might deliberately want to crop text to get some particular visual effect, but I cant see why you would want it to be the default for all text.
The issue is you are putting a bigger box inside a smaller box. There is no perfect way to solve this, but css defaults to respecting the specified sizes by letting the inner box overflow the edge of the outer box. Seems reasonable to me, and you can get scaling or scrolling or cropping instead if you specify so.
And it's getting better every year.
I dunno about that. Sure, if you're used to Qt or WxWidgets or similar, then CSS+HTML looks absolutely great as a design tool
But if you're using Lazarus in 2023, then CSS+HTML looks absolutely primitive as a design tool.
CSS addresses the extremely difficult challenge of layout across devices and platforms. Does Lazarus do that?
While it is an IDE, it is also a GUI designer, unlike most other IDEs.
> CSS addresses the extremely difficult challenge of layout across devices and platforms. Does Lazarus do that?
Across the platforms that it supports, sure.
I didn't make any claim about how many platforms it runs on, though.
Funnily enough, there's also the Fresnel library in the works, and it uses CSS for layout.
https://www.blaisepascalmagazine.eu/roadmap-for-fpc-and-laza...
That wasn't important to the GPs point, so how would I know to answer it?
This is what I responded to:
> > I'd rather use CSS than any other GUI system I've used over the years in C++, Java, Swift, etc.
I interpreted GPs comment to be only about preferences for GUI design, not about which implementation is better, or why.
No, the parent said he prefers CSS to the design systems he used with C++, Java and Swift.
Those aren't CSS alternatives, so he specifically wasn't comparing CSS alternatives, he was comparing technology.
We should probably define terms. You mentioned that HTML + CSS make a terrible design tool. I suppose that's true in the same way that C++ is a terrible design tool. Most designers don't touch CSS, and use Photoshop or Figma or similar and hand it over to a frontend engineer to actually implement it. You might be using the term design tool differently from how i understand it though.
CSS is super powerful and I love how much you can do with it. I’m still scratching the surface, too. I’ve been using it for years for common things as a full-stack dev but it’s only really the last six months that I’ve really begun to stretch myself with it.
The power it has for animations is impressive too, for example. I spent a lot of time on just that and flexbox and flexgrid and it made me go from hating CSS to really liking it.
I'm only now dipping my feet into front-end development, and I'm avoiding all frameworks[1], but to play with CSS I made this: https://rundata.co.za/~lelanthran/JustTryIt/
It's incomplete, it's not good for testing layouts, etc ... but it was useful to me when I didn't know what the defaults did.
(I should perhaps rewrite it now to be more complete and less cruft-filled - this was written when I knew less about JS and CSS than I do now).
[1] No special reason - there are too many, and most of them seem bloated for what I need. I'm sure react solves real problems, but I find it's shorter to solve my problems using whatever I've already written and understood than learning a whole new framework.
Enjoy the rewrite! I love that feeling of rewriting something with new knowledge and finding all kinds of gains while doing so.
I recently ran create-next-app with Tailwind, and the default example output page has several divs with 600+ characters of tailwind class names. Each! Without word wrap most of the page's style information is way off the right side of the screen, and with word wrap the page source is mostly class names. Is this how tailwind pages are meant to look?
Also, with tailwind the page's style information is all in class names - which are plaintext, with no syntax highlighting or code hints or linter errors. Do people using tailwind maintain styles that way, or is there a quasi-mandatory plugin or something?
The only obvious benefit I see for tailwind is that style rules are tied directly to the markup they modify. But if I use any SFC framework like vue or svelte, I can have scoped CSS with the style rules right next to the markup, and I also get legible style rules, code hints, CSS variables, and everything else. What is it that tailwind makes better?
https://adamwathan.me/css-utility-classes-and-separation-of-...
But doesn't that entire line of thinking disappear if one just uses scoped CSS inside components? Everything in that link assumes that all CSS rules are global, and it runs through BEM and then tailwind as a way to avoid putting component-specific rules in the global CSS file.
But if you just use a frontend framework with SFCs, you can treat each component as a module with its own local style rules. If there's no global CSS file to edit, don't BEM and Tailwind become irrelevant, since the problem they solve no longer exists?
Flexbox froggy helped a lot with some practical experience that translated fairly well to my regular work.
There are other games like this that I haven’t gotten to yet, including one for flexgrid. Once I clear all the levels in flexbox froggy I’m going to try the flexgrid game.
Then after that I’m going to spend time with bootstrap and tailwind since the last time I really used them was back in my more junior days when I barely knew anything at all about css.
If nothing else, the image at the top is more confusing than it needs to be, the old one was much better. It didn't used to refer to edges, but the margin/border/etc itself, which is what you're actually dealing with in CSS.
The box model combined with the box-sizing page makes probably the biggest WTF people have with CSS pretty obvious IMO (why "width: 100%" is bigger than 100%): https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
If the reason for that makes sense to you, I think that makes you well above average among frontend devs. All the new stuff like flex and grid is still built on the box model after all.
Doesn't the out of the box styling give you just that: <div>{arbitraryContent}</div>
So yeah, if you want to have any elaborate design, you can't just let the box be sized by its content.
“CSS gives you options. Use it or don’t”.
Unless you have cross browser bugs, or legacy rules, or whatever.
So, like the C++ that everyone loves? Awesome, isn't it?
[1]: https://css-tricks.com/wp-content/uploads/2021/04/css-is-awe...
That said, I remember what it was like to debug CSS before we could use the developer panel and click on elements.
Most web-pages size is 1MB or more while the text is usually 1-2Kb. That means we have roughly 1000x spent on styling/layout in relation to content. I wrote a post about this back in 2006, still true. https://gregraiz.com/graiz/2006/09/25/ten-reasons-why-css-su...
Uh.. doesn't sound like it
Cross-browser compatibility is very rarely an issue that I actually run into any more; flexbox and CSS grid have solved a lot of your concerns about layout options; there aren't a lot of areas of duplicate functionality (especially in rounded corners); CSS is declarative (I just didn't get this point at all - parsing CSS is rarely the bottleneck in modern browsers); and CSS is a lot easier to use than it used to be.
I think the most important point is that the comparisons with things like Word or PDFs miss the most important thing that CSS/web design needs to do, which is work for any browser size on any device in a huge variety of contexts. A PDF is, as you say, design-centric in that I draw a design on a screen and that design, exactly, is reproduced in the file and therefore on someone else's screen.
But the tradeoff made there is that the PDF file they open will be the exact size and shape that I've chosen. With websites that's just not possible. You might be on mobile, you might be on a desktop with an extra-large screen, you might be on desktop but with the browser window snapped to the side so you can view something else on the other side of the screen, or you might just be using a particularly unusual monitor with odd proportions. The promise of CSS is that my design will still fit your browser window well, even as you resize it.
This means that rather than say where I want my image to be, I need to say how I want it to fit on a generalised screen. Or rather than define N columns, I need to define a grid with automatic columns of a certain width. This, it turns out, is very hard to encode in existing PDF-/print-oriented software where all sizes can be hardcoded.
I'm very unconvinced by your idea that there is 1000× more CSS to can content. In my experience, the single largest contributor to web bloat is tracking scripts, followed by other forms of JS, followed by images. CSS is very rarely so big an issue unless you're pulling in an entire CSS framework.
to be fair, that's exactly what I get to see on a lot of websites in the rare event that I open a website on my mobile phone at all.
as a general example aspect-ratio is a neat property but was only introduced in safari 15. there's still a bunch of people using versions of safari older than that. :has came out around the same time.
only assuming that images do not take up the bulk of that MB, and / or belong to the 'styling' category, not the 'content' (as the case may be)
Many people just don't get the cascading part of CSS.
https://css-tricks.com/absolute-relative-fixed-positioining-...
I'd like a list of those, along with a solution for each item in that list.[1]
A CSS cheat-sheet, if you will.
[1] I remember it common things being unnecessarily arcane, but since flexbox and grid, I can't think of any problems I might have. Although, take my words with a barrel of salt, because I am in no way an experienced CSS user.
CSS does, in fact, suck big time. The yardstick never was arbitrary complexity. Do you really believe Gen Z+ has nothing better to do than to pick up the boomer shit that is CSS?
CSS proponents are well advised to conduct a language review, return to CSS "levels" and/or device profiles or other means to break it down into manageable chunks that can actually serve as a basis for implementors.
Or provide a formal semantics rather than a disorganized set of tenths of "modules" not really deserving of that term that are compiled into a pointless "snapshot" every two years or so.
Or layer CSS functionality on top of primitive layouting/plugin capabilities such that newer parts of CSS can be provided as reference implementation in JavaScript on top (ie what the dormant Houdini API was attempting to do).
Basically, anything to organize a project of the size of CSS when the criticism has been loud and clear for many years now. But W3C, Inc. does nothing of the sort, hinging on the CSS WG as literally the last bit of influence it has over the web, and apparently in financial dependency on Google as the sponsor to have an interest in weak standardization bodies - the only other sponsor being from China since last year?