DEV Community

Zack Dunn
Zack Dunn

Posted on

Dev.to Interaction Bar

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;
}
Enter fullscreen mode Exit fullscreen mode

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

.container .article-actions {
    position: var(--interaction-bar-position);
}
Enter fullscreen mode Exit fullscreen mode

Then override the variable only in specific rules.

.container .article-actions.relative {
    --interaction-bar-position: relative;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
joehobot profile image
Joe Hobot

Have you tried adding it as PR ?
github.com/thepracticaldev/dev.to

Collapse
 
zcdunn profile image
Zack Dunn

Thanks! If I get some free time, I'll submit it

Collapse
 
joehobot profile image
Joe Hobot

Just fork it, make your changes you posted here . and submit it :)