[css-display] Implement the multi-keyword syntax for the 'display' property

NEW
Unassigned

Status

()

P3
enhancement
5 years ago
7 months ago

People

(Reporter: mats, Unassigned)

Tracking

(Blocks: 2 bugs, {dev-doc-needed, DevAdvocacy})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [DevRel:P1], URL)

(Reporter)

Description

5 years ago
This bug is only intended for making 'display' a shorthand, not add any
new values we don't currently support.  (Bug 907396 will add support
for 'contents'.)
(Reporter)

Updated

5 years ago
No longer blocks: 907396
> This bug is only intended for making 'display' a shorthand, not add any
new values we don't currently support.

Then the title is misleading. How about turning this into a meta-issue and creating new ones for turning 'display' into a shorthand and the new properties blocking this issue?

Sebastian
Keywords: dev-doc-needed

Updated

2 years ago
Blocks: 1336678
As asked in comment 1, make this a meta-bug and file individual ones for the different parts it covers?

Sebastian
Flags: needinfo?(mats)
(Reporter)

Updated

10 months ago
Blocks: 1105868
(Reporter)

Comment 3

10 months ago
The spec has changed again since this bug was filed, re-summarizing accordingly.
'display' is now still a longhand, but it now accepts multiple-keyword values.
Flags: needinfo?(mats)
Summary: [css-display] Implement 'display-outside', 'display-inside' and 'display-extras' properties. Make 'display' a shorthand for those. → [css-display] Implement the multi-keyword syntax for the 'display' property
CSS Display Level 3 has just gone back to CR.

I would like to see Mozilla implement the new "full display" values fairly quickly — the ones that are simple aliases to preexisting properties. Which is hopefully a fairly trivial amount of work. (There are two new display values, `inline list-item`, aka `inline flow list-item` and `block ruby`. Those can be handled in separate Bugzilla tickets, as they will require more work.)

To experts on CSS, it might not seem like a big deal, to offer the ability to write `display: block grid` instead of `display: grid` in their code, but I'm very excited about this change to CSS. It will make teaching layout much easier. Conceptually, thinking of display-outside and display-inside as two different concepts to master — this is huge. 

It's an especially good time to have this change, since the industry is just now figuring out how to do layout in vanilla CSS, now that we have CSS Grid, Flexbox, et al, and people are letting go of layout frameworks like Bootstrap and Foundation. Many, many people are in the process of learning CSS for layout for the first time. 

I'd love to see this shipped in 2019, and not 2022. 

I plan to teach layout using `display:	[ <display-outside> || <display-inside> ]` immediately, letting people know it doesn't work in any browser yet, but will. It'd be great if that story could change to "works in Firefox".

I would also be helpful if we could write tests for the other browsers to use, speeding up adoption by others.
Keywords: DevAdvocacy
Whiteboard: [DevRel:P1]
Triaging to get on our backlog for review.
Priority: -- → P3
(In reply to Jen Simmons [:jensimmons] from comment #4)
> CSS Display Level 3 has just gone back to CR.
> 
> I would like to see Mozilla implement the new "full display" values fairly
> quickly — the ones that are simple aliases to preexisting properties. Which
> is hopefully a fairly trivial amount of work.

For reference, the spec. has a table with a line-up of single-keyword and multi-keyword values:

https://drafts.csswg.org/css-display/#display-value-summary

> I plan to teach layout using `display:	[ <display-outside> ||
> <display-inside> ]` immediately, letting people know it doesn't work in any
> browser yet, but will. It'd be great if that story could change to "works in
> Firefox".

For what it's worth, that is also what https://developer.mozilla.org/en-US/docs/Web/CSS/display is already doing for quite some time.

Sebastian
You need to log in before you can comment on or make changes to this bug.