8 ms·

Reading articles like this, my basic impression is that, after CSS has been around for twenty years or more, it’s still complex to do simple things that everybo

by dash2 6y ago

Reading articles like this, my basic impression is that, after CSS has been around for twenty years or more, it’s still complex to do simple things that everybody wants. Is this why the web is less successful than it might be?

otabdeveloper4 6y ago
Flex and grid finally made everything make sense. It's like I'm out of Plato's cave now.
kristopolous 6y ago
There's a debate on the purpose of it. They problem is we took our interlinked document space and built thin client applications on it. Our crosslinked thoughtworld for intermingling intellects in practice is mostly an entertainment and shopping platform. Really they probably should have split off when it was young ... Replacing HTML with something for the original lofty goals and leave the html/css/js triumvirate for the mainstream use we all see now. Then there becomes no pretext that there's any intellectual, educational, or documentarian use for the web because there'd be something else, let's call it the Yeb for those purposes. It'd get two way linking, ontological markup, a WAIS like querying system (where the document author explicitly sets the search up separately from the document), etc. But that never happened and the web has way too much inertia to successfully fork it at such a fundamental level without a monumental multi-year effort so here we are with one set of standards trying to serve all masters at once by layering stuff on top of each other, building a bigger russian nesting doll to stuff our existing web into (could you imagine if say jstor or citeseer required a "yeb browser" because it served content that was fundamentally incompatible with the web standards. Could have taken off in 1995 but not now) The only engineering results those conditions ever produce is complexity since it inherently, by design, lacks the focus to remove it.
hertzrat 6y ago
Think of how much extra software engineers get paid because of how difficult it is to do simple things. If it were easy, you wouldn’t need a whole team for a crud web app. If everything didn’t break from updates constantly, you wouldn’t need SaaS in order to feel like a piece of software might still work in 2-5 years. It’s a weird thought, I think I got it from a Jonathan Blow stream
userbinator 6y ago
Alternatively, people are trying to do things with webpages that they really weren't meant for, i.e. CSS is based around document-oriented pages so anything outside of its formatting model becomes more difficult. From CSS 2.1 section 10.3.3: "If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block." i.e. horizontal centering is easy because that's a natural thing to want to do in a document, but vertical centering seems to make less sense and is thus correspondingly more difficult.
- JimDabell 6y ago
  > i.e. horizontal centering is easy because that's a natural thing to want to do in a document, but vertical centering seems to make less sense and is thus correspondingly more difficult. It’s because text wraps horizontally and flows from top to bottom. The width is constrained by the window but the height is defined by the contents of the document. This means that if you are trying to vertically centre something in the document, you need to know the size of the document before you can render its contents, but you need to render its contents to know the size of the document. There’s various ways around this but they all have different trade-offs, hence multiple solutions to the problem of vertical centring in CSS.
- hombre_fatal 6y ago
  The web is meant for anything you can build with its tools. That its tools lagged behind what people were building with them is just a reminder that a platform's caretakers have little to do with the creators on the platform. This goes for everything. I built a forum from scratch that miraculously exploded into a community and culture and drama. 15 years later I look at it and realize it happened in spite of me, not because of me. It doesn't even feel like any of it's mine. I'm a groundskeeper. I might have built the scaffolding, but who am I to say what it's for once thousands of people have made that decision for themselves? "No, no, no. The web is for boring documents of <p> and <img>! What are you people building?! The most complicated application I envisioned when I invented HTTP was Encyclopedia Britannica online, and the limits of my imagination must be yours!"
JimDabell 6y ago
> it’s still complex to do simple things that everybody wants. People underestimate the complexity of layout. Take vertical centring, for example. The immediate assumption is that it’s easy; you just find the mid-way point between the top and bottom. But the top and bottom of what? The web is a document-based system, with text flowing from top to bottom. The centre in this context is not the centre of the window, but the centre of the document. Okay, so let’s find the mid-way point between the top and the bottom of the document. The top is easy, it’s zero. So where’s the bottom? Well to find that, you need to know how tall the document is. How do we do that? Well, the height of the document is defined by the height of all of its contents. So let’s render its contents and find the height. But wait – the thing we are trying to render in the centre is part of the contents, so we’ve got ourselves into an infinite loop. There are various solutions to this – hard-code the height of the document (to what?); take the thing being centred out of consideration when rendering the rest of the document (and now it can’t affect / be affected by the rest of the contents), etc. But which solution is best depends upon the context – and this is how you end up with complexity. It’s easy to say “just put it in the centre”, but it’s not as easy to figure out what that means exactly or which solution is best for doing so. > Is this why the web is less successful than it might be? The web is one of the most successful technologies in the history of human civilisation. It seems quite odd to talk about it as if it were a flop because you have to think for a moment before centring something.
- newsbinator 6y ago
  I'd like to be able to say: .child-element-selector { centered-inside: .parent-element-selector; } And let the browser figure out what I mean, taking into account border widths and parent element padding, for example.
  - dsego 6y ago
    But muh job security.
- hombre_fatal 6y ago
  Yep, GUIs are always hard. I don't know what it is about the web, maybe because it's so accessible, that makes people assume its GUI abstraction should be easy. Or that because web GUI is hard then the web's abstractions are basically a failed experiment. Or, HN's favorite, that we're somehow trying to build things with these completely anodyne GUI tools that they're somehow not meant for. But it's hard because GUIs are always hard. And the things that make HTML/CSS hard are the threads that run through all other GUI abstractions and make them hard. Notice how Android and iOS developers are never piling into HN circlejerks raving about how Google and Apple have really solved GUIs. Here are six different ways to center a square in a box in UIKit with constraints: https://stackoverflow.com/a/26181982/511200 https://stackoverflow.com/a/26181982/511200 I've been an iOS developer for over five years and I still consult this regularly when checking constraint spaghetti to make sure it's not missing any bits of the magic incantations.
conradfr 6y ago
I often wonder what is the total time and money wasted the last twenty years because "vertical-align: middle" on a div don't do what anyone think it would and should. Imagine if CSS had that and nesting and variables from the start :)
- mekster 6y ago
  After doing the web for 20+ years, I still Google for "vertical align center css" when creating a new layout... Flex is easy to remember though.
thaumasiotes 6y ago
> Is this why the web is less successful than it might be? I'm struggling to understand this question. If the web were more successful than it already is right now... what would that look like?
- AndriyKunitsyn 6y ago
  Web that is a go-to solution for creating UIs of any complexity, not the lowest common denominator that is used where nothing else can.
Philip-J-Fry 6y ago
I used to think CSS was complex and everything was a hack. Then I sat down and actually read about the box model rules, how things like margin and padding affect elements, and how amazingly useful flexbox was. I've worked with web developers that still don't understand the usefulness of collapsing margins. Developers that think padding is an alternative to a margin and not understanding they are different things altogether. If your solution to spacing something is to wrap it in a new element and add padding then you're thinking backwards. You just add margin to the element you want to space. I firmly believe the idea that CSS (today at least) is complicated is just people not trying to learn what modern CSS is like. Learn your basics like the box model, block elements, inline elements, etc. Then learn about flex and grid. That right there is like 90% of the knowledge you need to make anything in CSS today. The way I learned was being given Sketch or Photoshop documents with all the sizes and margins/paddings and told "now make that a website". I really wish there was a learning tool that just had website/website element mockups with sizes and your job is to replicate it as close as possible in HTML/CSS.
- roelschroeven 6y ago
  > I used to think CSS was complex and everything was a hack I do web development only occasionally, so I'm not familiar with current best practices and rely on trying to mine the docs for what I'm trying to do and googling for it. I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. That changed with the introduction of flex and grid. Suddenly I'm able to use the layout I want without any real problems. CSS is now usable for both styling and layout.
  - Izkata 6y ago
    > I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. > That changed with the introduction of flex and grid. Half true. Flex and grid are a significant improvement, but "hopeless" was just about always inaccurate. The vast majority of issues people had with layouts pre-flex were because they didn't understand the box model and how block/inline/inline-block/float interacted with each other. ...Unfortunately, not understanding the box model is still a problem, but flex/grid can get people further without needing to understand it.
goto11 6y ago
It is simple to vertically center things in PDF's, since you have a fixed dimension canvas and text doesn't change dimensions due to user preferences or device configuration. So if you want layout to be simple, use PDF. Of course most users hate to read PDF's online, because they have to zoom and scroll around and so on. So the real question if you want the pain on the producer side or push it to the consumer side. Producing layout which render reasonably well on completely different devices and screen dimensions is inherently non-trivial.
m12k 6y ago
The problem is consistency and lack of direction. There are now sane ways to do almost anything in CSS. But they are not exclusive - they live side-by-side with older, less-sane solutions, many of which don't play nice together. Someone ought to write a "CSS: The Good Parts" book about a modern, sane subset of CSS that plays nice together, covers everything you need, and that the industry could unite around.
vagrantJin 6y ago
> Is this why the web is less successful than it might be? No. The success of the web has nothing to do with CSS. By all standards the web has over-achieved and will continue to do so for the foreseeable future of humanity. CSS is an order of magnitude better these days. Browsers are playing nicer together except Safari. Chrome uses more resources than a triple A game title but sets the standard.

by dash2 6y ago

otabdeveloper4 6y ago

Flex and grid finally made everything make sense. It's like I'm out of Plato's cave now.

kristopolous 6y ago

There's a debate on the purpose of it. They problem is we took our interlinked document space and built thin client applications on it. Our crosslinked thoughtworld for intermingling intellects in practice is mostly an entertainment and shopping platform. Really they probably should have split off when it was young ... Replacing HTML with something for the original lofty goals and leave the html/css/js triumvirate for the mainstream use we all see now. Then there becomes no pretext that there's any intellectual, educational, or documentarian use for the web because there'd be something else, let's call it the Yeb for those purposes. It'd get two way linking, ontological markup, a WAIS like querying system (where the document author explicitly sets the search up separately from the document), etc. But that never happened and the web has way too much inertia to successfully fork it at such a fundamental level without a monumental multi-year effort so here we are with one set of standards trying to serve all masters at once by layering stuff on top of each other, building a bigger russian nesting doll to stuff our existing web into (could you imagine if say jstor or citeseer required a "yeb browser" because it served content that was fundamentally incompatible with the web standards. Could have taken off in 1995 but not now) The only engineering results those conditions ever produce is complexity since it inherently, by design, lacks the focus to remove it.

hertzrat 6y ago

Think of how much extra software engineers get paid because of how difficult it is to do simple things. If it were easy, you wouldn’t need a whole team for a crud web app. If everything didn’t break from updates constantly, you wouldn’t need SaaS in order to feel like a piece of software might still work in 2-5 years. It’s a weird thought, I think I got it from a Jonathan Blow stream

userbinator 6y ago

Alternatively, people are trying to do things with webpages that they really weren't meant for, i.e. CSS is based around document-oriented pages so anything outside of its formatting model becomes more difficult. From CSS 2.1 section 10.3.3: "If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block." i.e. horizontal centering is easy because that's a natural thing to want to do in a document, but vertical centering seems to make less sense and is thus correspondingly more difficult.

JimDabell 6y ago
> i.e. horizontal centering is easy because that's a natural thing to want to do in a document, but vertical centering seems to make less sense and is thus correspondingly more difficult. It’s because text wraps horizontally and flows from top to bottom. The width is constrained by the window but the height is defined by the contents of the document. This means that if you are trying to vertically centre something in the document, you need to know the size of the document before you can render its contents, but you need to render its contents to know the size of the document. There’s various ways around this but they all have different trade-offs, hence multiple solutions to the problem of vertical centring in CSS.
hombre_fatal 6y ago
The web is meant for anything you can build with its tools. That its tools lagged behind what people were building with them is just a reminder that a platform's caretakers have little to do with the creators on the platform. This goes for everything. I built a forum from scratch that miraculously exploded into a community and culture and drama. 15 years later I look at it and realize it happened in spite of me, not because of me. It doesn't even feel like any of it's mine. I'm a groundskeeper. I might have built the scaffolding, but who am I to say what it's for once thousands of people have made that decision for themselves? "No, no, no. The web is for boring documents of <p> and <img>! What are you people building?! The most complicated application I envisioned when I invented HTTP was Encyclopedia Britannica online, and the limits of my imagination must be yours!"

JimDabell 6y ago

> it’s still complex to do simple things that everybody wants. People underestimate the complexity of layout. Take vertical centring, for example. The immediate assumption is that it’s easy; you just find the mid-way point between the top and bottom. But the top and bottom of what? The web is a document-based system, with text flowing from top to bottom. The centre in this context is not the centre of the window, but the centre of the document. Okay, so let’s find the mid-way point between the top and the bottom of the document. The top is easy, it’s zero. So where’s the bottom? Well to find that, you need to know how tall the document is. How do we do that? Well, the height of the document is defined by the height of all of its contents. So let’s render its contents and find the height. But wait – the thing we are trying to render in the centre is part of the contents, so we’ve got ourselves into an infinite loop. There are various solutions to this – hard-code the height of the document (to what?); take the thing being centred out of consideration when rendering the rest of the document (and now it can’t affect / be affected by the rest of the contents), etc. But which solution is best depends upon the context – and this is how you end up with complexity. It’s easy to say “just put it in the centre”, but it’s not as easy to figure out what that means exactly or which solution is best for doing so. > Is this why the web is less successful than it might be? The web is one of the most successful technologies in the history of human civilisation. It seems quite odd to talk about it as if it were a flop because you have to think for a moment before centring something.

newsbinator 6y ago
I'd like to be able to say: .child-element-selector { centered-inside: .parent-element-selector; } And let the browser figure out what I mean, taking into account border widths and parent element padding, for example.
- dsego 6y ago
  But muh job security.
hombre_fatal 6y ago
Yep, GUIs are always hard. I don't know what it is about the web, maybe because it's so accessible, that makes people assume its GUI abstraction should be easy. Or that because web GUI is hard then the web's abstractions are basically a failed experiment. Or, HN's favorite, that we're somehow trying to build things with these completely anodyne GUI tools that they're somehow not meant for. But it's hard because GUIs are always hard. And the things that make HTML/CSS hard are the threads that run through all other GUI abstractions and make them hard. Notice how Android and iOS developers are never piling into HN circlejerks raving about how Google and Apple have really solved GUIs. Here are six different ways to center a square in a box in UIKit with constraints: https://stackoverflow.com/a/26181982/511200 https://stackoverflow.com/a/26181982/511200 I've been an iOS developer for over five years and I still consult this regularly when checking constraint spaghetti to make sure it's not missing any bits of the magic incantations.

conradfr 6y ago

I often wonder what is the total time and money wasted the last twenty years because "vertical-align: middle" on a div don't do what anyone think it would and should. Imagine if CSS had that and nesting and variables from the start :)

mekster 6y ago
After doing the web for 20+ years, I still Google for "vertical align center css" when creating a new layout... Flex is easy to remember though.

thaumasiotes 6y ago

> Is this why the web is less successful than it might be? I'm struggling to understand this question. If the web were more successful than it already is right now... what would that look like?

AndriyKunitsyn 6y ago
Web that is a go-to solution for creating UIs of any complexity, not the lowest common denominator that is used where nothing else can.

Philip-J-Fry 6y ago

I used to think CSS was complex and everything was a hack. Then I sat down and actually read about the box model rules, how things like margin and padding affect elements, and how amazingly useful flexbox was. I've worked with web developers that still don't understand the usefulness of collapsing margins. Developers that think padding is an alternative to a margin and not understanding they are different things altogether. If your solution to spacing something is to wrap it in a new element and add padding then you're thinking backwards. You just add margin to the element you want to space. I firmly believe the idea that CSS (today at least) is complicated is just people not trying to learn what modern CSS is like. Learn your basics like the box model, block elements, inline elements, etc. Then learn about flex and grid. That right there is like 90% of the knowledge you need to make anything in CSS today. The way I learned was being given Sketch or Photoshop documents with all the sizes and margins/paddings and told "now make that a website". I really wish there was a learning tool that just had website/website element mockups with sizes and your job is to replicate it as close as possible in HTML/CSS.

roelschroeven 6y ago
> I used to think CSS was complex and everything was a hack I do web development only occasionally, so I'm not familiar with current best practices and rely on trying to mine the docs for what I'm trying to do and googling for it. I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. That changed with the introduction of flex and grid. Suddenly I'm able to use the layout I want without any real problems. CSS is now usable for both styling and layout.
- Izkata 6y ago
  > I've always very strongly had the impression that while CSS was good at styling, it was hopeless at layout. > That changed with the introduction of flex and grid. Half true. Flex and grid are a significant improvement, but "hopeless" was just about always inaccurate. The vast majority of issues people had with layouts pre-flex were because they didn't understand the box model and how block/inline/inline-block/float interacted with each other. ...Unfortunately, not understanding the box model is still a problem, but flex/grid can get people further without needing to understand it.

goto11 6y ago

It is simple to vertically center things in PDF's, since you have a fixed dimension canvas and text doesn't change dimensions due to user preferences or device configuration. So if you want layout to be simple, use PDF. Of course most users hate to read PDF's online, because they have to zoom and scroll around and so on. So the real question if you want the pain on the producer side or push it to the consumer side. Producing layout which render reasonably well on completely different devices and screen dimensions is inherently non-trivial.

m12k 6y ago

The problem is consistency and lack of direction. There are now sane ways to do almost anything in CSS. But they are not exclusive - they live side-by-side with older, less-sane solutions, many of which don't play nice together. Someone ought to write a "CSS: The Good Parts" book about a modern, sane subset of CSS that plays nice together, covers everything you need, and that the industry could unite around.

vagrantJin 6y ago

> Is this why the web is less successful than it might be? No. The success of the web has nothing to do with CSS. By all standards the web has over-achieved and will continue to do so for the foreseeable future of humanity. CSS is an order of magnitude better these days. Browsers are playing nicer together except Safari. Chrome uses more resources than a triple A game title but sets the standard.