5 super useful CSS properties that don't get enough attention

[@richardhindle1663]

I have run a web design company for 10 years and I'm still learning new stuff from Kevin. I learned something useful here, have a beer on me.

[@KevinPowell]

Thanks so much!

[@KevinPowell]

Thanks so much!

[@harris.sensorsoffline6419]

Is your Web Design company doing good. Like let me be honest, I'm not getting new Clients. It would be really helpful if you could give an expert advice.

[@michaelmannucci8585]

Best thing you can do for new clients hands down is go to networking events. Check out your local chamber of commerce for events. Bring business cards but more importantly take them from others, be normal not salesy, be interested not interesting, and follow up with people who show an inkling of needing your services. And don’t try to sell “good design”, people don’t care about that. Sell them business results through a new website: better sales, more leads, better process, etc.

[@AvanaVana]

I love channels like this because, as a working designer and dev with 20 years of experience, you’d think I would know just about everything there is to know about CSS and various web standards, but there are always new things coming out, or little details I either wasn’t aware of or have forgotten, and I just don’t have the time to keep track of everything. This channel especially does a good job of summarizing and explicating the useful bits of new stuff, making it useful and actionable for me.

[@ZaidMarrie]

Today I actually built a page where the sections are numbered. I just hard coded the numbers for each section, so this video was just perfect timing! Thanks Kevin for all the awesome tricks you show us!!!

[@mrtcrl]

I'm concerned if there is a problem with putting numbers via CSS considering A11Y and web semantics. AFAIK, CSS content should only be used for "visual" additions, that don't add any critical content to the doc. But I also know that screen readers are reading CSS content too (that was a mistake though, in my opinion) So I'm a bit confused.

[@ZaidMarrie]

@@mrtcrl I am using it for decorative purposes only. However, I am not so sure about the accessibility part of things, if I wanted it to be accessible I would have approached it differently, most probably adding it in the markup.

[@CottidaeSEA]

@@mrtcrl In the case of screen readers, they all read CSS a bit differently which is basically the old IE situation again. I would frankly ignore the screen reader accessibility in this case unless the numbering is absolutely vital for the reader. It's fine to leave out some information.

[@DavidRTribble]

8:00 Suggestion: When declaring variable names (e.g. counter names) in tutorials, use names like _my-section-counter,_ which make it clear that they're not built-in CSS keywords.

[@YawnerSt]

i mean, he's clearly stating it's up to you and that you can give it any name you want..

[@b_delta9725]

@@YawnerSt he refers to other devs who might look at the variable name and think it's a built-in keyword. so having a naming convention for these cases is useful.

[@pavelhoral]

Usually videos like these reveal one or two things I did not know already, but in this one everything was completely new to me. Awesome content!

[@lukas.webdev]

I just posted a video about a similar topic... I would love to her your score on that 😉

[@daveturnbull7221]

My old braincell is threatening to go into meltdown. For me CSS was always just for setting simple colours, fonts etc but since getting my eyes opened by you it feels like there is a whole mountain of stuff that I need to be aware of. Much though I really look forward to and enjoy your videos I do sometimes find myself wishing for the 'good old days' 🤣

[@axMf3qTI]

Wait? You mean to tell me we stopped using the font tag and color attributes in HTML? What's next, no longer positioning with a frameset?

[@k16e]

The good old days were a pain though... the more CSS you know, the better-looking your apps, the much sweeter you feel.

[@MatichekYoutube]

ya, good old days fixing for IE6 and IE7. NO thanks.

[@Collden]

My “favorite” memory as junior FE-dev: Me: Ahh finally done with implementing the design.. took a bit longer than I expected but now it looks good! Senior dev: Does it look good in IE6 in Arabic (rtl)? Me: I’ll be right back!

[@kenwood7195]

@@axMf3qTIWe now positions things with html tables.

[@alexcubed4270]

13:33 it's actually dependent on the order in the filter property, if you put the drop shadow before the invert, it'll also invert the drop shadow

[@lawrencedoliveiro9104]

5:43 And welcome to the fun that is the various settings of the “position” attribute. Here, “absolute” does not mean what you think (I would think it meant “relative to the entire page”); it actually means “relative to its most recent positioned ancestor” -- that is, “ancestor with a non-default position attribute”. The closest to the natural meaning of “absolute” would be “fixed”, but even that can be relative to an ancestor in some situations.

[@Palisis]

That invert filter use case is excellent. I've never had a use for that filter, until now.

[@mortocks]

I literally have the z-indexing problem on a site I'm working on and just stumbled across this vid. Nice!!!

[@MortyCJ]

I recently learnt about ''isloate'' and used for a full-bleed layout. Very helpful!

[@chinmayghule8272]

01. Please do more videos on container queries. You do have a few videos regarding that topic but a video with a few more examples would be helpful since container queries are still a new thing. 02. If possible make a video explaining how to bundle css, sass, postcss, etc. files when using a bundler. I'm sure a lot of beginners have trouble or are not familiar with bundling, and the extent to which the output file is minified. 03. Beginners (including me) don't know design things like 'accordion' and stuff, so it would be a nice topic for a video introducing them. You can show how to implement them using plain CSS from scratch. 04. Introduce to beginners stuff like CSS Props, CSS libraries, etc. Explain in short how they work. When you absolutely know nothing about these topics, it can feel overwhelming when you hear about them, since it makes you feel that there's so much you still don't know about, when in reality it (CSS libraries, for example) aren't such big of a deal.

[@k16e]

Videos like this one are gems, saying, look, there's more CSS can do for you than you already know. So, take a closer look. So, keep 'em coming, Kelvin! And, thanks 💪

[@angrybadger6761]

I was trying to find out why my previously working -webkit-line-clamp: 3; was not working .... and found your channel. Subscribed my friend. I can always rewrite the blog skitt to the required length. This is well dandy and never mind the counters - here's the monochrome before and after images in colour!

[@LosfrogerX]

Isolation isolate is so helpful! I can't believe I hadn't heard about it before, thanks!

[@nr4052]

I don’t even need to write CSS anymore, but I still love it and your videos are relaxing!

[@TsoiIzAlive]

Switched to backend?

[@ontheruntonowhere]

@@TsoiIzAlive Laid off

[@Abstractor21]

Oh god I'd love to work on backend. Css is so boring and messy

[@newguy69]

Just curious, how does backend help you ditch css? I thought backend is like PHP or something, just the content stuff. Don't you need to format it still afterwards?

[@EricFressange]

Nice video as always. For inset you haven't talked about inset-inline and inset-block. About that, I've start to use inline/block and start/end for padding, margin, border and inset. It may look longer to write but I find it much more useful with the habit.

[@StarOnCheek]

6:03 not really, inset, as you say, is a logical replacement for left, right, top and bottom. The fact that it has a shorthand is just a bonus. You can still declare every value independently using inset-inline-start, inset-inline-end, inset-block-start and inset-block end. 6:16 not really, you are actually setting inset-inline-start, inset-inline-end, inset-block-start and inset-block end which are not the same as left right top and bottom. 6:20 it didn't really change in your case but it would actually look different if you are in a different writing mode which some languages use by default

[@KevinPowell]

The inset shorthand, despite being part of the logical property spec, is awkwardly a shorthand for tip, right, bottom, left, and not the logical equivalents... And that's how it's described in the spec. Why, I donno, but that's what it is. There has been talking adding a keyword value to make the values logical, but it's just been murmurs in the background. Something they got wrong as far as I'm concerned, but it is what it is. The inset-block and inset-inline are, as their name implies actually shorthands for their logical longhands...

[@StarOnCheek]

@@KevinPowell bruh no way, you are right! Wtf is css doing??? Why would they name the logical inset the same as the shorthand for physical properties? This is why you need to have a whole channel to help people fall in love with css because no way it's going to happen naturally

[@Trazynn]

I'm seeing a trend of backgrounds with patterns infinitely moving past. Could you do something on that? Works beautiful with glassomorphic objects.

[@JeffHanke]

Thanks for pointing out "inset". I don't know how I missed that one.

[@hamergil]

Short video. so much helpful! thanks Kevin!

[@Kim-by5uy]

Wow! I can't tell you how much this isolation property will come in handy for my current and future projects

[@gaston1397]

The isolation property is amazing! I didn't know it existed but it solved an issue I was having in my project. Thank you!

[@wolfgangbackes7123]

Thank you for the very interesting tips. Your videos have always helped me a lot. I'm not sure if it's worth mentioning, but there is a closely related problem - namely structured numbering of nested elements - I had struggled with quite a long time before finding the very simple solution: the counters() function which dynamically collects all counter values of outer nesting levels, no matter how deeply things are nested. For example: ol > li::marker { content: counter(list-item) ". "; } ol > li > ol > li::marker { content: counters(list-item, ".") " "; } The 1st rule applies to the outmost level. The 2nd (more specific) rule applies to all inner list items. Much simpler than my ugly former solutions.

[@timseguine2]

I've been in scenarios where I wanted to create a new stacking context and was banging my head against the wall trying to get it. I am glad there actually is a way to say "give me one"

[@CyberTechBits]

I follow your channel religiously. IDK how I missed this one. The counter function is fantastic and I have just a use case for that!

[@dinael]

Why don't use o tag in HTML file for isolate example?

[@KevinPowell]

Good question, I probably should have used a blockquote there!

[@danvilela]

You can see this guy really loves this stuff and boy am I learning! Never knew CSS could actually be fun :D thanks for the videos, really awesome content!

[@lukas.webdev]

Yeah it definitely can, if you understand and use the right features... 😉

[@danvilela]

@@lukas.webdev Tailwind makes it fun! :D

[@danielpena4759]

11:39 what's the difference between using ".card:hover > .card__img" and ".card:hover .card__img" ??

[@KevinPowell]

In this case, it's the same thing... the `>` just ensures it's a direct child.

[@nathnolt]

​@@KevinPowell ensures you're only targeting direct children. This is especially handy for more generic selectors. For example, you can use this to style lists within lists without having to add classes to the lists. So for example you have a list with class list, which also has a sublist. .list > li { /* Style the li's of the root list*/ } .list > li > ul > li { /* Style the lis of the sub list */ }

[@tianshano]

Quite useful video! Thank you so much, Kevin!

[@moheywael7857]

thanks for all your knowledge sharing, your videos are so useful for me in my web journey. It means a lot. You became my reference in CSS and other stuffs. Thanks again Kevin

[@octothorpe12]

Ha! the "no-close-quote" is genius! Never knew that was a thing!

[@EJMP27]

Best css channel on KZbin

[@мультифора]

OH MY GOD I NEEDED THAT ISOLATION SOO MUCH THX

[@hnccox]

contain and isolate will be my default settings for modals from now on

[@maddysingh8332]

What's the difference between Sass and custom properties (--clr--bg) i have seen you using both they kind of seem similar.

[@dportalesr]

Nice stuff as always!

[@Showmatic]

i use isolation: isolate often and it's been so helpful

[@MayIt44]

Hi, Kevin must say helpful and phenomenal! I have a question.. I'm practicing on an Admin Dashboard and now I'm in the data section, I want to know is the table element really effects on the speed or it's just the data storage's doing it ? I'd like to know your advice, should I stuck with the table or go with div element or something different ?

[@KevinPowell]

If it's tabular data, then it should be a table 🙂

[@kesvalsensei8251]

I know table element for little data loading is fine, I don't know about big data though. What I would recommend is to use a loading table : Load X elements (say 20), and if the user wants to see more, they click on "load more" and they see 20 more. (Or you can just make it load on scroll) This is gonna improve performance drastically, and then if it is still slow you can be 100% sure that it comes from your database.

[@daleryanaldover6545]

It's definitely how you load the data. Just like the other advice, load the data with a default limit then use pagination to chunk sets of data. This way we are not overloading the request to database. Further down the line, you would want to optimize the database call to just SELECT the columns that will be used on the page. Also table element is the easiest way yo display tabular data without additional CSS. You can still use a div though and make it to DISPLAY as table.

[@MayIt44]

​@@KevinPowell appreciate it

[@MayIt44]

​@@kesvalsensei8251 thanks !

[@damiangonzalez_esp]

Ohhhh! Front-end friends! I finally understood your greeting! I always thought you said "Hello my friends and friends" 😁🤣

[@KevinPowell]

Basically everyone does. We need a `front-end friends` achievement or something for when people hear me say it that way :D

[@damiangonzalez_esp]

@@KevinPowell 😂 I love your videos, Kevin! You made me lose the fear of CSS, and now I'm redoing all my sites to get rid of evil bootstrap! :D Now that I understand flex and grid, I don't need that 12-columns "magic" anymore. You're an excelent teacher. Good voice, excelent explanations, always to the point... Thank you!

[@BHORC]

Hey Kevin , how to do the reverse numbering in CSS, as in frame 7:14 to 9:57?

[@normanejm]

I used to make a hack with 3d effects to put ::after or ::before. "back" to the content. Isolaton is awesome!

[@mohamadalmoayad]

very useful and awesome properties. thank you Kevin

[@cmdr-reflipd]

I have been looking at tinycss, I think I am just gonna dive in tonight, it looks really great.

[@mimosveta]

Hi Kev. Here's something that confuses me to no end. It's about responsive design. We're told to use media queries to set different appearances to different sized devices, but in recent years, tiny devices are getting more and more pixels crammed into smaller and smaller space. Right now, I just checked, my phone apparently has width of 992 px, although, official spec says it's 720px. Now, to me, 992ox sounds like a tablet device, probably older one, but my phone is miniature compared to a tablet. If I set up stuff so that they are legible on my phone, they will be humongous on such tablet, and if I set them for tablet, I won't be able to read anything, or press buttons and stuff: so, is there some alternative to setting just width of the screen, in order to differentiate between these two devices that really different in size, or, to differentiate between size of the pixel or whatever, how does one deal with this - I can't be the only one confused by this - I'm actually using rem units, I read somewhere that they are best, so, there but for the grace of god go I, but I still feel like explaining in px is more natural 🤷‍♂

[@KevinPowell]

CSS pixels are not actual pixels. That's the reason font-size: 20px looks similar on all devices, even though 20px on your phone, if it was actual pixels, would be VERY small. You have to look at the devices pixel ratio to get a better idea. But in general, phones are in the 320-400ish ranges.

[@kesvalsensei8251]

The pixels you use on media queries have basically nothing to do on the real pixels that your phone will end up showing you, let me explain : If I try and find the media queries dimensions for a specific phone (S20U), i will find around 400x900, but as you could guess, this is not the real 'pixel' size of this phone, otherwise it wouldn't even be HD, while this phone uses QHD+, so its width is even more than 1080 (it is 1440) pixels. I'm not exactly sure how the pixels used in media queries are calculated, but if I had to take a guess, I would guess they're calculated using what is known as a « physical pixel », basically, it means that a pixel measures a certain size IRL based on the density of pixels in the phone (couldn't explain this one) and calculates the « physical pixel » size for this phone. For the S20, it would be around .19mm. Why ? Well, the phone is 76 mm and 76%0.19 = 400, which is the number of pixels we found earlier. So, basically, don't refer to the number of pixels your phone 'has', because it's not what is gonna be used in the media query. You can verify that easily by opening chrome's devtools and choosing an arbitrary phone up top in the responsive mode, for example an S20 Ultra, and it will give you a number of pixels that is not even close to QHD+ (it gives 412x915). What should you do ? I recommend following a design guide that gives specific breakpoints, or making your own by testing. TL;DR: Use a design guide that gives specific breakpoints. You can even check out kevin's course for responsiveness here : courses.kevinpowell.co/conquering-responsive-layouts

[@delta3244]

If you're curious, the "px"/"pixel" in CSS is formally referred to as the "logical pixel," and is defined as a ninety-sixth of an inch (which is the size old Windows assumed a physical pixel was).

[@josephjoestar4318]

Great question and very informative responses. Thank you

[@lawrencedoliveiro9104]

This is why Android has the concept of the “device-independent pixel”, abbreviated “dip” or “dp”. This is equivalent to approximately 1/160 inch. I say “approximately”, because say you have a phone with a 360dpi screen, that will typically equate 1 dp to 2 screen pixels, rather than 2.25, because that is considered “close enough” for UI work. Of course, if you need to display precisely scaled graphics, you can determine the actual pixel density more accurately for such rendering, while the nominal density continues to be used for scaling the UI.

[@ShayanTheNerd]

Really helpful, thanks!

[@Linuxdirk]

I learned inset from you! It's such a handy shorthand!

[@FlorinPop]

Been doing CSS for 10 years but haven't see some of these properties! Thank you Kevin! 🙏

[@parahumanoid]

OK, I gotta ask this. Do you know of a tool that for given color value pair will yield the filter settings to apply so that we get from A to B? Not that we couldn't pick this up from Figma, given it's made actually with filters in the first place. Thank you.

[@UliTroyo]

I can’t believe I didn’t know about inset! I need it!

[@dkaigorodov]

Extremely helpful, thank you!

[@nicolaskeroack7860]

Drop shadow is an interesting one, never saw it. Looks great

[@schworak]

Wow! Love these. Thanks

[@uncleelder4922]

Thank you for using fonts that are large enough to see on a phone!

[@ankurpathak108]

12:10 Kevin talking about icon, Me :- which icon ? 🤨 I don't see any 😆

[@melodium10]

before he used the filter: invert() right?😂

[@ankurpathak108]

@@melodium10 yeah 😂

[@shinmini99]

Thanks Kevin ❤

[@rem2764]

Really useful things, thank you

[@TheUnknownFactor]

This is quite fantastic! I did know most of that, but a few new things- which is uncommon 😀

[@TheJazzNL]

Can't recall a situation I needed to know this (isolation), but I know I could have used this in the past 😅

[@nro337]

Super helpful video!

[@LokiDaFerret]

Let's say ur counter is on DIVs that are re-arranged via grid-template-areas. Do those counts change? Or stay the same? In other words is the count relative to the position in the DOM? or the rendered location?

[@Bobbias]

Purely based on the standard, it sounds like it would be based on position in the DOM. CSS Lists and Counters Module, section 4: Resolving counter values on a given element is a multi-step process: 1. Existing counters are inherited from previous elements. 2. New counters are instantiated (counter-reset). 3. Counter values are incremented (counter-increment). 4. Counter values are explicitly set (counter-set). 5. Counter values are used (counter()/counters()).

[@ssygon2]

Finally a great explanation of isolation: isolate Can you also do tutorial on HTML element ?

[@developermohsin6594]

Thankyou for this, Best part 7:13

[@ChrisWalshZX]

We used to use z-index:0 purely for creating a new stacking context in IE

[@harryhack91]

Too bad the "contain: style" thing only resets counters. It would be great if it could unset every other style defined before. A use case for that would be to show an embedded HTML created by the user with some editor like TinyMCE. In this scenario you don't want your main site CSS interfering with the styles defined by the user.

[@artemkatr9483]

I like videos about new properties 👍🎉

[@penguinxed]

I love your new thumbnails sir 😃

[@OscarObians]

Whoa! open-quote is a thing? What else can we put in the content property?

[@artemsapegin]

Same! Never seen this before ;-$

[@lawrencedoliveiro9104]

MDN lists it all. Do you have that site in your browser bookmarks? If not, why not?

[@KlausOppermann]

Thank you!

[@LokiDaFerret]

Shorthand notation is generally EVIL IFF you are applying different sizes on all or any subset of sides! You are sacrificing clarity and maintainability to save a few keystrokes. But if all four values are the same then I am fine with it.

[@catalinim4227]

that counter might be tweaked to be 5 then the h3's be 5.1 and 5.2... 🧐 need that for a page... thanks!

[@SvenThielen]

All neat little features to know, except for the last one where imo, you didn't really demonstrate a practical use for the contain property. I don't see when this would be of use nor did I understand the other values your briefly mentioned.

[@archangel_one]

What we REALLY need is the ability to change the attribute of another element AND the ability to access/change the attributes of the parent.

[@fscholdei]

very helpful, thanks :)

[@tomaszgora4353]

you can have counters but you cannot use those dynamically like: counter-increment: item-counter; --img-url1: "./images/service_"; --img-url2: ".png"; background-image: url(var(--img-url1) counter(item-counter) var(--img-url2)); what a shame :(

[@reaper84]

Damned! That isolation is useful!

[@Dipenparmar12]

Amazing out of box tutorials.

[@NickVeldkamp-u7h]

I didn't get a double quote but changed content to: content: open-quote open-quote and it works :)

[@MrNobodyX3]

This is one of those videos I feel like oh that's interesting... And then, five years later I'm like dammit. Where is that video so I couldn't figure out how to do this thing.

[@RaveKev]

11:49 thank you for that dad joke :D

[@deatho0ne587]

My issue with a lot of logic properties, I always forget which one is which so I spend more time messing with them than just writting out the none logical version. Will still use top/bottom and left/right, but it is the only one.

[@ontheruntonowhere]

By not using logical properties, you run the risk of your layout breaking in different languages, which you may not care about, but also in different device orientations.

[@BigGod23-321]

You are my hero🌺🌺🌺❤️❤️❤️

[@akifcankara2225]

Inset wont work on safari if your app on production

[@equistenelabs]

usefull as hell!

[@HabibullaSonet]

The CSS King 👑

[@adeisaac]

Huh, just when I though I knew CSS, then Boom, Kevin says, " Nope"... Me: "thank you...."

[@i_dream_of_memes]

good shit yo

[@melodium10]

😭😭I spent 20 hours (not continuously though) on fixing one thing. i wanted the border to be animated with hue-rotate. so I made an element and then the children inside the element had the hue-rotate on. I couldn't fix the children having the hue-rotate :( Had I knew the contain property, I could've fixed it in 20 seconds rather than spending 20 hours not able to fix it

[@wentallout]

I noticed my friend not using "gap" in flexbox and keep spamming "margin" everywhere instead.

[@btat16]

Funny story, Flexbox gap wasn't supported by Safari until 14.1 according to caniuse, and Safari 14 shipped out with 2020 MacOS models. Some people don't update their software ever, and my boss was one of those people. Designed a beautiful site for him, and it was completely destroyed by his Safari, haha. He still doesn't want to use gap because there's a chance someone else might still be using a not-updated 2020 computer (which is fair considering our target audience is mostly elderly).

[@aps69]

Ironically the open quote interested me more than isolate.

[@WyzrdCat]

I never can bring myself to use inset, I mean it is ultimately just not worth it. Yes the browsers which don't support it grow more obscure by the day, but still, it's just a few extra chars to support them.

[@TesterAnimal1]

inset-inline (etc) is a useful shorthand of it.

[@dvirhanum9530]

I like how trivial isolation is 😂

[@lessons3141]

interesting !

[@iUmerFarooq]

Hahaha I love the video part at 4:36

[@funhaos]

Kevin Powell IS CSS

[@mikelisrael5627]

You know what? I got frustrated atp and googled the meaning of Kevin. It came out as "Saving lives, all day, everyday".

[@_ric]

Do not agree with counter-increment, as it's another situation where content is moved away from the HTML and into CSS, in similar to the way the content rule works. For me the separation between design, functionality and content is important. For example, if you ask someone to update your webpage ("it's going from 1-10, I would like it 11-20"), where would you first look for that code? In the HTML, right? It *could* be in the CSS, using content or counter-increment, it *could* be in the JS with a element.textContent assignment, but it shouldn't be. You should never be crawling through CSS or JS code in order to change the content on your page. There is, of course, a caveat here in that the content rule, in relation to the before/after pseudo-elements, is needed for those elements to render. There is no way around it, sadly, and it leads to lots of people putting content that should be in the HTML into the CSS.

[@miladmoradi4715]

great

[@shandysven3494]

Squircle css please..

[@KevinPowell]

The paint API is the best way to do it... but it's only supported by Chromium atm :( - It is behind a flag in Safari though, so maybe one day!

[@thatanimeweirdo]

Counters are crazy, I was able to add line numbers to my code block without any JS with them. I've been working with CSS for 14 years and it felt like magic...