This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mustapha Aouas
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 🔋
You can listen to the level change event like this:
2. Focus within
The :focus-within CSS pseudo-class matches an element if it or any of its descendants are focused:
3. List markers
You can use the ::marker pseudo-element to target the marker box of a list item
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?
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:
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?
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Mustapha Aouas
Mustapha Aouas | Sciencx (2022-10-03T07:39:07+00:00) 5 webdev tips you may want to know 🔥 #3. Retrieved from https://www.scien.cx/2022/10/03/5-webdev-tips-you-may-want-to-know-%f0%9f%94%a5-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.