Inline code tags inside a tags have incorrect styling

[impressivewebs]

How can we reproduce this bug?

1. Put HTML <code> tags inside of a hyperink

What did you expect to happen?
Portions of a paragraph wrapped in <code> tags that are inside links should appear like links.

What happened instead?
The portions of the paragraph wrapped in <code> tags do not appear like links.

Test case:

Here is a CodePen demo using Foundation 6

Notice in the 2nd paragraph, the term "addEventListner" is inside code tags in the HTML, but it's also inside a link. It appears as if it's not inside a link, so the rest of the link looks like two links. The term "removeEventListener" in that same paragraph is also inside a link, but it does not look like a link at all because it's the only thing linked.

This can be fixed by adding the following code:

a code {
  color: inherit;
  background: inherit;
  border: inherit;
  padding: inherit;
}

Here is a corrected demo

You could also do all: inherit, but I'm not sure if browser support is good enough for Foundation to use that. This also happens in Bootstrap 3 and 4, and I've filed an issue with them too. I've tested this only in Foundation 6.2.3.

[ncoden]

Hi @impressivewebs,

This is a beautiful example of why it is a bad idea to apply graphical CSS properties automatically. In some case, we don't want these properties to be applied, and it is very hard to remove them (poke @kball).

But I don't think it would be a good idea to add a special case (a code) above it to reset the unwanted property. It would not be clean, nor maintainable.

I would advice to:

• Add .link, the current link automatically applied on a.
• Add .code, the current code box.
• Add a scope .s-code to locally automatically apply .code on code.
• Remove graphical properties from code.

So in your example, you could use:

<p>
  Some text and a <code class="code">code block</code>.
</p>

<p>
  Then a
  <a href="#">
    link with a
    <code>code tag without graphical properties</code>
  </a>.
</p>

Or (edit, it doesn't work. see below)

<div class="s-code">
  <p>
    Some text and a <code>code block</code>.
  </p>

  <p>
    Then a
    <a href="#">
      link with a
      <code class="link">code tag without graphical properties</code>
    </a>.
  </p>
</div>

What do you think ?

[impressivewebs]

@ncoden Yep, that sounds reasonable. I had a feeling you probably wouldn't want to use a descendant selector to correct this. The other option would be to apply the original inline code styles using p>code, so that way it's only immediate children of paragraphs, but I suspect you'd have the same maintainability issues there too, and it might not cover all cases correctly.

But I would lean towards your 2nd solution because it seems strange to have to add a class of "code" on most and then leave it off when it's inside a link. I don't know if anyone's going to remember that. Better to have the "link" class on the edge case scenario.

[ncoden]

Edit: The second solution would not works. .s-code code has a specificity of 011 and .link a specificity of 010. So .link will not overwrite the .s-code code properties.

And scopes are not really made for that. It is a way to simply apply properties inside a markup with a particular semantic, that should not be customized.

In addition the classes proposed above (except s-code), I can only advice to do not automatically apply properties. It is how Github and MDN handle a code inside a link. For Github, code does not define its own color.

@kball I would like your opinion on this.

[kball]

@ncoden I think this makes sense; we want to move towards only applying styles by class, not by selector.

I'm interested in learning more about the idea of .s-code... we're still playing with these ideas of scoping modifiers (as discussed in #9098)... would we use something like that to apply a set of styles on various elements inside a code element? What would that set of styles be? Is there an existing set of styles here?

[ncoden]

In this case, this is a scope, not a scoping modifier. It is useful, but does not resolve this particular problem. The set of styles would be simple the same, but not applied by default, only inside the scope.

It is because of a website, you do not want to have a background (& cie) on all your <code>. Only the ones, for example, inside your #article section.

For this issue, I thought about do not setting a default color of code, but we could also simply move the a declaration block after the code one. It would fix at least the color.

@impressivewebs What do you expect from a code ? Should it have no properties at all, or only the same color as the link ?

[colin-marshall]

@ncoden please check the status of this when you have a minute. Thanks.

[ncoden]

hmmm this may be resolved by #10907

[DanielRuf]

Will be part of Foundation 6.6 as it is not yet part of any release.

[DanielRuf]

This is not fixed by the PR as it does not solve this use case.