DEV Community 👩‍💻👨‍💻

drazik
drazik

Posted on

Configure your browser's default tab size

I always used space for indentation. But lately I got convinced that tabs are better. So I switched to it for my new projects, enforced by Editor Config and Prettier.

My preference is one tab equals two spaces. But by default my browser's (Firefox) default tab size is 8. So I wanted to tweak it.

Unfortunately, I couldn't find a setting related to it. But I found the CSS tab-size property. This property existence and good browsers compatibility means that if I can apply tab-size: 2; by default on all pages I visit, my preference will by applied.

To do that, I downloaded the Stylus extension and created a custom stylesheet with the following CSS code:

body {
  tab-size: 2;
}
Enter fullscreen mode Exit fullscreen mode

And voilà 🎉. Now I simply author my source code with tabs, my editor is configured to respect my preference for tab size and my browser also respects it. And every person that reads my code can also just set their tab size to their preferred value without me proclaiming "your should read it this way".

PS: please don't fight between spaces and tabs here. This post is not intended to elaborate on this question, but to help people looking for ways to configure their browser's default tab size.

Top comments (0)

🌚 Life is too short to browse without dark mode