あろ〜。 Firefoxの3.5と3.6で、ものっそい実装変わったよね〜。切り分けしたいよね〜。できたみたい。 div.sample, x:-moz-broken, x:last-of-type, x:indeterminate { (ここにFirefox3.6以降でのみ適用する記述) } Operaの最新版もChromeの最新版も華麗にスルー。その他のハックは以下を参照かな〜? CSSハック一覧:HTML│CSSタグ辞書 でわでわ。
IE9 プレビュー版を入れて、IE9用のCSSハックがあるのかな?と思っていろいろ試してみた。 ググってないので手探り状態。 あちこちで出だしたらまとめよう。 /* IE系 */ * html #css-hack { color:#00f; } * html #css-hack { _background-color: #00f; } #css-hack { /color:#00f; } *:first-child+html #css-hack { color:#00f; } #css-hack { color /**/:#00f; } head~/* */ body #css-hack { color:#00f; } html>/**/body #css-hack { color:#00f\9; } html:not(:target) #css-hack { color:#00f\9;
Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method.. The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written previously about the original clearfix method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifica
Operaだけってのが見つけられなかったので、エントリーかいてみました。といっても他のCSSハックの複合技でOperaだけ普通に表示させているだけです。しかも「ほぼ」で完全にではないんです。今回やりたかったのはOpera9.x系統、firefox3.x、safari3.x、IE5.5〜6、IE7をCSSで区別したかっただけで、ネタ用なんでまじめにレイアウト調整などするなら回りくどいことしなくていいと思います。多分それ以外のブラウザを使っている人はどんなに他のブラウザ進めたって乗り換えたりしないでしょ。レイアウト崩れとかどーでもいいんでしょ。 事前準備として、HTML側の構成はOperaブラウザで閲覧すると「Operaサイコォオー」と表示され、それ以外のブラウザでは「Opera使いなさいよぉ!」と表示させることにします。 <html> <head></head> <body> <div cl
Directions Type/paste some handcrafted CSS into the first box. Click the "Test It" button. The second box (and the example divs) show what your browser makes of it. /* Some example CSS */ body .class1 { border-color: black; } /* Gecko hack. */ @-moz-document url-prefix() { body .class1 { border-color: orange; } } /* Pre IE7 hack. */ * html body .class1 { border-color: green; } /* IE7 hack. */ body
Firefox 用の拡張機能を公開するサイト兼駄文(目指せ!! 打倒 真鍋かをり)幸か不幸か ad4U で注目を浴びる事になる Visited Hack なんだけど、このアプローチの危険性自体は visited 擬似クラスが導入された時から言われていて、当時はまだウェブ経由の攻撃が現実の脅威では無かったし、DOM も正式勧告されていなかったので、未訪問時の色を visited と同色にする事で、リンク先のサイトを訪問済みだから信用できると思わせてブラクラを踏ませたり、アダルトサイトに飛ばす位しか出来なかったのだけど、visited 擬似クラスを使用した攻撃モデル自体は考えられていた。 それを現代の技術で発展させたのが ad4U という事になるのだけど、突き詰めていくと結局ハイパーリンクにふたつの静的状態が存在することが、攻撃を容易にしているわけで、そうなると visited 擬似クラス自
概要 Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。 動作確認用の demo 説明 複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。 しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。 例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-chi
CSSコーディングでブラウザごとの表示の違いを調整するために、ブラウザが持っている「バグ」を逆手に取って利用するCSSハックの大辞典CSS Hack Labへようこそ! 「Webデザインがブラウザを変えると崩れちゃう!助けて!」 そんな問題を解決するのが、このCSS Hack(CSSハック)です。各ブラウザの微妙な違いを突っつき、ブラウザごとに違ったCSSスタイルを適用します。 CSS Hack Labでは、私が知る限りのCSS Hackを掲載したライブラリー、CSS Hackに関連するコトについてのコラムなどを掲載しています。 CSS Hackが初めての方は・・・ “CSSハック”とは何?(製作中) - CSS Hackを知らない人はCSSコーディングで損をしている!? CSS Hackを知っている方は・・・ CSS Hack Labは製作中のWEBサイトです! 製作途中のページやリンク
「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。 このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1 1.サンプル1 h1 の後方に img を置く場合は、CSSハックを使います(h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…)。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。 画像置換サンプル1 (X)HTML <div id="header"> <h1>タイトル</h1> <div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テ
CSSハックって何だろう CSSでレイアウトを再現する上で、ブラウザによって表示に違いが出てくる事がある。CSSの仕様通りにレンダリングしないブラウザのバグを補うため、CSSハックと呼ばれる手法を用いて様々なブラウザで表示を一致させるためのテクニックだと思っている。 とくにIEでの表示のバグを回避するために使用される物と判断される。 この間個人でサイトを作っていてWinIE5-6でバグる現象があり、どうやっても対処できなかったので、仕方が無く古いIEでの非対応プロパティ非対応セレクタ、子供セレクタと隣接兄弟セレクタ等を用いた手法で旧IEのバグ除けをした。 p{ color: red; /* IE 5-6だけ適応 */ } html>body p{ color: blue; /* IE 5-6以外のモダンブラウザだけ適応 */ } 知人にこの手法を見せたところ、「これはCSSハックじゃない」
Design, Typography, and the Web as Seen by One Guy in Vancouver, B.C., Canada ISSN 1708-0789
Home CSS Filters and Hacks Because of the generally crappy CSS standards support in modern browsers, a number of techniques have been developed to hide CSS stylesheets, rules, and declarations from browsers that won't understand or will mis-interpret them, or to set different values to the same CSS property in different browsers in order to acheive the same appearance on all (or most) browsers. On
Safari のCSS Hackのまとめです。 Safari 3の検証には、2007年6月11日にリリースされた「Safari 3 ベータ版 for Windows XP」を使用しています。 ※Safari 3の正式版は、2007年10月にリリース予定です。 html*element sign after a semi-colon html:¥66irst-child html* box brackets html* underscore @media all body:last-child:not(:root:root) html[xmlns*=""] body:last-child body:first-of-type -webkit-min-device-pixel-ratio:0 /**/ html* 下記の10個のうち、Safari 3のみ有効だったのはbody:first-of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く