Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Modular Media Queries Creating Element States

Josh Vaughn
Josh Vaughn
2,289 Points
Posted by Josh Vaughn
Josh Vaughn
2,289 Points

Use of visibility: collapse in Element States

In the video Creating Element States, Guil uses a construction that looks something like this:

.is-collapsed-mobile {
    @include media(small) {
        height: 0;
        padding: 0;
        margin: 0;
        visibility: collapse;
        line-height: 0;
    }
}

I noticed the visibility: collapse value and looked it up because I had not seen it before. This is what Chris Coyier has to say about it on CSS Tricks:

There are so many quirks with this it's hard to know where to begin. [ he lists a number of browser quirks .. and then: ] ... There is more, but basically: don't use this ever.

I'm curious about the justification for why this is in here. What is it handling that the other properties are not? And, is it necessary to make this construction work - vs. - the issues that it can potentially bring up in various browsers, thanks.