IE8が対応したCSSと標準規格 - builder by ZDNet Japan
Internet Explorer 8（以下、IE8）の正式版がリリースされた。IE7は標準規格への準拠が不十分で多くのウェブ制作者を失望させたが、IE8ではCSS 2.1をサポートして多くのバグを修正し、FirefoxやSafariなどのブラウザと同じように、標準に準拠したかたちでページを表示できるようになっている。 そこで本連載「IE8のCSS対応」では、IE8が新規に対応したCSSと標準規格について大まかにまとめ、別稿で個別の機能や修正されたバグなどについて細かくみていきたい。 IE8がサポートした標準規格 今回、IE8がサポートした標準規格はW3CのCSS 2.1だ。IE7には未対応のCSS 2.1のプロパティや値があったが、IE8では一通りサポートしている。 IE8が新規にサポートした主なCSS 2.1の機能 機能セレクタやプロパティ
IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法
IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法 ◆Tip: High quality CSS thumbnails in IE7 [Devthought] [情報元：画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌] HTMLで画像サイズを強制的に縮小表示させても、きれいに縮小した画像を表示させるCSSテクニックが紹介されています。対象となるのはIE7。ちなみにFirefoxやGoogle Chromeはこのようなテクニックを使用しなくてもきれいに表示されるそうです。初めて知った・・・。 小さい画像を表示する場合、通常はあらかじめ縮小した画像を用意しておきますが、このテクニックを用いれば、場合によってはサムネイルの作成の手間を省くことが出来ます。ただ、実際には表示が縮小されていても、元の画像をそのまま読み込ませているため、ページの構成
When can I use... : Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web ...
100%安全なCSS Hack for IE | Takazudo Clipping*
世の中には腐るほどCSS Hackがあります。いずれも、ブラウザのバグを逆手にとったものであり、今後出るブラウザでは影響が無いだろうと言われるものが頻繁に使われますが、それらが100%安全とは言い切れません。それらに対し、これは完全にクリーンで安全なCSS Hack。IE8以上がでたらあああああ！このスタイルはIE6だけに適用されるはずなのに！！！何てことはありえない安全なCSS Hack。こんな感じです。 <body> <!--[if IE]><div id="IEroot"><![endif]--> <p>bodyの本来の中身。IEだけ赤くなる</p> <!--[if IE]></div><![endif]--> </body> #IEroot p{ background:red; } こんな感じでbody直下にdiv#IErootを、Internet Explorerの条件分岐コメン
CSS Nite Vol.18に行ってきた その1 | Blog hamashun.com
今回でひとまずの区切りとなるCSS Nite。 数えればなんと18回目でした。 月イチ無料開催はこれで終わりになり、今後は様々な形態での開催となっていくようです。 今回の内容は第一部が来賓の方3人による、割と告知的な内容。 第二部が主催の鷹野さん（株式会社スイッチ）による「Internet Explorer 7対策」という物でした。 イベントレポートと自分の為の覚書の、両方の意味を込めて記事を書いておきます。 第一部 WebSig24/7、ネクサス アドバンスセミナー、W2Cから、3人のゲストが、次々にイベントの告知や団体の説明をされました。 CSS Niteは割と実装側の立場のイベントですけど、そうではなくてディレクション側のイベントもあったりで、そちらの方も興味を惹かれました。 第二部 さて、第二部は鷹野さんの「Internet Explorer 7対策」です。 まだまだシェア的にはI
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (1) 01 はじめに IE7日本語正式版のCSS実装を検証する (MYCOMジャーナル)
Internet Explorer 7日本語正式版 Internet Explorer 7(IE7)の日本語正式版がリリースされた。現在はまだダウンロードしてインストールする必要があるが、2007年4月をめどに、Windowsの自動アップデートで「優先度の高いアップデート」として配布される予定だ。「IE7ではWebページの表示が崩れる」といった問題が出る場合、それまでには対応を済ませておきたい。 そこで本稿では、IE7 beta2のCSS実装検証を元に、IE7日本語正式版における変更点やバグをまとめる。また、IE6以下との下位互換やモダンブラウザとの互換性を保ちながらバグを回避する方法、CSSハックについても検証する。 新規対応機能一覧 未対応機能一覧 修正済みバグ一覧 未修正バグ一覧 CSSハック一覧 参考 CSS実装徹底検証! そこが知りたいInternet Explorer 7 なお
min/maxワイド等利用可能になるライブラリminmax.js
CSS minimum and maximum sizes The CSS2 standard specifies four properties that can be very useful when working with CSS layouts: min-width, max-width, min-height and max-height, These can be used in conjunction with the well-known width and height properties to get effects which can be especially helpful in designing layouts that are a mix of fixed-size and window-size-relative units. For example,
expression() のまとめ
前書き expression()のことをダイナミックプロパティといいます。 スタイルシートのプロパティで body { height: expression(); } みたいに使います。 簡単に言うと、CSSの中でJavaScriptが動かせる、って感じです。 IE5以上での、独自拡張です。 Googleで検索しても、 イマイチまとめサイトとかサンプルみたいなものがなかったので、 値としてスクリプトのようなものが書けるということしか知らないのですが、 いろいろ実験してでてきた経験則を、 ここでまとめて紹介して置いておくことにします。 あくまで経験則なので、もしかしたら間違ってたり もっとうまいやり方があったりするかもしれません。 備考 IE5以上で、 expression() というプロパティを使うことで、 ダイナミックにページや要素のスタイルを変えることができます。 一番簡単で、かつ一番
hail2u.net - Weblog - IEでフロートさせたボックスのマージンが倍になるバグ
WindowsのIE5.5や6など(5とか5.01は知らない)にはfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。最近はfloatを使ってゴニョゴニョする機会も多いと思うので厄介に考えている人も多いでしょう。実はdisplay: inline;とか指定してやると回避できちゃったりとかします。ネタ元はThe IE Doubled Float-Margin Bugだったような気がしますが、別なところで見つけたような気もする。 バグの状況自体は上記CSSバグリストのURLを参照していただければわかりやすいです。と言いつつ回避手段の使用前/後を並べてみたHTMLを用意してみました。IEで見れば一目瞭然で、1つ目のコンテナ内のフロートさせたボックスの左のマージンは倍(80px)になっているのに対し、2つ目のコンテナ内のフロートさせたボックスの
IE7 の CSS レンダリングを検証
IE7 の日本語版もリリースされ、ぼちぼち使い始める人たちも増えてきそうな今日この頃。 IE7 からは今まで Firefox 等に比べて遅れていた CSS への対応も進み、サイト制作者にとってはうれしい限りなのですが、実際 IE7 のCSS レンダリングはいかがなものか、簡単に検証してみました。 今回検証したのは、IE7 におけるボックスモデルの取り扱いと、セレクタへの対応状況。 まずはボックスモデルの検証ですが、用意したのは下記の XHTML と CSS。 <ul> <li class="first_list">First element of list</li> <li class="second_list">Second element of list is a bit longer to illustrate wrapping.</li> </ul> ul { margin:0;
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (1) 01-01 Internet Explorer 7 beta2のCSS実装 (MYCOMジャーナル)
米Microsoftから2006年5月、Internet Explorer 7(IE7)beta2がリリースされた。IE7は2001年にInternet Explorer 6(IE6)がリリースされて以来、5年ぶりのアップデートとなる。このメジャーアップデートでは、CSSの標準規格への準拠やバグの修正、未対応だった機能への対応などが期待されている。 IE7 beta2では、CSS2.0のセレクタや「fixed」による固定位置表示、すべての要素に対する「:hover」の指定などに対応しつつ、XML宣言の記述によって発生していた問題が修正されるなど、要望の大きかった部分への対応・修正が行われている。 しかし、フロート(回り込み)関連や、プロパティを組み合わせたときに発生する細かなバグに関しては修正されていない部分も残っており、正式版リリースまでにどのぐらい修正されるかが注目される。 一方で、
Lucky bag::blog: IE でも擬似的に子供セレクタ
ある要素の直接の子要素に対してだけ CSS で指定をしたい場合、子供セレクタ div > p が便利。しかし、IE がこれに対応していなくて残念って感じだったんだけど、meyer 氏が IE でも擬似的に直接の子要素を指定できる方法を発見した模様。 Eric's Archived Thoughts: Universal Child Replacement 例えば、下記の (X)HTML があったとして、id="content" の子要素の段落だけ背景色を #ff8800 に変えたいって場合。 <div id="content"> <p>content の直接子供要素の段落。ここだけ背景色を変えたい。</p> <div id="foo"> <p>この段落は色は変えたくない。</p> <p>この段落は色は変えたくない。</p> </div> </div> 子供セレクタに対応しているブラウザであ
SummerWind » IE7正式版とその個人的まとめ その3
Oct 27, 2006 ちょっと間が空いてしまいましたが、その1、その2に引き続いて、IE7の個人的まとめです。最終回の今回は、CSSハックについてまとめてみます。ハックはブラウザのバグを利用したものであり、CSSの正しい使い方ではないため、今後はできるだけ使用を避けたいと自分は考えていますが、知っておいて損はないんじゃないでしょうか。 IE7では、IE6で使用することができたハックのほとんどは無効になるよう、様々な修正が加えられています。IE7で使えなくなったCSSハックについては、Odysseygate.comのInternet Explorer 7で使えなくなるCSSハックという記事に詳しくまとめられています。また、他のモダンブラウザを含めた使い分けは、Lucky bag::blogのIE7 を含むモダンブラウザ向けの CSS ハックまとめが非常に分かりやすいです。 IEで使えるC
SummerWind » IE7正式版とその個人的まとめ その2
Oct 23, 2006 その1に続いて、IE7の個人的まとめ。今回はCSSのセレクタ周りの対応状況を確認してみます。その1でも紹介しましたが、CSS実装徹底検証! そこが知りたいInternet Explorer 7を参照すると、IE6と比べるとIE7のセレクタの対応は結構進んでいる事が分かります。IE7では、子供セレクタ、隣接セレクタ、属性セレクタ、:first-child疑似クラスが使えるようになっているようです。 各種セレクタや疑似要素、疑似クラスの機能は、ここでは取り上げないので、CSSのリファレンス等を参考にしてみてください。それぞれの簡単な使い方は次のような感じになります。 /* --- 子供セレクタ ---*/ /* div要素の中のp要素に適用 */ div > p { color: red } /* --- 隣接セレクタ ---*/ /* h3要素に並んでいるp要素に適
SummerWind » IE7正式版とその個人的まとめ その1
Oct 22, 2006 先週、Internet Explorer 7の正式版がリリースになりましたね。リリースされたのは英語版のみですが、日本語版を含む各国語版も2-3週間以内にリリースされるようです。出たからには…、という事でこのサイトの表示具合も再度確認してみましたが、とりあえずは問題なさそうです。 IE7によるWebページの表示(CSS周り)はIE6と比べると大きく変わっているので、IE6との違いをきちんと認識しておかないとWebページの制作時に色々な問題が起こりそうです。というわけで、IE7についての表示とCSS対応について、他のサイトで公開されている情報を含め、個人的にまとめてみます。 まず動作モードについて。IEには標準準拠モード(Standard Mode)と互換モード(Quirks Mode)の2つがあり、モードによってCSSの解釈が異なります。IE6ではXHTML文書の
IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書
問題 以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample) * { font-size:100%; font-style:normal; } p { color: #666; font-size:2em; font-style:italic; } p:first-letter { color:#c00; } <p>THIS IS A TEST.</p> 結果 Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。 Firefox Opera IE6 IE7 考察 注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p要素に対しては font-style:italic; が適用されているため、この結果は全称セレクタ(*)に対するスタイル規
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
http://easygoing.under.jp/tips/index4.shtml
IEとFireFoxの表示を確認しながらCSSを編集できるエディタ: ある SE のつぶやき