Firefox 4 Beta: Tab width CSS

Update: See also Tab Utilities. IMPORTANT: The code at the end of this post works again as of Beta 6 with browser.tabs.animate on false.

Firefox 4 does not allow you to change the width of your tabs through the about:config setting. You must add the CSS code yourself. Now, I’m not averse to picking up some code here and there; it’s fascinating. If I don’t know exactly how to put something, I can look it up. But here’s the problem: it’s a basic setting and the settings were already there. For the average user, who may well find any sort of code daunting, about:config would certainly be a lot quicker, if not simpler (even about:config isn’t apparent unless you like to mess around). It’s not broken; it’s not a bug. Why are you “fixing” it?

What irks me more is the attitude behind the reason given: “I don’t think the prefs are worth it.” That statement makes me uneasy beyond the tab issue, because it reinforces an assumption I felt they were making from the beginning: that they were the norm for all users. It was as if they thought everyone would be a developer and would automatically know where and how everything was.

The breezy “Oh, just put in the CSS if you really want it” makes me wonder if they’re going to do the same with other basic options down the line that may affect physical accessibility more than the tabs do. I’m not saying Firefox should stop being a geek’s browser; I learn things by tinkering with it. But not everyone is physically or cognitively able to be a geek. If you want the CSS for tab width, copy and adjust as needed:

.tabbrowser-tab:not([pinned]) {
max-width: 100px !important;
min-width: 40px !important;

UserChrome instructions:

1. Your userChrome folder (in XP; this probably varies) is located in C:/Documents and Settings/your name/Application Data/Mozilla/Firefox/Profiles.

2. Choose the default profile that comes up when you open that folder. Then open the Chrome folder. There should be a file called userChrome.example.CSS.

3. Open this file and paste whatever snippet you want to use.

4.Go to File, then Save As. Name the document userChrome.CSS.
Anytime you want to make a change to how Firefox looks or acts, this will be the file in which you will paste the script.

This entry was posted in Disability, Technology and tagged , . Bookmark the permalink.

8 Responses to Firefox 4 Beta: Tab width CSS

  1. olibu says:

    This CSS is not working anymore with Firefox 4 beta4. Closed tabs will still be visible!

  2. hand2mouth says:

    Yes — I noticed that when I started up this morning. Dang it…

  3. David Szego says:

    Thanks for the hints here… I turned it into a nice “Always AppTab” chrome if you’re interested. Keeps the tabs minimal, expands them if selected or hovered on. Looks great on a Mac! Please post tweaks!

    /* Disable Container box for "List all Tabs" Button */
    .tabs-alltabs-box {
    display: none !important;
    /* ==== TAB SPINNER ==== */
    /* Show tab loading indicator while the tab is loading */
    .tabbrowser-tabs *|tab[busy] .tab-icon-image {
    display: -moz-box !important;

    /* ==== TAB TEXT ==== */
    /* Shrink tab text by 20% */
    .tabbrowser-tabs .tab-text {
    font-size: 80% !important;

    /* ==== FAVICONS ==== */
    /* Show favicon on tabs */
    .tabbrowser-tabs .tab-icon-image {
    opacity: 1.0 !important;
    display: -moz-box !important;
    -moz-box-ordinal-group: 2 !important; // Left side
    /* But don't show default image (i.e. no favicon for site) */
    .tabbrowser-tabs *|tab:not([image]) .tab-icon {
    display: none;

    /* If the tab isn't selected, hide the text, make it narrow */
    .tabbrowser-tab:not([selected="true"]) > .tab-text {
    visibility: hidden !important;
    min-width: 1px !important;
    width: 1px !important;
    display: none !important;
    .tabbrowser-tab:not([selected="true"]) {
    min-width: 42px !important;
    width: 42px !important;

    /* If the tab is selected, show the text, make it min 256px wide */
    .tabbrowser-tab[selected="true"] {
    max-width: 400px !important;
    min-width: 150px !important;
    width: 100% !important;

    /* If the tab isn't selected, but is being hovered on, show the text, make it min 128px wide */
    .tabbrowser-tabs *|tab:hover {
    max-width: 400px !important;
    min-width: 150px !important;
    width: 100% !important;
    .tabbrowser-tab:not([selected="true"]):hover > .tab-text {
    display: visible !important;
    visibility: visible !important;
    min-width: 100px !important;
    width: 90% !important;
    display: block !important;

  4. hand2mouth says:

    Nice. Thanks!

  5. yrow says:

    it works for me in 4.0b6pre with browser.tabs.animate set to false 🙂

  6. hand2mouth says:

    Excellent to know. Thanks! 🙂

  7. misterhaan says:

    i had this in my user.js to make the tabs work better for me before firefox 4:

    user_pref("browser.tabs.selectOwnerOnClose", false);
    user_pref("browser.tabs.tabMinWidth", 30);
    user_pref("browser.tabs.closeButtons", 3);

    the min width doesn’t work anymore in ff4, but your post helped show me what to put in userChrome.css to get my minimum widths back. there’s a reason we have favicons and tooltips on the tabs!

    .tabbrowser-tab:not([pinned]) {
    min-width: 30px !important;

  8. Pingback: Tab Utilities revisited: tab widths, new tabs, accessibility | Hand to Mouth: Assistive Technology

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s