CSSハックを使わないブラウザー対策 から require.jsのこと

「企業サイトなので、IE6以上に対応を求む」いまだに少なからずある要望です。
コピペで対応したいので記しておきます。
動作確認はコピペ無理なのでやはり時間はかかります

Web Desining 参考

・htmlで分岐させてます。JavaScriptなしでも分岐可能
・JavaScript で、nojaクラス名を削除して、スマホ、タブレット、PCを分岐

html

<! DOCTYPE html>
<!--[if lt IE 7 ]><html class="nojs ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="nojs ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="nojs ie ie8" lang="ja"><![endif]-->
<!--[if IE 9 ]><html class="nojs ie ie9" lang="ja"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="nojs" lang="ja"><!--<![endif]-->

と書いていたら、ほかにいろいろと気になることが出てきた。
とっちらかったメモになるので非公開に

まずは require.js を入手
公式サイトか、github のリポジトリからダウンロード
jrburke/requirejs – GitHub
ダウンロードしてきたら適当な場所に解凍、プロジェクトの js ディレクトリにおいて

htmlのヘッダーに scriptの読み込みを書きますが、属性をつけます。
data-main=”js/index の部分です。

そして、index.jsに読み込むjsの順序を書くという。

テンプレファイル(パスワード:1234)
html5shiv.js で、IE8以下を無理やり、html5のタグを認識するようにしてます。

パララックス

今更かもしれませんが、前から気になっていました。
暇を見つけては勉強しているのですが、PCのブラウザーではおもしろいなぁというサイトも、スマホで確認すると全然ダメというパターンが多いので腰が引けていました。スマホだと全然見れないというパターンには、効果がおもしろい分とてもガッカリしてします。

スマホでも見れるサイトを紹介してくれているところを見つけたので引用させてもらいます。

http://fb-research.net/facebook/2012/07/_paralla/
こちらのサイトです。

NIKE「CHOOSE YOUR FIGHT」
これを見て衝撃を受けました。
やはりPCもスマホもバッチしOKですが、サイトのURLを変えています。
やっぱり普通にすれば、同じ仕組みではダメなのか・・・・
PCのURLでもモバイルに飛ばされるので気づかないのですが・・・

PC
http://www.nike.com/jumpman23/aj2012/
スマホ
http://www.nike.com/jumpman23/aj2012/mobile/

—————-

レッスン動画

http://dotinstall.com/lessons/parallax_html

clearfix(度忘れメモ)

暗記していたのですが度忘れしてしまいました・・・・
メモを見ると覚えないのですが、仕方がない。。。φ(..)メモメモ
ちなみにclearfixつけるBOXを間違えるとうまくいかないよ・・・(親につける)

.clearfix:after {
content: “.”; /* 新しい要素 文字は何でもOK */
display: block; /* 要素をブロックに */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix { /* IE6、7 :afterサポートなし対策 子要素の高さも含めて算出するバグ利用 */
min-height: 1px;
}

/* IE6以前min-heightサポートなし対策 「* html」をつけるとIE6以前のみ有効(Starハック)*/

* html .clearfix {
height: 1px;
/* 以下macIE4,5のみのハック */
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}