Drop Caps on the Web Using Initial Letter

Designers have struggled for years to do robust drop caps on the web. We've tried a series of techniques, but in the end, the enlarged letter usually ends up mis-aligned with the content surrounding it. What's the deal? Well, now we have a new CSS property, Initial Letter, that will make it easy to create a drop cap, an enlarged cap, an initial letter that lines up in every browser.
When or why would you want to use a drop cap? How can you do it using new CSS?
Examples:
labs.jensimmons.com/2016/examp...
labs.jensimmons.com/2016/examp...
labs.jensimmons.com/2017/03-00...

[@roeltz]

Jen is like ASMR for frontend developers.

[@SuperHazzleDazzle]

Yes!
OMG! I can listen to her talk all day long!

[@RealToughCandy]

This kind of CSS is the bridge between lush print graphics (like drop caps) and the brittle Internet. Thank you Jen for showing us this!

I just found your channel!
Great content! Subscribed!
I realize now I missed your way of explaining things and your mannerisms!
Avid follower of the Big Web Show here.🙋‍♂️

[@tim_arterbury]

These are some of the most useful CSS videos I’ve seen. Thank you for these! I got hooked after watching one on CSS grid. Makes me want to start using grid in production.

[@GiuliaGalastro]

I have just started teaching myself to code, and your videos are hugely inspirational! Hopefully one day I'll be able to create something one tenth as elegant looking as this!

[@imrannazir6931]

You have such great delivery, well done 👍

[@8ytan]

I just wish it was supported by browsers other than Safari :(

[@gdublive]

Very awesome! Any ideas when this might be supported on other browsers than just Safari? Thanks for the great videos!

[@lookintomyeyes2681]

why is this feature not out to the developers already ??

[@lookintomyeyes2681]

can we use css clip path and css shape outside around this first letter?

[@roceb5009]

So if you specify both a font size and initial-letter, does initial-letter override the font size?

[@nirmalsh1]

Nice video

[@teguhpurwanto3758]

good

[@techtipsuk]

Sometimes I see code examples that use one colon sometimes two both seem to work, does it matter?

[@teacherbuknoy]

They have a difference actually. Single colons are for "pseudo-classes", and double colons are for "pseudo-elements".

[@Dahon5]

How about a drop cap with text shadow?

[@LayoutLand]

You know, I'm not sure if it works yet or not. Once Initial Letter is implemented properly in browsers, it should work. As I say in the video, right now the only implementation is the -webkit prefixed experimental implementation in Safari. And it's not complete. So it might not work with text shadow. You should code up a demo and try it out. Does it work?

[@filip-m]

Can you do a css course on Udemy pls :)

[@Cognitoman]

hmmm....

[@khushbudevi3548]

Hi

[@michaelharings9913]

12% usuable? I don't use safari so :-( But thanks for videos anyway. Drop Caps have been in use forever graphically, check out Illuminated Bibles for example.