Anelok vs. CSS

Paul Boddie paul at boddie.org.uk
Tue Jul 28 17:00:15 UTC 2015


On Tuesday 28. July 2015 17.27.13 Werner Almesberger wrote:
> 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.

Firefox seems to have a better inspector, but even playing with the values 
(directly in Firefox) doesn't always give a good indication of what needs to 
be done. The gaps or overlaps between the menu items and the rule are a good 
example of this: Firefox wants to position the rule on the lowest pixel line 
of the menu; Chromium wants to position it on the following pixel line. 
Satisfy one and the other thinks you have one pixel too many or one pixel too 
few...

> > 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

I usually give up and choose appropriate colours to cover up overlaps. Satisfy 
one browser and the other won't be happy. Some people would start defining the 
pixel coordinates of everything at this point.

> 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.

Visibly lower meaning that it's not pushing up against the top of the page? I 
see that you adjust the position upwards by 4 pixels, which I didn't retain, 
so that's probably why that is.

> Don't know what happens on McPompous :)

Fortunately, a lot of these things use WebKit of some kind these days.

> > 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.)

They don't work at all on my Debian-supplied Chromium. That could be because 
I'm using images within the map element that refer to the map element, 
although it's more likely to be a lack of support for the "general sibling" 
selector (the ~ selection operator in CSS).

> 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.

It's probably a padding/margin thing. Maybe setting them to zero on #dwg-
container helps.

> > (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.

Indeed.

> > 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.

Well, I've tried to simplify the definitions that are there, and things should 
be inherited or referenced appropriately. There shouldn't be much of a need 
for repeating things over and over, although a script can do that as much as 
it likes, of course. But that may make understanding the result a bit more 
difficult.

Paul



More information about the discussion mailing list


interactive