Anelok vs. CSS

Werner Almesberger werner at almesberger.net
Tue Jul 28 15:27:13 UTC 2015


Paul Boddie wrote:
> With CSS less is more: as soon as you start to tweak, things
> automatically get a lot harder.

What bothers me the most are those things that just happen to have
no effect, and you're never quite sure why. The "inspect element"
in Chromium or Firefox helps, but still leaves questions unanswered.

> I've taken a look. Several hours later, I achieved the two things I intended 
> to achieve: fix up the stuff you asked about, doing it in a different way; 

Hmm, with Firefox, the boxes are now at the right place:
http://downloads.qi-hardware.com/people/werner/anelok/tmp/web-menu/web-menu-2-firefox.png

But still fairly tall (taller than with Chromium and rekonq) and the
"Personal Password Safe" line is even lower than before.

With Chromium, there is now a gap between boxes and rule:
http://downloads.qi-hardware.com/people/werner/anelok/tmp/web-menu/web-menu-2-chromium.png

And rekonq has them overlap by one pixel:
http://downloads.qi-hardware.com/people/werner/anelok/tmp/web-menu/web-menu-2-rekonq.png

Also, Chromium and rekonq have "Personal Password Safe" visibly
lower than the top of the page, though it's not as bad as with
Firefox.

Don't know what happens on McPompous :)

> change the diagram effects to use plain CSS.

Ah, that looks interesting. Works with Chromium and Firefox but neither
overlay images nor text show at all on rekonq. (My JS version works on
all of them.)

The positions also seem to be slightly off. I wonder if that's an effect
of killing all the JS - the last function adjusts the position of
descriptions with respect to the beginning of the image. So if there's
any material above it, things still end up at the right place on the
page, no matter what size the things above have. Not sure if that is
the issue, though, or if it's simply some difference in the coordinates.

> (Why this kind of thing takes hours is because Firefox can behave stupidly 
> like expel block elements from a map element because the map element is
> inside a paragraph element.

Fun :-)

> but I have a personal grudge against scripts

Yeah, I don't particularly like them either. If we can get rid of
them or at least reduce their use, that would be good.

> Hopefully, none of this will cause further browser hassles. I've only tested 
> on Firefox so far, but variations of my changes have been tested in other 
> contexts on the major browsers, so they should in principle work. ;-)

The menu redesign seems to need a bit more attention :)

By the way, all this is generated by the scripts under
https://gitlab.com/anelok/anelok/tree/master/web

So if you edit these instead of the generated HTML, you can avoid a
lot of redundant substitutions.

Thanks !

- Werner



More information about the discussion mailing list


interactive