Discover and read the best of Twitter Threads about #CSSpodcast
Most recents (3)
CSS Functions provides runtime contextual expressions that return dynamic real-time value per the state of the browser per user in that moment
- global space, no need import
- can be nested, calc(var(--var))
- typed, eg: `rotate(45px)` will not work
- keep the function live, recompute on value changes and updates
- many of them are pure functions, however, counter-example: `counter()`
- can be nested, calc(var(--var))
- typed, eg: `rotate(45px)` will not work
- keep the function live, recompute on value changes and updates
- many of them are pure functions, however, counter-example: `counter()`
In the latest episode #CSSpodcast, @Una and @argyleink shared a ton of pseudo-classes
(I managed to note down 3️⃣9️⃣ of them 😱)
🧵 Here is a thread of what were shared in the podcast 👇👇👇
(I managed to note down 3️⃣9️⃣ of them 😱)
🧵 Here is a thread of what were shared in the podcast 👇👇👇
Pseudo-classes are selectors, lets you apply style to element based on info outside of the doc tree:
🌎 meta information, eg: language, history of navigator
☑️ state of the element, eg: checked, active, disabled
✨Pseudo-classes are great for implementing micro-interactivity
🌎 meta information, eg: language, history of navigator
☑️ state of the element, eg: checked, active, disabled
✨Pseudo-classes are great for implementing micro-interactivity
🔤 Case-insensitive
⏹ No whitespace in between
⏹ No whitespace in between
Learned a ton of pseudo elements, that i didnt know existed, in this week's #CSSpodcast by @Una and @argyleink
thecsspodcast.libsyn.com/014-pseudo-ele…
Learn about 9️⃣ things I learned in the thread 👇👇
thecsspodcast.libsyn.com/014-pseudo-ele…
Learn about 9️⃣ things I learned in the thread 👇👇
1️⃣
pseudo elements has 2 colons in front ::
🆚
pseudo class which have 1 colon in front :
pseudo elements has 2 colons in front ::
🆚
pseudo class which have 1 colon in front :
2️⃣
::before and ::after targets the pseudo-element that is the 1st child and last child of the element respectively
📝 to create the pseudo-element, use `content` property
📝 content will be read by screen reader
📝 cannot be used by replaced elements, eg: <img>, <video>
::before and ::after targets the pseudo-element that is the 1st child and last child of the element respectively
📝 to create the pseudo-element, use `content` property
📝 content will be read by screen reader
📝 cannot be used by replaced elements, eg: <img>, <video>
