CSS3
#css3
17.2K followers·2.8K articles
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. - MDN
Popular this week 🔥
Thank you for motivating me to create my very first CSS art, it took me 4+ hrs but it was worth.
Check it here: https://codepen.io/saviomartin/details/KKqrXeW
43
Eeek there are so many to learn!
Guilty of using px, but in my defence i have only been learning for a month haha.
I had no idea % was called 'relative'. I came across it when using bootstrap.
There are quite a few here, so i am going to try to use one new unit each week to see if it sinks in.
Would love to see more articles of this ilk! I really enjoy your writing style and the Gifs help me to follow along :D
Zoe
5
Love the approach, I didn't know about the StorageEvent, so I dived in (maybe to deep).
Looking into it, it seems this is exactly the intended use of the StorageEvent (developer.mozilla.org/en-US/docs/Web/API/Wi..: "it is really a way for other pages on the domain using the storage to sync any changes that are made").
--
A peculiar thing is this only works for the localStorage, even though it should work for both local and session (html.spec.whatwg.org/multipage/indices.html..).
The reason for this seems to be a catch-22, looking at the rules for the event: html.spec.whatwg.org/multipage/webstorage.h..: "Dispatches a storage event on Window objects holding an equivalent Storage object". meaning it only fires on other windows (tabs), and not the instance making the changes.
The sessionStorage has a different instance for each open window (html.spec.whatwg.org/multipage/webstorage.h..: "If the user had multiple windows opened on the site, each one would have its own individual copy of the session storage object.").
So even if the event is fired on the sessionStorage, that exact instance isn't available in any other window, so there's no instance to dispatch to. I have not looked into any actual implementation here, so I don't know exactly what happens behind the curtain.
--
Sorry for hijacking the comments, I just found it funny reading through the specs, and thought maybe others would appreciate the trivia.
Thanks for a great post!
29
Useful
3