2015-09-15

ucfirst()

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 a manner: "Start page," "Current news," or "Contact us." This way I cover the situation not supported by CSS, while all the 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, while 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). (Not true anymore.)

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