There isn’t just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we’ll go over in this video.<\/p>\n\n\n\n
For instance, there is the And What is transitionable? See! So much to think about!<\/p>\n","protected":false},"excerpt":{"rendered":" There isn’t just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we’ll go over in this video. For instance, there is the display property in which display: none; is very effective at hiding things. But it will hide that element from […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-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],"acf":[],"jetpack-related-posts":[{"id":208296,"url":"https:\/\/css-tricks.com\/snippets\/css\/toggle-visibility-when-hiding-elements\/","url_meta":{"origin":209550,"position":0},"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":342681,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content-visibility\/","url_meta":{"origin":209550,"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":14130,"url":"https:\/\/css-tricks.com\/almanac\/properties\/v\/visibility\/","url_meta":{"origin":209550,"position":2},"title":"visibility","date":"September 6, 2011","format":false,"excerpt":"The\u00a0visibility\u00a0property in CSS has two different functions. It hides rows and columns of a table, and it also hides an element\u00a0without changing the layout. p { visibility: hidden; } tr { visibility: collapse; } visibility\u00a0has four valid values:\u00a0visible,\u00a0hidden,\u00a0collapse, and\u00a0inherit. We\u2019ll go through each of them to learn more. visible Just\u2026","rel":"","context":"In \"hiding\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3482,"url":"https:\/\/css-tricks.com\/snippets\/css\/accessibilityseo-friendly-css-hiding\/","url_meta":{"origin":209550,"position":3},"title":"Accessibility\/SEO Friendly CSS Hiding","date":"August 21, 2009","format":false,"excerpt":".screen-reader-text { position: absolute; top: -9999px; left: -9999px; } This class can remove an item from the page, taking it out of flow and doesn't cause overflow scrolling. It's better than display: none; or even visibility: hidden; when the goal is to hide the element visually but leave it accessible\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":209550,"position":4},"title":"mask-position","date":"October 12, 2020","format":false,"excerpt":"In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. It works like the background-position property. .element { \u00a0 mask-image: url(\"star.svg\"); \u00a0 mask-position: 20px center; } Masking allows you to display selected parts of an element while hiding the rest.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334229,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-boundary\/","url_meta":{"origin":209550,"position":5},"title":"border-boundary","date":"February 9, 2021","format":false,"excerpt":"The border-boundary property in CSS set constraints to the bounds of an element that affects how the element's borders behave. It's defined in the CSS Round Display Level 1 specification, which is currently in Working Draft status. That means things can change between now and formal candidate recommendation. .element {\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/209550"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=209550"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/209550\/revisions"}],"predecessor-version":[{"id":335222,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/209550\/revisions\/335222"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=209550"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=209550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}display<\/code><\/a> property in which display: none;<\/code> is very effective at hiding things. But it will hide that element from assistive technology as well, and you don’t always want that, like a dropdown navigation menu (the dropdowns are visually hidden but shouldn’t be hidden from assistive technology).<\/p>\n\n\n\ndisplay<\/code> isn’t transitionable either, so if you want to fade in \/ fade out that element with transition<\/code><\/a>, that’s out. Unless you involve JavaScript to apply that property only after the transition has happened.<\/p>\n\n\n\nopacity<\/code><\/a> is, and turns out visibility<\/code><\/a> is too. This combination is pretty useful together, as once an element has visibility: hidden;<\/code> it doesn’t interfere with events like clicks\/taps. This combo doesn’t take the element out of page flow though, which can be useful or not useful. The position<\/code><\/a> property might be useful in those circumstances.<\/p>\n\n\n\n