search

nathansmith / unsemantic

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

Required files in <head> section, extra comments? ... #42

Closed bdcoder2 closed 10 years ago

bdcoder2 commented 10 years ago

Hello,

New to unsemantic -- and although the documentation is well written something that is unclear for newbies are the files that are REQUIRED to be included in the "<head>" section of the HTML document (yes, I understand it "depends" on what you are doing), but ...

For an "out-of-the-box solution" ( desktop/mobile solution ), the following code would be required in the head section of the document -- correct?

<!--[if lt IE 9]>
<script src="/inc/js/html5.js"></script>
<![endif]-->
<!--[if (gt IE 8) | (IEMobile)]>
<link rel="stylesheet" href="/inc/grid_responsive.css" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/inc/ie.css" />
<![endif]-->

Also -- you will notice the slight difference from the code on unsematic, ie: on the unsemantic site, a portion of the above conditional is coded as

<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="./stylesheets/application.css?1382394700" />
<!--<![endif]-->

Why are the (extra?) <!--> (first line) and <!-- (last line)? What purpose do the empty comment block and opening comment block serve?

Thanks in advance and for the wonderful framework.

nathansmith commented 10 years ago

You're right, I should document why there are if-IE conditionals in the <head>.

I will put that on my to-do list (I'm just under-the-gun at work right now, so it might not be for a few weeks).

For the Unsemantic.com site, I am taking this approach (two wholly separate stylesheets)…

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

The application.css file is for browsers that understand @media queries. Whereas, the application-ie.css file is for older versions of Internet Explorer (IE8 and IE7), which don't understand @media queries, but (might) still have enough market share to necessitate support.

(Your mileage may vary. If you can afford to drop support for IE8 and older, go for it!)

bdcoder2 commented 10 years ago

Also, I found out why the additional comment blocks are required via my own testing; and also found your original syntax is correct and is documented on the following sites:

http://en.wikipedia.org/wiki/Conditional_comment

http://reference.sitepoint.com/css/conditionalcomments

... Just in case anyone else was wondering and thought (like myself) they were being more efficient by removing the comment blocks/code -- don't !!