Dev.to Interaction Bar

#meta #design #css

I'm not a fan of persistent chrome in apps, especially on mobile. I don't like having screen space taken and chrome distracts me from reading the actual content. While I can and do use extensions on desktop to get rid of the bar, Chrome for Android doesn't support extensions so I'm stuck with the bar.

My proposal is that Dev.to introduce CSS variables to control the position of the interaction bar. CSS variables, or custom properties, are set in a ::root rule and always begin with --.

::root {
    --interaction-bar-position: fixed;
}

Their value can be any valid CSS value. To use the variable, use the var function.

.container .article-actions {
    position: var(--interaction-bar-position);
}

Then override the variable only in specific rules.

.container .article-actions.relative {
    --interaction-bar-position: relative;
}

And that's it. By default, the interaction bar will be fixed at the bottom. A simple checkbox in settings could control the presence of the relative class on the article-actions element.

Here's the complete CSS.

::root {
    --interaction-bar-position: fixed;
}

.container .article-actions.relative {
    --interaction-bar-position: relative;
}

.container .article-actions {
    position: var(--interaction-bar-position);
}