CE CreativeSection

  

いや～　秋ですねぇ～  

こんばんそ。☆サンゴーやいびん。


現在、外注ではない案件をペソペソ構築してて
ぶち当たった壁の高さを忘れないための備忘録。


css3から正式に使えるプロパティの1つに、
「box-sizing」というものがあります。
このプロパティの効果としては、boxのレンダリング方法を
切り替える効果があります。
何か語弊を招きそうな書き方ですが。

box-sizingには2つの値があり、
1つは「content-box」。
もう1つは「border-box」。

値をcontent-boxにしたboxは、
width＋padding＋borderWidth、
ダミーの数値で表すと
300px＋10px（左右で20px）＋5px（左右で10px）＝330px
というサイズになるのに対し、border-boxの方は
width＝padding＋borderWidth＋残り
300px＝10px（左右で20px）＋5px（左右で10px）＋270px
っていう、width（若しくはheight）にpaddingやborderWidthを含めないか含めるかを
指定できるプロパティなんです。
図で説明した方が分かり良いと思うんですけど、めんどくさい割愛しまうす。

現在、このプロパティに正式に対応しているのがOperaのみで(多分)、
後はプレベンダーフィックスで対応させている状態みたいです。
なんとIE8からも対応しているという。

で、このbox-sizingが使えたらナニが便利なのってことですが、
リキッドレイアウト物を作る時に凄い重宝するんです。

ブラウザ幅に合わせてboxの幅なども変えるため、幅の指定は％でやることになります。
その時に、やれpaddingだborderWidthだのを含めないで幅計算～とかってなると、
すんげぇ手間ですし面倒ですし、最悪上手く作れない。
そんな時に、box-sizing:border-boxを指定してやれば、いちいち
paddingやらborderWidthを気にしないで済むということです。
それらをひっくるめてのbox幅（％）でウマーです。


前置きが長くなりましたが。


IE8でこのbox-sizingを使っててハマった箇所があったので備忘Rock。


最近はjQueryを使用してまして、そのAPI？の中に「scrollTop」というのがあります。
座標を調べたり、指定した座標へ移動させたりなどに使用するのですが。

どうやら、このscrollTopとbox-sizing、相性が悪いのかなんなのか、
一緒に使うとscrollTopが機能しません。


先ずcssで「div,li { box-sizing:border-box ～ }」と書いて作業を進めました。
これで、divとliは何もせずともborder-boxでレンダリングしてくれます。
次に、body～/bodyの間に、ページ全体を包むようにdiv#containerをマークします。
そしてその中にdiv#headerやらdiv#wrapperなどを書き込みます。

この状態でブラウザチェックをすると、ChromeやFFではちゃんとborder-boxで
レンダリングされています。
もちろんIE8も。
ここまでは問題ありません。

次に、ページをスクロールしていくとウィンドウの右下に「ページトップへ」という
ボタンを表示するスクリプトを記述し、その中でscrollTopを使いました。

ブラウザチェック→ChromeやFFでは問題なし、ちゃんと出てきます。
しかしIE8だと、まったく出てきてくれません。

このスクリプトの内容が、何pxスクロールされたらボタンを表示という物で、
その何pxまでスクロールされなかったら表示しない（fadeOut、つまり見えなくする）という
書き方をしていました。

おっかしいな、なんでIE8だけ出ない？と思って、スクロールされなかったら処理の方に
alertを書いて、再度ブラウザチェック。
すると、alertが出てきた！what!?

つまり、スクロールされたら～という処理自体はちゃんと機能しているが、
「何pxスクロールされたらボタンを表示」っていう処理のところは
見事にスルーされちゃってるっていう現象でした。
その「何px」を判定させる為に使っていたのが、「scrollTop」。

IE6,7に比べたら遙かに優秀な８で、何故このような事が…
と思っていろいろググってもみたのですが、具体的な解決策は見つからず…
いろいろ人にも聞いてみて、再度cssや記述したコードを見直してみて、
前回上手くいっていたソースと見比べてみて…

その時に、「そういえば前回はbox-sizing使ってないな」と気付き、
ダメ元でbox-sizingを外してみたら…

IE8も出来たーよーorz

原因は分かった。
でもさ、今回はリキッドレイアウトなわけで、やっぱりborder-boxは使いたい。
でもIE8ではそれ外さないと上手くいかない。

またまたcssを見直してみて、ふと気付いたのが
「div,li」に指定したbox-sizing。

div#contaienrもdivだよな。
しかも全体を包んでいる。

…これ？

みたいな感じで、border-boxが必要な要素にだけ指定するようにしてみた。

再度、IE8でチェック。


border-box効きつつscrollTopもきたーよーorz


つまり原因は、ページ全体を包んでいるdivにもborder-boxがかかっていたこと。
このせいで、scrollTopが上手く機能しなかった。


…ヤバイ、どうやってまとめよう。


まとめ！

・IE8でborder-boxを指定するなら、必要な要素だけにかける。
・border-boxが指定されている要素にscrollTopを使わない。
↑語弊がありそうですけど…
・IE8以下が無くならない限り、コーダーは楽できない。



です。

備忘録備忘録。



  

Creative SectionのHP a.k.a 作品ファイルを
ひっさしぶりに更新しました。

こんばんそ、☆サンゴーどすぇ。

今回は一気に10数件あっぷっぷ。
映像やWEBやDTP、特にDTP系が多いかもです。

http://www.climaxe-cs.com/

お暇な時にでも。


…いい加減、contactページのスクリプト書かなきゃなぁ…


  

やぁ、☆サンゴーなり。

今日は備忘録。
cssの。


position:absolute; bottom:0;で、ドキュメントの下部にずっと張り付くフッターを作ったとする。
基本、ドキュメントの高さが可変することはあまりない。
だが、縦アコーディオンや何某かでドキュメントの高さが変更された(高くなった)場合、
この「absolute,bottom:0による下部張り付き」がIE6ではおかしくなる。

具体的には、ドキュメントの高さが変更されても、フッターが初期位置から動かない。
ドキュメントの下部に追従していかなくなる。

ブラウザのサイズを変更すると、忘れていたかのように下部へ移動する。

その解決方法(暫定)
入社9ヶ月目のKK(技術は神クラス)が発見してくれた方法は以下の通り。


・bottomを0ではなくautoにする。


これで、ドキュメントの高さが変更されても、フッターは下部に追従する。

ただ、これだけではうまく行かず、フッターの高さ分、ドキュメント全体を囲むdivの下に入り込んでしまう。
潜り込むのではなく、その高さ分のブロックがdivの下に隙間0で入る感じ。
bottom:auto;にすると、全ブラウザでその現象が起こる。

ので、cssハックを用いてbottom:auto;をIE6にだけ適用し、
さらにmargin-topもIE6にだけ適用する。
このmargin-topには、フッターと同じ高さの分だけネガティブマージンを入れる。

例えば、フッターの高さが100pxだった場合、このフッターに適用するcssのプロパティは以下の通りになる。


bottom:0;　//全ブラウザに適用
_bottom:auto;　//アンダースコアハックでIE6にのみ適用
_margin-top:-100px;　//こちらもIE6にのみ適用、フッターの高さ分ネガティブ


これで、望んだとおりの表示になる。

が、実際は完璧に上手くいくわけではなく、
本来の目的である、「コンテンツ内容が少なくてもフッターは常にドキュメント(ウィンドウ)の下部にある」がちゃんと機能しなくなる。
隙間開いちゃうんですよね。ははは。
恐らく、コンテンツの下にくっついてるんだろうなーと。
だから「暫定」。
もう少し突き詰めて、どうにかこうにか。
現状での解決方法として、ドキュメント高に可変が生じるページのフッターdivにstyle属性で上記のcssを適用するっていう方法もあったりする。
が、なんか負けた気がするので今回は採用見送り。

っていうか、生みの親(マイクロソフト)も見放したIE6にそこまで手をかけるアレもないっちゃぁないんですが、やっぱりレイアウトが崩れるような大きなバグ？を見つけたのなら放置はできまへんよね。
それに、未だにIE6ユーザーが半数近く占めているわけですし。

ホント、WEB屋泣かせです。。。

しっかしまぁ、文章で書くだけじゃすごく伝わりにくい事に今気付きました。
が、キャプチャ画像は無い！です。

あくまで備忘録。
その割にはダラダラ長いですが。


でわ。





  

1区2区四苦HACK。

ちょりっす。☆サンゴーなんだよ。

久しぶり夫のブログは、ちょっと備忘録。
CSSハックについて、まとめておこうかと。


大丈夫、マニアックな内容になるって事は知ってるから。


んでは。


(憎き)Internet Explorer

IE6以下

一番上のハックは、プロパティ(color)の前にアンダースコア(_)を付ける。
その次のハックは、セレクタ(#hoge)の前に「* html」を付ける。
半角スペースに気をつけて。


IE7

ややこすぃ。
上のハックは、セレクタの前に「*:first-child+html」を、
次のハックは「*+html」を付ける。

今更だけど、セレクタ前に付けるハック文とセレクタの間には
半角スペースが入っておりまうす。


IE6、IE7

こいつは簡単。
プロパティの前に「/」を付けるだけ。
このスラッシュとプロパティの間にはスペース要らず。


IE8

僕の場合、IE8をハックすることって滅多に無いんだけど。
今度は値(#FFF)の後ろに、「\9」を付ける。
値とセミコロンの間に書きましょうね☆


IE7、IE8

ややっこしぃ…
プロパティと値の間に「/*\**/」を書き、
IE8みたく値の後ろに「\9」。
…使わないよ…


IE6以外

プロパティとコロンの間に「/**/」


IE6、IE7以外

セレクタの前に、「html>/**/body」。


IE6～IE8以外

IE6～IE8ってことは、IE9を除く、現行動いている
IEにはってことなのかね。わお。
セレクタの前に、「:root *>」
rootと*の間に半角スペース。


(みんな良い子だから余りハックしない)モダンブラウザ

Firefox

(;´皿`)…
使ったことないからアレだけど、多分、セレクタの後ろのやつ。
一端カンマで区切るんだろうね。


Firefox 3.0以上

ぉー…
今度は「x:default」が追加されました。
…セレクタだけでこんなに長くなるぐらいなら、
ハックに頼らない組み方するわな…


Safari2～3

うわぁん、泣きそうだよー。
誰がこんなハック見つけたんだろう。


Safari2～3.1

ゼロコンマイチの違いなのに…


Safari2～3.1とOpera 9.25

縦棒が入ってきましたね。何でもありか？ｗ


Safari3以上とChrome

…ナニコレ…
cssをcssで囲んでるイメージ…


Sarafi3以上とChromeとOpera9以上とFirefox3.5以上

モダンブラウザよりも、IE6とかあそこらへんのがバグ多いと思うから、
ぶっちゃけモダンブラウザ用のハックってあまり使わない気がする。
でも、ま、勉強勉強。いつか使うかもだし。


Opera9.25以上

セミコロンが頭についてるｗｗｗ

二つ目のハックは、どうやらSafari2辺りにも有効？(未確認)


Opera８と９以外

何？class[hypen-ated]って。しらべよ。



あー…

結論的に言えば、IE6と7はこの世からいなくなれば良いと。
よく使うハックって、この2つだったりする気がする。
少なくとも僕はそう。

…ハックしなきゃならないような組み方だからなんだろうけど…

つかさ、なんでヴァージョン毎にcssのレンダリングが違うわけIEって。

それと。
難しい話かもしれないけど、全ブラウザで同じレンダリングして欲しい。
組み手泣かせだし、そんなんだからcssハックとかあるわけで。

ま、楽しいからいいけど。


あ、上記のハック、試したけど効かないよーってことがあったら、
ごめんちゃい。
僕も外様から(勝手に)頂いたブツなので☆キャハッ☆


ちゃお☆