Dev.to Interaction Bar
Zack Dunn

Zack Dunn @zcdunn

About: Junior developer, mostly web. I work with Java, Spring, Javascript, React, CSS and a little Rust on the side. Webdev is my preferred domain and I'm interested in technologies that push it forward.

Joined:
Feb 6, 2018

Dev.to Interaction Bar

Publish Date: Sep 19 '18
7 3

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

Comments 3 total

Add comment