[csswg-drafts] [css-pseudo] ::first-line Specs & Implementation

OxyDesign has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo] ::first-line Specs & Implementation ==
Specs: https://www.w3.org/TR/css-pseudo-4/#first-line-pseudo

The part of the specs related to the issue raised:

```
The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:

- all font properties (see [CSS3-FONTS])
- the color and opacity properties (see [CSS3COLOR])
- all background properties (see [CSS3BG])
- any typesetting properties that apply to inline elements (see [CSS3TEXT])
- all text decoration properties (see [CSS3-TEXT-DECOR])
- any inline layout properties that apply to inline elements (see [CSS3LINE])
- any other properties defined to apply to ::first-line by their respective specifications
```

I'm opening this ticket because I've recently used the `::first-line` pseudo element and realized that the `line-height` property for that pseudo element:
- is implemented in a different way in each browser
- doesn't behave as I was expecting (inline VS block)

A short code sample to explain: https://codepen.io/OxyDesign/pen/bc9238f85b871ba1059bc43c953c7a46
(The pseudo element `::first-line` has a smaller `line-height`)

- Chrome (63) applies the reduced `line-height`
- Firefox (58) doesn't apply the reduced `line-height`
- Safari (10) applies the reduced `line-height` but only if the line is not broken with a `<br>`, in that case it doesn't apply the reduced `line-height`
- Internet Explorer (I could only have a quick look at 9, 10 and 11) seems to follow the same logic as Chrome

So that might not be really clear on that point because each browser seems to have its own interpretation.

The second point is that the specs says that it should "behaves similar to that of an inline-level element". I was expecting this to behave as a block-level element. I understand that `::first-letter` should behave as an inline-element as it's part of the text content of a block and is just a part of the line. But `::first-line` is clearly supposed to use the whole width available. Anything that is on this line is included in the `::first-line` definition, therefore should behave like a block in my humble opinion.

The code samples shows that the first line has a smaller `font-size`, so indeed I wanted to apply a smaller `line-height` which is not applied by FF and (partially) by Safari because as an inline-level element it shouldn't. But I think this behavior would make only sense for the `::first-letter` as it's part of a line and we don't want the line to be shrink by the `::first-letter`'s `line-height`. But in the `::first-line` case there is no possibility that any other content would be in the same line without being a part of the `::first-line` pseudo element so that shouldn't behave like that I think.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2282 using your GitHub account

Received on Tuesday, 6 February 2018 23:41:04 UTC