7cc@はてなブログ

JavaScriptとかとか

CSS

visibility: hidden と display: none の違いは2つ

CSS

この2つのCSSの違いについてはよく、「visibility: hiddenは空白を残す」ということだけ説明されている。しかし、詳しく説明するとそれ以外の違いもある。

CSS transformが効かない

CSS

CSS transformの適用される要素は決まっていて、仕様ではtransformable elementsと呼ばれる。 そのため、他の要素に使おうとしても効かない。 transformable elements(変形可能要素) = transformが使える要素 Block-level elements (divとか) atomic inline-…

element.onresize

まだ使えない。 element.addEventListner("resize", ... について

Google ChromeのCSSOMは相変わらず間違っている

追記 ver. 33.0.1750.117 m でCSSOMの実装が以前のバージョンに戻った。今は下記のエラーは表示されない しかしこの実装は間違っているので、将来的には変更があると思われる。 以下は追記以前の情報

IE9 開発者ツールの不具合 / デバッグ時の注意点

環境は全てIE9。10+では不明 IE9 console 開発者ツールを開いていないと、そこで止まる location.hash ローカルファイルだと、戻る/進むでロケーションバーに表示されなくなる。実際にはある。 非ascii文字のID + エンコードされたページ内リンク の :target…

CSS transition + display:none は子要素があれば出来る

CSS

あるいは親要素があれば。 方法 子要素でdisplay切り替え 親要素でtransition

リンクの点線を消す, ボタンの点線を消すCSS

概要 a, a>img をクリックした際の点線を消す。 button, input[type=button], input[type=submit]の点線の消し方もついでに。 つまり、フォーカスのある要素の点線の消し方について キーワード hidefocus, outline, ::-moz-focus-inner demo no dot for link…

スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意

html, bodyはページサイズ・ウィンドウサイズを決定する要素です。 これらにoverflow, height:100%などサイズに関わるスタイルを指定するとJavaScriptによる位置やサイズ取得に支障が出ることがあります。よほどの理由がない限りしてはいけません。 スタイル…