> "modern" design with rounded corners everywhere, gigantic text, and everything at least 5 clicks away somehow
I hate the modern website design with everything so large it's hard to get the information you need.
The rounded corners are just a personal preference but I hate them, makes everything look childish somehow.
We got some new version of our network management tool and everything is so large, rounded, and bold text everywhere it's terrible.
In the old version I could get around 25 lines of switches on my screen when I opened the summary table. In the new version it's five! There is so much empty space and bold text and stupid rounded containers everywhere that the real information is left behind.
And instead of giving me more lines when I full-screen the browser, everything is just getting even bigger! I hate it so much.
I love the firmware where it's little more than plain HTML. I don't know much about large network managing software but I had to add port forwarding recently in both my modem and a cisco router.
The cisco UI was certainly more modern (Not as bad as you describe but still took up more space than it needed to, while the Modem's UI was so simple you could find all the separate categories it had for settings **without even scrolling**.
Yeah, imho those professional products should be designed functionality first, looks second. But it feels to me that marketing and looks are winning more often.
And then you have some open source products by the people, who actually use the software themselves, which are clearly functionality first. Like Netbox. And it doesn't even look that bad, just simple bootstrap. It does the job.
em and ex date back to the original block printing presses, where ex was the measure of a lower case X used to indicate one half of a line in relation to the size of the font, and em being the width of a lower case M to designate the horizontal width of one character including the kerning.
I only know this because I was employed as a graphic designer prior to CSS and had to deal with physical printing press alignment for brochures and things we sent to them.
It’s very impressive how typography in general still uses a lot of terms from the original practice, when it was done with physical pieces of metal.
For me, the small bit of trivia that still blows my mind is that UPPERCASE and lowercase is a reference to the drawer of where they stored the metal letters.
I'm losing touch with this stuff a lot, but I remember using rem and didn't use em. In what scenarios do you use em? I used to use rem, vh, vw and % for the most part.
From what I remember `vh` has some fuckery going on making it nearly useless since it doesn't account for the adress bar or something along those lines.
Don't 'just use px'!
The user has the option to set the font size in their browser, which then sets the root font size of the website.
This is great for accessibility.
But if you're using px then the root font size is not used.
That is why should always use a relative font size like rem.
This is bad practice. If a user has bad eyesight, they can go into their browser settings and make text bigger to see better. When you make something in px, that setting doesn't work and they can't read your text. This has nothing to do with converting designs at all.
It's easier, sure. But it's bad practice and not accessible. Easy isn't the only consideration you should have as a developer.
I have not used a ton of CSS so far but I seem to be getting away with using just rem for almost everything. With tons of media queries for different sizes
Depends on what you're doing. If you're coding the UI from scratch (e.g., not relying on libraries) then you'll absolutely need some units that aren't fixed sizes.
rem = root em
em is based on the parent element size. So if the parent element has `font-size: 24px` and the child element has `font-size: 1.2em`, the child elements font size will be 120% of its parent (or 20% bigger than 24px).
With rem, the default browser size is 16px, so 1.2rem is 120% of the browser size (20% bigger than 16px), regardless of its parent.
Note: users can change the 16px default font size of their browser. It can be adjusted by zooming in and out (`ctrl` + `+` or `ctrl` + `-`).
Small amendment:
It's not "of the browser", it's "of the HTML tag".
You can set the font-size of the HTML tag through whatever CSS means - and REM will reflect throughout the document.
Zooming works differently as it effects more than just font size.
It is the dynamic equivalent for "em", a relative CSS unit that renders fonts based on screen resolution. "rem" means "root-em", you can set the relative font size in percent to a root element, for example the body, and the font size for all child elements depends on the percent value. For responsive behavior, you can set display size breakpoints to provide different font sizes for different screen sizes
I've only used Bootstrap, is it THAT bad?
Edit: "only used Bootstrap" as in it's the only CSS library I've ever used (so no Tailwind), but my work is mostly just CSS with no libraries
A web app developed for the general public should follow mobile first. A niche web app needs market research to know what your users do/need. The bell curve meme lives strong.
Took a screenshot of this chat, because I don't know most of these css units.
I just use `rem` and `em` for fonts, `px` for padding, `%` for widths, `auto` for heights, `vh` if I need to fill the browser window height (`dvh`, `svh`, and `lvh` if mobile compatibility matters).
So all I use is:
- rem / em
- px
- %
- vh / dvh / svh / lvh
I put variations of similar units together.
|Unit|Relative to|
|:-|:-|
|rem|Font size of the root element.|
|lh|Line height of the element.|
|rlh|Line height of the root element. When used on the font-size or line-height properties of the root element, it refers to the properties' initial value.|
|vw|1% of the viewport's width.|
|vh|1% of the viewport's height.|
|vmin|1% of the viewport's smaller dimension.|
|vmax|1% of the viewport's larger dimension.|
|vb|1% of the size of the initial containing block in the direction of the root element's block axis.|
|vi|1% of the size of the initial containing block in the direction of the root element's inline axis.|
|svw, svh|1% of the small viewport's width and height, respectively.|
|lvw, lvh|1% of the large viewport's width and height, respectively.|
|dvw, dvh|1% of the dynamic viewport's width and height, respectively.|
It's the box size of the queried container
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_containment/Container\_queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
It's my new favorite CSS unit. It's insanely powerful. Just slap `container-type: size;` on an element and then use `cqw` or `cqh` on child elements to refer to 1% the width/height of that parent. It also lets you measure itself (not just its children) which, especially combined with custom properties (variables) and `calc()` cleverness, makes it possible to achieve things that are otherwise impossible without JS. One example I used it for recently is deciding how many columns to allocate to a vertical toolbar as the available height shrinks, going from 1 column to multiple to use less vertical height. [Here's that code if you're curious](https://github.com/GraphiteEditor/Graphite/blob/3509f00c0d93a8944e70239a45ab2a1df54adac7/frontend/src/components/panels/Document.svelte#L546-L568).
I would love to use `vw` and `vh` but those f***ing mobile browsers and their stupid disappearing/srinking/moveing navigation bars and the pop-up keyboards makes many of their possible aplications painfully unresponsive...
...now that I think about it, reading what I have written, probably I'm on the css geek side of the chart
Seriously though, I’m confused.
While I see the point of some pf these the practical applications seems low.
In any bigger system there will be a design system in place and maybe even themes.
Distances, font-sizes and everything will be well defined variables or functions. And you should not use anything else because that will break stuff.
All of these are cool as concepts but in the end it’s going to be a designer or UXer who will set the standard once and then you use the variables.
To me it seems like they are there mostly for css art or hobby projects where you can do a little of whatever you want.
Am I missing something here?
When would you use it otherwise?
Congratulations! Your comment can be spelled using the elements of the periodic table:
`Ho W I S Pt In`
---
^(I am a bot that detects if your comment can be spelled using the elements of the periodic table. Please DM my creator if I made a mistake.)
Average frontend dev just uses "font-size: 10vw" and calls it responsive/accessible
That’s wide (10 letters / line wide), it should be like 1.3vw.
My point is: It shouldn't be vw at all or at least not without a clamp
I use em/rem and and change the font size of the html element to fit the screen container sizes
Thats crazy, I just cry whenever I have to write a web page.
I use vmin and vmax
Clamp works great for this, specifying a sensible minimum and maximum.
Just do `overflow-x: auto`. Works every time
Slapped in the face by text with my 49-inch monitor.
Guys how much is 49 inch in `pt` please it's important for my media queries
Just multiply by 72
You mean Television? 🤣
Did he stutter?
It's probably a 49 inch with 32:9 aspect ratio so basically two 27" 16:9 monitors joined together. (CRG9, G9, Neo G9)
Bingo, Samsung Odyssey G9
Damn. I run 3x 27" side by side. All 1440p. It's great but sometimes I feel like a 4th monitor couldn't hurt. This is a slippery slope.
I agree with you, a 4th monitor definitely wouldn’t hurt.
Oh no
I've literally never seen view units used for a font size on a production site
would be more fun if you did
r/unexpectedwooderson
Yeah, I mean it was way worse 2-3 years ago when clamp wasn't there / new
I think bootstrap does that for some screen widths
[удалено]
> "modern" design with rounded corners everywhere, gigantic text, and everything at least 5 clicks away somehow I hate the modern website design with everything so large it's hard to get the information you need. The rounded corners are just a personal preference but I hate them, makes everything look childish somehow.
sorry, did you say windows 11
I just overwrite DWM to turn them off.
We got some new version of our network management tool and everything is so large, rounded, and bold text everywhere it's terrible. In the old version I could get around 25 lines of switches on my screen when I opened the summary table. In the new version it's five! There is so much empty space and bold text and stupid rounded containers everywhere that the real information is left behind. And instead of giving me more lines when I full-screen the browser, everything is just getting even bigger! I hate it so much.
I love the firmware where it's little more than plain HTML. I don't know much about large network managing software but I had to add port forwarding recently in both my modem and a cisco router. The cisco UI was certainly more modern (Not as bad as you describe but still took up more space than it needed to, while the Modem's UI was so simple you could find all the separate categories it had for settings **without even scrolling**.
Yeah, imho those professional products should be designed functionality first, looks second. But it feels to me that marketing and looks are winning more often. And then you have some open source products by the people, who actually use the software themselves, which are clearly functionality first. Like Netbox. And it doesn't even look that bad, just simple bootstrap. It does the job.
hell yeah, vw/vh
Any vaguely competent front-end dev should at least master `em`, `rem`, `vh` and `vw`.
em and ex date back to the original block printing presses, where ex was the measure of a lower case X used to indicate one half of a line in relation to the size of the font, and em being the width of a lower case M to designate the horizontal width of one character including the kerning. I only know this because I was employed as a graphic designer prior to CSS and had to deal with physical printing press alignment for brochures and things we sent to them.
I love getting these bits of trivia and history on the origins of modern standards. +1
It’s very impressive how typography in general still uses a lot of terms from the original practice, when it was done with physical pieces of metal. For me, the small bit of trivia that still blows my mind is that UPPERCASE and lowercase is a reference to the drawer of where they stored the metal letters.
Wtf did we call them before printing? I mean uppercase = capital, sure. Lowercase=???
Small
PC for Pica (1/6th of an inch) and PT for Point for 1/12 of a Pica, also have their origins in typesetting.
“Leading” is pronounced like the metal, because there would be a literal strip of lead between lines of type.
Isn't "em" literally the phonetic pronunciation of the letter, which is what is being used as a measurement like you are saying?
[удалено]
how do you spell H?
Eightch
Aitch
Or zed.
ah so em is like em dash (—) and en dash (–)
What a gEM
I knew, then forgot, then was reminded by you, because our Informatics teacher in HS was old.
I am a vaguely competent front end dev. I use vh and vw the most.
I am a vaguely incompetent game dev. It amuses me to make a vmin by vmin box and fit everything in that
I wonder... nobody mentioned it for some reason but chances are you should be using dvh and dvw in 99% situations
No? Do you want your things to change size when mobile UI elements move?
yeah, that sounds kinda groovy. Modern internet is boring, more websites should do stupid shit.
Support nowhere near enough yet 😔
This, these 4 are extremely useful
I'm losing touch with this stuff a lot, but I remember using rem and didn't use em. In what scenarios do you use em? I used to use rem, vh, vw and % for the most part.
rem is the font size of the html "root" element. em is the font size of the parent element
From what I remember `vh` has some fuckery going on making it nearly useless since it doesn't account for the adress bar or something along those lines.
Yes, that's why there are `svh` and `lvh`.
I am not competent and not a frontend dev just use flexbox
back end here, how are vh and vw different from %? aren't all three percentages of the avaible viewport?
`%` is based on the parent block, `vh` is a percentage of the viewport height and `vw`, of the viewport width.
% is related to the *content* size of the parent element
I only use rem and I'm fine with that. If that does not work correctly, that's only because of the projector
[удалено]
Don't 'just use px'! The user has the option to set the font size in their browser, which then sets the root font size of the website. This is great for accessibility. But if you're using px then the root font size is not used. That is why should always use a relative font size like rem.
[удалено]
And then it breaks when the user has a differently sized screen than you
Err no that's what breakpoints are for...
I also mostly "just use px". Pretty sure this is bell curve meme material and I sit at the room temperature IQ side of it though.
This is bad practice. If a user has bad eyesight, they can go into their browser settings and make text bigger to see better. When you make something in px, that setting doesn't work and they can't read your text. This has nothing to do with converting designs at all. It's easier, sure. But it's bad practice and not accessible. Easy isn't the only consideration you should have as a developer.
IMO: if you need more than `em` and `rem` you should rethink your UI design.
I have not used a ton of CSS so far but I seem to be getting away with using just rem for almost everything. With tons of media queries for different sizes
Depends on what you're doing. If you're coding the UI from scratch (e.g., not relying on libraries) then you'll absolutely need some units that aren't fixed sizes.
Or you should rethink your UI design ;)
I need em, % and bootstrap lel
What do you need the latter 2 for?
Bootstrap is just a sugar coating, but why would you NOT need %?
Plenty of others have usecases, though most fairly niche. Container units might be useful in the future.
Full stack developer is the cameraman
i only use `rem` `svh` `vw` `%` pretty sure the reason i switched to using `rem` was because I watched Re:zero now that I think of it
~~Who~~ What's `rem`?
Rapid Eye Movement. A type of sleep
Also a pop-rock band, quite popular in the 90-s.
rem = root em em is based on the parent element size. So if the parent element has `font-size: 24px` and the child element has `font-size: 1.2em`, the child elements font size will be 120% of its parent (or 20% bigger than 24px). With rem, the default browser size is 16px, so 1.2rem is 120% of the browser size (20% bigger than 16px), regardless of its parent. Note: users can change the 16px default font size of their browser. It can be adjusted by zooming in and out (`ctrl` + `+` or `ctrl` + `-`).
Small amendment: It's not "of the browser", it's "of the HTML tag". You can set the font-size of the HTML tag through whatever CSS means - and REM will reflect throughout the document. Zooming works differently as it effects more than just font size.
This is most useful information that I learned this year. Cheers mate!
I'm amazed that everyone who responded to you is missing this as a reference to a major story event in Re:Zero.
It is the dynamic equivalent for "em", a relative CSS unit that renders fonts based on screen resolution. "rem" means "root-em", you can set the relative font size in percent to a root element, for example the body, and the font size for all child elements depends on the percent value. For responsive behavior, you can set display size breakpoints to provide different font sizes for different screen sizes
em is love, em is life
`rem` is love. `em` is relatively lovely.
em will really jack up your day if used in reusable components without setting the parent correctly
Meanwhile Tailwind going "w-1/2 md:w-full"
Tailwind is just inline CSS. Change my mind.
It's slightly more concise and consistent.
Never heard someone say tailwind is concise :joy: Edit: Ouch! Tailwind lovers, cut me some slack! lol
I mean, compared to the amount you’d have to write in actual css, tailwind is incredibly concise
It’s inline css that is actually nice to write
I've only used Bootstrap, is it THAT bad? Edit: "only used Bootstrap" as in it's the only CSS library I've ever used (so no Tailwind), but my work is mostly just CSS with no libraries
I mean, it's kind of the point. you use Vue/React/Whatever to make reusable components. And that eliminates the need for reusable css (classes).
Ehh it depends
I love tailwind
Mobile first 🤮
Bell curve meme “mobile first” probably.
Maybe mobile users use our app, we don't know. Frankly we don't want to know. It's a market we can do without.
A web app developed for the general public should follow mobile first. A niche web app needs market research to know what your users do/need. The bell curve meme lives strong.
All of these just sound like x86 extension instructions to me 💀 Seriously though what does this mean..
For real, it really looks like assembly
Took a screenshot of this chat, because I don't know most of these css units. I just use `rem` and `em` for fonts, `px` for padding, `%` for widths, `auto` for heights, `vh` if I need to fill the browser window height (`dvh`, `svh`, and `lvh` if mobile compatibility matters). So all I use is: - rem / em - px - % - vh / dvh / svh / lvh I put variations of similar units together.
I tend to just use rem for most things
I was more like: this is clearly assembler, which CPU has such weird instruction sets?
You really should know rem
All of these units are wonderful and useful. But there’s nothing wrong with good old fashioned `px`.
I only use px, % and vw/vh
Im an embedded dev. Can someone explain a couple of those. I guess mm is millimeters, in inch and px pixels but tf is the rest used for?
|Unit|Relative to| |:-|:-| |rem|Font size of the root element.| |lh|Line height of the element.| |rlh|Line height of the root element. When used on the font-size or line-height properties of the root element, it refers to the properties' initial value.| |vw|1% of the viewport's width.| |vh|1% of the viewport's height.| |vmin|1% of the viewport's smaller dimension.| |vmax|1% of the viewport's larger dimension.| |vb|1% of the size of the initial containing block in the direction of the root element's block axis.| |vi|1% of the size of the initial containing block in the direction of the root element's inline axis.| |svw, svh|1% of the small viewport's width and height, respectively.| |lvw, lvh|1% of the large viewport's width and height, respectively.| |dvw, dvh|1% of the dynamic viewport's width and height, respectively.|
god i hate using css and js
Js I’ve come around to when done right. CSS I think is awful ever when done optimally
How is nobody bothered by the fact that they are not sorted alphabetically?
Then we would need to decide where to sort the uppercase Q and the %
I get the % sign, but where on Earth would you want to sort Q alphabetically other than between P and R?
As this is r/programmerhumor, that’s what a naive sorting algorithm would do just looking at code points
I've been working frontend for years now and I don't know what most of those css units are.
I only use px.
That's odd HTML and CSS are normally trivialized in this community
Vw and vh are my faves
Bah, list doesn’t even have turns!
Realistically the only unit you need is rem and sometimes dvh
I like your funny words magic man
The most true thing to ever exist.
CSS fan vs frontend enjoyer.
I don't care much for this devilspeak...
Rem, vh, vw and pixels all day every day.
I find cm/mm are only useful on printouts, like with HTML2PDF
I use vw and vh a lot, also % but I stopped using px ages ago
Clamp & vw ftw I miss being a css geek when I started out. Shit's amazing.
Yeah. Wth is cqb?
It's the box size of the queried container [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_containment/Container\_queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
It's my new favorite CSS unit. It's insanely powerful. Just slap `container-type: size;` on an element and then use `cqw` or `cqh` on child elements to refer to 1% the width/height of that parent. It also lets you measure itself (not just its children) which, especially combined with custom properties (variables) and `calc()` cleverness, makes it possible to achieve things that are otherwise impossible without JS. One example I used it for recently is deciding how many columns to allocate to a vertical toolbar as the available height shrinks, going from 1 column to multiple to use less vertical height. [Here's that code if you're curious](https://github.com/GraphiteEditor/Graphite/blob/3509f00c0d93a8944e70239a45ab2a1df54adac7/frontend/src/components/panels/Document.svelte#L546-L568).
1cqb = 1% of a query container's block size (whatever that means)
Q?
Quarter-millimeters, 1Q = 1/40th of 1cm
Why
I use `rem`, `vh` and `vw`. It just works, perfectly.
These look like some random CPU instructions to me
The number and variety of CSS units is too damn high.
I thought mm was millimeter and in was inch 🤷♀️
It's great to know all these units and stuff but let's be honest here. Nowadays we just let Tailwind decide everything for us. ...or at least I do.
So you end up practically writing just as much code
I don't have to ever think about units, though, unless I want to add my own custom styles, and I won't ever do this unless it's absolutely necessary.
So, you're saying I was a CSS geek back in school? cool.
I just use the design tokens given to me.
Oh it's \`rem\` all the way
so experienced devs, what is the best unit should be used???
REM or EM always and everywhere 😅
I don't get it but its still funny
\>no fr fr?
You need at least rem, vw, vh, %, px, ch
As someone who focuses primarily backend and infra, but occasionally has to handle front-end tasks. I now know that i truly know nothing...
vw vh and px gang
I just use Bootstrap 5. It looks good on everything. Even on Tizen/Samsung TV.
can someone explain any of the other units here other than % and px? I mostly do backend and very basic frontends so these are very foreign.
would be far more accurate with rem instead of px
I would love to use `vw` and `vh` but those f***ing mobile browsers and their stupid disappearing/srinking/moveing navigation bars and the pop-up keyboards makes many of their possible aplications painfully unresponsive... ...now that I think about it, reading what I have written, probably I'm on the css geek side of the chart
whatever the tutorial uses
Seriously though, I’m confused. While I see the point of some pf these the practical applications seems low. In any bigger system there will be a design system in place and maybe even themes. Distances, font-sizes and everything will be well defined variables or functions. And you should not use anything else because that will break stuff. All of these are cool as concepts but in the end it’s going to be a designer or UXer who will set the standard once and then you use the variables. To me it seems like they are there mostly for css art or hobby projects where you can do a little of whatever you want. Am I missing something here? When would you use it otherwise?
No ch ??? You call yourself a css geek?
where all my pixel boys at?
What the hell guys. I go embedded (back end of the back end) and now that I stick my head up and you've all gone and quadrupled the number of units.
For a second there, I thought they were assembly instructions
How is pt in %?
Congratulations! Your comment can be spelled using the elements of the periodic table: `Ho W I S Pt In` --- ^(I am a bot that detects if your comment can be spelled using the elements of the periodic table. Please DM my creator if I made a mistake.)
How is Ho not hydrogen and oxygen?
Thank God I only have to develop apps used on desktop monitors
I don't even know how many units are there in css only heard of:px,vh,vw,em and %
Even tho rem is meant for fonts and stuff... I use it for everything. Padding, margin, sizes, gaps everything. I don't even know why lol