A Firefox-only minimap | Stefan Judis Internet Growth
- Up to date at
- Studying time
- 1min
Greetings! ????
In the event you found this web page, you are a part of the few Firefox desktop customers on the market (market share is just 4% proper now) and questioned how my weblog posts’ minimaps are made.
In the event you’re not utilizing Firefox, that is how the minimap seems to be like.
Firefox is the one browser that helps the fancy element() CSS function (with a vendor prefix, however hey ????♂️). The operate permits you to show photos of arbitrary HTML components in your web page! And the perfect factor is: it is dwell! Strive choosing some textual content or scroll round to see lazy-loaded photos kicking in. It is magic!
The CSS to outline one other HTML aspect as background picture is the next:
mini-map .screen-image .canvas {
background: white -moz-element(#foremost) no-repeat scroll heart heart / include;
}
There’s additionally some JavaScript to maneuver the minimap’s present viewport field, however the CSS one-liner is accountable for portray one other DOM node. Use -moz-element and name it a day!
And with that, preserve rocking (and utilizing Firefox)!
Appears like this put up made it to HN #1. In the event you get pleasure from Frontend information and are into emails, take a look at Web Weekly!