ucfirst() in CSS

CSS gives us an opportunity to transform text. The offer is as stands:

.offer-1 {
    /* first letters of every word big */
    text-transform: capitalize;
}
.offer-2 {
    /* all letters big */
    text-transform: uppercase;
}
.offer-3 {
    /* all letters small */
    text-transform: lowercase;
}
.offer-4 {
    /* no change */
    text-transform: none;
}

Seems a lot, but there is no “first letter big, rest small” option per se. That’s why, when doing buttons or options in menu, I usually write in manner, “Start page”, “Current news,” or “Contact us.” This way I cover the situation not supported by CSS, and all others can be achieved by text-transform. Also, text is more legible without style (lost stylesheet, Internet archive, slow connection etc.).

CSS solution

And yet, writing the above I experienced some kind of enlightment, and came up with CSS solution:

.ucfirst {
    text-transform: lowercase;
}
.ucfirst:first-letter {
    text-transform: uppercase;
}

<p class="ucfirst">QuIcK bRoWn FoX jUmPeD oVeR lAzY dOg.</p>

Let’s run it:

QuIcK bRoWn FoX jUmPeD oVeR lAzY dOg.

I guess it would make a nice PostCSS plugin. Anyway, the advantage is it would be copied to clipboard as seen (I could swear that it wasn’t like that a few years back).

I’ll stick to my practice, as it keeps things simpler, but in case of emergency the above solution is valid and working.