How to make tabs using only CSS | Hacker News Reader

How to make tabs using only CSS

silvestarbistrovic.from.hr

79 pointsstarbist35 comments

While 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.

What accessibility problems, specifically? It's all operable and navigable by keyboard. It could be further enhanced with ARIA tab panel attributes.

Well the final example[1] isn't usable via keyboard at all

[1]http://codepen.io/CiTA/pen/ALVWzg

Sure it is, I did so before I posted.

I had to first click on one of the tabs before it started letting me use the keyboard.

but 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

Yes it is; I can switch between tabs just fine with arrow keys.

I have had a WCAG AA 2.0 audit failure doing this because this approach is not obvious to a sighted keyboard only use that space bar and arrow keys and not tab + enter is the control mechanism. Also a non sighted user will need hidden text before the tabs at a minimum to explain how they work.

If using the :target approach, I actually think it's an appropriate use of CSS and HTML. It's not a stretch to consider a tab as a fragment of the document, which can be accessed using the fragment identifier of the URI. After this, hiding the other fragments while showing the target one can also be considered a style choice which is, adequately, achieved via CSS.

Probably people will end up using JS for this, and that's OK, but I really think this approach actually fits the way standards "define" HTML and CSS.

Using 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.

I 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-targe...

I 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.

I 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

Ah, 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.

I did something similar and packaged it in a nice library: 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.

Here 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/

“Error establishing a database connection.” Aaaah, good old HN effect.

The site itself worked for me a few minutes ago, but sadly the tabs in the codepen did not.

They are implemented in the second codepen.

Jumping straight to the code samples, I found this confusing as well.

Thank 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.

While the site is down, my bet is hidden a checkbox with <label> tags and some fancy selectors (~ + and stuff).

I interpret "only CSS" as using semantic HTML and clever CSS.

Abusing tags would be "using HTML and CSS" or cheating.

Until the site is up again, here is the code linked in the article [1][2][3].

[1] https://github.com/maliMirkec/csstabs

[2] http://codepen.io/CiTA/pen/YGZyOm

[3] http://codepen.io/CiTA/pen/ALVWzg

I go to visit the page (all I have is uBlock Origin on) and I get this: http://imgur.com/a/SEapB

I don't think I'm going to be taking this CSS lesson.

You 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.

Properly-formatted CSS shouldn't be broken by uBlock. Nor should properly-formatted HTML.

Well 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.

> 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.

Hmm, 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.

It also renders fine in Firefox with default settings/filter lists.

The site is currently down (Error establishing a db connection)

That seems to link to another blog entry.

0 consideration for accessibility.

We hugged it to death!

Reply on news.ycombinator.com