6 ms·
Why do you need z-index? /* ==UserStyle== @name HN sticky topbar @namespace https://news.ycombinator.com/user?id=wizzwizz4 @version
by wizzwizz4 1y ago
Why do you need z-index?
/* ==UserStyle==
@name HN sticky topbar
@namespace https://news.ycombinator.com/user?id=wizzwizz4
@version 1.0.0
@description Pins the HN topbar to the top of the viewport.
@author wizzwizz4
==/UserStyle== */
@-moz-document domain("news.ycombinator.com") {
#hnmain > tbody > tr:first-child {
position: sticky;
top: 0;
}
}
https://addons.mozilla.org/firefox/addon/styl-us/ https://addons.mozilla.org/firefox/addon/styl-us/
- wizzwizz4 1y agoAdding a z-index was a hack to workaround the .rotate180 class creating a new stacking context, causing downvotes to be rendered over the sticky topbar. This is hella overengineered. https://news.ycombinator.com/triangle.svg https://news.ycombinator.com/triangle.svg is 131 bytes! <svg height="32" viewBox="0 0 32 16" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m2 27 14-29 14 29z" fill="#999"/></svg> Meanwhile, the relevant section of https://news.ycombinator.com/news.css https://news.ycombinator.com/news.css is much larger: .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } Just having a separate triangleup.svg and triangledown.svg would save bandwidth and rendering time, and make naïvely-written userstyles work properly! I thought Hacker News, of all websites, would be free from dodgy overengineered CSS…
- wizzwizz4 1y agoThis should be easy, but data URIs are fighting me. I've shoved another image there instead. Maybe someone else can get this working properly? /* ==UserStyle== @name HN sticky topbar @namespace https://news.ycombinator.com/user?id=wizzwizz4 @version 1.1.0-alpha @description Pins the HN topbar to the top of the viewport. @author wizzwizz4 ==/UserStyle== */ @-moz-document domain("news.ycombinator.com") { #hnmain > tbody > tr:first-child { position: sticky; top: 0; } .votearrow.rotate180 { transform: none; background-image: url(y18.svg); } }