CSS is awesome.
-
Yeah I know it and have done it. That's how I know we're doing it wrong and have been for a long time.
You just said you were doing it wrong and yet you blame CSS and still argue with experts...
Jeremy Falcon
-
You just said you were doing it wrong and yet you blame CSS and still argue with experts...
Jeremy Falcon
-
There were once "experts" who had it all figured out with "vapors" too. Once they took the advice to start washing their hands, they stopped killing so many people.
You're just looking to argue with nonsensical nonsense dude. You're not fooling anyone. :|
Jeremy Falcon
-
You're just looking to argue with nonsensical nonsense dude. You're not fooling anyone. :|
Jeremy Falcon
-
"Nonsensical nonsense" is the sort of thing CSS produces from people's brains long term, except it's more centered.
Thanks for demonstrating, yet again, there will always be someone childish and uneducated peeps on here to argue. Are you done wasting my time? I'm willing to be you're not. Enjoy your little kiddie game. I'm out.
Jeremy Falcon
-
Sander Rossel wrote:
Yeah, I'll have to disagree with you on that one, but hear me out.
That's cool if it comes from a place of intelligence and willingness to learn. And to be fair, I've lost my patience on programming boards long, long ago. Literally being doing this my entire life for zero gain, ya know.
Sander Rossel wrote:
I can set height in WinForms without problems, but when I set height in CSS, like "height: 100%;", it somehow doesn't work because some other property I did or did not set prevents height from taking effect.
This is both true and not true. It's true in the sense that if you don't know what's going on it seems whack. If you do understand what's going on it's perfectly reasonable. The web is a much harder target to design for than say a WinForms app where you have complete control over everything (like window sizing). The DOM is very, very decentralized but it also mimics IPC in the fact elements can "talk" to one another (cascade, bubble, etc.). It needs to be this way because a typical web page will have thousands upon thousands of elements. And I can promise you that's no fun to deal with. Native web components make this a bit more WinForms/VB like to reduce the clutter, but we've also had component abstractions for years now before that. But, even in a component the element count can increase. So, abstractions can be good if you know what's going on. Part of the reason I'm so jaded these days is because I've explained what's going on with height a lot on CP. Nobody reads that though. But, someone's always gonna complain. So, at some point I realized I'm just wasting time doing that.
Sander Rossel wrote:
Same with width, although width works better than height because for height they're saying "we don't know how high your page is", but for width they're saying "it's as wide as your screen".
If you use width and height percentage units, both mean a percentage of the parent container (including body). The reason width appears to work better is because block elements default to 100% of parent, so by default it appears to work because the body's width will default to view port width but not height. Also, all block elements only have the height you need for content (including body). You can set it though. Most people just don't take 5 mins to learn what's going on. Why was it done this way? My guess is when CSS
Long post, let's say I agree with you for the most part :laugh: I used to view CSS as pure evil, probably invented by Hitler himself (but apparently it was one Håkon Wium Lie). That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front. And because I don't do that I can't do some stuff and he's struggling to make things right. Recently, I created my first sticky header and footer layout without his help, so I'm learning! The WTFs/minute is still high, but flexbox (and grid) make things a lot easier (as you already said) :D
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
-
Long post, let's say I agree with you for the most part :laugh: I used to view CSS as pure evil, probably invented by Hitler himself (but apparently it was one Håkon Wium Lie). That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front. And because I don't do that I can't do some stuff and he's struggling to make things right. Recently, I created my first sticky header and footer layout without his help, so I'm learning! The WTFs/minute is still high, but flexbox (and grid) make things a lot easier (as you already said) :D
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Sander Rossel wrote:
That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front.
I liken it to ASM, but for the web and UI. You don't just start coding ASM right away like you do in VB, etc. It does come with a learning curve, I'll give you that. And it's made worse by the browser compatibility wars (that's better now though), but that's the fault of the industry. But nobody's on CP saying "I hate ASM" because we all know ASM ain't for the faint of heart. And they think just because CSS isn't compiled it requires zero learning. And if they have to study... let's just just say we hate it and move on.
Sander Rossel wrote:
Recently, I created my first sticky header and footer layout without his help, so I'm learning!
Noice man. It's a good time to learn layouts IMO. There's CSS Grid, but for layouts Flexbox is all you need and support for that has been around since IE11, so you're covered. I mean, not that you should support IE. :laugh: I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
...
Howdy
...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}main {
flex: 1;
}Done :laugh: Also, when you get a chance, this is a great read on how flexbox works: [CSS Flexbox Layout Guide | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Jeremy Falcon
-
Sander Rossel wrote:
That friend who sometimes works for me convinced me it's not all bad, but that you have to think about your overall design up front.
I liken it to ASM, but for the web and UI. You don't just start coding ASM right away like you do in VB, etc. It does come with a learning curve, I'll give you that. And it's made worse by the browser compatibility wars (that's better now though), but that's the fault of the industry. But nobody's on CP saying "I hate ASM" because we all know ASM ain't for the faint of heart. And they think just because CSS isn't compiled it requires zero learning. And if they have to study... let's just just say we hate it and move on.
Sander Rossel wrote:
Recently, I created my first sticky header and footer layout without his help, so I'm learning!
Noice man. It's a good time to learn layouts IMO. There's CSS Grid, but for layouts Flexbox is all you need and support for that has been around since IE11, so you're covered. I mean, not that you should support IE. :laugh: I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
...
Howdy
...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}main {
flex: 1;
}Done :laugh: Also, when you get a chance, this is a great read on how flexbox works: [CSS Flexbox Layout Guide | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Jeremy Falcon
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
-
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Sander Rossel wrote:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :-D
Sorry, I should've mentioned margin in that example. The reason it's doing that is because I used `100vh`, but by default elements have a margin. So, the browser took that is `100vh` for the min height (not max height) plus a little something, something to fit the body into with its margin. It's usually not noticeable because the default height doesn't span the full view port but only the content. Here's the full document that accounts for that. I added two extra "resets" in it too (border and padding) just in case a framework tries to tinker with them since they can also have the same effect on `body`.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Sticky Footer</title>
<meta charset='utf-8'>
<style>
html, body {
border: none;
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
padding: 0;
}header { background: pink; padding: 1rem; } main { flex: 1; padding: 1rem; } footer { background: cyan; padding: 1rem; } </style></head>
<body>
<header>...</header>
<main>Howdy</main>
<footer>...</footer>
</body>
</html>You'll notice I used the multiple selector `html, body`. That's not technically required these days but it's just an old compatibility trick from the years of past. It won't hurt anything to keep it with modern browsers, so I usually do. I also re-added padding after the reset in body to 1 root em so it should propagate as expected.
Jeremy Falcon
-
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Oh, and to be fair, browser compatibility is where the real pain the booty comes in. Unfortunately, most browser makers (cough, cough Microsoft) hate following standards. Was even worse in the past when there was no standards committee as everyone was fighting for web dominance. But, thank God it's much better these days. Anywho, the site `Can I Use` will be your new BFF for web development as it'll list browser compatibility. You can automate all of this of course if you have a proper dev environment set up in Node, but for a quick check it's still a great site to know. Here, I'm checking to see which browsers support viewport units like `100vh`. So, they've been around for about 10 years now, which makes them pretty safe to rely on with this. For people with an old browser that doesn't support flexbox or viewport units, it just won't span the entire viewport unless there's content. No biggie. Site still works. [Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/viewport-units)
Jeremy Falcon
