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.