There are two CSS property declarations that can make an element disappear and sometimes it can be hard to know which one to use. CODE GIST: gist.github.co...
Display cannot be used with a transition. Transitions are only for values like numbers that can have intermediate steps. The display property has only specific values. With JS you can listen for the transitionend event.
You can still select text of any colour, even transparent. I didn't get into all the effects for the different versions. I really was only talking about the visual effects of visibility vs display. codepen.io/mad-d/pen/YzwvOmX - this code pen shows color: transparent, visibility: hidden, opacity: 0, and display: none; The difference with EVENT handling is that display:none removes the element from the page, visibility hidden hides the element and disables event listeners, opacity and color: transparent hide the content while keeping the original space and still let events work.
It's very similar to what position: absolute and position:relative do to an element! Absolute removes it out of the flow of the document, while relative leaves a ghost!
Use media queries. I have a bunch of videos on those. You can search for them on my channel home page. Here is the first one - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-B6l6Wzmj4pA.html
Using a visibility value of hidden on an element will remove it from the accessibility tree. while opacity and font don't...and you can't actually click on element if visibility is set to hidden
Yes. It was changed. This was not the original intent of the two properties. But since the addition of the aria-hidden and confusion over the properties the browsers have opted to make visibility:hidden work the same way as display:none. Now, as you mentioned, opacity is the way to achieve what visibility used to do.
Hi Tomas, I am not working with Angular anymore since version 1.5. I am working with ReactJS and VueJS. I will be making videos about those this summer.
