- From: Dael Jackson <daelcss@gmail.com>
- Date: Fri, 1 Sep 2017 08:50:07 -0400
- To: www-style@w3.org
=========================================
These are the official CSSWG minutes.
Unless you're correcting the minutes,
Please respond by starting a new thread
with an appropriate subject line.
=========================================
Renaming selector profiles
--------------------------
- There was discussion over lunch, but no solution so suggested
new names will be added to the github issue:
https://github.com/w3c/csswg-drafts/issues/1694
User Agent properties and variables
-----------------------------------
- Dino introduced his proposal
(https://github.com/w3c/csswg-drafts/issues/1693)
for a new variables function to respond to things that are
defined by the user agent.
- Overall the proposal was warmly accepted and people were in
favor of continuing in this direction.
- The group had some concerns as to if it needed to be a new
function instead of using namespace for variable function
which dino will think about.
Grid
----
- RESOLVED: Change what grid shorthand resets (to not reset column
and row gaps).
- RESOLVED: column-gap and row-gap apply to flex, grid, and
multicol.
- RESOLVED: Add gap shorthand.
- RESOLVED: Tables are not changed (in reference to the gap
resolutions).
- RESOLVED: Add gap properties to align spec.
- RESOLVED: Copy from flexbox to grid: do what 1320 says (treat
"stretch" items as being definitely sized in the cross
axis (redoing layout for the contents if necessary))
- RESOLVED: Copy from flexbox to grid: do what 1319 says (grid
areas should be treated as having definite heights and
widths and baseline alignment of grid items can also
affect the row and column dimensions).
- RESOLVED: Automatic minimum size of grid items is the first
defined of: specified size, transferred size, content
size
- RESOLVED: Integrate stretching into track sizing algorithm.
===== FULL MINUTES BELOW ======
Agenda: https://wiki.csswg.org/planning/paris-2017#topics
Scribe: dauwhe
Selectors: Renaming profiles
============================
github: https://github.com/w3c/csswg-drafts/issues/1694
astearns: dbaron added the issue, there was some discussion during
lunch, but no resolution
astearns: Let's try to put realistic suggestions in the issue.
User Agent properties and variables
===================================
github: https://github.com/w3c/csswg-drafts/issues/1693
dino: [approaches podium]
dino: I'll explain it backwards-
dino: we're proposing a new variables function.
dino: Instead of exposing user custom properties
dino: these are defined by the user agent.
dino: "constant" means you can't change it.
dino: User wants to control type size on iphone
dino: css can't detect that.
dino: You can query the UA value, and then use calc to respond
dino: User agent properties.
dino: Rest is similar to CSS variables
dino: I show lots of examples... font size, foreground/background
color...
dino: like user pref for black background/white text.
dino: Some dyslexic folks want low contrast
dino: so CSS could query UA and then respond
dino: or we could use safe areas when projecting to screen of
different size.
glazou: It's coming from UA and system?
dino: Yes.
iank: Could you draw the safe area on the blackboard?
dino: This has been a concept in TV.
dino: Some TVs you wouldn't see the whole frame
dino: so there was a title safe area, where you know pixels would
always be visible.
myles: Modern TVs fake this.
dino: If you have a circular display, the safe area might be in
the middle.
glazou: I like this.
glazou: Open question: could be extended to system colors?
glazou: We'd have to find common names for system colors on all
platforms.
glazou: 2nd thing: I'd like to see a 2nd part with JS elements to
detect system change events.
dino: You can't do MQ.
glazou: Being able to detect theme change, or that you switched to
night view.... would be cool.
bdc: Like underlying idea of prefers-reduced-motion MQ...
bdc: So why do we want a new thing?
dino: Unlike MQ, you want to know a value.
dino: Given one of these values, tell me when it changes.
bdc: I don't see a difference.
Florian: I don't think so-
Florian: reduced motion is not about make things slower... it's
about doing something else.
dino: For reduced motion, sometimes we fade in instead of moving
in.
dino: We're generally not removing animations.
astearns: I want to ask about @support.
dino: This raises issue on css variables spec
dino: but I don't know where the property lists go.
astearns: If we don't have access for @supports, how do we author?
<dbaron> you could always do @supports (color: constant(foobar)),
no?
gregwhitworth: These are defined by the UA.
gregwhitworth: How are we not going to end up with the -webkit-
prefixes unless we agree on everything?
dino: These are new properties
dino: just like a normal property.
gregwhitworth: They'll be standardized?
dino: Yes.
dino: We want them to be universal.
dino: Don't know if they should be prefixed with --
dino: so they know they can't set, maybe it's ++
melanierichards: Let's say the UA stores the value
melanierichards: the user hasn't overwritten default value of foo
melanierichards: would it be undefined?
melanierichards: As an author, I'd only want the value when it was
overwritten by the user.
dino: Good question.
Florian: It's a nice hammer we have here, we should be careful
with it.
Florian: The examples of things are less comfortable with, as they
could be solved in other ways.
dino: I'm mostly interested in font size and inset ones.
Florian: For font size, why don't you change REM.
TabAtkins: REM is font size on root element, this is initial value.
Florian: This will be one rem if not overridden?
Florian: For inset, we've been discussing a similar problem, and
were trying to solve some other way?
dino: Haven't looked at other solutions.
myles: What's the other one?
Florian: First, a media query for shape, another is another MQ
about 'if I place something there, is it visible?'
Florian: Third is using shape inside: display.
Florian: Let's not rush into defining through this, as it might
prevent us from exploring other solutions.
fremy: I have same concern as surma-
fremy: why don't reuse var function?
fremy: We could use namespace for var function
fremy: so we don't need new function
fremy: just variable under new namespace.
dino: I don't mind
dino: but we used the name constant to remind user they can't
change it
dino: under the hood it uses same code as variables.
fremy: I think it's better to reuse namespace inside var
fremy: e.g. { color: var(user preferred-color) }
<Florian> var(system safe-area-inset)
Rossen: Thumbs up on the idea.
Rossen: We've had lots of requests
Rossen: in terms of getting font size and background colors
Rossen: respond to high contrast, etc.
Rossen: Would be interesting to see the path forward
Rossen: and to summarize how much stuff you want to expose.
TabAtkins: Performance would be better than variables
TabAtkins you don't control the values.
plinss: What about UA changing while you're animating?
dino: We should have current color blink text :)
Bert: 'constant' looks like an identity function. can't you use
the ID itself? use "fontsize"?
Florian: We need comma fallback.
fremy: If you have properties like font-family you couldn't use it.
TabAtkins: This would add an unlimited set of global keywords to
CSS
TabAtkins: functions prevent that.
gregwhitworth: One should be scroll-bar-width
gregwhitworth: arrow color,
glazou: I want to expand on unlimited sets of global name
glazou: we want to make sure nothing is shipped until everyone
agrees on how it works.
glazou: let's keep it clean.
TabAtkins: You only need a few smart devs with houdini, then
everyone can use libraries.
glazou: It's like what fremy said, it's a namespace.
glazou I think we can reach consensus on the names.
astearns: Two more questions.
SimonSapin: What about fallback?
dino: You could do comma zero
SimonSapin: Fallback same as in var()?
dino: Yes.
gregwhitworth: I think our biggest request is high contrast, which
we map to system colors
gregwhitworth: it became a problem because not everyone does high
contrast theming.
gregwhitworth: We may have foreground/background, do we need
accent color and accent color2?
gregwhitworth: I foresee problems
gregwhitworth: so fallback is what you get.
dino: I hear general agreement
dino: Concerns about constants vs var with namespace.
dino: melanierichards wants to know when user explicitly change
dino: them, someone else wants to have events.
myles: Unset is same as "I don't know what you're talking about"
astearns: General consensus that this is interesting.
<glazou> dino clap-clap for that proposal
Grid
====
TabAtkins: We have grid issues.
fantasai: The gap one?
Setting of gutter properties when using the 'grid' shorthand
------------------------------------------------------------
github: https://github.com/w3c/csswg-drafts/issues/1036 and
https://github.com/w3c/csswg-drafts/issues/1696
TabAtkins: We decided that grid gutter should be reset by
shorthand.
TabAtkins: Authors have given feedback that the opposite is true
TabAtkins: so are annoyed to reestablish their gutters
TabAtkins: so we propose to change that, and stop resetting
gutters in shorthand.
fantasai: That's the basis of that (1036)
fantasai: The other issue is 1696.
TabAtkins: The grip shorthand is already complex.
TabAtkins: Worst case is having some gutters you didn't intend.
TabAtkins: A proposal to handle this and other author feedback is
to rework how we handle gutters.
TabAtkins: Rename them and apply them to all layout modes where it
makes sense.
fantasai: We had originally designed them for multicol.
TabAtkins: Didn't make sense for column gap to be reset by grid.
fantasai: So we undo the link, undo grid prefix
fantasai: make colgap and rowgap apply to flex containers.
fantasai: This is highly desired.
TabAtkins: They want min spacing between flex items and flex lines.
fantasai: One comment said, can we have one set of properties to
make it easy to learn.
astearns: Is it hard to change flex distribution algo?
TabAtkins: It's easy.
fantasai: As a last point, nice to obsolete border-spacing
fantasai: controls spaces between cells, and it inherits.
TabAtkins: It's the only layout property that inherits.
fantasai: If we could redesign, it wouldn't inherit, and would be
logical.
<fremy> I like the proposal
TabAtkins: Normal would be zero by default, in grid and flex, and
1em in multicol, and "use border-spacing" in tables
TabAtkins: because all the gridgap stuff has shipped, so we have
to keep
TabAtkins: only thing we break will be grid gap reset.
fantasai: We need shorthand for column gap and grid gap.
Florian: column-gap would be shorthand for grid-column-gap etc.
fantasai: None of them inherit.
bdc: There's a proposal for a new gap shorthand?
fantasai: The proposal is to alias grid-row-gap.
astearns: It's not temporary.
fantasai: It might be permanent.
fantasai: The goal is to use column-gap and row-gap, and have a
shorthand for the two of them.
fremy: track-gap
fantasai: People are using shorthand more often.
fantasai: We'll have to run some data, but we might be able to
remove the longhands.
TabAtkins: One less alias to maintain.
Florian: Weird to use grid stuff to reset your flex.
SimonSapin: They would be aliases?
TabAtkins: One is shorthand of the other.
fantasai: page-break properties are shorthands of the break-*
properties.
SimonSapin: So these would be shorthands with one longhand each.
TabAtkins: They'd both access the same underlying value.
SimonSapin: what happens in CSSOM?
<fantasai> SimonSapin,
https://www.w3.org/TR/css-break-3/#page-break-properties
astearns: Sounds like there are 3 things:
1) changing what's set by grid shorthand
2) adding connection between the various gaps
3) is some shorthand for all this
TabAtkins: 4) doing table cleanup
TabAtkins: but it would be nice to have everything use same gaps.
astearns: Are there any objections to changing grid shorthand to
not reset column and row gaps?
RESOLVED: Change what grid shorthand resets.
dbaron: Who will be first to implement?
Rossen: We'll do it.
bdc: Might not break anything.
astearns: Will only change behavior if they set gaps, used
shorthand, etc.
rachelandrew: Most people are not using shorthands.
plinss: They do pretty much whatever you tell them to do at this
point :)
astearns: So edge is willing to go first?
Rossen: We're yet to release the updated grid.
Rossen: I wish we didn't have to do the aliases.
astearns: The second thing: any more discussion on column-gap and
row-gap applying to all layout modes with gaps?
astearns: There will be a communication issue.
iank: Which layout modes?
TabAtkins: multicol, grid, flex, and maybe table.
fantasai: multicol, grid, and flex all respond to the column-gap
and row-gap properties.
dbaron: Which property has the normal value?
TabAtkins: column-gap and row-gap
TabAtkins: for multicol it will be 1em, which is no change
astearns: What does column-gap normal do in grid and flex?
TabAtkins: Zero.
dbaron: column-gap already has a normal value.
astearns: We're adding normal to row-gap, which is new
dbaron: This is renaming thing for grid back to the old multicol
things.
TabAtkins: Yes.
dbaron: Same syntax?
TabAtkins: Yep.
TabAtkins: Adding normal keyword to row-gap.
fremy: Do we need grid-row-gap and grid-column-gap
fremy: They are not interoperable.
TabAtkins: Why?
fremy: In the sense that lots of browsers don't support grid.
fremy: So there are not a lot of websites that use grid, and they
were made in the last six months.
TabAtkins: Maybe.
fremy: To me this is a breaking change.
TabAtkins: If they are using grid-column-gap etc it will break
things.
TabAtkins: We need to look into how often they are use.
TabAtkins: Default to safe answer of aliasing them.
Rossen: Can we resolve?
astearns: Any other comments on using these in grid, flex, and
multicol?
<fantasai> I agree with Tab, let's keep the aliases for now but
look into dropping them.
dbaron: This is new feature for flex?
TabAtkins: This is the most requested feature for flex.
bdc: The gap shorthand property is part of this resolution?
astearns: We will have a shorthand, we're just not sure what it's
called.
fantasai: We don't have to figure it out now. One thing at a time.
fantasai: Proposed resolution; existing column-gap and new row-gap
with same syntax apply to flex, grid, and multicol, and
alias to current props.
dbaron: Is handling of percentages between the two consistent?
Florian: multicol didn't have percentage until recently
Florian: not implemented yet
Florian: spec says % should work in multicol.
TabAtkins: The definitions are identical.
astearns: No concern?
TabAtkins: They're the same.
astearns: Any objection?
RESOLVED: column-gap and row-gap apply to flex, grid, and multicol.
bdc: We could use gap as the shorthand.
TabAtkins: Do we have three letter properties?
astearns: Options for shorthand are "gap" or pre-existing
"grid-gap"
astearns: We have to maintain grid-gap as shorthand, but that
could be a discoverability problem.
astearns: The proposal is to add a shorthand for column-gap and
row-gap that is just gap and aliased to grid-gap.
fremy: I don't know if we have a shorthand aliased to a shorthand.
myles: The question isn't that you have it, it's that you can do
it :)
astearns: Any objection?
fantasai: I think it's unnecessary aliasing, but I won't object.
Rossen: There's probably not a ton of content out there,
Rossen: I would prefer not to ship grid-gap at all.
Rossen: I don't mind aliasing the grid ones for a while.
Rossen: Given this is six months of a feature, I'd be surprised if
we couldn't do this.
rachelandrew: I'll update all my stuff. I've already tweeted :)
fantasai: Rachel and Jen can get the information out there
fantasai: but they can't create a forcing function for people
who've already been trained
fantasai: but Microsoft can do this by not shipping grid-*-gap.
Rossen: That means interop pain for us.
fremy: I'd rather not write a bunch of aliasing code that we're
going to remove in six months.
fantasai: It's not going to be difficult for you, it will be
annoying for authors during the transition.
Rossen: I don't think this is a question of implementation
Rossen: we'll decide about aliases internally.
Rossen: I won't promise we'll ship without grid-column-gap etc, but
Rossen: the hope is that we're early enough that we can eventually
remove
Rossen: when we ship.
Florian: Grid is unusual in that most browsers shipped in a very
short time
Florian: even though it's only six months, but a lot happened in
those six months.
iank: The main compat risk is chrome mobile(???)
<fantasai> TabAtkins, can you run a search on occurrences of
grid-row-gap and grid-column-gap?
<TabAtkins> fantasai, probably
astearns: Proposed resolution: add gap shorthand.
RESOLVED: Add gap shorthand.
astearns: Do we want to talk about tables?
fantasai: We have a solid proposal.
TabAtkins: A single convenient interface to everything that can
have gaps.
dbaron: The weird thing about border-spacing being inherited
dbaron: applies only to table with border-collapse : separate.
dbaron: border-collapse is inherited.
dbaron: Most tables will be separated.
fantasai: Unless you are setting column-gap or row-gap on a table
already, then there's no effect.
fantasai: The new properties don't inherit.
dbaron: If applies to table, then will apply to sides of columns,
and row gaps apply to tops/bottoms.
fantasai: We're not saying border-spacing reads out from column-gap
fantasai: if the value of column-gap is normal, then look at
border-spacing prop.
dbaron: That would be weird if it applied inside, but not around
edge.
dbaron: The full value plus padding on table element.
fantasai: Actions are to have these acts to apply only to the
interior.
dbaron: I think that's a bad idea.
TabAtkins: Either don't apply at all, or affect outside?
fantasai: This is low-priority.
TabAtkins: It applies to every table.
astearns: One solution is to not change tables.
astearns: That's my general rule: don't mess with tables.
fantasai: Fallback issue-
fantasai: table displays are used for fallback in flex/grid
fantasai: since it acts similarly.
fantasai: We will have authors using flex or grid model with these
gap properties
fantasai: In implementations that don't support them, they will
fall back to table
fantasai: but they don't support new gap properties.
gregwhitworth: So it won't matter.
iank: I find this strange because we're not messing with tables.
astearns: proposed resolution: don't have the new gap properties
apply to tables
RESOLVED: Tables are not changed
TabAtkins: Where do these properties go?
TabAtkins: Align is the best place-
TabAtkins: It only applies to things that are content-distributed.
TabAtkins: grid and flex will have sections pointing to this.
astearns: and multicol.
rachelandrew: Same as any of the align stuff.
Florian: We need to fix grid, but just add it to other spec.
TabAtkins: We need a section in grid.
Florian: In flex maybe not.
astearns: Nothing to correct in flex, just informative.
RESOLVED: Add gap properties to align spec.
Rossen: How far along is this spec?
fantasai: Trying to get to cr.
astearns: I think we're done with gaps for now!
astearns: Are there other grid issues?
Rossen: Do we want to go over many of them?
Rossen: We don't have to discuss all of them now.
astearns: Keep remaining grid discussion to 30 minutes.
Percentage children of stretch grid items
-----------------------------------------
github: https://github.com/w3c/csswg-drafts/issues/1320 and
https://github.com/w3c/csswg-drafts/issues/1319
TabAtkins: Flexbox has special text defining if your flex item is
stretched and flex item is definite height specified.
TabAtkins: Grid doesn't have the same text, but some bits of it
imply that
TabAtkins: so it would be useful to have it apply to grid.
TabAtkins: Easier 'cause it's sized according to tracks.
TabAtkins: Rossen said this should work
TabAtkins: for the same reason as flex.
TabAtkins: 1320 is the same thing.
TabAtkins: Any opinions to the contrary?
(silence)
astearns: Any objection?
RESOLVED: copy from flexbox to grid: do what 1320 says.
RESOLVED: copy from flexbox to grid: do what 1319 says.
Topic Hunting
-------------
fantasai: axis names is an editorial thing
fantasai: we only use it in a couple of places
fantasai: I don't think it's causing problems
fantasai: there's a request to add a note, and we're fine doing
that
Rossen: is there an issue about intrinsic ratio?
fantasai: 1149?
Automatic Minimum Size for grid items should not min against content
size
--------------------------------------------------------------------
github: https://github.com/w3c/csswg-drafts/issues/1149
TabAtkins: In flex we do to some effort to find minimum size.
TabAtkins: If it's image we try to figure out what information is
important-
TabAtkins: this is useful because flex uses this to size the image.
TabAtkins: Grid uses the info to size the track, and then lets the
image size to the track.
TabAtkins: The big difference is say you have a specified size of
100px and intrinsic size is 50px
TabAtkins: we use 50px in flex.
TabAtkins: Grid doesn't have to worry about shrinking.
TabAtkins: "So, we think the right fix is to just change Grid's
automatic minimum size to be the specified size if it
exists, else the transferred size if it exists, else
the content size."
TabAtkins: This better matches author intent for automatic minimum
sizing of images.
(tab draws on whiteboard)
TabAtkins: Image is 50px
TabAtkins: put in grid container, set to 100px.
TabAtkins: in flex, minimum value is 50, it's allowed to shrink to
that.
TabAtkins: In grid, we prefer to say let's stick with 100, 'cause
the author said so
TabAtkins: and avoid risk of overflow.
Rossen: Additional piece: if you open the test case
https://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/html/grid-minimum-size-grid-items-007.ht
TabAtkins: Sets itself to 100px, but grid width is 10 x 10.
TabAtkins: If we went by previous algo, track would be 50px
TabAtkins: maintaining aspect ratio is important.
astearns: Any other comments?
Rossen: This one has height set.
Rossen: Current spec says minimum of instrinsic and transfer?
fantasai: Use specified if you have it, content if you don't.
TabAtkins: Edge does it.
TabAtkins: Any objections?
astearns: Hearing no objection.
RESOLVED: automatic minimum size to be the specified size if it
exists, else the transferred size if it exists, else
the content size
Stretching tracks fails to feed back into sizing algorithm
----------------------------------------------------------
github: https://github.com/w3c/csswg-drafts/issues/1150
fantasai: The issue here is that the stretch alignment property
takes effect
fantasai: at the end of the algo
fantasai: you size the cols, then use size of cols to set height
of rows
fantasai: at the end you do alignment.
fantasai: That's generally fine
fantasai: cause alignment don't change track sizes
fantasai: but stretch does.
fantasai: If you start with this example, you have image with
intrinsic size, col sizes to intrinsic size, then try to
size the rows
fantasai: and we use the size of the columns because there's an
aspect ratio
fantasai: and now the item that's 100% wide fills the track in
that axis, but then overflows the row.
fantasai: The suggestion is that the stretching phase should be
accounted for in the sizing algo
TabAtkins: Makes sense.
fantasai: We'll try to incorporate this into the algo, then will
bring to group for review.
TabAtkins: Is auto track and stretch distribution the only thing
that does this?
fantasai: Yes.
TabAtkins: Then this makes total sense.
fantasai: The proposal is to handle the stretching at each phase
of stretch sizing.
astearns: Would it make sense to have a note in align?
fantasai: Flex already has this kind of integration in the algo.
Rossen: Stretching and last baseline tend to have feedback back
into the layout algo.
astearns: Yeah, so should have a note pointing to the appropriate
section of grid/flex.
RESOLVED: Integrate stretching into track sizing algorithm.
Grid Next Steps
---------------
fantasai: ONE MORE THING
fantasai: We have several discussions about how baseline interacts
with grid sizing.
fantasai: Gonna try to make that work, and then bring back to WG
for review.
astearns: That sounds like the right thing to do.
fantasai: The other was discussion with max on aspect ratio of
images.
Rossen: That might disappear with a previous resolution.
fantasai: It's different
fantasai: nothing to do with minimum size.
fantasai: The issue that max was talking about, you could set min
size to zero and still hit it.
fantasai: We've resolved to reject feedback, but we assumed we
have interop.
fantasai: I'll double-check.
Rossen: Next steps for grid?
Rossen: Baselines is one of the potential behavior changes coming.
Rossen: Outside of those, are there any other major behavior
changes?
Rossen: Most issues here are editorial.
fantasai: Most of them are editorial.
fantasai: I won't know until I fix issues and do DOC.
fantasai: There are some fiddly auto-sizing things.
astearns: Let's take a gap.
<br duration="15min">
Received on Friday, 1 September 2017 12:51:03 UTC