Now Reading
A Firefox-only minimap | Stefan Judis Internet Growth

A Firefox-only minimap | Stefan Judis Internet Growth

2023-07-17 07:44:09

Up to date at

Studying time

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.

Minimap on

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:

See Also

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!

Source Link

What's Your Reaction?
In Love
Not Sure
View Comments (0)

Leave a Reply

Your email address will not be published.

2022 Blinking Robots.
WordPress by Doejo

Scroll To Top