CSS Archive

ここ見ながらまとめてる http://jsdo.it/GeckoTang/8ldM

• position: fixed;の実装
• overflow: scroll/auto;に対応が1本指でスクロールするようになった
  • -webkit-overflow-scrolling: touch;を指定するとスクロールバーを出せる(ネイティブなスクロールになる)
  • バーが出てた方が動きが滑らか

position:fixed;な要素と-webkit-overflow-scrollinを指定している要素が重なった時、z-indexを指定していないとおかしな挙動をする。 z-indexが指定してあれば問題ない模様。

あとは日時に関する入力タイプ(<input type=”datetime”>など)でドラムが出るようになった。

• date
• month
• time
• datetime

などなど。 valueに値が無いと空っぽ表示→クリックすると現在時刻。

<input type=”range”>がスライダー表示になった。 -webkit-appearance: slider-vertical;で縦スライダー。 ::-webkit-slider-thumbで動かすアレのスタイル指定。

あとはプライベートブラウジングのときのこれ iOS5で追加されるPrivate BrowsingモードとWebStorageの兼ね合い ::ハブろぐ はやっぱりそうなっていた。 try～catchで回避可能。

iPhoneでコーディング中、 [設定]→[Safari]→[デベロッパ]→[デバッグコンソール]を”オン”にしていると、 下記のようなCSSの切り替えが効かなくなる。

<link rel="stylesheet" type="text/css" href="./css/iphone_portrait.css" media="only screen and (max-device-width:480px) and (orientation:portrait)">
<link rel="stylesheet" type="text/css" href="./css/iphone_landscape.css" media="only screen and (max-device-width:480px) and (orientation:landscape)">

原因は不明。 3GSでも4でも同様の現象が起こる。

とりあえず忘れないようにメモ。

はじめに

画像をBase24とかでエンコードしてdataURIスキームで読み込む、ってことが最近のブラウザでは可能になった訳ですが、 仕事でスマートフォン向けのサイトを作っていた際に、画像の読み込み待ちが気になったのでちょうどいいと思い試してみたところ、 驚くほど早くなった(気がした)ので実際に計ってみました。

Continue reading

多分この件となんかしらの関係があるはず、というか根本は同じな気がする。

iframeで読み込むhtml内でDD_belatedPNG.jsを使うと iframeの中身がどっかに宇宙にいってしまうバグがある。 報告数も少なくgoogle先生もあんまり知らなそうだった。（ツイートで愚痴があったくらい） 解決方法としては iframeで読み込むhtml内でDD_belatedPNG.jsを使用する場合はiframeをposition:relative;にする必要がある。 PNGをSVGにして再配置する際に、基準となる要素を明示してあげる必要がある。（らしい） IE6乙！

iframeとDD_latedPNG｜</gecko>：げことじ。2010-03-18 (木) 17:33

転載乙！

げこ さんの発言:

　　　　　　　　 ,. -‐'''''""¨¨¨ヽ 
　　　　 　 　 (.＿＿,,,... -ｧァﾌ|　　　　　　　　　　あ…ありのまま 今　起こった事を話すぜ！ 
　 　 　 　 　 |i i|　 　 }!　}} /／| 
　　　　 　 　 |l､{　 　j}　/,,ｨ//｜　　　　　　　『おれはDD_belatedPNG.jsを使ってIE6で透過PNGを使ってたんだ。 
　　　　　　　 i|:!ヾ､ﾉ／ u {:}//ﾍ　　　　　　　　だが戻るボタンを押した途端PNG指定した要素の位置が全てずれてやがったんだ。』 
　　　　　　　 |ﾘ u' }　 ,ﾉ　,!V,ﾊ | 
　　 　 　 ／´fト､{ﾙ{,ィ'ｅﾗ　, ﾀ人　　　　　　　　な…　何を言ってるのか　わからねーと思うが 
　　　　 /' 　 ヾ|宀| {´,)⌒/ |<ヽﾄiゝ　　　　　　　　おれも何をされたのかわからなかった 
　　　　,ﾞ　 ／ )ヽ iLﾚ 　u' |　| ヾｌﾄﾊ〉 
　　 　 |／_／　 ﾊ !ニ⊇　'／:} 　V:::::ヽ　　　　　　　　頭がどうにかなりそうだった… 
　　　 /／ 二二二7'T'' ／u'　__ /:::::::/｀ヽ 
　　　/'´r　-―一ｧ‐ﾞＴ´　'"´ ／::::／-‐ 　＼　　　　position:absolute; だとか hasLayout だとか 
　　 / // 　 广¨´ 　/'　　 ／:::::／´￣｀ヽ ⌒ヽ　　　　そんなチャチなもんじゃあ　断じてねえ 
　　ﾉ ' /　 ノ:::::ー-､___／:::::／/ 　 　 　 ヽ　　} 
_／｀丶　/::::::::::::::::::::::::::￣`ー-{:::...　　　 　　　ｲ　 もっと恐ろしいものの片鱗を味わったぜ…

でも、なんか hasLayout がらみくさい気もするよ。 position:static; にしたら直ったし。

IE6 で overflow:hidden; を使う場合 width と height の指定が無いとその要素が消えちゃう(隠れちゃう)。っぽい。 width/height:auto; でもいいので指定しておく。

余り意識してなかったところなのでメモ。

追記(2009/11/13 13:57)　現象が見づらそうなので画像に変えました。

HTML

<ol>
   <li>いちばん</li>
   <li>にばん</li>
   <li>さんばん</li>
</ol>

CSS

*{
zoom:1;
}
ol{
list-style-type:decimal;
}
ol li{
width:200px;
}

ってあった場合

IE6、7で

みたいにリストのマーカーが消えました。

Continue reading