@@rmnffx yes, and that's why browser have a max limit for how many lines they apply it to. But if you're having headings that are 10 lines long, there's something very weird about your headlines... Are you sure it's not actually a lead paragraph rather than a title?
@@rmnffx yeah. I don't personally see the point of supporting more than 3 lines since it doesn't make much sense with more lines anyway. I guess they just put 10 lines as a limit to protect the users from idiot programmers who use it wrong (because it probably isn't painfully slow until it's more than 10 lines); and don't really expect anyone to hit the limit when using it correctly.
2:21 “…it creates these ugly things, that’s why they’re called orphans…and we don't want them….” - R.I.P. orphans 💀 I know what you meant to say, but I still had a good laugh. 😂
Your outro really speaks to me now I've always loved learning new stuff or working on ambitious hobby projects, but recently I've started really enjoying _little_ things that actually help people. Making little web apps to solve niche problems, filing pull requests to open source projects for small improvements, adding little CSS progressive enhancements in the codebases at work, etc. Thanks for doing what you do, I'd say you've made the journey towards mastering CSS *a lot* more awesome :)
From typography view: An orphan is the term for the first line of a paragraph at the end of a column. This means: If a paragraph extends over several lines and only the first line of the paragraph is at the end of the column or page. :) I tried using pretty and balanced on paragraphs a few months ago and then deactivated them. It creates often a very disharmonic gap on the right side (with LTR texts). I went over to create a utility class for it and use it only when needed. Also I personally don't like to use ch on paragraph widths. Its more precise to give the wrapper a max-width (or clamp / min-max on width) especially when you use two fonts in your design. The problem with ch is it measures the width of one character. Due the massive differences between narrow, normal, bold and extended font cuts you ran into issues with simply different widths of your paragraphs and that ends in ugly layouts. The container line looks very promising! Happy to try it out the next days! Thank your for your always awesome content Kevin!
Thank you, indeed the left over word at the end of the paragraph is referred to as 'Widow' while a single word or line run over from a prior page/column/text container is referred to are 'Orphan'. In many other languages the same translated idiom is used like in Dutch Weduwe (Widow) and Wees (Orphant)
Kevin, just dropping a Kudos - I've probably learned more about CSS from your videos than from any other source. And you've enabled me (years ago) to leave Bootstrap behind. Love the tips, keep'em coming! ☺
It's been a while since I have written CSS but I learned to never set dimensions on things if am not absolutely certain I need them. On top of that, max-width, min-width, etc. can have a weird behaviour sometimes (that's my lack of practice talking): like a dimension can change the way something is computed even though it does not make any difference in a different context and it can take a while before you realise why something is not behaving like it should. I personally don't do many things in my resets, even popular things. I do think your settings are good, but I would find a way to attach them to some meaningful utility classes. I think text-wrap pretty can backfire, for example if you justify the text. As for containers, I think it's a great idea, I just wonder how it impacts performance.
@kevinpowell would you suggest using :where() in resets? Just to avoid _any_ specificity issues down the line. If not, what use cases do you see yourself reaching :where() for?
Most selectors in my reset are element selectors, so I don't really see the need for using :where(). As for when I use it, for the most part, it's when I need a more complex selector for one reason or another, and I want to avoid boosting specificity.
I noticed that text-wrap: pretty; also seems to put things like File System API into one line instead of it having File on a line above and System API on the line below it if the wrap normally would do this. So I guess the algo isn't only checking for the orphans. It's a nice little text-wrap setting to use for copy.
I'm learning a lot from you thank you. One question tho. How does one use your little tips when using a css framework which probably already have its own resets?
include your *reset.css* after including bootstrab for example and your file will have priority above the freamwork rules or whatever you declared before
I do not think adding container on body or given elements is good idea since items with position fixed will no longer be fixed to the viewport but it will be fixed to given container, which is something you may or may not want..
Usually I just have a max-text-width class, I can apply where necessary, but I may adopt this in my "base css". Any other text elements that should be listed here? About the last point: But you can't apply a container and flex/grid on the same element right?
Won't `container-type: inline-size` create a new stacking context? It could cause some weird issues so I'm not sure about applying to bunch of elements as default.
Yup! I have run into issues with it on my header, but having it on main, sections, etc, I've been fine with. I probably should have mentioned that though.
I see ai is taking over wed design at lightning speed. Dissatisfaction after taking years to learn it and all us being swept away as anyone can summon the command to make anything now
From everything I've seen, it's a lot of hype and not much payoff. There's some things it's decent at, but it's more of a tool to help devs than anything else, and even then, it can be downright bad at times too.
They want us to use semantic HTML and I would if it didn't have to revert styles for 3+ browsers. So until they come styless, I'll continue using divs. PEACE!
I mean, max-width with any unit can cause layout shifts. If anything, ch will cause less, because the width ajusts to the font-size, whereas a max-width in px or rem, a new font coming in can be wider, and then create new lines.
Ensure engagement: Intentionally include a typo on the thumbnail. Ensure viewers watch until the end: Omit a comma, then fix it at the last moment. youtube is strong in this one!
Less videos and each one is super short? Shouldn't less guaranteed videos a week mean the same 15m-20m minimum or longer? What happened to this channel. This could've been a 1m short
Next week will have a 3 hour video to make up for it, lol. I've been busy working on a big project (outside of that upcoming long video) so I've been making shorter content here for the time being. My more normal 20-30min stuff will be back :)
_"It just creates these ugly things. That's why they're called 'orphans'."_ 🤨 They're obviously called 'orphans' because they are left alone, not because they're ugly. Your non sequitur sounded pretty rude.
Thanks! It's not 3 lines for `balance` any more necessarily: Chrome does up to six, Firefox up to ten
Oh, thanks for letting me know, gonna pin this :)
@@rmnffx yes, and that's why browser have a max limit for how many lines they apply it to.
But if you're having headings that are 10 lines long, there's something very weird about your headlines... Are you sure it's not actually a lead paragraph rather than a title?
@@rmnffx yeah. I don't personally see the point of supporting more than 3 lines since it doesn't make much sense with more lines anyway. I guess they just put 10 lines as a limit to protect the users from idiot programmers who use it wrong (because it probably isn't painfully slow until it's more than 10 lines); and don't really expect anyone to hit the limit when using it correctly.
2:21 “…it creates these ugly things, that’s why they’re called orphans…and we don't want them….” - R.I.P. orphans 💀 I know what you meant to say, but I still had a good laugh. 😂
”Fun” fact, in Norwegian they're called ”whore children”. 😬
Or at least that's what I read in a old typography book.
It cracked me up too when I heard him say that. 😂
I came here to say this 😂
"They're not pretty, that's why they're called orphans, we don't want them" 😭😭😭😭
I probably could have said that better, lol
Your outro really speaks to me now
I've always loved learning new stuff or working on ambitious hobby projects, but recently I've started really enjoying _little_ things that actually help people. Making little web apps to solve niche problems, filing pull requests to open source projects for small improvements, adding little CSS progressive enhancements in the codebases at work, etc.
Thanks for doing what you do, I'd say you've made the journey towards mastering CSS *a lot* more awesome :)
From typography view: An orphan is the term for the first line of a paragraph at the end of a column. This means: If a paragraph extends over several lines and only the first line of the paragraph is at the end of the column or page. :)
I tried using pretty and balanced on paragraphs a few months ago and then deactivated them. It creates often a very disharmonic gap on the right side (with LTR texts).
I went over to create a utility class for it and use it only when needed.
Also I personally don't like to use ch on paragraph widths. Its more precise to give the wrapper a max-width (or clamp / min-max on width) especially when you use two fonts in your design. The problem with ch is it measures the width of one character. Due the massive differences between narrow, normal, bold and extended font cuts you ran into issues with simply different widths of your paragraphs and that ends in ugly layouts.
The container line looks very promising! Happy to try it out the next days! Thank your for your always awesome content Kevin!
Thank you, indeed the left over word at the end of the paragraph is referred to as 'Widow' while a single word or line run over from a prior page/column/text container is referred to are 'Orphan'.
In many other languages the same translated idiom is used like in Dutch Weduwe (Widow) and Wees (Orphant)
Kevin, just dropping a Kudos - I've probably learned more about CSS from your videos than from any other source.
And you've enabled me (years ago) to leave Bootstrap behind. Love the tips, keep'em coming! ☺
That's great. I needed "balance" and "pretty" for such a long time.
the thumbnail typo clickbait successfully add engagement by me commenting about it
resest, for anywone wondering
I think comments don't make the video popular.
If anything, meta comments would just be seem as spam by the algorithm and either be discarded or worse, penalized.
I just wondered about resets a few days ago 😂 and therefor would love to see more about generally useful resets 🤗
Love the shirt. I’m also a huge fan of `font: inherit` on all input fields.
It's been a while since I have written CSS but I learned to never set dimensions on things if am not absolutely certain I need them. On top of that, max-width, min-width, etc. can have a weird behaviour sometimes (that's my lack of practice talking): like a dimension can change the way something is computed even though it does not make any difference in a different context and it can take a while before you realise why something is not behaving like it should.
I personally don't do many things in my resets, even popular things. I do think your settings are good, but I would find a way to attach them to some meaningful utility classes. I think text-wrap pretty can backfire, for example if you justify the text. As for containers, I think it's a great idea, I just wonder how it impacts performance.
I am an orphin, I am wanted, I am not ugly.
Regardless of typography.
WOW. I had no idea 'pretty' existed! Hope browser support catches up fast!
Wouldn't "container-type" create a stacking context that'll break all of the "position: fixed" elements inside?
you have a typo in your video thumbnail: RESEST
You couldn't resest, could you?
@@Blast-Forward 😀
I never knew that about making your text that long thanks
@kevinpowell would you suggest using :where() in resets? Just to avoid _any_ specificity issues down the line.
If not, what use cases do you see yourself reaching :where() for?
Most selectors in my reset are element selectors, so I don't really see the need for using :where(). As for when I use it, for the most part, it's when I need a more complex selector for one reason or another, and I want to avoid boosting specificity.
I noticed that text-wrap: pretty; also seems to put things like File System API into one line instead of it having File on a line above and System API on the line below it if the wrap normally would do this. So I guess the algo isn't only checking for the orphans. It's a nice little text-wrap setting to use for copy.
These are three great resets to add... do you have a link or video to the resets you already had? :)
I'm learning a lot from you thank you. One question tho. How does one use your little tips when using a css framework which probably already have its own resets?
I have the same question, im ysing bootstrap sometimes but i want to use my personnal reset
include your *reset.css* after including bootstrab for example and your file will have priority above the freamwork rules or whatever you declared before
@layer will solve this when fully supported , chx out kevins video on it
i will share with you all in replies section my custom resets from my humble experience.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
hr {
height: /*any value except 0*/;
border: none;
background-color: /*any color*/;
}
a{
text-decoration: none;
color:inherit;
}
ul,ol{
list-style-type: none;
}
button{
border: none;
}
input{
border:none;
}
input:focus{
outline: none;
}
img{
max-width: 100%;
height: 100%;
}
for anyone here please if you have your custom reset rules share them with us may be we can benefit from them
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
min-height: 100dvh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
* {
font: inherit;
}
button,
input,
textarea {
outline: none;
border: none;
}
button:focus,
button:active,
input:focus,
textarea:focus {
/*outline: none !important;
border: none !important;*/
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: smooth;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@@ardabozan1909 that's awsome bro
Try position fixed inside div having container-type
Thanks
This was absolutely incredible ❤
Meh my boss started flipping out within a minutue into the video so I guess i'll be watching it later😂..
Thanks a lot.
I do not think adding container on body or given elements is good idea since items with position fixed will no longer be fixed to the viewport but it will be fixed to given container, which is something you may or may not want..
impressive
Awesome video as always! Do you have a full reset that you use on your projects (and can we see it)?
I use a slightly modified version of Andy Bell's reset. I'll be doing a live stream creating a bit more of a reset soon as well.
Those are nice additions to a reset.css! 👍 But what resets do make sense in 2024?
I like Andy Bell's (more) modern reset as a starting place :)
I got probably used to the text being unbalanced because I prefer it that way 😂
Improve your spellchecker... 😂
Thank you for showing us you are human like the rest of us while also showing us how easy CSS can be.
Lol, I use * {margin: 0; padding: 0; box-sizing: border-box}. I will start adding the ones you just showed.
Usually I just have a max-text-width class, I can apply where necessary, but I may adopt this in my "base css". Any other text elements that should be listed here?
About the last point: But you can't apply a container and flex/grid on the same element right?
Won't `container-type: inline-size` create a new stacking context? It could cause some weird issues so I'm not sure about applying to bunch of elements as default.
Yup! I have run into issues with it on my header, but having it on main, sections, etc, I've been fine with. I probably should have mentioned that though.
I see ai is taking over wed design at lightning speed. Dissatisfaction after taking years to learn it and all us being swept away as anyone can summon the command to make anything now
From everything I've seen, it's a lot of hype and not much payoff. There's some things it's decent at, but it's more of a tool to help devs than anything else, and even then, it can be downright bad at times too.
Do you mean RECSST?
RESEST
They want us to use semantic HTML and I would if it didn't have to revert styles for 3+ browsers. So until they come styless, I'll continue using divs. PEACE!
Text-wrap: balance is very broken I’d say. In most cases it looks nicer without it
Please share your current reset.css!
Planning a live stream around something like this, but I use slightly modified version of Andy Bell's reset for the most part.
max-width in ch units can impact your CLS score due to shifting when new font is loaded
I mean, max-width with any unit can cause layout shifts. If anything, ch will cause less, because the width ajusts to the font-size, whereas a max-width in px or rem, a new font coming in can be wider, and then create new lines.
😢 "we don't want orphans, it's very ugly"
Ensure engagement:
Intentionally include a typo on the thumbnail.
Ensure viewers watch until the end:
Omit a comma, then fix it at the last moment.
youtube is strong in this one!
Less videos and each one is super short? Shouldn't less guaranteed videos a week mean the same 15m-20m minimum or longer? What happened to this channel. This could've been a 1m short
Next week will have a 3 hour video to make up for it, lol. I've been busy working on a big project (outside of that upcoming long video) so I've been making shorter content here for the time being. My more normal 20-30min stuff will be back :)
_"It just creates these ugly things. That's why they're called 'orphans'."_
🤨 They're obviously called 'orphans' because they are left alone, not because they're ugly. Your non sequitur sounded pretty rude.
Yeah I could have phrased that a little better, lol. Hopefully people know what I meant there, lol.