Here's a contribution to this idea from a newbie. I once wrote a load of js to manage clicks on an animation of a timer wheel which would trigger a new image from the server. I got rid of it all and instead made the click end the animation and then attach a listener to an animationiteration to trigger the new image download. No js timing needed!
Kevin, kudos…another super useful video. I always look to CSS as the easiest, most bulletproof way to just get things done. For anyone who has been doing this longer than 5 years it’s great to see CSS easily solve problems that used to take hours of javascript faffing to do.
Pseudo selectors can also be combined: p:only-of-type:not(:only-child) for the single paragraph with the image, or the other way around: img:first-child + p:only-of-type to ignore the one with multiple paragraphs, again use :not() to reverse the logic.
I like the :target selector and I think a nice way to implement it would be to have an animation tied to it. Example would be to highlight in a way but fade it out after 1s.
Just learned about _:empty_ a month ago when a markup script generated empty (p)aragraphs for row-breaks. Just thought "wonder if CSS has a solution for this". Will use _:target_ in the future. Learned something new there.
Hi Kevin, started watching your videos recently and there is lots of intresting stuff here. One request, could you cover some 'practical' topics in depth at some point? Perhaps your best practices for starting a new Bootstrap site with the current version? (seen the old series you did.) Or talk about an overview of how your organise your CSS and why? What is the best way to arrange CSS to make best use of cascading? In other words, taking the things you have shown from your more ' flashy' videos and showing how to apply the knowledge to a typical real world project. Thanks.
In the target selector add an animation that just changes the brightness filter for a bit to highlight the target element instead of a red outline which I use all the time,it's easy to write, easy to use and very effective.
Hi Kevin, nice video. The features you mention are useful. I do have a question, -not directly related to this content- I hope you can either suggest a solution, or point to a video you have previously made. That is, if I want to 'highlight' a navigation item / tab, that is currently being displayed e.g. this page, how can I do this using only CSS? Thanks
You need a class that changes the styling, and apply to to the link for that page. There is nothing in CSS that can know what page is actually the active one
I've watched a few of your videos before and I was like, yeah okay you have some good tips. But you sir, have earned yourself a sub and a like after these nifty little tricks. Very well done!
Hi mate, thanks for the tutorial! I was wondering if it is possible to remove the styles for the " :target " element for like after a few seconds or even based on an event. Thanks!
I've been in need of the :target pseudo class for a frontend mentor project for a whole month and something 😂 I thought I only have to use JavaScript 🤣
Nice video Kevin! I am wondering is it possible for built in css to handle click outside alerter for multiple mapped elements? Let’s say when we clicked outside of each element, the corresponding clicked element dissapear. I currently implement it with Javascript but it would be interesting if css can handle this too :)
I'm working with CSS since early 2000 and I noticed that I tend not to know about new features of it. I'm just using the same thing as part of a habit, knowing that it works... You should always learn continuously! Don't make oldfags mistakes! :D
No, it's just a visual separator, picked it up from using CUBE CSS. It's technically a class that's just not doing anything at all. Might even be an invalid one, but it doesn't cause any problems.
Very helpful I'll use. but Is there any way to set different margin or other attributes for p tag (paragraph) if 2 p is continuous like demo para 1 demo para 2
How the youtube and wikipedia has elements when they can't fit in to screen the position themselves top -215px and when there's enough space at the bottom the have top 200px like youtube has on the edit comment is through the use of intersection observer api and am i right api means functions, objects of a library and urls on web
My guess would be intersection observers, yes. In this case, the API is a bit different because it's one the browser uses, not an API you'd use to pull stuff from a server or whatever.
Suddenly comments have popped up about your welcoming introduction "front end friends". Up until your previous upload I always thought you were saying "friend and friends" as in to welcome the viewer personally and then everybody else 😂
Yes I thought he was saying "friend and friends" when I first started watching his videos; just thought it was part of him being super nice. I hear "front-end friends" clearly now though.
So at like 8:18 when you're explaining the :not(:only-of-type), I see why this is really useful, but wouldn't just giving the element a specific class be better? I know that it is generally best to stay away from complex selectors, so I was just wondering if you would normally prefer a class over doing this.
I wonder if I should actually use :empty... Sounds like it would leave a bunch of hidden HTML in the DOM. I should probably just continue not including it, whether on the server or on the client.
About :target, wouldn't it mess with keyboard navigation? I used that property in the past for visually show the keyboard navigation. But other than that, I don't know much about it. I wish I knew about :empty in the past, I have spent so many hours hiding error messages and flash messages.
It shouldn't have any impact on keyboard navigation? It's just a visual clue for what's been targetted... you just wouldn't want to use the same style for :outline as you would for :target because then that would get annoying
I like those profile pictures of Jane and John in the first segment on :empty. How many times did you have to refresh the page to get such good results? 😉
Kevin I'm currently learning Web design but after learning css I've become obssesed with it. You think it's better to become very good at css before jumping to Javascript or i should start now ?
I guess it depends on how far along you are, but once you feel like you're getting comfortable with CSS, even if you're not "very good" yet, I'd probably start sprinkling in some JS
About the empty paragraphs: There is actually a selector, that's like :empty, but it includes whitespaces. It's called blank. "p:blank" would select all paragraphs containing nothing at all, HTML comments or whitespaces+new lines (doesnt matter if its one line, or 20 new lines filled with whitespaces).
Yeah, I go by MDN. I like to stick to features where the browser compatibility matrix shows an all-green row. In the case of “:blank”, it’s still all red ... 😞
Hi Kevin. Could you do a video on why it’s still important to know pure CSS when we have Bootstrap and WordPress? By the way, I love CSS and have watched practically all of your videos. I’m currently a national qualifier in Website Design and Development for a prestigious event called “WorldSkills”, here in the UK and your videos have been essential for my preparation for it. Thank you! Kind regards, George
Well, unless you want your site to look like every other Bootstrap site, understanding CSS makes it a lot easier to work with and customize Bootstrap. I'd also say knowing CSS just makes you use Boostrap much better as well... plus while Bootstrap is popular, it's not *that* popular, and probably fading within the job market as well for other solutions. Knowing the base language makes it a lot easier to pivot and adapt as the landscape changes :) Also, good luck with the WorldSkills competition! I was a mentor a couple of times for those when I was still working at a school :)
@@KevinPowell Wow! Thanks for so quickly responding! Ah really good answer! Thank you! Totally agree! And thanks so much! That means so much coming from the King of CSS!
Greetings, awesome content. Would you happen to know of a good web form validation script that increases accessibility by enabling screen readers to announce error messages?
Hey Kevin! Love your content! but I'm really a dumb on responsive side :D May you make a clone project that focus on responsive side, such as cards, nav... thank you!
Hi, Kevin! I have a question regarding custom properties. Consider you have design that has more than 10 neutral colors. And, you are assigning them in custom properties in such: :root { --clr-neutral-100: #FFF; --clr-neutral-400: #444; ..... --clr-neutral-900: #222; } In custom properties, you did assign from 100 to 900, which can hold only 9 values. What and how do you deal with the rest of the neutral colors? Would you assign them, like ---clr-neutral-100_1 or any other method? Thanks in advance.
From a design perspective if you've got more than 9 neutral colors, I think you're using too many colors for sure. Most color schemes only have a handful of neutral colors. You really don't need a different shade for every single component in your page. I tend to use a primary & secondary color with maybe 3 or 4 shades each and a light & dark neutral color with 4 or 5 shades. If you want to build a brand, you will likely have 2 or 3 colors that you actually use with a handful of neutral tones to complement / contrast your main colors. For most people a scale of 9 shades is more than enough for a single 'color'. You might have a light neutral and dark neutral which also have a 9 shade range but rarely will you need such fine distinctions between shades unless you're creating a gradient which you'd interpolate anyway.
Yeah, more than 9 shades of a color is a lot... BUT if you need to, I just keep going, lol. 900, 1000, 1100, etc. Though normally what happens is a new color gets added that's between two existing colors, which is why I like numbering in the 100s. If you have clr-neutral-1 and clr-neutral-2, it's annoying to get something in the middle... with 100s, you can have clr-100, clr-150, clr-200 etc.
Wow. I'd never seen :only-child and :only-of-type before. I've "hacked" them before by doing :first-child:last-child, but :only-child is much easier to read and understand.
