mippe | Shared With: Everyone - 15 hours ago | CSS, hack![[CSS]IE8までのブラウザを対象としたCSS Hack/Filterのまとめサイト | コリス](http://i.faves.com/01/58/84fe/26804204/06dc27f9eacb9c6fa1_5.jpg)
Browser CSS Hack/Filter supportは、IE4, Ns4から、IE8, Fx2, Op9.5, Safari3など、多くのブラウザのCSS Hack/Filterの対応をまとめたサイトです。
Browser CSS Hack/Filter support
Browser CSS Hack/Filter supportは、dithered.comのCSS Filterをバージョンアップしたもので、CSS Hack/Filterの対応を検証しているのは下記のブラウザになります。
※バージョン表記は省略。Internet Explorer (Windows)：4.0.1～8beta
Internet Explorer (Mac OS)：4.0～5.2.3
Pocket Internet Explorer (PocketPC)：4.0.1～5.2
Gecko(Firefox & Camino)：MM3～1.9b5pre
Netscape Navigator：4.0～4.8
Opera：3.5～9.5beta
Opera Mini：1.2～4.0
Opera Mobile：8.0～8.65
Safari/Webkit：1.0～3.1
Konqueror：1.9.8～4.0.2
OmniWeb：4.0～5.7b2
iCab：2.53～4.01
Netfront：Playstation3～3.5
Hv3：02/03/08
WebTV：1.0～2.6b46- mippe | Shared With: Everyone - 15 hours ago | free, windows, IE8, CSS
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。
- mippe | Shared With: Everyone - 19 hours ago | IE8, CSS
少し長くなってしまったため、簡単にポイントをまとめます。
IE8には、「互換モード」、「標準モード」、「より進んだIE8の標準モード」という、3つのレンダリングモードがある。
互換モードはIE6、IE7のものと一緒。標準モードはIE7のものと一緒。
互換性を保つため、IE8の標準モードにはmeta要素やHTTPヘッダによる指定が必要。 
mippe | Shared With: Everyone - 6 days ago | CSS, hackl
/*----------------------------------------
clearfix
----------------------------------------*/
#top div#whatsnew dl:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
*:first-child+html #top div#whatsnew dl {
display: inline-block;
}
/*\\*//*/
#top div#whatsnew dl {
display: inline-table;
}
/**/- mippe | Shared With: Everyone - 17 days ago | CSS
Quoted: CSSマスターの方にご質問させていただきます。現在横並びリストを制作しようとしております。リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。<UL id="sitemenu"><LI id="side">あいうえお<LI id="side">かきくけこ</UL>/***********LI設定***********/#side A{ width:60px; //幅 height:40px; //高さ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; background-image : url(背景.gif); //背景 background-position : 0px 0px; no-repeat; text-align : center; //文字の位置 text-decoration : none; //文字飾り vertical-align : top; //文字の高さ padding-top : 10px; //パディング高さ float : left;}#side A:hover{background-position : 0px -40px; no-repeat;}/***********UL設定***********/#sitemenu{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; border-width : 0px 0px 0px 0px; vertical-align : top; text-align : left; list-style-type : none; float : left; }#sitemenu LI{ float : left;}なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。
- mippe | Shared With: Everyone - Jul 10 2008 | CSS
Quoted: コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ウィンドウを下方に広げても、フッタは常に下部に張り付いたままで、逆にウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。
- mippe | Shared With: Everyone - Jul 01 2008 | Firefox, css
先日リリースされたFirefox 3.0は順調にダウンロード数を伸ばしているようだ。執筆現在で2,600万ダウンロードに達しようとしており、Net Applicationsの報告によれば24日の時点ですでに世界で3%をこえるシェアを獲得している。Firefoxの採用率が高いヨーロッパでは5%をこえている。今後も順次シェアを伸ばし、主要ブラウザとしての位置を獲得することになりそうだ。
Firefox 3.0ではCSS 2.0および2.1がサポートされているほか、現在策定が進められているCSS3の機能も一部対応している。Firefox 3で導入されたCSSの新機能や改善点はCSS improvements in Firefox 3にまとまっているが、David Baron氏がまとめたSome new CSS features in Firefox 3がサンプルも含めてよくまとまっているので紹介しておきたい。
David Baron氏はMozillaでFirefoxの開発に関与しているデベロッパ。W3CのCSSワーキンググループで作業するなど、FirefoxとCSSに関して知識が深い。同氏がSome new CSS features in Firefox 3で特に紹介しているCSSの新機能は次のとおり。
inline-blockおよびinline-table
font-size-adjust
rgba()およびhsla()カラー
width、min-width、max-widthで指定できる新しい値 -moz-max-content、-moz-min-content、-moz-fit-content、-moz-available
white-space: pre-wrap
inline-blockおよびinline-tableは将来的にクロスブラウザ向けのWebサイトを作成する際に多様されることになる便利な機能として使われることになりそうだ。font-size-adjustは日本語にはほとんど関係がない。英語のように大文字と小文字が混在する言語でフォントサイズの調整をするために活用できる。Firefox 3.0 rgba()の使用例その1 - Some new CSS features in Firefox 3より抜粋
Firefox 3.0 rgba()の使用例その2 - Some new CSS features in Firefox 3より抜粋rgba()およびhsla()はCSS3で導入される機能。従来はopacity: 0.5のように指定していたものをrgba(0, 255, 0, 0.5)のようにRed-Green-Blue-AlphaやHue-Saturation-Lightness-Alphaで指定できる。これまでよりも豊かなカラー表現がまとめて指定できるようになる。Some new CSS features in Firefox 3はサンプルと説明の双方が簡潔にまとまっている。Firefox 3.0で新しく対応されたCSS機能の概要を知る上で有益なドキュメントだ。WebデザイナやWebデベロッパは一読しておきたい。
- mippe | Shared With: Everyone - Jun 28 2008 | javascript, css, flash
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
- mippe | Shared With: Everyone - Jun 28 2008 | javascript, css, design
動作環境は以下のとおり
・Internet Explorer 6 & 7
・Firefox 2.0
・Safari 2.0
・Opera 9.0導入は比較的簡単です。
ダウンロードしたファイルのうち、index.htmlを開いてみるとわかると思います。<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
<script type="text/JavaScript">
window.onload = function() {
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true
}
var myBoxObject = new curvyCorners(settings, "rounded");
myBoxObject.applyCornersToAll();
}
</script>呼び出しはこれ。
これを<head>～</head>の中にいれる。後は表示したい部分で呼び出せばOK。
灰色背景の場合
<div class="bubble">
<blockquote>
<p>Works great for blog comments!</p>
</blockquote>
<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
</div>バック灰色、淵が白の場合
<div class="bubble">
<div class="rounded">
<blockquote>
<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
</div>バック黒、淵白の場合
<div id="pimped" class="bubble">
<div class="rounded">
<blockquote>
<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Dark Bubble</strong></cite>
</div>お試しあれ。
http://www.willmayo.com/2007/02/10/css-speech-bubbles/ - mippe | Shared With: Everyone - Jun 28 2008 | CSS
word-break
normal:半角英数字のみ単語の切れ目で改行する
break-all:半角英数字、日本語共に単語の途中でも改行する
keep-all:半角英数字、日本語共に単語の切れ目で改行する
Related Content from Around Faves
css
-
2 FaversViewed: 6 TimesQuoted: Create a Simple, Powerful Product Highlighter with MooTools, Web Development & Design Tutorials
- wilburscoles - Jun 30 20082 FaversViewed: 35 Times
- Rif. - May 30 20063 FaversViewed: 36 Times
