DEV Community

Cover image for Focus within & 4 other webdev tips you may want to know πŸš€
Mustapha Aouas
Mustapha Aouas

Posted on • Updated on

Focus within & 4 other webdev tips you may want to know πŸš€

Just a quick word before we start. I'm currently trying to grow a community over on twitter where I share technical tidbits I learned working in this industry for about 6 years now.

I would be super happy and grateful if you could follow me there! It will help me to make more content and articles every week πŸ™

Also, English is not my first language, so please let me know if you find any misspellings or awkward phrasing.

Enough talk, let's jump right in!


1. The battery API

Did you know that browsers have a Battery API that provide information about the system’s battery charge level πŸ”‹

battery API

You can listen to the level change event like this:

battery API level

Β 

2. Focus within

The :focus-within CSS pseudo-class matches an element if it or any of its descendants are focused:

Focus within

Β 

3. List markers

You can use the ::marker pseudo-element to target the marker box of a list item

List markers

Β 

4. Offset a text underline

Did you know that you can use the text-underline-offset property to specify the distance of an underlined text decoration (applied using the text-decoration property) from its original position?

text underline offset

Β 

5. Animation / transition ending event

If you have a CSS animation or transition and you want to react to its ending, Here's how to do it:

Animation or transition ending event

This can be useful if you want to perform an animation before removing and element from the DOM for example (in case you are not using a framework that already does that for you).

Β 
Β 

That's all for now. I hope you found this useful!
Leave a comment to let me know which tip (if any) you found useful ‡

Until next time, have a nice week!

Β 

What to read next?

Latest comments (1)

Collapse
 
chriscthomas profile image
chris thomas

Great wrap up to your little series. Thanks for the info!