W3C home > Mailing lists > Public > www-style@w3.org > September 2017

[CSSWG] Minutes Paris F2F 2017-08-04 Part III: Renaming selector profiles, User Agent properties and variables, Grid [css-selectors] [css-grid]

From: Dael Jackson <daelcss@gmail.com>
Date: Fri, 1 Sep 2017 08:50:07 -0400
Message-ID: <CADhPm3uV+vsCr1yRhzxmbhhcc0YTqqm1q+k0Xm=t6+ud0AnKYw@mail.gmail.com>
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:

User Agent properties and variables

  - Dino introduced his proposal
      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.


  - RESOLVED: Change what grid shorthand resets (to not reset column
              and row gaps).
  - RESOLVED: column-gap and row-gap apply to flex, grid, and
  - RESOLVED: Add gap shorthand.
  - RESOLVED: Tables are not changed (in reference to the gap
  - 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
  - RESOLVED: Integrate stretching into track sizing algorithm.


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
  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

  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
  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)),

  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
  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


  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

  TabAtkins: We decided that grid gutter should be reset by
  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
  <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-*
  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,

  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
  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
  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
  <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
  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
  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
  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
  dbaron: The full value plus padding on table element.
  fantasai: Actions are to have these acts to apply only to the
  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

  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?
  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
  Rossen: is there an issue about intrinsic ratio?
  fantasai: 1149?

Automatic Minimum Size for grid items should not min against content
  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
  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
  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
  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
  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
  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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:15:05 UTC