search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

ie.css doubled code #39

Closed steros closed 10 years ago

steros commented 10 years ago

why are many things twice in ie.css? like .grid-container or such. it seems the file just starts again at line 729

nathansmith commented 10 years ago

It's because of this…

<head>

  <!--[if (gt IE 8) | (IEMobile)]><!-->
    <link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive.css" />
  <!--<![endif]-->

  <!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" href="./assets/stylesheets/ie.css" />
  <![endif]-->

</head>

Because of the conditional logic, IE9 and other modern browsers get the "real" Unsemantic code (with media queries). Whereas, IE8 and lower get an entirely different CSS file, that has all the fluid widths, but none of the media queries.

So, yes there is "duplication," but any given browser only ever receives one or the other. They are mutually exclusive.

For more on that concept, check out this article…

http://nicolasgallagher.com/mobile-first-css-sass-and-ie

Basically, rather than try to get IE8 to understand media queries, we instead force it to have a "desktop" experience.

steros commented 10 years ago

Yes that is very nice, BUT ^^

The file "ie.css" ITSELF has on line 32:

.grid-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-left: 10px;
  padding-right: 10px;
}

and on line 762:

.grid-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-left: 10px;
  padding-right: 10px;
}

I'm not a css expert but doesn't the code in line 762 overwrite what was written in line 32 and thus is redundant? That is not the only duplicate stuff, as said everything after 729 seems just duplicate the above.

nathansmith commented 10 years ago

Ah, good catch.

Sorry, I had misunderstood your initial post.

Sometimes I hate the Sass compiler. It's trying to be helpful by managing "global scope" of @extend within @import, and duplicating code to make sure all the extends are applied.

I believe the Sass team is aware of this, and will be addressing it in a future release. For now, I've scoped the import of the base file to @media all and the desktop grid to @media screen.

Monkey-patched here…

https://github.com/nathansmith/unsemantic/commit/4a505f3f56a9ca00fb85adad6a50912482433b83