loading...

Dev.to Interaction Bar

zcdunn profile image Zack Dunn ・1 min read

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);
}

Posted on Sep 19 '18 by:

zcdunn profile

Zack Dunn

@zcdunn

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.

Discussion

markdown guide
 
 

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

 

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