Did you know I have a newsletter?
I tend to share some random general musings, what I've been up to in the past week, and other links and resources that I stumble across.
Goes out every Sunday.
Pinned Tweet
Follow
Click to Follow KevinJPowell
Kevin Powell
@KevinJPowell
CSS Evangelist
Helping people fall in love with CSS:
YT: YouTube.com/kevinpowell
Twitch: twitch.tv/kevinpowellcss
Courses: kevinpowell.co/courses
Kevin Powell’s Tweets
If you think you're writing too much #JavaScript when you could be using #CSS to solve your problems, check out this video by :
youtube.com/watch?v=yyPteF
He's also a good resource for beginners to CSS because his #tutorials are thorough, mellow, and easy to follow.
4
17
I'm going to be making a mini-crash course soon-ish... do you prefer one long video for crash courses, with timestamps/chapters (2+ hours), or do you prefer playlists?P
- One long video40.2%
- Playlist59.8%
440 votesFinal results
12
3
27
I've just put out a new video! I should have paid more attention in Math class - CSS Trigonometry
2
2
48
🎉woot! 🎉 Our new blog series on learning CSS concepts in an intuitive way has just kicked off! 🚀
First up - Learn "CSS Box Model", in an intuitive way!
⭐ cssbattle.dev/blog/learn-box ⭐
Stay tuned for more awesome content!
#CSS #codinglife #eli5 #FrontEnd #100DaysOfCode
4
15
46
Show this thread
I've just put out a new video! These units will change how we write CSS
3
30
Future UI Tip! 🔮
Create popups with HTML & CSS alone
– No z-index fighting 🙌
- Keyboard controls and autofocus
- Light dismiss
- Styleable backdrop
This is all you need! 👇
<button popovertarget=pop>Toggle</button>
<div popover id=pop>Popover!</div>
link below! 🔥
0:14
28.4K views
Quote Tweet
Blink: Intent to Ship: The Popover API groups.google.com/a/chromium.org
12
98
710
Show this thread
I've just put out a new video! Can I solve this CSS riddle?
3
3
25
I've just put out a new video! Create an animated, glowing, gradient border with CSS
3
2
58
I've just put out a new video! Viewport units have nothing on query length units
32
I've just put out a new video! From Design to Code // HTML & CSS from scratch // Frontend Mentor
1
8
97
0:23
7K views
10
17
172
I've just put out a new video! nth-child() just got an upgrade
3
4
49
I've just put out a new video! The CSS shorthand not enough people know about
3
4
52
The packing is complete!
Tomorrow the moving truck is here and hopefully not too late in the day we will head out for the first half of a ~1,250km drive to our new house!
Sidenote: I have *way* too much stuff 😅
8
57
Show this thread
Sitting down to record my last video in my current house (we're moving out on Monday!)
Managed to keep my recording area set free of the carnage... barely 😂
0:11
26.4K views
21
6
550
Show this thread
I've just put out a new video! Getting started with Variable fonts on the web
1
2
46
I've just put out a new video! A useful alternative to :focus in CSS
4
46
I've just put out a new video! 5 responsive layouts without media queries
3
11
82
I've just put out a new video! Why you are bad at CSS
11
12
102
I've just put out a new video! The power of CSS combinators
5
4
59
Future UI && CSS Tip! 🔮
Use anchor positioning to tether an element to multiple anchors 🤓
.link {
left: anchor(--a1 center);
bottom: anchor(--a2 center);
}
With some "magic", you could define links and let the browser draw them for you🔥
link && expl. below! 👇
1:23
16.4K views
12
94
622
Show this thread
I've just put out a new video! 5 super useful CSS properties that don't get enough attention
2
11
91
I've just put out a new video! The problems with viewport units
4
7
83
This is a huge one, y'all!
🌈 HD color spaces like oklch & the color() function
🎨 color-mix() function
👩🏻🔬 Advanced :nth-child selectors
🧮 Trigonometric functions in CSS
👗 Style queries w/custom properties
🎢 View transitions for SPA's
ALL IN ONE RELEASE!
Quote Tweet
Chrome 111 beta is here. Features include new CSS color types and spaces, CSS trigonometric functions, and the View Transitions API.
developer.chrome.com/blog/chrome-11
4
28
132
I've just put out a new video! Attribute selectors are OP
1
28
I've just put out a new video! 3D Card Effect // HTML, CSS & JS
3
33
Anyone else been running into this of late?
I open a new tab and go to Twitter and get it... refresh, same thing. Open *another* new tab and try again and works fine.
I'd say it's like, ~20% of the time or so, including following links.
read image description
ALT
16
1
43
I can't seem to let this go, lol, but I find it funny that I got so many comments about attribute selector performance being an issue, but I used this selector in a video a few months ago and I didn't get one comment about selector performance...
read image description
ALT
Quote Tweet
I've had *a lot* of comments on this video about attribute selectors being bad for performance compared to class selectors.
Where are people learning this?
The only article I found that says it (and only mentions it in passing) is 13 years old... twitter.com/KevinJPowell/s…
Show this thread
1
27
I've just put out a new video! Animated Glowing Border // Easy to Customize CSS Effect
1
4
49
So yes, you could probably optimize things a bit, I guess, but I have a feeling there are *a lot* of other optimizations out there that could save you 0.3ms or more (assuming you have 10,000 matches on your attribute selector, which I think is a pretty big assumption)
4
23
Show this thread
And before posting I had to double check, so here are some stats thanks to Edge's Selector Stats...
So sure, you can save ~0.3ms selecting 10,000 elements with classes instead of attributes 🤷
![* selector matching 10005 items: 1.518ms
element selector matching 10000 items: 1.626ms
class selector matching 10000 items: 1.713ms
[data-item] matching 10000 items: 1.992ms
[data-item*="test="] matching 10000 items: 2.856ms](https://pbs.twimg.com/media/Fod8aCHX0AIFJ6a?format=png&name=medium)
read image description
ALT
1
1
29
Show this thread
The only thing I can think of is when using them with *=, $=, |= etc, which will be more intensive than simply using `=` (which is what I used in that video), since the browser will have to do substring searches...
1
11
Show this thread
I've had *a lot* of comments on this video about attribute selectors being bad for performance compared to class selectors.
Where are people learning this?
The only article I found that says it (and only mentions it in passing) is 13 years old...
Quote Tweet
I've just put out a new video! How to write Semantic CSS youtu.be/lWu5zf_S9R4
6
5
54
Show this thread
Anyone have thoughts on long-form tweets?
Quote Tweet
this tweet has 26927… Show more
Show this thread
15
1
31
Big shout-out to who wrote this article that was the inspiration for my video: benmyers.dev/blog/semantic-
Strongly recommend you give it a read (and check out others on his site, it's a fantastic resource!)
Quote Tweet
I've just put out a new video! How to write Semantic CSS youtu.be/lWu5zf_S9R4
1
2
10
I've just put out a new video! Number-only inputs aren't so straight-forward
1
3
25
I've just put out a new video! How to write Semantic CSS
5
13
92
A nice "Pop out" hover effect featuring some CSS masters 😎 ( )
Demo: codepen.io/t_afif/full/zY via
Want to know the secret behind?
Read my new article 👉 css-tricks.com/a-fancy-hover-
Share a demo with your own avatar 👇
#CSS
0:05
8.5K views
Quote Tweet
0:05
CSS Tip!
Add a nice hover effect to your profile picture using a minimalist code
No extra element (only the <img> tag)
No pseudo-element
Less than 20 declarations
Optimized with CSS variables
Demo: codepen.io/t_afif/full/MW via @CodePen
#CSS6
29
279