How to use All-Caps in First Line of paragraph in Webkit Browsers (Chrome, Safari)

Question

The CSS property text-transform and the pseudo-element ::first-line have been part of CSS spec for a long time, but for some reason unknown to humanity, Webkit browsers still don't allow these to be combined. The combination works seamlessly and as expected in Firefox and "modern versions of IE" (which used to be an oxymoron).

Is there a workaround for this? (ideally without utilizing javascript)

I would like to use CSS to style the first line of a paragraph to be in all caps, and it should work in Chrome as well as Firefox.

Answer 1

You can get close by using font-variant: small-caps;, if you modify the font size of the first line and first letter (assuming the first letter is the only one capitalized):

div {
  font: 16px verdana;
}

div::first-line {
  font-variant: small-caps;
  font-size: 150%;
}

div::first-letter {
  font-size: 70%;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 2

OK, using Rick Hitchcock's answer, I have a CSS work-around for this. By combining font-variant: small-caps and increasing the font size, you can get webkit browsers to deliver this basic look. small-caps isn't a good-looking typography for some fonts, and your mileage may vary. I'm wrapping my CSS in a webkit-specific media-query so that the simpler text-transform will take effect on non-webkit browsers.

This code is working for me:

 p.opener::first-line {
    text-transform: uppercase;
 }  

...

/* Fix Webkit ::first-line issues */
@media screen and (-webkit-min-device-pixel-ratio:0) {  
  p.opener::first-line {
     font-size:24px;
     font-variant: small-caps;
  }  
  p.opener::first-letter {
     font-size:19px;
  }  
}