Home | Stopdesign
Creative outlet of Douglas Bowman Graphic designer and creative director. Work includes branding, digital, web, print, and application design. Led design teams at Twitter, Google, and Wired. San Francisco Giants fan. Late-start runner. Lernt Deutsch. Writes about design, UX, tech, running, parenthood, food, and travel.
IE7 と CSS ハックと条件付コメント - lucky bag
IE に適用させないための各種 CSS ハックは、IE7 で修正される事になりそう。 IEBlog : Call to action: The demise of CSS hacks and broken pages 修正しておいた方が良い一般的なハック IEBlog では下記のハックを使用しているウェブページは修正しといた方が良いよってな事を呼びかけている。 Child Hack ( body > #foo ) StarHtmlHack ( * html #foo ) The Owen Hack ( head:first-child+body #foo ) head + body Selector ( head + body #foo ) こういったハックを使わずに、IE 独自実装の Conditional Comments を使うことを推奨しているんだけれど、head 内に記述するのは
ボックスモデルハック - lucky bag
今更ですが、ボックスモデルハックって何？って言うCSS初心者の方へ。（偉そうですが、僕も全然です；） voice-familyハックを利用したBox Model HackをCSS Dencitieにて翻訳されていますので、ご覧になってみてはいかがでしょうか。基本的なハックですが、IE5.5などをキャッチアップできるので、使えれば重宝すると思います。ここでは、簡単に説明してみます。 例えば、ここに以下の様なブロックがあるとします。 div { width: 500px; padding: 10px; border: 5px; } OperaやIE6・NN6以上などのモダンブラウザであれば、ちゃんと500pxの幅で表示されるはずなのですが、CSS1を間違った解釈で表示するブラウザ（IE5.x）の場合、width500pxからpaddingとborderを引いた470pxと表示してしまいます。（
@import を使ってブラウザに CSS を読み込ませない方法 - lucky bag
特定のブラウザに CSS を読み込ませたくない方法の一つとして、 @import を使う hack がいくつかある。そういった hack を使いたい場合には、各 hack の@import 規則と適用ブラウザを一覧表にまとめたサイトが便利。 Hide CSS from browsers :: @import 縦に@import 規則、横に各ブラウザの対応状況、W3C CSS 検証サービス（W3C CSS Validator）に通るか、その際にエラーが出るのか警告が出るのかが分かるようになっている。プラス記号（ + ）は、その @import 規則を読み込むことが出来、マイナス記号（ - ）はその @import 規則を読み込むことが出来ない。 また、各 @import 規則の通し番号をクリックすることで、現在使用しているブラウザがその @import 規則で CSS を読み込む事が可能かを
pre要素にoverflow - lucky bag
htmlやCSSのコードを紹介するときにpre要素を使っています。横に長いコードの場合は、overflow: auto;と指定し、スクロールバーが表示されるようにしているのすが、IEの場合pre要素の幅を指定してあげないと、バーが表示されずpre要素内の中身いっぱい横に伸びて表示されてしまいます。そこで、IE5.5以降では認識できない子セレクタを使って解決します。 .content pre { margin: 10px; background-color: #FFFFFF; border: 1px dotted #CCCCCC; padding: 1em; width: 100%; overflow: auto; } #center > .content pre { width: auto; } IEのために幅100%を指定しますが、これだとOperaやMozilla系が横に伸びてしまうの
"通"御用達、CSSハック - CSS Dencitie
さて、先ほどのインラインのタブ・メニュー、何か妙なものが混じっていました。前に下線の付いたプロパティがあったり、同じようなセレクタに対して同じプロパティを指定していたり。 「ブラウザごとの差の吸収をします。」 先ほどはこの一言で終わりましたが、まさしくその部分です。 CSSにおける「ハック(Hack)」とは、各ブラウザのバグを利用して、そのブラウザにおける微調整を行おうというものです。よって、公式仕様では間違っている記述をします。 しかし、現状では、CSSについてバグの無いブラウザは存在せず、また実装の差による細かな単位計算の違いなどの問題もあり、各ブラウザでの微調整を欠かすことは出来ません。 まず、全体を鳥瞰しましょう。 Windows版InternetExplorerのバグを利用するハック Windows版InternetExplorerでは、プロパティの前に様々な特殊記号を置いても、
CodeWeb: [CSS]クロスブラウザな半透明フィルタ
IEには独自拡張のCSSでフィルターが使えます。こいつは便利なやつで半透明化やらグラデーションやら色々出来るのですが、なんだかんだ言っても独自拡張。互換性がありません。 しかし、アルファ値に限って言えばは他のブラウザでも独自拡張にて実装されているのでクロスブラウザ化することが出来ます。（クロスブラウザってJavaScript以外でも呼んでよかったけ？） [Internet Explorer対応] 0～100の数字で制御します。0に近づくほど薄くなります。 MacIEだと確か動きません。 img{ filter: alpha(opacity=20); } [Mozilla / FireFox / Netscape 対応] 0～1の数字、または0～100％で制御します。0に近づくほど薄くなります。 こちらは最新版のMozilla FireFox Netscapeで動作します。 -moz-opa
Odysseygate.com - Internet Explorer 7で使えなくなるCSSハック
前回に続いて、Internet Explorer 7で使えなくなるCSSハックについていってみたいと思います。きっとどこかのサイトがすでに公開してると思うのですが、どうもうまく検索できなかったので…。 参考にしたのは、例によってCascading Style Sheet Compatibility in Internet Explorer 7です。 CSS Filters（おで訳。適当に省略してます） ブラウザーベンダーによってCSSの実装が異なったり、さまざまなバグがあるせいで、CSS標準によっても結局表示がばらばら。結果としてウェブディベロッパーコミュニティはさまざまなCSSハック(MicrosoftはこれをCSS Filterと呼んでいる)を作リ出した。 IE7では、数々の（これらの原因となる）構文バグを修復したので、これまでのバージョンのIEで動作していた、以下のCSSハックは動作
Gmailの検索演算子一覧（隠れコマンド含む）。高度なフィルタ作成に！
after:2006/03/31 before:2006/04/1 ※世界標準時。日本の日付とズレる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hide CSS from browsers :: @import
マージンの相殺 - CSS Dencitie
http://superfluousbanter.org/
構造のマークアップなしでフロートをクリアする方法