Html, doubt about compatibility with Internet Explorer

Asked

Viewed 386 times

-1

I don’t know why but my site gets broken in Internet Explorer and Microsoft Edge. Ja in Firefox, Google Chrome and Opera Web the site gets normal. The only parts of the site that are broken are Aside and Footer

I saw a post here on the stack overflow where a guy talked about a "@Supports" and "-ms tag-".

In my script I use the Grid system.

I am very beginner, I only learned the basics of CSS and HTML.

This is the top part of my script that contains the Grid codes.

body{
    padding: 0; margin: 0;
    font-family: 'Roboto', sans-serif;
}
#main {
    display: grid;
    grid-template-areas: "header header" "nav nav" "content aside" "footer footer";
}
.mainHeader {grid-area: header; background: #1A1A1A; height: 100px;}
.logo {margin: 12px 10px 10px 98px;}
.mainNav {grid-area: nav; background: #333333; margin-top: -19px;}
.mainContent {grid-area: content; background: #f8f8f8; margin-left: 200px; margin-right: 200px; width: 550px; margin-bottom: -570px; margin-top: 23px; height: 1000px;}
.mainAside {grid-area: aside; background: #f8f8f8; margin-right: 200px; margin-left: -200px; width: 407px; margin-bottom: -570px; margin-top: 23px; height: 1000px;}
.mainFooter {grid-area: footer; background: #1A1A1A; height: 19px;}

In Internet Explorer: No Internet Explorer

In Internet Explorer: Footer . . 2

In the other browsers: Nos outros navegadores

html css internet-explorer

  • As you can see here only IE11 partially supports Grid https://caniuse.com/#feat=css-grid and the ideal would be to use the prefix -ms- which is the see prefix of microsoft browsers, although in Edge accept some prefixes Webkit tb... the @supports is for you to build a css rule if the support browser, if it does not give vc can use flex box for example. Or else some grid polyfill or even Normalize to treat these cases. This might interest you https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

  • @hugocsl How do I put -ms- in my script? I googled and found nothing.

  • Just put all your CSS in this Autoprefixer for example... https://autoprefixer.github.io/ Ai you’ll see that it will put all the prefixes -ms- where you need them. But not all grid properties work on IE, and only work on IE 11, from 10 down with Normalizer or Polifill only

  • Internet explorer server only to install and install another browser. #pas

  • @Wallacemaxters Really lol.

1 answer

1

Has not polyfill or self-prefix that will solve this 100% case, display: grid is something super new, of course maybe for IE11:

#main {
    display: grid;
    display: -ms-grid;
    grid-template-areas: "header header" "nav nav" "content aside" "footer footer";
}

Solve partially, but to grid-template-areas there will be nothing for IE, what you’ll have to do is use:

grid-template-rows: ...;
grid-template-columns: ...;

-ms-grid-template-rows: ...;
-ms-grid-template-columns: ...;

And you’ll probably get most of it, but there are no guarantees, the support is partial, and if you want something more it’s likely that it won’t work, or that it will take a lot of work.

In short, it was already possible to make layouts without the use of grids or flex, please do not understand as criticism, but as guidance, learn grids without learning the basics of CSS and HTML, such as:

  • CSS 1
  • CSS 2.0
  • CSS 2.1
  • DOCTYPE

And wanting to leave to use grid, flexbox and the like is like learning to drive without having learned to walk (forgive me for the forced analogy), has no middle ground, or you learn the basics or you will suffer when you should not.

Honestly I do not see why this exaggerated fixation of the people with FLEX and GRID in basic things, serious can simplify everything, even bootstrap3 that is still the most used of the "4" versions does not use any of this.

Understand that IE will never receive news again, the new IE is named Edge, it is the updated version of IE, it is IE, only it has renamed, has a new engine and supports most of the technologies, IE9, 10 and 11 are old browsers, in a versioning logic it makes no sense to add new things, being that we have IE 12 (now called Msedge) and until the 16 (to date of 9/8/2018), if they did this would break all the sense of Versionar, Aliais I have an old computer with Firefox 3.6, but never expected it to support CSS3 just because it is installed there.

Note @supports is also something new and is only supported by MS Edge 12, ie not even works on IE11 so you could create a fallback.

The problem is sincerely linked to articles, videos and novelties and how they are transmitted to those who are learning now, they speak of CSS3 as if CSS2 no longer works, being that CSS3 is:

CSS1 + CSS2 + Novidades = CSS3

I see many answers here on the site that still encourage misunderstanding, I have no way to go against this, it is complicated to explain to one by one that your answers are teaching wrong or leading to error.

So learning CSS1 and CSS2 is learning CSS3 as they are part of CSS3 still, nothing has been replaced, it has only been added.

If you want support for older browsers, then do as such and use what is supported by the browser, MDN is a good site to help, there is also caniuse:

There are other sites, but not recommend, or by are not good sources, or because they are too technical readings for those who are starting.

If you present the HTML part I can even suggest how to do this grid-free and it will work well even at IE8.

  • I managed to solve my problem with -ms-grid and grid-template-Columns, and it was perfectly the way I wanted it, maybe it’s because there are not many elements in my page.

  • @unknn good that it worked, I’m happy, still do not fail to study CSS1, 2 before using things like this :)

  • My teacher had taught me about col1-col12. Until then it was the only way I knew, and I barely understood how it worked. Already the grid I learned on time. But I’m going by the basics anyway, studying first the CSS.

  • @unknn that there are way to do and you yourself write, usually in frameworks made in CSS, like bootstrap or uikit, follow this pattern, have no connection with direct CSS, it’s just a way for you to organize something, Letters, a question, Did your teacher teach you the basics of CSS? As selectors, DOCTYPE behavior, inline, block and inline-block difference?

  • No, I took a beginner’s course, and at the end of the course he taught how to make a website. The rest I learned by myself by searching on youtube, and by the way there is a lot of free good content.

  • @unknn how good it is that this striving, unfortunately I kind of disagree with you, many video lessons that look good, just seem really, have a lot of people teaching wrong or teaching too far ahead skipping the basic principles. But it’s life, I already accept how things are. Good luck :)

Show 1 more comment

Browser other questions tagged html css internet-explorer

You are not signed in. Login or sign up in order to post.