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

Thanks so much!

Thanks so much!

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.

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.

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?

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

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

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!

@@axMf3qTIWe now positions things with html tables.

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.

@@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.

@@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.

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

@@jesperstokke4406 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.

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

Switched to backend?

@@TsoiIzAlive Laid off

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

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?

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

@@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!

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

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

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

@@melodium10 yeah 😂

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

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.

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.

​@@KevinPowell appreciate it

​@@kesvalsensei8251 thanks !

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

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()).

Same! Never seen this before ;-$

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

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.

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

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).

Great question and very informative responses. Thank you

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.

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...

@@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

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.

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

​@@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 */ }

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).

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

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!