It never fails, no matter how much I think I know about a particular aspect of CSS, I know that every time I watch a Kevin Powell video, I WILL learn something new!
Reset I also use : blockquote, q {quotes: none} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse;border-spacing: 0} button, input[type=submit] {-webkit-appearance: none; -moz-appearance:none; appearance:none ; background: none; border: none; cursor:pointer;} button:focus, a:focus, input:focus {outline:0} Obviously, blockquote and buttons, need to be styled later on. Thanks for all your video Kevin, it's always a pleasure to listen to your advices.
I limit how long my characters go too (roughly 60-80 characters) but I use max-inline-size' instead of max-width; with it being a logical property it'll scale with other writing modes.
I also implemented the red border line in my reset, when I work on a project I tend to create a red border line around my elements to control the various spacings between items. I used this code, which I learned through your videos, instead of repeating the code in each element to create a border line, in this way i applied a class name .border (or .red if you want) and it applies the border to the parent and its children's and childrens and childrens and so on .border{border: 1px solid red;} .border > *{border: 1px solid red;} .border > * > *{border: 1px solid red;} .border > * > * > *{border: 1px solid red;} .border > * > * > * > *{border: 1px solid red;}
Happy New Year Kevin! Thanks for all the CSS videos!! I would love for you to share different resets you've seen before and their use cases if possible
Minor thing, although I dislike the look of the hanging-punctuation, would you not be better to set the css value onto the element rather than the , after all is intended for inline quoting and has the { quotes: ' .. ' } css property. I'd link the MDN pages for reference but YT will not allow that.
An interesting inclusion in resets that has been brought to my attention recently is * { min-width: 0; }. That might seem insane at a glance but it makes the implicit way that widths tend to affect each other a lot easier to reason about. It's a little more work to get everything working the way you want to at small sizes after that, but you don't get any of the weird edge cases where things grow outside of their containers when it really seems like they shouldn't and it's really hard to pin down where that behaviour is coming from.
Thanks for video Kevin! Here are some resets I use * { margin: 0; padding: 0; border: none; box-sizing: border-box; word-wrap: break-word; -webkit-tap-highlight-color: rgba(0,0,0,0); background: none; } img { width: auto; max-width: 100%; height: auto; } button { cursor: pointer; } a *, button * { pointer-events: none; } a *, button * is to easier listen to clicks on actual links and buttons, without js have to bubble up to the a/button elements if you click a "svg" in the element... Also for accessibility, you might wanna kill all the transitions and animations while you are at it like this: @media (prefers-reduced-motion) { *, *::before, *::after { transition: none !important; animation: none !important; } } Peace and love!
If you use 2 different fonts for headings and paragraphs, which often is the case.... using the "ch" unit, you might end up with different max-widths right? I haven't played around with it, but I think maybe using another relative unit as rem or something might be better for this. I don't know how this scale when zooming or people have other standard rem settings in their browser. Have you tried this out with "ch" unit? ... Though if people zoom or want bigger text, maybe they want it cross their full screen.@@KevinPowell
Happy new year kevin. Very grateful for everything you do for the front end community. I started learning front end web development, and coding in general, in september 2023. I feel like watching your channel has jumpstarted my journey and im learning so fast thanks to your tips and tutorials etc. Thank you!
I want a waitlist for any css reset you might put out!!! I just saw this thing about a min-width: 0 to deal with a bunch of weird overflow issues in flex, I wonder if it will make your reset... 😀
Hello, Kevin, and a belated happy new year. I wish for a new video, where you put all the newer reset ideas together. I have seen all the latest videos, they're all super, but a combined video would help to create your own master reset. Please think about this for an upcoming video. Highly appreciated.
about hanging punctuation, if it only works with the beginning of a paragraph, then it’s useless, situations happen much more often when the quote is in the middle of a paragraph, but falls at the beginning of the line, if this new feature works with this case, then yes, it’s wonderful
I've been looking at resets/normalize lately and I've seen people either put the normalization in a layer or use `:where(tag, tag2)` to reduce specificity of the normalization. That way it doesn't get in the way of any other styling. I've also seen a hackier, but more supported `tag:not([class])` so the selector won't affect any styles based on class.
anyone else had issues with @media (prefers-reduce-motion: no-preference)? it does not allow for smoothing scrolling on my end. I checked my windows animation option and it is set to animations on, so.... Not sure why it won't work. Great video Kevin!!!! edit: Got it working. It was likely a misspell on my end. User error 99% of the time. ☺
In my reset I would replace the font size with clamp values for fluid type and use something like min(90%, 1600px) to manage the entire page's content width.
Hi Kevin...I loved when I found your channel speaking about CSS (its hard here in my country find videos only speaking about css) One thing I did learn recently (and liked) was about: * { ... font-size: 62, 5%; .... } Its easier for me now to use rem But I have a doubt about on this video Without font-size: 62, 5%; the p max-width is 75ch But using font-size: 62, 5% should I change p max-width?? To which value?
h1, h2 etc. I get why they exist (hangovers from a distant past), but isn't there a better way these days? I feel in the next spec they need to make a syntactically different but functionally similar element which can have an attribute to denote the level. e.g.: Title Goes Here That way, resets can target them all with a single selector, but granular and multiple selections can still be done with a pseudo-selector h:nesting(>2)
Have you considered doing HTML canvas course? I am using that at the moment and there are a lot of tiny stuff that aren't mentioned on many places. It would be nice to have a detailed and functional canvas course.
@@KevinPowell It would be great! I guess I would've some better knowledge after finishing my project with canvas animations, but with each day I find more and more specific stuff for it to be done right
@@najmantube Using a calc() you can combine various units. It works like this: - 1em sets the line-height to match the current font-size - 0.5rem adds a bit of spacing regardless of the current font-size Examples: font-size: 0.75rem line-height = 0.75rem + 0.5rem = 1.25rem font-size: 1rem line-height = 1rem + 0.5rem = 1.5rem font-size: 5rem line-height = 5rem + 0.5rem = 5.5rem When using line-height: 1.5 it'd just multiply the font-size and be too small or too big, instead giving us line-heights of 1.125rem, 1.5rem and 7.5rem tl;dr it's as if you could do line-height: 1 + 0.5rem
I think `hanging-punctuation` is great on large(r) text, like block quotes, but I find it rather unpleasant on standard text. I'd definitely _not_ use it at such a high level.
Large quotes usually have qoute as an icon, so no need to to apply this property anyway. Completely agree that moving this quote makes alignment unpleasant.
From a typography standpoint, even on small text it's considered the "correct" way to do it. If you pay attention to it, it can sometimes feel off, but generally if you aren't looking for it, the hanging version stands out less. At least, that's the theory
Hello @KevinPowell, I hope you are doing great. could you please make video about responsive approaches on media-query min-width or max-width,which approach is best and why for large project?
I absolutely _despise_ smooth scrolling, or anything that hijacks page scrolling for even a millisecond. That doesn't mean I also want to turn all motion off everywhere. I can tolerate most effects, but right now it's either all or nothing, and I don't like it. Though at least I want to commend you for taking into consideration the prefers-reduced-motion query at all. RUclips's new rotating like / view numbers simply don't, and it's very annoying.
I think I get why these are called resets (because they change some built in browser default). But then when you start adding new stuff, isn't that just a set, rather than a reset? I always set a font family and size
Is there a reason for not doing scroll padding for people who want reduced motion, or was that a mistake since you were adding it to a :has(:target) block that was already limited in that way?
As far as the hanging punctuation, that's the standard in typography, so any magazine or book will generally have it and you probably didn't notice since you weren't looking for it! When you aren't looking, it tends to stand out less, or at least that's the theory
As for the target, could be worth testing. Habit for me not to target everything for something that's only used in specific spaces, but might be totally fine to do it that way!
Shouldn't be scroll-padding-top placed out of @media (prefers-reduced-motion: no-preference) {}? This property isn't about motion at all. If you place it there, users with reduced motion won't have any space before elements they're scrolled to.
Why not include ‘html’ to the selector this would insure a better compatibility for all and the :has(:target) insure that fringe cases are also covered.
I mentioned why not only targetting html 8n the video. If you mean comma separatibg them and selecting both, I'd have to test it, but that could be an option. Invalid selectors can break comma separated rules, but :has might not break it, since the syntax is valid... Worth testing 😃
What are your thoughts on this reset snippet (which I got from another website some years ago) : @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; transition-delay: 0ms !important; } } Do you think your reset should include the animation stuff?
This channel has made me appreciate css even more
Me too 🎉❤
It never fails, no matter how much I think I know about a particular aspect of CSS, I know that every time I watch a Kevin Powell video, I WILL learn something new!
Reset I also use :
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse;border-spacing: 0}
button, input[type=submit] {-webkit-appearance: none; -moz-appearance:none; appearance:none ; background: none; border: none; cursor:pointer;}
button:focus, a:focus, input:focus {outline:0}
Obviously, blockquote and buttons, need to be styled later on.
Thanks for all your video Kevin, it's always a pleasure to listen to your advices.
I limit how long my characters go too (roughly 60-80 characters) but I use max-inline-size' instead of max-width; with it being a logical property it'll scale with other writing modes.
I also implemented the red border line in my reset,
when I work on a project I tend to create a red border line around my elements to control the various spacings between items.
I used this code, which I learned through your videos, instead of repeating the code in each element to create a border line, in this way i applied a class name .border (or .red if you want) and it applies the border to the parent and its children's and childrens and childrens and so on
.border{border: 1px solid red;}
.border > *{border: 1px solid red;}
.border > * > *{border: 1px solid red;}
.border > * > * > *{border: 1px solid red;}
.border > * > * > * > *{border: 1px solid red;}
I don't know if there is a better way to simplify
i love how you explain the issue then you teach us how to solve it .
Niiice! I never knew scroll-padding-top even existed, I will definitely be using this, thank you Kevin!
Happy New Year Kevin! Thanks for all the CSS videos!! I would love for you to share different resets you've seen before and their use cases if possible
Minor thing, although I dislike the look of the hanging-punctuation, would you not be better to set the css value onto the element rather than the , after all is intended for inline quoting and has the { quotes: ' .. ' } css property. I'd link the MDN pages for reference but YT will not allow that.
I would keep the scroll-padding-top outside of the media-query - regardless of whether the user prefers reduced motion, it is still required
Should have said, I love putting the smooth scroll into the media query, and the inclusion of the the text-wrap properties.
An interesting inclusion in resets that has been brought to my attention recently is * { min-width: 0; }. That might seem insane at a glance but it makes the implicit way that widths tend to affect each other a lot easier to reason about. It's a little more work to get everything working the way you want to at small sizes after that, but you don't get any of the weird edge cases where things grow outside of their containers when it really seems like they shouldn't and it's really hard to pin down where that behaviour is coming from.
Thanks for video Kevin!
Here are some resets I use
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
word-wrap: break-word;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: none;
}
img {
width: auto;
max-width: 100%;
height: auto;
}
button {
cursor: pointer;
}
a *,
button * {
pointer-events: none;
}
a *, button * is to easier listen to clicks on actual links and buttons, without js have to bubble up to the a/button elements if you click a "svg" in the element...
Also for accessibility, you might wanna kill all the transitions and animations while you are at it like this:
@media (prefers-reduced-motion) {
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}
Peace and love!
Nice! Curious what the background none is for 🤔
Thanks! Yeah me too! 🤪 - maybe to kill the standard bg/bg-color on buttons, dropdowns and some other elements, I'm not sure.@@KevinPowell
If you use 2 different fonts for headings and paragraphs, which often is the case.... using the "ch" unit, you might end up with different max-widths right? I haven't played around with it, but I think maybe using another relative unit as rem or something might be better for this. I don't know how this scale when zooming or people have other standard rem settings in their browser. Have you tried this out with "ch" unit? ... Though if people zoom or want bigger text, maybe they want it cross their full screen.@@KevinPowell
Wow! Smooth scroll is much simpler this way. Thanks!
Happy new year kevin. Very grateful for everything you do for the front end community. I started learning front end web development, and coding in general, in september 2023. I feel like watching your channel has jumpstarted my journey and im learning so fast thanks to your tips and tutorials etc. Thank you!
From each and every video i learn something new from your videos. thanks man appreciate 👍
Some extra stuff i use in my reset.
*{
box-sizing: border-box;
text-rendering: optimizeSpeed;
max-height: 999999px;
}
::selection {background: var(--primary-l1); color: #fff;} // Light version of primary color
::placeholder{.paragraph; .regular; .font-size(16); color: #908e8e; overflow: visible;}
::-ms-clear {display: none !important;}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background: #e1e2e4;
border-radius: 100vw;
margin: 0;
}
::-webkit-scrollbar-thumb {
background: darken(#e1e2e4, 28%);
border: 4px solid #e1e2e4;
border-radius: 100vw;
.trans(400);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
So Kevin is the best and I say this because he cares about the little things that make huge difference and that is me.
I learn so much from this channel! Thank you so much, Kevin!
Saved this reset for future use. Thank you so much! PS: You forgot to add the smooth scrolling part to your codepen code :)
I asked gpt4 to make me a really thorough css reset the other day, and I think it actually included most if not all of these tips.
Fantastic entry into 2024! 🙏
I want a waitlist for any css reset you might put out!!! I just saw this thing about a min-width: 0 to deal with a bunch of weird overflow issues in flex, I wonder if it will make your reset... 😀
Hello, Kevin, and a belated happy new year. I wish for a new video, where you put all the newer reset ideas together. I have seen all the latest videos, they're all super, but a combined video would help to create your own master reset. Please think about this for an upcoming video. Highly appreciated.
about hanging punctuation, if it only works with the beginning of a paragraph, then it’s useless, situations happen much more often when the quote is in the middle of a paragraph, but falls at the beginning of the line, if this new feature works with this case, then yes, it’s wonderful
Happy 2024 Kevin and thanks for all your tips !
I use text-wrap: balance; with 4 words, in smaller screen-sizes it wraps evenly as opposed to orphaned words.
I actually dislike the fact it makes the lines so even. I prefer pretty.
I've been looking at resets/normalize lately and I've seen people either put the normalization in a layer or use `:where(tag, tag2)` to reduce specificity of the normalization. That way it doesn't get in the way of any other styling.
I've also seen a hackier, but more supported `tag:not([class])` so the selector won't affect any styles based on class.
anyone else had issues with @media (prefers-reduce-motion: no-preference)? it does not allow for smoothing scrolling on my end. I checked my windows animation option and it is set to animations on, so.... Not sure why it won't work. Great video Kevin!!!! edit: Got it working. It was likely a misspell on my end. User error 99% of the time. ☺
Always love your content...but as far as typography goes why no indent on your ul elements? My ocd is going crazy on this lol😂
Really nice tips!
You made me love css transition to react
In my reset I would replace the font size with clamp values for fluid type and use something like min(90%, 1600px) to manage the entire page's content width.
Hi Kevin...I loved when I found your channel speaking about CSS (its hard here in my country find videos only speaking about css)
One thing I did learn recently (and liked) was about:
* {
...
font-size: 62, 5%;
....
}
Its easier for me now to use rem
But I have a doubt about on this video
Without font-size: 62, 5%; the p max-width is 75ch
But using font-size: 62, 5% should I change p max-width?? To which value?
Happy new year buddy❤
Happy new year Kevin 🎉
Again, great stuff that I didn't have on my mind!
The ultimate CSS reset. Thank you
Definitely not the ultimate one as there are some other things that probably could be added, but I think they are useful 😃
Thank's Kevin.
Yoo Happy New Year homie
h1, h2 etc. I get why they exist (hangovers from a distant past), but isn't there a better way these days?
I feel in the next spec they need to make a syntactically different but functionally similar element which can have an attribute to denote the level. e.g.:
Title Goes Here
That way, resets can target them all with a single selector, but granular and multiple selections can still be done with a pseudo-selector
h:nesting(>2)
Great video, but the linked Codepen is missing quite a bit of the video, notably the scrolling section.
Have you considered doing HTML canvas course? I am using that at the moment and there are a lot of tiny stuff that aren't mentioned on many places. It would be nice to have a detailed and functional canvas course.
I don't use it very often at all. Could be something to dive into more for 2024 though!
@@KevinPowell It would be great! I guess I would've some better knowledge after finishing my project with canvas animations, but with each day I find more and more specific stuff for it to be done right
These 'new' features could be used to achieve the perfect news column grid layouts - ever thought of attempting one of those, Kevin?!
Everyone is creating their own CSS reset this days. Kevin, don't you think it is time you created yours for public use? I'm definitely trusting yours.
Happy new year 🎉
Happy new year 🎊
Always the browser support
Wishing you all the best for 2024 Kevin.
I really like to use * { line-height: calc(1em + 0.5rem); } for good looking line heights at any font size
I didn't realise you could combine ems and rems. Could you expand a little on how this works, please?
@@najmantube Using a calc() you can combine various units. It works like this:
- 1em sets the line-height to match the current font-size
- 0.5rem adds a bit of spacing regardless of the current font-size
Examples:
font-size: 0.75rem
line-height = 0.75rem + 0.5rem = 1.25rem
font-size: 1rem
line-height = 1rem + 0.5rem = 1.5rem
font-size: 5rem
line-height = 5rem + 0.5rem = 5.5rem
When using line-height: 1.5 it'd just multiply the font-size and be too small or too big, instead giving us line-heights of 1.125rem, 1.5rem and 7.5rem
tl;dr it's as if you could do line-height: 1 + 0.5rem
@@Venyl Got it, thanks:)
Even backend developers can center the div if they watch this channel's videos
I think `hanging-punctuation` is great on large(r) text, like block quotes, but I find it rather unpleasant on standard text. I'd definitely _not_ use it at such a high level.
Large quotes usually have qoute as an icon, so no need to to apply this property anyway.
Completely agree that moving this quote makes alignment unpleasant.
From a typography standpoint, even on small text it's considered the "correct" way to do it. If you pay attention to it, it can sometimes feel off, but generally if you aren't looking for it, the hanging version stands out less. At least, that's the theory
Thanks for the video. On another note, what webkit browser are you using? I've had problems testing for Safari on Windows recently... :D
Hello @KevinPowell, I hope you are doing great. could you please make video about responsive approaches on media-query min-width or max-width,which approach is best and why for large project?
This might be what you're looking for 😊
ruclips.net/video/p3k_IrXLNRc/видео.html
I absolutely _despise_ smooth scrolling, or anything that hijacks page scrolling for even a millisecond. That doesn't mean I also want to turn all motion off everywhere. I can tolerate most effects, but right now it's either all or nothing, and I don't like it.
Though at least I want to commend you for taking into consideration the prefers-reduced-motion query at all. RUclips's new rotating like / view numbers simply don't, and it's very annoying.
How did you know I'm going through a CSS reset??? Thank you!
I think I get why these are called resets (because they change some built in browser default). But then when you start adding new stuff, isn't that just a set, rather than a reset?
I always set a font family and size
How can we stay up to date with the newest css features 🎉😢
I don’t like putting a max width on all p tags, that really causes problems at some point in a project.
Hi. Quick question, would rather use Bootstrap or CSS?
min-width:0 removes overflowing. The default is auto.
Is there a reason for not doing scroll padding for people who want reduced motion, or was that a mistake since you were adding it to a :has(:target) block that was already limited in that way?
Oh, good point! Probably worth having that outside, thanks for mentioning it 😃
@@KevinPowell doh - should have read earlier comments before pointing this out myself!
🎉 thanks
Would be cool if you could go in depth to advanced scss.
html > * for the scrolling support among various browsers?
Why :has(:target) is better than *?
And actually I think moving punctuation is strange, prefer how it was without hanging-punctuation set.
As far as the hanging punctuation, that's the standard in typography, so any magazine or book will generally have it and you probably didn't notice since you weren't looking for it! When you aren't looking, it tends to stand out less, or at least that's the theory
As for the target, could be worth testing. Habit for me not to target everything for something that's only used in specific spaces, but might be totally fine to do it that way!
Hlo ji Hitesh Sir suggested your channel ❤
tbh its great small improvement === great changes.
Shouldn't be scroll-padding-top placed out of @media (prefers-reduced-motion: no-preference) {}? This property isn't about motion at all. If you place it there, users with reduced motion won't have any space before elements they're scrolled to.
What is the reason you dont use the meyerweb reset.css?
You should put up the css file and a sample html on a repo
Why wouldn't you do HTML, has:target ?
I'm not seeing all this code in the code pen not sure if I'm just missing it somehow.
Happy new year Kevin!
btw am i first? just asking lol
Are you 10 years old? 🤣
@@pepethepatriot7524 hm why
Almost! 😁
Why not include ‘html’ to the selector this would insure a better compatibility for all and the :has(:target) insure that fringe cases are also covered.
I mentioned why not only targetting html 8n the video. If you mean comma separatibg them and selecting both, I'd have to test it, but that could be an option. Invalid selectors can break comma separated rules, but :has might not break it, since the syntax is valid... Worth testing 😃
What are your thoughts on this reset snippet (which I got from another website some years ago) :
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
transition-delay: 0ms !important;
}
}
Do you think your reset should include the animation stuff?
This looks fine
4:14 why not simply do `* {scroll -behavior: smooth; }`?
Is there any css reset for android and ios webview?
idk if it counts as a reset feature but I like having an sr-only utility class in my reset. also 8:45 is not a great line out of context haha
🤣🤣
I do include a .sr-hidden in my starting CSS too 😊
if use :has(:target), html {} bug the scroll?
Instead of ":has(:target)" would you be able to use "* > *" as a fallback? I'm not sure.
no because the latter selects the child, not the parent like the 1st way
Just * as * > * won't be applied to html.
You don't like border box?
I still do it, yeah 😊
🎉🎉🎉
September 2024 and text-wrap: pretty still isn't supported in Firefox. *SIGH*
Do people actually like 'scroll-behavior: smooth'? I think it just looks janky, prefer the browser default.
Yes, smoth is much clearer if it's really scrolling, not changing of a tab or smth like that.
I find it more obvious that I haven't changed to a new page 🤷
@@KevinPowell That's reasonable. Thanks for your work ❤️
India time:12:27 pm
Text wrap balance & pretty isn't supported by Firefox sadly.
I make * { min-width:max-content; } Never seen anyone do it.
Funny hair
* { min-width: 0; }
css
You know the coding's getting serious when we're using "pretty" as a value.
dd
Here are some of my resets:
/* Font smoothing */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Selection styles */
::-moz-selection {
background: rgb(var(--clr-primary-rgb) / 0.75);
color: white;
-webkit-text-fill-color: white;
text-shadow: none;
}
::selection {
background: rgb(var(--clr-primary-rgb) / 0.75);
color: white;
-webkit-text-fill-color: white;
text-shadow: none;
}
/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-delay: 0.01ms !important;
animation-delay: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
-webkit-transition-delay: 0.01ms !important;
transition-delay: 0.01ms !important;
-webkit-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}