New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] translate `grid` property syntax into IE safe syntax when possible #1023

Closed
Dan503 opened this Issue Apr 23, 2018 · 14 comments

Comments

Projects
None yet
3 participants
@Dan503
Copy link
Contributor

Dan503 commented Apr 23, 2018

This code

.grid {
    display: grid;
    grid:
      "left .... right" 100px /
       1fr  10px   1fr;
}

.left-cell { grid-area: left; }

.right-cell { grid-area: right; }

Should translate into this:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10px 1fr;
  -ms-grid-rows: 100px;
  grid:
      "left .... right" 100px /
       1fr  10px   1fr;
}

.left-cell {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: left;
}

.right-cell {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: right;
}
@ai

This comment has been minimized.

Copy link
Member

ai commented Apr 23, 2018

What is your current output?

@Dan503

This comment has been minimized.

Copy link
Contributor

Dan503 commented Apr 23, 2018

It doesn't attempt to translate it at all. The output is just what I wrote in.

/* what autoprefixer outputs even if the grid setting is turned on */

.grid {
  display: -ms-grid;
  display: grid;
  grid: "left .... right" 100px /
 1fr  10px   1fr;
}

.left-cell {
  grid-area: left;
}

.right-cell {
  grid-area: right;
}
@ai

This comment has been minimized.

Copy link
Member

ai commented Apr 23, 2018

Do you set grid: true option to Autoprefixer?

@Dan503

This comment has been minimized.

Copy link
Contributor

Dan503 commented Apr 23, 2018

Yes, notice that the output did translate the display: grid; into display: -ms-grid;. It just didn't translate anything else.

I'm using autoprefixer v8.3.0

@ai

This comment has been minimized.

Copy link
Member

ai commented Apr 23, 2018

Hm. I will look later on this week.

@yepninja

This comment has been minimized.

Copy link
Collaborator

yepninja commented Apr 23, 2018

It's true. We don't support grid shortcut property at all, only grid-template. I thought about implementation, but there can be problems with grid-auto-* values which are included to grid.
I can try to support this shortcut on this week if users want to use it.

@Dan503

This comment has been minimized.

Copy link
Contributor

Dan503 commented Apr 23, 2018

That's why I added "when possible" into the title of the issue.

I had a feeling there would be aspects of the grid shorthand that might be problematic for autoprefixer.

I would love it if autoprefixer was able to detect if the syntax is possible to replicate in IE and if so, create the IE equivalent css.

If it isn't possible to replicate then autoprefixer can ignore the grid statement.

Once you know the grid shorthand, it's really nice to use.

I was so happy when autoprefixer started supporting grid area syntax. It makes working with grid in IE so much easier. Supporting the grid shorthand will make working with IE even easier :)

@Dan503

This comment has been minimized.

Copy link
Contributor

Dan503 commented Apr 25, 2018

I only just found out that grid-template can be used for the scenario I posted instead of grid.

I haven't tested it yet. If autoprefixer can translate grid-template then having it be able to translate grid isn't as important.

@yepninja

This comment has been minimized.

Copy link
Collaborator

yepninja commented Apr 26, 2018

@Dan503 You are damn right! Your case is definitely the case of grid-template shortcut.
grid shortcut also supports grid-template but also supports shortcuts with grid-auto- properties. So there are two reasons to use grid shortcut:

  1. You don't want to write '-template' in property and want to use shorter property.
  2. You want to use grid-auto- properties in the shortcut.

And of course, you want that these properties work in IE (that why we are here). So if you use grid-template you can be sure that everything works in IE. So in your case it's better to use grid-template.
If someone wants to use grid for the second reason, he must understand that grid-auto- properties don't work in IE at all.

@Dan503

This comment has been minimized.

Copy link
Contributor

Dan503 commented Apr 26, 2018

Ok I think under that reasoning it is probably a good thing that autoprefixer doesn’t support grid then.

grid kind of tells the user "this code is for modern browsers only"

grid-template is like saying "this code is for both IE and modern browsers".

It's a bit easier than using @ supports statements.

If autoprefixer is able to translate grid-template syntax under the scenario I posted above then I'm pretty happy for this issue to be closed. (Can't test it myself right now)

@yepninja

This comment has been minimized.

Copy link
Collaborator

yepninja commented Apr 26, 2018

We already have the test cases for your example. Look input and output.

@Dan503

This comment has been minimized.

Copy link
Contributor

Dan503 commented Apr 26, 2018

The links are coming up as 404 pages for me :/

@yepninja

This comment has been minimized.

Copy link
Collaborator

yepninja commented Apr 26, 2018

Derp. Fixed.

@Dan503

This comment has been minimized.

Copy link
Contributor

Dan503 commented Apr 26, 2018

Cool. I'll close the issue :)

@Dan503 Dan503 closed this Apr 26, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment