Does this CSS rule make any sense or is it just poorly written

Question

I'm working with some web page files I got from the internet and I notice that one of the CSS files has this rule:

.persona{
      font-variant: small-caps;
      text-transform: lowercase;
}

small-caps suggests a smaller font and to upper case the text. lowercase suggests to lower case the text.

Running this in the browser suggests that upper case wins.

But more than that, it begs the question of whether this is a very poorly designed rule or is there some situation where putting these 2 opposing actions together like this makes some sort of sense?

Answer 1

text-transform:lowercase does lowercase all the text, but small-caps is a font style that uses uppercase looking glyphs for both upper and lower case text. An uppercase letter in small-caps is generally larger than a lowercase one, but they are otherwise the same glyph.

See in the demonstration below how small-caps text differs from lowercased small-caps:

.normal span {
}

.lower span {
    text-transform: lowercase;
}

.smallcap span {
    font-variant: small-caps;
}

.both span {
    text-transform: lowercase;
    font-variant: small-caps;
}

div {
    margin: 2em;
}

<div class="normal">
"normal"<br>
<span>The Quick Brown Fox Jumps Over The Lazy Dog</span>
</div>

<div class="lower">
"lower"<br>
<span>The Quick Brown Fox Jumps Over The Lazy Dog</span>
</div>

<div class="smallcap">
"smallcap"<br>
<span>The Quick Brown Fox Jumps Over The Lazy Dog</span>
</div>

<div class="both">
"both"<br>
<span>The Quick Brown Fox Jumps Over The Lazy Dog</span>
</div>