Kevin, you have been consistently teaching me new things ever since I've discovered your page. I've now almost ten years of experience in full-stack software development, and I always leave your videos learning something new. Thank you for your content - you are a pillar of the KZbin/CSS community.
@avi128 ай бұрын
Holy cow, did you read my mind? I had just implemented today a horizontal scroll component and this video came just in time
@whistlerbrad8 ай бұрын
Thanks for posting this video Kevin. Always helpful to review the logic and issues we might face with CSS
@DennisTheZZZ8 ай бұрын
So, basically: min-height/min-width = how high/wide *should* an element at least be? max-height/max-width = how high/wide *can* an element be? height/width = how high/wide *is* an element?
@Ebishenmansfield8 ай бұрын
True
@mhewson8 ай бұрын
This was next on my list! now to dynamically add user controls based on overflow - thanks!
@QwDragon8 ай бұрын
I can do it if you have a free pixel on each side :)
@NSKolazar8 ай бұрын
To be real, this is good to learn as i didn't even know that sort of thing can be done (i'm still very much a newbie in all this), but what i love in your videos on these kinds of topics is that i find new tricks. What i mean is i never knew i could just type for example "p*10>lorem" to make 10 paragraph tags with lorem text in it. So now i can do assignments even quicker.
@iamtharunraj8 ай бұрын
Hi there, i strongly recommend you to learn the Emmet code completion. It will make your workflow much faster and easier!
@NSKolazar8 ай бұрын
@@iamtharunraj Thank you for the recommendation. I guess i never realized it before. I maybe have used abbreviations so far like typing the tag name but never realized i could do more with it
@EricFressange8 ай бұрын
nice trick colums + overflow-x ^^
@MrJettann8 ай бұрын
Kevin, let's make some interesting horizontal layout to get inspiration and the idea of how to build horizontal scrolling website
@raptorvenom79838 ай бұрын
bump
@CharlieThorstenson8 ай бұрын
I really enjoy this “friendly” approach on videos. Great as always Kevin! Does anyone have tips on similar channels for JavaScript? Friendly and not those over-hyped guys…
@gudelvechio8 ай бұрын
Thank you Kevin!! Very good. Please, how would you hide this horizontal scrollbar, but continue scrolling, like a Netflix or Disney+ row of movies? Is it possible in a simple way that works on all modern browsers? I got this result by absolute positioning the inner div and moving a little down this entire inner div. With outer div positioned as relative and overflow set to hidden, the horizontal scrollbar gets hidden down the outer div. To compensate the position, I used the negative margin-top to outer. Works well, but looks more an workaround than a simple solution!!! Thank you a lot!
@intsfanatic8 ай бұрын
I dont understand why the outer and inner. Just apply height 100%, overflow-y hidden and overflow-x auto to the body itself. No need for vh units either.
@toddcamnitz61648 ай бұрын
May as well ask a true css expert: can you think of a *css-only* way to style conditionally by the the user chooses? I’ve landed on “this is not possible without js.” For the sake of argument, let’s say the css-only constraint is a hard constraint imposed by the tech stack (actually true.)
@MrCrackerplays8 ай бұрын
you should be able check for option:checked and put that in :has() to style the e.g. for the first example on the mozilla documentation on select#pet-select:has(option[value="dog"]:checked) { background: red; }
@toddcamnitz61648 ай бұрын
@@MrCrackerplays this is so excellent. totally the answer. my deepest thanks. This question is all over SO through the years and everyone says there's no option. astounding. chaining :has :checked is new to me and super useful to know. It's worth pointing out that (at least in my codepen) this does format all the selections in the dropdown (but only in the dropdown) the same as whatever you've set here, but that styling does go away upon selecting something else (e.g., in your example, if you were to select dog, then click the dropdown again, the dropdown options will all display with the "dog" styling, but this goes away upon selecting something else. In case you're interested, the use case is where the first option is a placeholder text, and the remaining options are things the user is intended to click. Still, this is by far the closest I've seen anyone come. Well done.
@MrCrackerplays8 ай бұрын
@@toddcamnitz6164 it's of course also possible to instead style the option rather than the select itself with select#pet-select option[value="dog"]:checked or using css variables you define on the select, use on the option, and can re-define on the select based on a select:has() but it entirely depends on what exactly you want to style about the select and the options also, the displaying of the background color differs a lot between chrome and firefox, if that's something you care about
@toddcamnitz61648 ай бұрын
@@MrCrackerplays interesting ideas - I'll play around with this and see what I get. Definitely seeing the inconsistent results. I love that MDN leads with " is notoriously hard to style..." My thanks again for your time and ideas.
@Royal-19928 ай бұрын
Hi Kevin, could you please tell me can we get all spacing details at once in a web page? Is it margins or paddings..
@parenteseswebdev8 ай бұрын
Be handy to know how discord works as I havn't a clue. Can you do a video as I can't understand it.
@probaye8 ай бұрын
another video, another self-imposed obstacle gone!
@aum60328 ай бұрын
Off to Google about "svh" brb
@NotKyleChicagoКүн бұрын
Svh = small visible height? There's also dvh, which is similar.