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