Won't accept -ms-

[kat]

1. Why won’t my VSC problem, debug console accept -ms-grid-rows & ms-grid-columns below?

    grid-template-rows: auto 1fr;
    -ms-grid-rows: auto 1fr;
    grid-template-columns: 1fr auto 1fr;
    -ms-grid-columns: 1fr auto 1fr;

2. Why am I getting lots of { expected css(css-lcurlyexpectied)
   for various css items likegrid-template-areas: 'intro' 'menu'; and justify-items: center;?

3. Is there a url to find what -ms to use for grid-area: gallery2; and other grid items like padding-top: 1rem;?

[RobM]

Hi @kat,
It is a little hard to troubleshoot something like this. I’m not sure how your VSC is set up - are you using a plugin for the rule checking? Are you differentiating warnings versus errors?

1. For my VCS, I would get the first and third declarations underlined with a warning to include the prefixed version. Since they are there, you can ignore the warning.
2. I haven’t seen this error. Perhaps a screenshot of the code (for some context) and the error?
3. I think you are asking for a resource to understand what needs to be prefixed? CanIUse is pretty good for edge cases, but I think you will be doing a lot of lookups! This is about the best article I could find with a Google lookup.
   Cheers,
   Bob

[kat]

1. You’re right. I have 59 errors AND warnings. Possibly uninstall MS Edge Tools for VSC and use something else?

2. Lots of { expected css(css-lcurlyexpected)
   

   

3. [quote=“RobM, post:2, topic:6433”]
   article
   [/quote] Seems grid and flexbox are mostly supported.

[RobM]

Hi @kat,

1. You can take a look if there is a better CSS linter, not really sure if the one you are using is so bad. You just have to see if your warnings are addressed. Any errors likely need attention.
2. I can’t quite tell what is going on from the screenshot, but some thoughts. The coloring of the declarations is there for a reason. Notice that grid-template-columns is a different color than the other declarations. That indicates it is invalid for some reason. In this case it is because the declaration before it is lacking a semicolon at the end. Additionally, when I see a whole series of declarations that are invalid, it usually makes me feel like the an earlier part of my code is malformed, leading to “down-stream” errors. The only other thing you should look out for is the use of backticks vs single quotes vs double quotes. Backticks will throw errors many times.
   Good Luck,
   Bob

[kat]

.menu-grid .container {
    background-color: #252525;
    display: grid;
    display: -ms-grid;
    align-items: start;
    margin-top: 1rem;
    padding-top: 1rem;
    **grid-template-rows: auto 1fr;**
    -ms-grid-rows: auto 1fr;
    **grid-template-columns: 1fr auto 1fr;**
    -ms-grid-columns: 1fr auto 1fr;
    grid-template-areas: 'gallery1 intro gallery2' 
    'gallery1 menu gallery2';
    max-width: 1100px;
    margin: auto;
}

I’m at 13 errors for grid-template-columns & grid-template-rows. I’ve added -ms-grid-columns & -ms-grid-rows which doesn’t remove errors.

The final, 14th error is } expected

 .social-icon .fa-4x.fa-mail-bulk:hover {
        color: #876c70;
    **}**

I uninstalled MS Edge Tools, but errors remained, so I reinstalled. Oh well.

[RobM]

Hi @kat,
It looks like to me that the only errors and warnings are either caused by the asterisks in your CSS, the order of your declarations, or can be ignored.
In the end, the best test is to try your page on different browsers to see if it actually works as expected.
Cheers,
Bob

[kat]

@RobM

the order of your declarations

Things have to be in order? How do I find out more?

[RobM]

Hi @kat,
Basically you want the non-prefixed version last. There are some exceptions, but that is a pretty good rule. The order of the prefixes doesn’t really matter.
Bob

[nebula]

Generally speaking, if multiple different CSS declarations of the same specificity affect the same property of the same HTML element, the last such declaration in the stylesheet overrides all of the preceding ones.