display: stack;<\/code> is probably the future<\/a> for a tabbed user interface through CSS. <\/p>\n","protected":false},"excerpt":{"rendered":"Functional tabbed area with just CSS. The backstory, where we are now, and the awesome theoretical future.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[743,1635],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":155224,"url":"https:\/\/css-tricks.com\/transformer-tabs\/","url_meta":{"origin":13758,"position":0},"title":"Transformer Tabs","date":"November 5, 2013","format":false,"excerpt":"Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown. There are loads of variations of course, but it's one of the most ubiquitous navigation design patterns out there. When arranged in a horizontal\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":157751,"url":"https:\/\/css-tricks.com\/svg-tabs-using-svg-shape-template\/","url_meta":{"origin":13758,"position":1},"title":"SVG Tabs (Using an SVG Shape as Template)","date":"December 4, 2013","format":false,"excerpt":"An excellent feature of SVG is that you can define a shape (or set of shapes) once, and then use it multiple times throughout a page. You can even apply different fills and filters and whatnot to the different versions. SVG templating, if you will. Let's see if we can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":346418,"url":"https:\/\/css-tricks.com\/tabs-in-html\/","url_meta":{"origin":13758,"position":2},"title":"Tabs in HTML?","date":"August 16, 2021","format":false,"excerpt":"Brian Kardell shares a bit about the progress of bringing \"Tabs\" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-09-at-7.53.13-AM.png?fit=1200%2C769&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":185724,"url":"https:\/\/css-tricks.com\/intermediary-pages-site-heirarchy\/","url_meta":{"origin":13758,"position":3},"title":"Intermediary Pages in a Site Hierarchy","date":"October 8, 2014","format":false,"excerpt":"I had a reader write in with an interesting question: When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About > Company, Founder, History. There isn't really anything worth putting on the About page that wouldn't be on\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":160842,"url":"https:\/\/css-tricks.com\/changing-spaces-tabs-sublime-text\/","url_meta":{"origin":13758,"position":4},"title":"Changing Between Spaces and Tabs in Sublime Text","date":"January 20, 2014","format":false,"excerpt":"Sublime Text is pretty dang good at making it easy to switch between using tabs and spaces to indent your code. More importantly, it makes it easy to adjust the indentation of code that doesn't match your preference. I thought I'd put this together for reference, as there is a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317870,"url":"https:\/\/css-tricks.com\/a-bit-on-web-component-libraries\/","url_meta":{"origin":13758,"position":5},"title":"A Bit on Web Component Libraries","date":"July 28, 2020","format":false,"excerpt":"A run of Web Components news crossed my desk recently so I thought I'd group it up here. To my mind, one of the best use cases for Web Components is pattern libraries. Instead of doing, say,
like you would do in Bootstrap or like\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/wev-components-logo.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13758"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"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=13758"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13758\/revisions"}],"predecessor-version":[{"id":302119,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13758\/revisions\/302119"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=13758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}