0

I'm using Firefox 52.9.0.

I'm trying to add a skip navigation link to a page. Currently, page looks like this:

/* Accessibility */
  /* Hide the skip to main content link unless it has focus */
body > a:first-child {
  background: inherit;
  position: fixed;
  left: 0px;
  top: -1em;
  transition: top 2s ease-out;
}
body > a::first-child:not(:focus) {
}
body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in;
}
<a href="#lorem">skip to main content</a>
<main id="lorem">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum... can't remember the rest, sorry.</p>
  <p>This CSS is mostly fine.</p>
</main>

(Click on the page and press Tab to see the effect.)

This looks fine, except the descender and underline are visible. In order to deal with this, I told the browser to change the text colour to transparent when it didn't have focus:

/* Accessibility */
  /* Hide the skip to main content link unless it has focus */
body > a:first-child {
  background: inherit;
  position: fixed;
  left: 0px;
  top: -1em;
  transition: top 2s ease-out;
  transition: color 2s ease-out;
}
body > a:first-child:not(:focus) {
  color: darkgoldenrod;
}
body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in;
  transition: color 0.1s linear;
}
<a href="#lorem">skip to main content</a>
<main id="lorem">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum... can't remember the rest, sorry.</p>
  <p>This CSS behaves strangely.</p>
</main>

(transparent is substituted for darkgoldenrod so it's easier to see the effect.)

The color transition works, but for some reason it's stopped the top transition from working!

Why is this, and how can I fix it?

wizzwizz4
  • 6,140
  • 2
  • 26
  • 62
  • The original problem was caused by the fact that you needed to start at `-1lh`, not `-1em`. Unfortunately, it's only 2018 and the `lh` unit doesn't exist yet. Oh well. Hey look, an interrobang. – Mr Lister Oct 20 '18 at 14:34
  • @MrLister I need IE11 to fail-usable, so I have to use old stuff anyway. Out of interest, would `lh` deal correctly with Zalgo text? (That's masses of combining diacriticals, if you didn't know.) I suspect not, since Zalgo overlaps lines below. – wizzwizz4 Oct 20 '18 at 14:38
  • `lh` is (or, will be) simply the computed size of the line height, so, no. – Mr Lister Oct 20 '18 at 14:40
  • @MrLister Ok, so I'll still need the `color` thing. Could I use `top: -1em; top: -1lh;` to have correct behaviour when it's supported? – wizzwizz4 Oct 20 '18 at 14:41
  • 1
    `top:-1.2em; top:-1lh;` should be better, since the default line height is about 1.2em. – Mr Lister Oct 20 '18 at 14:44

1 Answers1

4

Your second transition declaration erases, not adds to, the first one. This is the cascade at work.

You can't declare separate transitions additively using multiple transition declarations; you will need to group them into a single declaration like so:

body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in, color 0.1s linear;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356