Using an emphasized initial letter is a technique that has been used for
centuries. Let’s dive in to see some ways you can apply it to your
project to help guide your reader with visualhierarchy.
We have some pretty great new(ish) properties we can use in CSS to make
our designs more unique and help provide useful visual cues for your
audience. One of these newer techniques can be used to create the drop
caps that we know and love often found in print design. This technique
has been used for centuries to bring emphasis to a new section of text,
and we finally have a decent way to easily apply drop caps withCSS.
First you need an element or class to use as the target, and then we
will append the ::first-letter pseudo element. The property is
initial-letter and the value is the number of lines you would like
your initial letter toexpand.
This code would give us a drop cap seven lines tall, like the large
letter “I” in thisexample:
A few months ago we briefly introduced Feature Queries when we wrote
about CSS Grid Layout. Feature Queries will play an important role in
using initial-letter today. As a reminder, a Feature Query will ask the
browser to check for support for a specific property andvalue:
@supports(property: value){property: value;}
When we wrap our block in a Feature Query, we can add additional values
that we would only want applied ifinitial-letter is supported.
The specific number used in the @supports line for initial-letter does
not matter unlike properties that require a keyword like
(display: grid).
As of December 2016, only Safari supports initial-letter. Fortunately,
you can still use this as an enhancement and fake it ‘til you make it to
achieve a similar outcome. By using the operator not we can tell
browsers that do not support initial-letter to use alternatestyles.
These “magic numbers” are not universal so if you change a value or
font-family you will likely have to edit these values. We could probably
spend some time to calculate the line-height and font-size more
programmatically, but it will not take into account the x-height of the
typeface you choose. Here is a screenshot of the resulting fallback andenhancement:
Another optional value we can use for our initial-letter property will
instruct the browser where to place the initial cap. After our drop cap
height value we will add a space and the number of lines we want our cap
to drop. A value equal to the initial height value is thedefault.
Learn how to leverage Web Platform Tests to ensure your polyfills are implementing upcoming browser features correctly, including how to generate a comprehensive report of failing/passing tests on each change.
OddBird sponsored Python Web Conference 2023 and sent me to attend. In this article I showcase my favorite talks and activities from this excellent online event, including a list of useful resources for web application security, introductions to new PaaS providers, and a comparison of the most popular Python web frameworks.