{"id":14358,"date":"2011-09-17T16:16:00","date_gmt":"2011-09-17T23:16:00","guid":{"rendered":"http:\/\/css-tricks.com\/?p=14358"},"modified":"2016-03-04T16:57:49","modified_gmt":"2016-03-04T23:57:49","slug":"default-tab-ui-of-the-current-desktop-browser-landscape","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/default-tab-ui-of-the-current-desktop-browser-landscape\/","title":{"rendered":"Default Tab UI of the Current Desktop Browser Landscape"},"content":{"rendered":"<p>I opened up the same 6 tabs in current versions of all the desktop browsers, then took screenshots of the UI of just the tabs themselves. <!--more--> These are from a Mac running OS X Lion.<\/p>\n<figure>\n<a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Firefox6.png?ssl=1\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Firefox6.png?resize=1157%2C46\" alt=\"\" title=\"Firefox6\" width=\"1157\" height=\"46\" class=\"alignnone size-full wp-image-14359\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Firefox6.png?w=1157&amp;ssl=1 1157w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Firefox6.png?resize=300%2C12&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Firefox6.png?resize=1024%2C41&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Firefox6.png?resize=768%2C31&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Firefox6.png?resize=1000%2C40&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption>Firefox 6<\/figcaption><\/figure>\n<figure>\n<a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Chrome15.png?ssl=1\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Chrome15.png?resize=1155%2C37\" alt=\"\" title=\"Chrome15\" width=\"1155\" height=\"37\" class=\"alignnone size-full wp-image-14361\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Chrome15.png?w=1155&amp;ssl=1 1155w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Chrome15.png?resize=300%2C10&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Chrome15.png?resize=1024%2C33&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Chrome15.png?resize=768%2C25&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Chrome15.png?resize=1000%2C32&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption>Chrome 15<\/figcaption><\/figure>\n<figure>\n<a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Opera11.png?ssl=1\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Opera11.png?resize=1158%2C47\" alt=\"\" title=\"Opera11\" width=\"1158\" height=\"47\" class=\"alignnone size-full wp-image-14363\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Opera11.png?w=1158&amp;ssl=1 1158w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Opera11.png?resize=300%2C12&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Opera11.png?resize=1024%2C42&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Opera11.png?resize=768%2C31&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Opera11.png?resize=1000%2C41&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption>Opera 11<\/figcaption><\/figure>\n<figure>\n<a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Safari51.png?ssl=1\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Safari51.png?resize=1155%2C23\" alt=\"\" title=\"Safari5\" width=\"1155\" height=\"23\" class=\"alignnone size-full wp-image-14371\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Safari51.png?w=1155&amp;ssl=1 1155w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Safari51.png?resize=300%2C6&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Safari51.png?resize=1024%2C20&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Safari51.png?resize=768%2C15&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/Safari51.png?resize=1000%2C20&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption>Safari 5<\/figcaption><\/figure>\n<figure>\n<a href=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/IE9.png?ssl=1\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/IE9.png?resize=404%2C30\" alt=\"\" title=\"IE9\" width=\"404\" height=\"30\" class=\"alignnone size-full wp-image-14368\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/IE9.png?w=404&amp;ssl=1 404w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/IE9.png?resize=300%2C22&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/a><figcaption>Internet Explorer 9<\/figcaption><\/figure>\n<h3>Some facts<\/h3>\n<ul>\n<li>You get an average of 26 visible characters per tab if the user has 1-3 tabs open at around 1200px (<a href=\"https:\/\/css-tricks.com\/9778-screen-resolution-notequalto-browser-window\/\">average for this site<\/a>).\n<\/li>\n<li>All browsers maintain this 26 visible character average until about 5 tabs, then that number shrinks. At 6 tabs you get ~18 characters.<\/li>\n<li>IE 9 starts shrinking at 4 tabs and at 6 tabs only an average of 3 characters are shown per tab.<\/li>\n<li>Every browser shows favicons except Safari.<\/li>\n<li>Every browser puts tabs on the top (above URL bar) except Safari.<\/li>\n<\/ul>\n<h3>Some opinions<\/h3>\n<ul>\n<li>You don&#8217;t have much room, make it count.<\/li>\n<li>You can largely count on the favicon to identify your site so don&#8217;t start with site title, start with the next most significant thing. Unless you have a ton of Safari traffic (remember, your site&#8217;s stats are <a href=\"https:\/\/css-tricks.com\/9745-the-stats-that-matter-your-sites-stats\/\">the only ones that matter.<\/a>)<\/li>\n<li>Safari should get over it and put favicons in the tabs.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I opened up the same 6 tabs in current versions of all the desktop browsers, then took screenshots of the UI of just the tabs themselves.<\/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":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":2361,"url":"https:\/\/css-tricks.com\/jquery-ui-tabs-with-nextprevious\/","url_meta":{"origin":14358,"position":0},"title":"jQuery UI Tabs with Next\/Previous","date":"March 10, 2009","format":false,"excerpt":"Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next\/Previous buttons, so without even moving your\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/tabbedwithnextprevious.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":155224,"url":"https:\/\/css-tricks.com\/transformer-tabs\/","url_meta":{"origin":14358,"position":1},"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 &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286155,"url":"https:\/\/css-tricks.com\/tabs-its-complicated\/","url_meta":{"origin":14358,"position":2},"title":"Tabs: It&#8217;s Complicated&#x2122;","date":"April 19, 2019","format":false,"excerpt":"I've said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes. const button = document.querySelector(\".my-button\"); const element = document.querySelector(\".content\"); button.addEventListener(\"click\", function() { element.classList.toggle(\"sparkles\"); }); We could use that skill to build some tabs, right? Right. We got this.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/tab-key.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":13261,"url":"https:\/\/css-tricks.com\/large-file-on-cdn-or-small-local\/","url_meta":{"origin":14358,"position":3},"title":"New Poll: Large file on CDN or small file local?","date":"July 10, 2011","format":false,"excerpt":"The new poll is up (in the sidebar on the actual site, RSS folks) and it reads: Would you rather host a 200k file on a major CDN or a 20k file self-hosted? This requires a little explanation. Let's say the file in question is jQuery UI. On your site,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5841,"url":"https:\/\/css-tricks.com\/css3-tabs\/","url_meta":{"origin":14358,"position":4},"title":"CSS3-Only Tabbed Area","date":"March 8, 2010","format":false,"excerpt":"MORE CURRENT ARTICLE: Functional CSS Tabs Revisited When you think of \"tabs\", your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":201819,"url":"https:\/\/css-tricks.com\/functional-css-tabs-re-revisited\/","url_meta":{"origin":14358,"position":5},"title":"Functional CSS Tabs Re-Revisited","date":"May 14, 2015","format":false,"excerpt":"Update: We're redacting this article. Much of it was work originally done by Art Lawry and published on A List Apart in the article Radio-Controlled Web Design. We didn't appropriately credit that work. Apologies to Art and A List Apart. Further explanation and more about CSS tabs: Here at CSS-Tricks,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14358"}],"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=14358"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14358\/revisions"}],"predecessor-version":[{"id":14377,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/14358\/revisions\/14377"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=14358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}