
How to make tabs using only CSS - starbist
https://silvestarbistrovic.from.hr/en/articles/how-to-make-tabs-using-only-css/
======
test6554
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.

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

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

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

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

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

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

~~~
pimterry
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...](https://medium.com/@pimterry/better-css-only-tabs-with-
target-7886c88deb75#.j4e9hfot1)

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

~~~
caub
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

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

------
franciscop
I 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
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/](https://output.jsbin.com/hotezag/)

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

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

~~~
mullsork
They are implemented in the second codepen.

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

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

~~~
guessmyname
Until 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)

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

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

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

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

~~~
kaio
That seems to link to another blog entry.

------
binthere
0 consideration for accessibility.

------
smpetrey
We hugged it to death!

