7 ms·
How to make tabs using only CSS
- el_duderino 10y agoThe site is currently down (Error establishing a db connection)
- kaio 10y agoThat seems to link to another blog entry.
- Diti 10y ago“Error establishing a database connection.” Aaaah, good old HN effect.
- cygned 10y agoWhile the site is down, my bet is hidden a checkbox with <label> tags and some fancy selectors (~ + and stuff).
- tomtomtom777 10y agoI interpret "only CSS" as using semantic HTML and clever CSS. Abusing tags would be "using HTML and CSS" or cheating.
- guessmyname 10y agoUntil the site is up again, here is the code linked in the article [1][2][3]. [1] https://github.com/maliMirkec/csstabs https://github.com/maliMirkec/csstabs [2] http://codepen.io/CiTA/pen/YGZyOm http://codepen.io/CiTA/pen/YGZyOm [3] http://codepen.io/CiTA/pen/ALVWzg http://codepen.io/CiTA/pen/ALVWzg
- TazeTSchnitzel 10y agoUsing a fragment identifier (the thing after #) and a :target selector means people can link to a particular tab, browser history can reflect changing tab, and the link will work without CSS and be accessible.
- pimterry 10y agoI really like :target too, but if you have a page longer than your browser it always jumps you down to the tab you've just opened, a bit annoyingly. The rest of the built-in behaviour of :target is way nicer though, and the HTML & CSS is really clean. I've actually just spent a little while this afternoon playing with this, since it is so much better. I've got a nice new workaround that'll make this work nicely if you'd prefer to use :target too: https://medium.com/@pimterry/better-css-only-tabs-with-target-7886c88deb75#.j4e9hfot1 https://medium.com/@pimterry/better-css-only-tabs-with-targe...
- test6554 10y agoWhile you can add some interactivity without JavaScript, it doesn't necessarily mean you should do this. If you ask yourself, what is the purpose of CSS vs JavaScript, you will see that this type of functionality probably falls outside the scope of what CSS is meant to do. Also it may take extra time to explain how this works to every new developer. Also accessibility.
- extra88 10y agoWhat accessibility problems, specifically? It's all operable and navigable by keyboard. It could be further enhanced with ARIA tab panel attributes.
- grahamel 10y agoWell the final example[1] isn't usable via keyboard at all [1]http://codepen.io/CiTA/pen/ALVWzg http://codepen.io/CiTA/pen/ALVWzg
- extra88 10y agoSure it is, I did so before I posted.
- deadcast 10y agoI had to first click on one of the tabs before it started letting me use the keyboard.
- grahamel 10y agobut that's tabbing with the left/right keys instead of the tab key, which is how I tab through a website ignoring the fact that there's no :active styling in the css, there is nothing to indicate that to change the tab you need to use different keys
- TylerH 10y agoYes it is; I can switch between tabs just fine with arrow keys.
- smpetrey 10y agoWe hugged it to death!
- danielvinson 10y agoI really don't like this. If you are creating tabs with pure CSS, the only real reason to do so is for educational purposes, especially considering this is an article about code and not just code. Then the author decides to use SCSS and some very non-standard flexbox grid layout library... so that nobody can learn from this? Nobody who is just learning CSS will understand SCSS syntax, and nobody wants to learn a new library just to understand an article about CSS.
- caub 10y agoI don't like SCSS too, but calm down, you can see compiled CSS version with the right dropdown This trick with radio input is old, but good to know
- danielvinson 10y agoAh, I didn't see that button. Looks like it doesn't show up unless you hover over the code which I didn't do. The author really should have mentioned that.
- binthere 10y ago0 consideration for accessibility.
- lightedman 10y agoI go to visit the page (all I have is uBlock Origin on) and I get this: http://imgur.com/a/SEapB http://imgur.com/a/SEapB I don't think I'm going to be taking this CSS lesson.
- recursive 10y agoYou chose to install a plugin that modifies documents you see in your browser. You certainly have that right. But it's not anyone else's fault if that plugin modifies documents you see in your browser.
- lightedman 10y agoProperly-formatted CSS shouldn't be broken by uBlock. Nor should properly-formatted HTML.
- recursive 10y agoWell then, one of two things happened. Either you visited a site with improperly formed html or css, or uBlock doesn't work like it should.
- deleted 10y ago[deleted]
- deleted 10y ago[deleted]
- gorhill 10y ago> You chose to install a plugin that modifies documents you see in your browser. You are jumping to a conclusion on a mere speculation. The site works fine with uBO + default settings/filter lists. I could not even "break" the site using "medium mode", which blocks all 3rd-party scripts/frames.
- plingamp 10y agoHmm, I also have uBlock Origin on, and the website renders perfectly for me (on chrome). I think this is might be a firefox specific issue.
- franciscop 10y agoI did something similar and packaged it in a nice library: http://picnicss.com/documentation#tabs http://picnicss.com/documentation#tabs However, the tabs will be discontinued in the next major version; the html markup becomes way too ugly, unmanageable and rigid. It started as an experiment but sure enough, now that I don't consider the library itself an experiment I think it's time to clean up the mess.
- pseudosavant 10y agoHere is a much easier to follow example of CSS only tabs and content. The CSS is much simplier than the SCSS of op's post. https://output.jsbin.com/hotezag/ https://output.jsbin.com/hotezag/
- starbist 10y agoThank you for your feedback and I apologize for the database issues. Accessibility is out of scope for this article, but with some additional work, it could be done, I'm sure. Maybe I should write about that in my upcoming articles. Also, I've provided a link to Github demo so everyone could see the full code.