2013 年 6 月 20 日
CSSハック firefoxも
前日のIEハックの件で、ちょうどFirefoxもboxモデルあたりが危ういのでハックを入れました。
#articles,x:-moz-any-link, x:default { width: 60%; max-width: 1000px; min-width: 300px;}
前日のIEハックの件で、ちょうどFirefoxもboxモデルあたりが危ういのでハックを入れました。
#articles,x:-moz-any-link, x:default { width: 60%; max-width: 1000px; min-width: 300px;}
ドロップシャドウを用いてテキストにボケ表現をするパターンは見ますが、画像そのものをぼかす表現は見たことがなかったのでサンプル作ってみます。
header h1{ -webkit-filter: blur(0px); -webkit-transition: all 0.2s linear; /*filter: blur(0px);*/ /*transition: all 0.6s linear;*/ } header h1:hover{ filter: blur(0px); -webkit-filter: blur(10px); }
このブログのことでした。
このブログは主に自分の備忘録なので、IEに関して何もしてないのです。
さすがに失礼なのとマイクロソフトのせいで恥をかかされるのもイヤなので
IE10限定ということで10行限定でハックを書くことにしました。
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /*IE10 style*/ }
これで3行つかってます。
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #articles{ width: 60%; } }
これで5行です。
これ以上はIEに時間を割く気になれません。
IEで見てる人ごめんなさいだけど、そういった方がこういった情報を欲しがるわけもないので大丈夫だと思います。
あとFirefoxの方も多いのですが、すみません。
Fireboxがboxモデルに完全に対応するまでお待ち下さい (今はflexが使えないもようです)
選択文字列の色をかえる方法です。
よく忘れるので。
使わないほうが無難と言われますが、使いたいのでしょうがないです。
::selection { color:white; background: #9b0000; }
このブログはCSS3に対応していないブラウザでは見れない形にしてあります。
というのも、boxモデルを使っているからです。
floatでの実装は高さを揃えるためにクリアしたりと古臭くて陳腐なのでやめました。
一番簡単な実装
#content{ display: -webkit-box; display: -moz-box; margin: 0 0 50px 0; border-bottom:1px solid #333; } #articles{ -webkit-box-flex: 1; -moz-box-flex: 1; position: relative; }
!importantは極力使わない方がいいというのは有名ですが
その代替として。
span.test1{ margin:0 auto; }
このように記述しているものをオーバーライドするときは
!importantをつかうと無茶苦茶になるので
上位のクラスやIDを指定するのが一般的
#container span.test1{ margin:0 auto 0 10px; }
なので最初から優先順位のことを考えずに
#container span.test1{ margin:0 auto; }
などとは書かないほうがいいみたい。
リンクのアウトラインだか枠線だか
フォーカスがあたったときの例の点線を消す方法です。
a{ outline: none; }
これ、有名なんでしょうか?
全然知りませんでした。
blurとか使ってました。
イメージ要素の隙間についてはいつも
#sample img { display:block; }
として回避していましたが、
#saple img { vertical-align:bottom; height:100px; }
とするやり方もあるようです。
heightは無理にいれなくてもよさそうです。
imgを強引にblock要素にするよりは素直っぽいです。
これからはvertical-align:bottom;を使っていきます。
勉強になりました。
なんだかアホらしいのでメモしたくなかったのですが一応。
#test { position:absolude; top:50px; } *:first-child+html #test { /*IE7のみ適用される*/ top:50px; }
0pxなどの場合は、単位を省いてもいいようです。
ずっとぼんやりしてましたが、今日からつけません。
p { margin : 0; padding : 0; }