important side-note regarding what you said in the last tip: when adding a transition property to an element, you should always try to avoid using your position/sizing properties. this is what your transform properties are for. like in the example given, do not apply your transition by targeting the property "right: -16px" to "right: 0px", instead use "transform: translateX(-16px)" to "transform: translateX(0)". use scale or rotate as well. your standard position and sizing attributes are calculated with CPU, while your transformation properties are done by GPU; adding transition properties to elements using transformation properties are GPU accelerated, while using the position/sizing and margin/padding values will cause layout re-flow, meaning the browser must recalculate these all of these values when one is changed, which can effect browser performance on the client. depending on where and how the effected value changes, and how many other elements use relative units to the one effected, this can cause a cascade of calculations and a lot of problems.
To work around the issue of potentially poor cropping of images when using `object-fit: cover;` you can also use the element and pass multiple different image sources through the element for different screen sizes to reduce the amount of zooming of the object-fit on smaller screens and reduce load time of unnecessarily large images on mobile devices! But all in all these are good tips!
For better responsive sizes not based on the viewport, I recommend using container query units such as cqi. It uses the same clamp approach described, but you world need to add a container context on the parent using container-type: inline-size.
Nice video, I have some tips for you. For the mobile menu, avoid using JavaScript as it's unnecessary. Instead, use an input of type 'checkbox' to toggle the menu, and a label for it as a button. In CSS, use the Visibility property to hide it from the page, combined with opacity and transition to achieve the desired effect. For the heading, you can use @container queries if you have the heading only in part of the page. And pro tip: if you use REMS, set HTML to 10px; this makes calculations for setting your sizes easier. Don't forget to set up BODY to 1.5rem for elements that you forget to style, otherwise, they will appear small
We need to change aria attributes dynamicly which are essencial for the accesibility. Edit; Also for your pro tip, i cannot test it right now but probably it is same as changing HTML font-size to 62.5%, so some cons for that: Potentially huge accessibility problems for anyone who changes their default font size Changing defaults is unexpected, so can confuse other developers (or even yourself in the future) Hard to maintain and even harder to remove later on Conflicts with third-party code Many engineering teams will look negatively on job applicants who use this in their code, because they are aware of the issues it can cause.
The checkbox hack is not totally accessible and not good with screen readers, it should be avoided. Also mucking up font size on the html element is not a good idea at all since it is not expected and can lead to unusual behavior.
This is how I've always done it to. Use a checkbox to toggle it open and close. Yiu don't want access for your content to be dependent on JavaScript. But I think it's okay to use JavaScript just for the accessibility part of it. Alot of acessability requires JavaScript anyway
Very nice video. But can you make an updated darkmode switch video. The one you have every time you you go to a different page it flashes white for a sec and the darkmode button doesn't work on the new page.
you can now animate from display none with interpolate-size: allow-keywords, so you dont have to do all that workaround, which imo is too much boilerplate. Its almost at 70% in caniuse
how many sites don't take into consideration CLS for publicity banner and images.. I hate when the paragraphs shift up or down while I'm reading, every time one of those banner is loaded
Thanks, useful stuff. But I'd do it differently for 5. Tip 5: Instead of using 2 different buttons in 2 different places, use one toggle button on top of everything else that visually morphs between hamburger and X, but stays in the same spot. Simpler, cleaner and faster nav. (I realize you may be doing it to demonstrate the inert function, but I always felt a single toggle button works best.)
It is an illusion that all images of the page have the same dimensions or aspect ratio. You should not use this for the global img tag, instead use a class
Tip #3 is where I'll disagree. Defining an aspect-ratio on an image tag, like for a CSS reset, is not a good choice. We usually have different images for different needs and purposes on our website. I'd rather style the IMG tags based on their specific section. A good example will be article images where you wish for all the same sizes, then a proper solution would look like so. section.someclassname img {...} So globally I wouldn't set this, but for a specific area it's an ideal problem solver.
Yes, we actually mean the same thing. I wouldn't use it for a css reset either. Only to maintain consistent dimensions within a specific section. I only used the img tag selector in the video because there was nothing else on the example website. On production level the selector would be different (depending on where the image is used). Hope that clarifies it ✌️
@@coding2go I think you wouldn't do that in a reset, but others might do that as they have seen it like this. Maybe next time you can explain it in a better contextual way. Of course, this is just constructive criticism, and take it easy, Fabian.
important side-note regarding what you said in the last tip:
when adding a transition property to an element, you should always try to avoid using your position/sizing properties. this is what your transform properties are for. like in the example given, do not apply your transition by targeting the property "right: -16px" to "right: 0px", instead use "transform: translateX(-16px)" to "transform: translateX(0)". use scale or rotate as well. your standard position and sizing attributes are calculated with CPU, while your transformation properties are done by GPU; adding transition properties to elements using transformation properties are GPU accelerated, while using the position/sizing and margin/padding values will cause layout re-flow, meaning the browser must recalculate these all of these values when one is changed, which can effect browser performance on the client. depending on where and how the effected value changes, and how many other elements use relative units to the one effected, this can cause a cascade of calculations and a lot of problems.
4:42
The _calc()_ function can be omitted because _clamp()_ supports calculations too.
Was about to mention the same, glad you did that already🙂
Oh cool, didn’t know
0:26 Relative padding
2:02 Responsive font-sizes
4:57 Responsive images
6:59 Dynamic viewport height (dvh)
8:20 HTML inert attribute
To work around the issue of potentially poor cropping of images when using `object-fit: cover;` you can also use the element and pass multiple different image sources through the element for different screen sizes to reduce the amount of zooming of the object-fit on smaller screens and reduce load time of unnecessarily large images on mobile devices! But all in all these are good tips!
That inert attribute look good, and only now I found it? Thanks man
What a great video. You earned yourself a sub sir
This videos are so nice and so helpful for me, soon I will have my web portfolio done and it will be much easier using these tricks, thanks!
Very nice ! Thank you. Very clear and direct explanations.
The dvh tip was amazing, thank you!!
Bro's explanation is great. easy and simple to understand.
He is a big don of CSS...
Thanks Fabian Sir...
❤❤❤❤❤❤❤❤
Omg this is amazing thank you! Subscribed and bell notification on!
That was so helpful especially the dvh part which I had a problem with, Keep the great work ❤💪
great value video 👍
Très utile, merci beaucoup 👍
Nice video you can explain about inert attribute ❤
2:02 this tip is gold. I was frustated because i found boring creating the same property for every screen
The left is for PC, and the right is for tiny screen. No more hardcode
Thank you very much, Fabian 👍
For better responsive sizes not based on the viewport, I recommend using container query units such as cqi. It uses the same clamp approach described, but you world need to add a container context on the parent using container-type: inline-size.
Useful tips. Thank you for making this video.
Learnt a lot, thank you
Make a detailed video on css grid topic
I did not except this....Great😻
Bro really deserve sabarscribe ❤
Thank you for this video. I have a question : for tip number 1, how do you determine the 2 min values (in this case 5em and especially 8%)?
Perfect 👍 well explained quickly...
Nice video, I have some tips for you. For the mobile menu, avoid using JavaScript as it's unnecessary. Instead, use an input of type 'checkbox' to toggle the menu, and a label for it as a button. In CSS, use the Visibility property to hide it from the page, combined with opacity and transition to achieve the desired effect. For the heading, you can use @container queries if you have the heading only in part of the page. And pro tip: if you use REMS, set HTML to 10px; this makes calculations for setting your sizes easier. Don't forget to set up BODY to 1.5rem for elements that you forget to style, otherwise, they will appear small
We need to change aria attributes dynamicly which are essencial for the accesibility.
Edit; Also for your pro tip, i cannot test it right now but probably it is same as changing HTML font-size to 62.5%, so some cons for that:
Potentially huge accessibility problems for anyone who changes their default font size
Changing defaults is unexpected, so can confuse other developers (or even yourself in the future)
Hard to maintain and even harder to remove later on
Conflicts with third-party code
Many engineering teams will look negatively on job applicants who use this in their code, because they are aware of the issues it can cause.
Most sites have a default size of 16px. In general, it's recommended not to set the default size to 10px, but instead use 1rem = 16px as normal.
The checkbox hack is not totally accessible and not good with screen readers, it should be avoided. Also mucking up font size on the html element is not a good idea at all since it is not expected and can lead to unusual behavior.
Bro all your tips are not considered good accessibility practice, at least for the checkbox and html font sizes
This is how I've always done it to. Use a checkbox to toggle it open and close. Yiu don't want access for your content to be dependent on JavaScript. But I think it's okay to use JavaScript just for the accessibility part of it. Alot of acessability requires JavaScript anyway
It is very helpful
Very nice video. But can you make an updated darkmode switch video. The one you have every time you you go to a different page it flashes white for a sec and the darkmode button doesn't work on the new page.
Great 👍
dvh is new for me
Great video
Wow, really nice 🙂
thanks for your share:)
Best tips
Great tips and video 👍
you can now animate from display none with interpolate-size: allow-keywords, so you dont have to do all that workaround, which imo is too much boilerplate. Its almost at 70% in caniuse
make a detailed video on @media query
With Tailwind CSS, everything is perfect. I never use plain CSS.
Ahaha😂😂😂 idiot
Gold 🔥
thank you
What is the difference of using aria-hidden="true" or inert ?
This is weird, but what is the browser being shown in the video with the resizing?
Clamp
Min, std, max
Thème name please ?
There's always a hidden CSS feature, there's always one!
and I see this video after I finished my first big website…
Me too....
how many sites don't take into consideration CLS for publicity banner and images.. I hate when the paragraphs shift up or down while I'm reading, every time one of those banner is loaded
Big!
10 mins of invaluable tips for devs of all backgrounds. I knew just 3 of these, and one partially, lol 😅
Nice google
Can anyone suggest some videos on how to make a website responsive? I'm kind of stuck
👍👍👍👍👍👍👍👍
Create RUclips video downloader website please
Thanks, useful stuff. But I'd do it differently for 5.
Tip 5: Instead of using 2 different buttons in 2 different places, use one toggle button on top of everything else that visually morphs between hamburger and X, but stays in the same spot. Simpler, cleaner and faster nav.
(I realize you may be doing it to demonstrate the inert function, but I always felt a single toggle button works best.)
Thanks for sharing! It is a great solution
Could you show a demo code for this via codepen? 😬
I don't know why but my container isn't centering?
Use display flex on parent element
It is an illusion that all images of the page have the same dimensions or aspect ratio. You should not use this for the global img tag, instead use a class
Please add Hindi in the Video Track
make full tutorial for css sir
Do you have a project for a website with login, verification and permissions html css javascript node js
4:45 this is getting very spaghet ngl
Luftwaffe 😂
Tip #3 is where I'll disagree. Defining an aspect-ratio on an image tag, like for a CSS reset, is not a good choice. We usually have different images for different needs and purposes on our website. I'd rather style the IMG tags based on their specific section. A good example will be article images where you wish for all the same sizes, then a proper solution would look like so. section.someclassname img {...} So globally I wouldn't set this, but for a specific area it's an ideal problem solver.
Yes, we actually mean the same thing. I wouldn't use it for a css reset either. Only to maintain consistent dimensions within a specific section. I only used the img tag selector in the video because there was nothing else on the example website. On production level the selector would be different (depending on where the image is used).
Hope that clarifies it ✌️
@@coding2go I think you wouldn't do that in a reset, but others might do that as they have seen it like this. Maybe next time you can explain it in a better contextual way. Of course, this is just constructive criticism, and take it easy, Fabian.
First.
You can say "first reply on whole video" on this comment
thank you