Hey Kevin, instead of clicking each element that you want to batch change; if you highlight the first one and use "ctrl+d" it will select the next matched element automatically. I've noticed you click select in several videos and thought it might help.
I use ctrl-d a lot actually, no idea why I didn't use it in this one. It's a life saver (ctrl+shift+L is awesome as well, but I always forget about it. Select every matching instance at once)
For over a year now I've watched your videos... For what felt like forever I rarely understood what you were doing. But as time goes on it's like it's all started clicking. So many dots connecting thanks to you. I know you don't got love for us WordPress folks, but we got lots of it for you!
Hello! Thanks for sharing videos like these. I’ve been doing paid dev work, including web app work, since 2000. I love modern CSS and JavaScript, and watching you work through a problem using CSS in real time is joyful. Thank you so much for sharing these videos. Also, I don’t know what your day job is (assuming it’s not RUclips), but the ability to describe your reasoning while working is top tier mentoring / peer coaching skills.
Thanks a lot for the kind words 🙂. I worked as a teacher for 5 years doing live demos pretty much every day, so that *really* helped me develop that skill of talking through what I'm doing, and also trying to anticipate questions so I wouldn't have to stop as often during a demo, lol.
This is really good and I actually learned few new things from this project, my deepest wish is to have someone make videos centered around JavaScript alone just like KP make videos about CSS 🤦
To be clear, the reason your initial attempt at :has(:not(:target)) didn't work is because you were misinterpreting it. You were reading it as "has no target", but what it really meant is "has any element which is not targeted". So it would apply the selector as long as there is at least one non-targeted child, which there always is, hence why it stayed on all the time.
yeah, it's going to take me awhile to get used to using :has(). After years of reading selectors in a very specific way, it's a bit of a change up that I confuse myself with.
Hey Kevin, huge fan. Just letting you know this is EXACTLY something I've been looking for. Definately saving this to use for a side-scroll navigation bar I'm trying to build right now (modeled after Netflix's Tudum page). I'd go for buttons over scrolling any day.
This is really impressive! I think CSS is grossly underestimated when it comes to what it can do. I only think with all those mega selectors, you start losing readability really quickly, to a point where the next morning you start asking yourself what you did there late last night 😉 So one question for me would be: When comes the point where you will go "heck, let's just use some few lines of js and be done with it"? Same thing for switching over to Sass or PostCSS etc. To my mind, this would also make an interesting video. Thanks very much for all your help on making at least my small corner of the internet a little bit more awesome!
Oh, man. This was intense. I felt your happiness when that really worked out! Nice job. This could save countless kbs of non-necessary javascript code.
Love your videos man. I don't know about it's compatibility but I have found a cool trick while fiddling around with my background. In 23:14 you added rgb(0 0 0 / 0.2) to make a black background with 20% opacity. But there's a much easier way to achieve the same thing. Just using hex code #000 (only works with 3 digits though, I don't know how but you can convert your 6 digit hex codes to 3 digits if you don't care about the color being a precise hex code) with 2 (or the 0.x opacity you want) in the end and it does the same job. for example : #202020 with 4 percent opacity is #2224 #000000 with 2 percent opacity is #0002 it's pretty cool and makes creating transparent backgrounds so easy.
Lol how funny, I'm literally trying to level up as a javascript developer working with api's and choose to build a Netflix clone and I'm planning on building the carousel movie page once I'm done with the sign-in page which. However, I love your series on building things in css, so this well give me some good ideas on a different approach on building out my design for the movies, so thank you kevin for the awesome content. 😁🙌🏽
Hi Kev. I've been teaching myself coding and I have found it beneficial for me to try exploring the limits of HTML CSS and JavaScript before I even attempt the other add-on stuff.
media-scroller:has(:not(:target)) I think means that it contains at least one item that is not targeted. Which will always be the case with multiple children.
You can remove the ":has" from the scroll bar using pseudoelements, by having .media-group:target:nth-child(4)::after with the same position as the next button and a higher z-index. You can remove the ":has" from the navigation indicators by using ".media-group:target ~" instead of ".media-scroller:has(.media-group:target)", which is basically the same thing you did for all bars, just not having the nth-child. No has at all (works on firefox for me)
I respect the fact that you have no problem in giving YT compatition as an example. Also those Netflix chevrons, from a UX pespective, aren't the best solution, so I wouldn't copy'em 121. ...but, on that note, good job there.
Well done Kevin! For the indicators without the has-selector. I think you could use the svg inside a label pointing to a hidden radio button before the corresponding indicator and target it like that. Default the first radio to checked. (didnt try it btw, so I could be wrong in my logic)
I think you could do the navigation indicators without the :has by styling the first indicator to be opacity: 1 by default and reducing the opacity when any media-group past the first is targeted, e.g. .navigation-indicators > *:nth-child(1) { opacity: 1; } .media-group:target:not(:first-child) ~ .navigation-indicators > *:nth-child(1) { opacity: 0.5; } You could do the same trick for the .next button on the first page but I think you'd have to move the first .media-group to be last and use something like grid-column: 1; to force it to layout in the first spot so that the sibling selector would be able to find the first page next button after the targeted page. Alternately you could move the previous / next buttons after of the .media-groups the same way the navigation indicators are.
Quick question: When positioning the next and previous buttons why don’t you make the media-group position:relative? That should then only appear on the selected group?
Doing this would indeed result in no overlapping buttons as they would stay in their own group, but this would reintroduce the issue of the buttons scrolling with the group as well. Once you would click a next/previous button you would be able to see the buttons scroll in and out with the other media-group content.
@@KevinPowell I would be really interested in seeing this as well. I've played around with something similar and had a very tough time scaling up the my version of the .media-element and getting that to behave nicely with the scrollable area. I think it would also be important to add a few more rows of .media-container elements to see how the scaled up .media-elements impact neighboring rows. Thanks for consistently great content.
This was really interesting. :has seems crazy, I wonder what the performance is going to be like though; Firefox apparently knocked back the suggestion 14 years ago saying that the implementation would be tricky & go against how every other selector works. Incidentally, if you had another carousel in here, would the solution break if you started :targeting things in a second carousel after panning partway through the first?
Yeah not sure if it would work with more than one. As for the has(), it was long thought impossible because it could easily make recursive issues, but thanks to some of the advancements being made in CSS and some clever thinking, they found ways around that, luckily for us!
Could a display:none be set on all arrows, and then a display flex be set on .media-group:hover:where(.prev, .next)? Instead of targeting the media-container as the hover trigger. That way only the links related to that media group would be in the DOM and not all. A similar solution could also be used for the indicator (although each media group would need it's own indicator with the corresponding box set to opacity 1). You would have to use positive and negative margins so have the next group peaking through so you could still technically be hovering on the correct group? Removes the need for :has & even :target (I think). More CSS though
Great video Kevin! And I think these videos showing your thought process are very helpful. I am still baffled by this selector .media-scroller:has(:target:not(:first-child)) .media-group:first-of-type .next { display: none }. If there ever was a CSS selector hall of fame, this should go there.
Hey Kevin thank you so much for your videos they help me a lot with my web projects. I had a question which I could find an answer for, should I use grid in the body tag to organize the general layout of the page or only for particular components?, thank you so much in advance, you are the best! 😀
Hi Kevin, for the last issue, Why didn't you use ".media-scroller:not(:focus-within) .media-group:first-child to display the arrows if no group is targeted ? Because at the end if you click outside the scroller you display the first group any way or the target is still active ? Because if I'm not working
Cool, Kevin , I have followed you channel for a while, it's really inspried me , BTW, i am kevin too. :) And have you thought about to do like netflix, where are several rows of the carousel, beside slide the content horizontally, which can also roll in vertical to choose different rows ?
I stuck at making it responsive for mobile displays. media-query -> grid-auto-flow: row; -> .media-scroller { overflow-y: hidden;... but how do i set the height of the media-scroller to show 5 images an a little part of the sixt?
Hey Kevin, great video as always! How can i make this responsive tho? Since "grid-auto-columns": is set to 100%, when i check on bigger screens, the image gets waay big. How can i maintain the proportion but without losing, for example, that "part" of the "next" image (showing that there's more content to the right)? Hope it makes sense, thanks again!!
hi how r u? i have notice that if i put too many sections and when i click on next of any section the page it goes up i think it becuse the Hashtag#groub so is there any fix?
Hey Kavin, displaying next and previous buttons is not that hard we just need to give relative position to the .media-group class and that's it... Thanks I learned a about grid form this video.♥
Hey Kevin, i recently started learning css and for my project i have to make a responsive design website and i have to use media queries to adjust for different screen sizes. I made the main page on a 1920x1080 display and i used the mozila dom to change the resolution then i tried to use: @media only screen and (max-width: 3840px) and (min-width: 2561px) {} -to adjust font size and spacing for 4k @media only screen and (max-width: 2560px) and (min-width: 2160px) {} - for 2k... And i was planning to do it for 7-8 most common resolution ranges but for some reason after adding a few more media queries my site got all bugged and on almost all resolutions content was too zoomed in and spaced improperly. Is this like a really dumb way to do it or am i missing something? Btw for all size specs i used rem if that makes a difference. I'm a beginner so any advice would be greatly appreciated
Hi Kevin, great video. How about the code below: .previous, .next { display: none; } .media-group:hover > :where(.previous, .next) { display: block; } Do you think this could be a much simpler solution in this case?
I don't object to the lesson (which is fantastic as always - thanks Kevin!), but I do object to all the video content services thinking that horizontal scrolling tiles with no keyboard or scrollwheel interaction is a good user experience for desktop users. Can anyone offer some clue as to why a vertically scrolled list wouldn't be vastly superior for large viewports?
I was today years old when I realised that Kevin says "Hi there my frontend friends" in the intro. I always wondered why he says "Hi there my friend and friends" in his videos.
Hej Kevin can you make a video about optimalize web page speed? How to load lazy CSS files, dont block resources another things that will improve Googles page speed insights?
I think you wanted :not(:has(:target)) instead of :has(:not(:target)) - doesn't have a targeted descendant instead of has a descendant that isn't targeted.
One way to fix the last issue at the end without the :has selector would be to do something like this (.mg is short for media group and .ni is short for navigation indicator) .ni{ opacity: 0.5} .ni:first-child{ opacity: 1} .mg:nth-child(2):target ~ .ni:nth-child(1), .mg:nth-child(3):target ~ .ni:nth-child(1), .mg:nth-child(4):target ~ .ni:nth-child(1){ opacity: 0.5 } .mg:nth-child(2):target ~ .ni:nth-child(2), .mg:nth-child(3):target ~ .ni:nth-child(3), .mg:nth-child(4):target ~ .ni:nth-child(4){ opacity: 1 } I know that it's a bit clumsy, but it avoids experimental features. For the next indicator from the first media group showing in the fourth, I'd probably just add a previous link to the first group that links to the fourth, and a next link on the fourth that links to the first media group. It would solve the issue as the first buttons are always on the bottom, and I think it also gives the user a better experience.
If you find my "horizontal media scroller" video, I do look at doing that, though I think you'd need to have a scrollbar preset. At least if you do it CSS only. With JS it'd be possible, I would think.
`:has` has been my most anticipated CSS feature ever since I heard about it - and technically before it as well. I recently encountered a scenario in which it would be extremely useful, but had to use JavaScript to fix a entirely style-related issue(bluh)
If you had only done this but using dynamic elements, that is, without knowing the number of elements you are going to show, you would have gone from junior to semi
.card-group:target :where(.next, .previous) { display: flex; } .card-group:first-child :where(:not(.previous)) { display: block; } This 2 line of code can resolve easily the problem of not having nav arrow on first child and last child...
Thank you for this great tutorial. Is this responsive though? I'm sorry I wasn't able to sit through the whole video, just in case you did touch on the responsiveness in the video.
When someone says to me again that CSS is easy, I will link them this video. Holy moly it became complicated towards the end there. I think I'd rather learn Algorithms from scratch 🤣 Just kidding, CSS is awesome.
That's it people, I think our king just got hired by Netflix and won't be making videos anymore 😂😂 I am VERY impressed, let's hope that selector gets mainstream quick 😱😍
It is actually possible to make it scroll infinitely. I did this for a school project. The way I did it was that I created a bunch of “dummy” images after the last real one and when you press the arrow on the last real one, it plays an animation that scrolls it and then instantly teleports it back to the start. It works really well and the only downside is when you click the button in quick succession, the animation doesn’t finish playing and it moves to the next image without scrolling.
Instead of .media-scroller:has(:target:not(:first-child)) { // turn nav off } Could you do .media-scroller:not(:has(:target)) > :first-child { // turn nav on } Starting with everything off and then turning them on when needed makes more sense than starting with everything on and turning them off when not needed.
Your moment of fixing the overflow was super helpful. I love watching these videos and seeing you make and fix your errors. Thanks for what you do!
Hey Kevin, instead of clicking each element that you want to batch change; if you highlight the first one and use "ctrl+d" it will select the next matched element automatically. I've noticed you click select in several videos and thought it might help.
I use ctrl-d a lot actually, no idea why I didn't use it in this one. It's a life saver (ctrl+shift+L is awesome as well, but I always forget about it. Select every matching instance at once)
I alias alt+D to select every instance. Easier to associate
ctrl+F2 selects every instance. Looks like it works the same ctrl+shft+L
For over a year now I've watched your videos... For what felt like forever I rarely understood what you were doing. But as time goes on it's like it's all started clicking. So many dots connecting thanks to you. I know you don't got love for us WordPress folks, but we got lots of it for you!
Hello! Thanks for sharing videos like these. I’ve been doing paid dev work, including web app work, since 2000. I love modern CSS and JavaScript, and watching you work through a problem using CSS in real time is joyful. Thank you so much for sharing these videos.
Also, I don’t know what your day job is (assuming it’s not RUclips), but the ability to describe your reasoning while working is top tier mentoring / peer coaching skills.
Thanks a lot for the kind words 🙂. I worked as a teacher for 5 years doing live demos pretty much every day, so that *really* helped me develop that skill of talking through what I'm doing, and also trying to anticipate questions so I wouldn't have to stop as often during a demo, lol.
When you read the complicated CSS it's like some sort of Riddle from children book! Great video!
my goodness, Kevin you are truly a legend, just in time when i really need for CSS course..
Kevin you sir are a CSS God! That selector was crazy! This was awesome stuff. Please make more such live problem solving stuff
I'm glad I found your channel early on in my Web Dev journey, you're obviously very talented, a true inspiration to aspire towards
This is really good and I actually learned few new things from this project, my deepest wish is to have someone make videos centered around JavaScript alone just like KP make videos about CSS 🤦
To be clear, the reason your initial attempt at :has(:not(:target)) didn't work is because you were misinterpreting it. You were reading it as "has no target", but what it really meant is "has any element which is not targeted". So it would apply the selector as long as there is at least one non-targeted child, which there always is, hence why it stayed on all the time.
yeah, it's going to take me awhile to get used to using :has(). After years of reading selectors in a very specific way, it's a bit of a change up that I confuse myself with.
I love these videos where you recreate catchy components/animation from famous websites
The guy is so good he won't copy other videos. GOOD JOB, Like your tutorials!
I love this kind of videos where we see your thought process, really great!
Hey Kevin, huge fan. Just letting you know this is EXACTLY something I've been looking for. Definately saving this to use for a side-scroll navigation bar I'm trying to build right now (modeled after Netflix's Tudum page). I'd go for buttons over scrolling any day.
Thanks!
Thank you so much!
Dude! This was cool. It encourages me to know that you have to figure things out in a similar way that I do. Great video!
Genial su trabajo Mr. Powell.! Muy agradecido de mi parte.
A la animación de mencionada en 48:36 bastaría agregar un "transition".
This is really impressive! I think CSS is grossly underestimated when it comes to what it can do. I only think with all those mega selectors, you start losing readability really quickly, to a point where the next morning you start asking yourself what you did there late last night 😉 So one question for me would be: When comes the point where you will go "heck, let's just use some few lines of js and be done with it"? Same thing for switching over to Sass or PostCSS etc. To my mind, this would also make an interesting video. Thanks very much for all your help on making at least my small corner of the internet a little bit more awesome!
Learning css new tricks with real implementation is great , thanks KP sir... Do more !!!!
Oh, man. This was intense. I felt your happiness when that really worked out! Nice job. This could save countless kbs of non-necessary javascript code.
What a great job! Kevin, you made my day!
Love your videos man. I don't know about it's compatibility but I have found a cool trick while fiddling around with my background.
In 23:14 you added rgb(0 0 0 / 0.2) to make a black background with 20% opacity. But there's a much easier way to achieve the same thing.
Just using hex code #000 (only works with 3 digits though, I don't know how but you can convert your 6 digit hex codes to 3 digits if you don't care about the color being a precise hex code) with 2 (or the 0.x opacity you want) in the end and it does the same job.
for example :
#202020 with 4 percent opacity is #2224
#000000 with 2 percent opacity is #0002
it's pretty cool and makes creating transparent backgrounds so easy.
I'm not even a web developer but I found this entertaining lol. Great vid.
That parent selector in the end was brutal. Extremely valuable. I didn't know you could comibine :target with :not like that.
Very nice and entertaining video Kevin!
Was very cool to see that one can solve such functions without javascript and sass.
Thanks
I'm blown away by your videos 🤯
Lol how funny, I'm literally trying to level up as a javascript developer working with api's and choose to build a Netflix clone and I'm planning on building the carousel movie page once I'm done with the sign-in page which. However, I love your series on building things in css, so this well give me some good ideas on a different approach on building out my design for the movies, so thank you kevin for the awesome content. 😁🙌🏽
Great video Kevin! 🤩
Hi Kev. I've been teaching myself coding and I have found it beneficial for me to try exploring the limits of HTML CSS and JavaScript before I even attempt the other add-on stuff.
the auto generated subtitles say “friend and friends” and I like it this way
Really you are the goat of css
39:16 “I am so confused by these numbers”
Honestly Kevin. Aren’t we all 😂
12:39 block elements like grid default to 100%, right?
If we allow a single line of js on page load, we could target the first group with:
location.hash = "group-1";
media-scroller:has(:not(:target)) I think means that it contains at least one item that is not targeted. Which will always be the case with multiple children.
You can remove the ":has" from the scroll bar using pseudoelements, by having .media-group:target:nth-child(4)::after with the same position as the next button and a higher z-index.
You can remove the ":has" from the navigation indicators by using ".media-group:target ~" instead of ".media-scroller:has(.media-group:target)", which is basically the same thing you did for all bars, just not having the nth-child.
No has at all (works on firefox for me)
Really nice video, all the css stuff is great, but my favorite parte has to be when you said specificity right 😁
Mate, that was impressive!
I respect the fact that you have no problem in giving YT compatition as an example.
Also those Netflix chevrons, from a UX pespective, aren't the best solution, so I wouldn't copy'em 121.
...but, on that note, good job there.
Well done Kevin!
For the indicators without the has-selector.
I think you could use the svg inside a label pointing to a hidden radio button before the corresponding indicator and target it like that. Default the first radio to checked.
(didnt try it btw, so I could be wrong in my logic)
I think you could do the navigation indicators without the :has by styling the first indicator to be opacity: 1 by default and reducing the opacity when any media-group past the first is targeted, e.g.
.navigation-indicators > *:nth-child(1) { opacity: 1; }
.media-group:target:not(:first-child) ~ .navigation-indicators > *:nth-child(1) { opacity: 0.5; }
You could do the same trick for the .next button on the first page but I think you'd have to move the first .media-group to be last and use something like grid-column: 1; to force it to layout in the first spot so that the sibling selector would be able to find the first page next button after the targeted page. Alternately you could move the previous / next buttons after of the .media-groups the same way the navigation indicators are.
Quick question:
When positioning the next and previous buttons why don’t you make the media-group position:relative?
That should then only appear on the selected group?
Doing this would indeed result in no overlapping buttons as they would stay in their own group, but this would reintroduce the issue of the buttons scrolling with the group as well.
Once you would click a next/previous button you would be able to see the buttons scroll in and out with the other media-group content.
@@mjcarsjens i guess you are right it would not mimic the style Netflix has. But it would make the code a whole lot easier.
Great tutorial. Can you implement the hover functionality? How the modal pop-up to show more information about the film please.
Yeah, thinking about doing that for a future video 😁
@@KevinPowell Great. Thanks in advanced king you're the best !! ✅
@@KevinPowell I would be really interested in seeing this as well. I've played around with something similar and had a very tough time scaling up the my version of the .media-element and getting that to behave nicely with the scrollable area. I think it would also be important to add a few more rows of .media-container elements to see how the scaled up .media-elements impact neighboring rows. Thanks for consistently great content.
Truly the KIND OF CSS
The volume is up today, I can hear you over the ambient noise where I am
This was really interesting. :has seems crazy, I wonder what the performance is going to be like though; Firefox apparently knocked back the suggestion 14 years ago saying that the implementation would be tricky & go against how every other selector works. Incidentally, if you had another carousel in here, would the solution break if you started :targeting things in a second carousel after panning partway through the first?
Yeah not sure if it would work with more than one.
As for the has(), it was long thought impossible because it could easily make recursive issues, but thanks to some of the advancements being made in CSS and some clever thinking, they found ways around that, luckily for us!
Could a display:none be set on all arrows, and then a display flex be set on .media-group:hover:where(.prev, .next)? Instead of targeting the media-container as the hover trigger. That way only the links related to that media group would be in the DOM and not all. A similar solution could also be used for the indicator (although each media group would need it's own indicator with the corresponding box set to opacity 1). You would have to use positive and negative margins so have the next group peaking through so you could still technically be hovering on the correct group? Removes the need for :has & even :target (I think). More CSS though
Those selectors got pretty crazy
Great video Kevin! And I think these videos showing your thought process are very helpful. I am still baffled by this selector
.media-scroller:has(:target:not(:first-child)) .media-group:first-of-type .next { display: none }.
If there ever was a CSS selector hall of fame, this should go there.
You are a Monster and Inspiration...
Hey Kevin thank you so much for your videos they help me a lot with my web projects. I had a question which I could find an answer for, should I use grid in the body tag to organize the general layout of the page or only for particular components?, thank you so much in advance, you are the best! 😀
Hi Kevin, for the last issue,
Why didn't you use ".media-scroller:not(:focus-within) .media-group:first-child to display the arrows if no group is targeted ?
Because at the end if you click outside the scroller you display the first group any way or the target is still active ?
Because if I'm not working
Cool, Kevin , I have followed you channel for a while, it's really inspried me , BTW, i am kevin too. :)
And have you thought about to do like netflix, where are several rows of the carousel, beside slide the content horizontally, which can also roll in vertical to choose different rows ?
I stuck at making it responsive for mobile displays. media-query -> grid-auto-flow: row; -> .media-scroller { overflow-y: hidden;... but how do i set the height of the media-scroller to show 5 images an a little part of the sixt?
Gracias Mr. Powell
Para la última parte también me resultó:
.media-scroller:has(:not(*>:target)) .navigation-indicators>*:nth-child(1) {
opacity: 1;
transition: opacity 1000ms ease-in-out;
}
.media-group:nth-child(n):target~.navigation-indicators>*:nth-child(1) {
opacity: .5;
transition: opacity 1000ms ease-in-out;
}
.media-group:nth-child(1):target~.navigation-indicators>*:nth-child(1) {
opacity: 1;
transition: opacity 1000ms ease-in-out;
}
... resto del código...
Hey Kevin, great video as always! How can i make this responsive tho? Since "grid-auto-columns": is set to 100%, when i check on bigger screens, the image gets waay big. How can i maintain the proportion but without losing, for example, that "part" of the "next" image (showing that there's more content to the right)? Hope it makes sense, thanks again!!
hi how r u? i have notice that if i put too many sections and when i click on next of any section the page it goes up i think it becuse the Hashtag#groub so is there any fix?
ah.. my needed dose of kevin
I think you are more of an experienced and talented person to have pulled this off.
Love this video! How would you make this in different mobile views and only show so many slides per view?
Hello. Thank you for this practical exercise. I see that there are many notions covered; this is very interesting. Philippe P.
finally, you can clearly hear 'front-end' friends, not friend and friends.)))
Hey Kavin, displaying next and previous buttons is not that hard we just need to give relative position to the .media-group class and that's it...
Thanks I learned a about grid form this video.♥
Hey Kevin, i recently started learning css and for my project i have to make a responsive design website and i have to use media queries to adjust for different screen sizes. I made the main page on a 1920x1080 display and i used the mozila dom to change the resolution then i tried to use:
@media only screen and (max-width: 3840px) and (min-width: 2561px) {} -to adjust font size and spacing for 4k
@media only screen and (max-width: 2560px) and (min-width: 2160px) {} - for 2k...
And i was planning to do it for 7-8 most common resolution ranges but for some reason after adding a few more media queries my site got all bugged and on almost all resolutions content was too zoomed in and spaced improperly. Is this like a really dumb way to do it or am i missing something? Btw for all size specs i used rem if that makes a difference. I'm a beginner so any advice would be greatly appreciated
Hey Kevin, can u make video on how to give padding on absolute element
You should be able to do it without any issues?
@kevin Please do a video on fixing CSS related CWV issues.
Working on it, but it's a big topic! Making sure I do it right so it's taking awhile to put together.
@@KevinPowell Thank you. Appreciate so much all that you do.
Hi Kevin, great video.
How about the code below:
.previous, .next {
display: none;
}
.media-group:hover > :where(.previous, .next) {
display: block;
}
Do you think this could be a much simpler solution in this case?
yeah, probably 😅
I don't object to the lesson (which is fantastic as always - thanks Kevin!), but I do object to all the video content services thinking that horizontal scrolling tiles with no keyboard or scrollwheel interaction is a good user experience for desktop users. Can anyone offer some clue as to why a vertically scrolled list wouldn't be vastly superior for large viewports?
I was today years old when I realised that Kevin says "Hi there my frontend friends" in the intro. I always wondered why he says "Hi there my friend and friends" in his videos.
Too funny I thought the exact same thing!
Bro who needs Netflix when there is channels like this
To watch movies
Hej Kevin can you make a video about optimalize web page speed? How to load lazy CSS files, dont block resources another things that will improve Googles page speed insights?
HELLO
EXCUSE ME ,
Is there a way to auto scroll-snap via css ?
THANKS , ❤ U From IRAN
I think you wanted :not(:has(:target)) instead of :has(:not(:target)) - doesn't have a targeted descendant instead of has a descendant that isn't targeted.
where this icon svg use #next comes from?
One way to fix the last issue at the end without the :has selector would be to do something like this
(.mg is short for media group and .ni is short for navigation indicator)
.ni{ opacity: 0.5}
.ni:first-child{ opacity: 1}
.mg:nth-child(2):target ~ .ni:nth-child(1),
.mg:nth-child(3):target ~ .ni:nth-child(1),
.mg:nth-child(4):target ~ .ni:nth-child(1){ opacity: 0.5 }
.mg:nth-child(2):target ~ .ni:nth-child(2),
.mg:nth-child(3):target ~ .ni:nth-child(3),
.mg:nth-child(4):target ~ .ni:nth-child(4){ opacity: 1 }
I know that it's a bit clumsy, but it avoids experimental features. For the next indicator from the first media group showing in the fourth, I'd probably just add a previous link to the first group that links to the fourth, and a next link on the fourth that links to the first media group. It would solve the issue as the first buttons are always on the bottom, and I think it also gives the user a better experience.
Target, target, target… That’s make my day! #stilllearningfromthekevinmaster
How would this be done between elements instead of groups? I've been trying to figure it out and it's friggen killing me
If you find my "horizontal media scroller" video, I do look at doing that, though I think you'd need to have a scrollbar preset. At least if you do it CSS only. With JS it'd be possible, I would think.
Great Video, I wished you where able to find a solution around not needing to use :has but excellent work anyway :)
How would you make this responsive though?
Next video in Web Dev Simplified:
Can I create Netflix's video carousel with ONLY HTML? 😆😆
`:has` has been my most anticipated CSS feature ever since I heard about it - and technically before it as well. I recently encountered a scenario in which it would be extremely useful, but had to use JavaScript to fix a entirely style-related issue(bluh)
not bad to know how to do a css only scroller, but this isn't responsive... 🤔
Really missed sitting down to learn css with you kevin
this code is not working properly in Safari?
Very good, thank you
can you please share the svg code.
Does not work on Safari 15.4.
That was impressive
If you had only done this but using dynamic elements, that is, without knowing the number of elements you are going to show, you would have gone from junior to semi
how can I make 3 carousels in 1 page?
.card-group:target :where(.next, .previous) {
display: flex;
}
.card-group:first-child :where(:not(.previous)) {
display: block;
}
This 2 line of code can resolve easily the problem of not having nav arrow on first child and last child...
sorry its now... it was working on my computer so many time... but suddenly stoped working....
Thank you for this great tutorial. Is this responsive though? I'm sorry I wasn't able to sit through the whole video, just in case you did touch on the responsiveness in the video.
When someone says to me again that CSS is easy, I will link them this video. Holy moly it became complicated towards the end there. I think I'd rather learn Algorithms from scratch 🤣
Just kidding, CSS is awesome.
You should use "outline" instead of border
Impressive
That's it people, I think our king just got hired by Netflix and won't be making videos anymore 😂😂
I am VERY impressed, let's hope that selector gets mainstream quick 😱😍
It is actually possible to make it scroll infinitely. I did this for a school project. The way I did it was that I created a bunch of “dummy” images after the last real one and when you press the arrow on the last real one, it plays an animation that scrolls it and then instantly teleports it back to the start. It works really well and the only downside is when you click the button in quick succession, the animation doesn’t finish playing and it moves to the next image without scrolling.
Oh yeah.. Right now my school assignment is about html/css carousel.
awesome
Instead of .media-scroller:has(:target:not(:first-child)) { // turn nav off }
Could you do .media-scroller:not(:has(:target)) > :first-child { // turn nav on }
Starting with everything off and then turning them on when needed makes more sense than starting with everything on and turning them off when not needed.
Great video though. Definitely learned some things.