Mastering CSS has a lot to do with understanding its capabilities and getting familiar with the range of properties available.
While working on a couple of projects this past week, I looked up a few and did a little round-up of 5 helpful CSS tricks I used this week:
Selecting specific children
This is an interesting trick, that can be adapted depending on how many or which exact elements you want to target.
Imagine you have a list of items and you only want to select all but the first 3 children. You would use Example 1, with n + 4, which means it will only start at the 4th item.
To select a specific item, you can simply target the specific nth-child. So if you want to select the 2nd list item, you'd use Example 2.
If you want to select all but the first, you can simply use Example 3, with the :not(:first-child) selector.
Touch-action property
The touch-action property is super helpful when developing for mobile devices as it gives you control over the effect of touchscreen interactions with an element. This can be compared to the pointer-events property used to control mouse interactions.
There's quite a few values that you can use. You can read more about them on MDN.
auto: Allows the browser to handle all pan and zoom interactions.
manipulation: Enables pinch and zoom interactions, but disables others you might find on some devices, like double-tap to zoom. It is shorthand for the combination of pan-x pan-y pinch-zoom.
Accessibility when using Emojis
It’s incredible how emojis are now so engrained in our digital communication. However, when content is accessed via a screen reader, some systems may not notice this content is there.
The best practice in this case is to wrap the emoji in a <span>, giving it the role="img", and providing a useful description in aria-label. The screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.
Thankfully, most modern screen readers will read the emoji's default description, although these are not consistent across systems. To safeguard consistency, it's wiser to provide this in the aria-label. This is important when wanting to convey emotional value, for example.
How to disable horizontal scroll on mobile
An oldie, but goodie. You know that pesky little horizontal scroll that keeps on showing when you're developing your responsive website? Ugh!
Let's get rid of it, shall we? BYE FELICIA.
Wrapping text around shapes with shape-outside
The shape-outside property controls how the content wraps around a floated element’s bounding-box, meaning we can reflow text over a shape such as a circle, ellipse or a polygon.
The caveat is that this property only works on floated elements for the time being, as per the CodePen example below. This will likely get updated in the near future.
Top comments (5)
Another way I use to select all but first element is
li + li. It selects the adjacent sibling of the element, since the firstliisn't an adjacent sibling... voilà!Thanks for this post. Keep up the good work!
Good one! Thank you
So interesting !!!
Beautiful tricks❤️
Thanks Rishav! Hope they’re useful to you