{"id":14130,"date":"2011-09-06T18:58:52","date_gmt":"2011-09-07T01:58:52","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14130"},"modified":"2021-02-22T15:27:41","modified_gmt":"2021-02-22T23:27:41","slug":"visibility","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/","title":{"rendered":"visibility"},"content":{"rendered":"\n<p>The&nbsp;<code>visibility<\/code>&nbsp;property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element&nbsp;<em>without changing the layout<\/em>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  visibility: hidden;\n}\ntr {\n  visibility: collapse;\n}<\/code><\/pre>\n\n\n\n<p><code>visibility<\/code>&nbsp;has four valid values:&nbsp;<code>visible<\/code>,&nbsp;<code>hidden<\/code>,&nbsp;<code>collapse<\/code>, and&nbsp;<code>inherit<\/code>. We\u2019ll go through each of them to learn more.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"visible\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#visible\"><\/a>visible<\/h4>\n\n\n<p>Just like it sounds,&nbsp;<code>visible<\/code>&nbsp;makes things visible. Nothing is hidden by default, so this value does nothing unless you have set&nbsp;<code>hidden<\/code>&nbsp;on this or a parent of this element.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"hidden\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#hidden\"><\/a>hidden<\/h4>\n\n\n<p>The\u00a0<code>hidden<\/code>\u00a0value hides things. This is different than using\u00a0<code>display: none<\/code>, because\u00a0<code>hidden<\/code>\u00a0only\u00a0<em>visually<\/em>\u00a0hides elements. The element is still there, and still takes up space on the page, but you can\u2019t see it anymore (kind of like turning the opacity to 0). Interestingly, this property does not inherit by default. That means that, unlike the\u00a0<code>display<\/code>\u00a0or\u00a0<code>opacity<\/code>\u00a0properties, you can make an element\u00a0<code>hidden<\/code>, and still have one of its children as\u00a0<code>visible<\/code>, like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mwFuJ\" src=\"\/\/codepen.io\/anon\/embed\/mwFuJ?height=450&amp;theme-id=1&amp;slug-hash=mwFuJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mwFuJ\" title=\"CodePen Embed mwFuJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Notice that, while hidden, the parent element doesn\u2019t trigger the&nbsp;<code>:hover<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"collapse\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#collapse\"><\/a>collapse<\/h4>\n\n\n<p>This one only effects table rows (<code>&lt;tr><\/code>), row groups (like\u00a0<code>&lt;thead><\/code>), columns (<code>&lt;col><\/code>), column groups (<code>&lt;colgroup><\/code>), or elements made to be that way via\u00a0<code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\">display<\/a><\/code>).<\/p>\n\n\n\n<p>Unlike\u00a0<code>hidden<\/code>, this value hides the table sub-element, without leaving the space where it was. If used anywhere but on a table sub-element, it acts like\u00a0<code>visibility: hidden<\/code>.<\/p>\n\n\n\n<p>There are so many quirks with this it\u2019s hard to know where to begin. Just as an appetizer:<\/p>\n\n\n\n<ul><li>Chrome\/Safari will collapse a row, but the space it occupied will remain. And if the table cells inside had a border, that will collapse into a single border along the top edge.<\/li><li>Chrome\/Safari will not collapse a column or column group.<\/li><li>Safari collapse a table cell (wrong) but Chrome will not (right).<\/li><li>In any browser, if a cell is in a column that is collapsed (whether or not it actually collapses) the text in that cell will not be displayed.<\/li><li>Opera (pre WebKit) will collapse the crap out of everything, except a table cell (which is correct).<\/li><\/ul>\n\n\n\n<p>There is more, but basically:&nbsp;<strong>don\u2019t use this ever.<\/strong><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"inherit\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#inherit\"><\/a>inherit<\/h4>\n\n\n<p>The default value. This simply causes the element to inherit the value of its parent.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"flexbox\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#flexbox\"><\/a>Flexbox<\/h3>\n\n\n<p><code>visibility: collapse;<\/code>\u00a0<a href=\"https:\/\/dev.w3.org\/csswg\/css3-flexbox\/#visibility-collapse\" rel=\"noopener\">is used in Flexbox as well<\/a>, and more well defined.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#related-properties\"><\/a>Related Properties<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\">The&nbsp;<code>display<\/code>&nbsp;property<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/opacity\/\">The&nbsp;<code>opacity<\/code>&nbsp;property<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#other-resources\"><\/a>Other Resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/CSS2\/visufx.html#visibility\" rel=\"noopener\">CSS2 spec<\/a><\/li><li><a href=\"https:\/\/dev.w3.org\/csswg\/css3-box\/#the-visibility-property\" rel=\"noopener\">CSS3 spec<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/visibility\" rel=\"noopener\">MDN docs<\/a><\/li><li><a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/ie\/ms531180%28v=vs.85%29.aspx\" rel=\"noopener\">IE docs<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/#browser-support\"><\/a>Browser Support<\/h3>\n\n\n<p>The basics, not considering all the quirks with collapse:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Any<\/td><td>Any<\/td><td>Any<\/td><td>4+<\/td><td>4+<\/td><td>Any<\/td><td>Any<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>IE 7- doesn\u2019t support&nbsp;<code>collapse<\/code>&nbsp;or&nbsp;<code>inherit<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The&nbsp;visibility&nbsp;property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element&nbsp;without changing the layout. visibility&nbsp;has four valid values:&nbsp;visible,&nbsp;hidden,&nbsp;collapse, and&nbsp;inherit. We\u2019ll go through each of them to learn more. visible Just like it sounds,&nbsp;visible&nbsp;makes things visible. Nothing is hidden by default, so this value does nothing [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13953,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[883,1637],"acf":[],"jetpack-related-posts":[{"id":13980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/backface-visibility\/","url_meta":{"origin":14130,"position":0},"title":"backface-visibility","date":"August 31, 2011","format":false,"excerpt":"The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the \"front\" of an element no longer faces the screen. For instance, this would flip an element away from the screen: .flip { transform: rotateY(180deg); } It\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342681,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content-visibility\/","url_meta":{"origin":14130,"position":1},"title":"content-visibility","date":"June 21, 2021","format":false,"excerpt":"The content-visibility property in CSS indicates to the browser whether or not an element\u2019s contents should be rendered at initial load time. So, as the browser starts loading content and is playing it on the screen, this property allows us to step in and tell the browser not to load\u2026","rel":"","context":"In \"content-visibility\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/visibility-nope.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":208296,"url":"https:\/\/css-tricks.com\/snippets\/css\/toggle-visibility-when-hiding-elements\/","url_meta":{"origin":14130,"position":2},"title":"Toggle Visibility When Hiding Elements","date":"September 17, 2015","format":false,"excerpt":"The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that opacity is not well supported by screen readers and so if we want to hide an element in a transition then we should always use the visibility attribute, too: .m-fadeOut {\u2026","rel":"","context":"In \"hiding\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4191,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/persistant-headers-on-tables\/","url_meta":{"origin":14130,"position":3},"title":"Persistant Headers on Tables","date":"September 21, 2009","format":false,"excerpt":"When you scroll down a page with a long table on it, typically the header of the table scrolls away and becomes useless. This code clones the table header and applies it at the top of the page once you have scrolled beyond it, and disappears when you have scrolled\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6602,"url":"https:\/\/css-tricks.com\/snippets\/css\/basics-of-google-font-api\/","url_meta":{"origin":14130,"position":4},"title":"Basics of Google Font API","date":"June 15, 2010","format":false,"excerpt":"Link to CSS files You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts. ... Idea: You can avoid an extra network request by opening that stylesheet and copy-and-pasting the @font-face stuff into your main stylesheet.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3243,"url":"https:\/\/css-tricks.com\/snippets\/css\/cross-browser-opacity\/","url_meta":{"origin":14130,"position":5},"title":"Cross Browser Opacity","date":"August 6, 2009","format":false,"excerpt":"These days, you really don't have to worry about opacity being a difficult thing cross-browser. You just use the opacity property, like this: .thing { opacity: 0.5; } 0 is totally transparent (will not be visible at all, like visibility: hidden;) and 1 is totally opaque (default). Anything in between\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14130"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14130"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14130\/revisions"}],"predecessor-version":[{"id":335228,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14130\/revisions\/335228"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13953"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14130"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}