タグ

CSSとIEに関するB-SAKATUのブックマーク (25)

  • IE 9以下に存在するセレクター数制限にはまった

    IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい(リクエスト数削減のため) との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;

  • blog.katsuma.tv

    CSSでDOM要素に対してアルファフィルターを適用させたいときは、クロスブラウザを意識すると次のような記述になると思います。 もうすこし古いMozilla系ブラウザを対象にするなら-moz-opacityの定義も追加してあげるとことになりますが、 今回はIEに絞った話のため、そのあたりは割愛します。 element { filter: alpha(opacity=0); /* IE / opacity: 0; / その他のモダンブラウザ */ } さて、普段は特に何も考えずにfilter:alpha~と記述していたのですが、 実はIEはある条件下によってまったくfilterが効かない場合があります。 ActiveXが無効 そもそもの話ですが、filterはActiveXを利用したレンダリングを行っています。 そのため、そもそもセキュリティの設定などでActiveXを無効にされていると、fi

  • Internet Explorer

    Internet ExplorerCss, UA, Style sheets y Marketing La decoración del hogar evoluciona constantemente, adaptándose a las nuevas tendencias y estilos que reflejan los cambios en la sociedad, la tecnología y las preferencias personales. En 2024, las tendencias de decoración para el hogar se caracterizan por una mezcla de sostenibilidad, tecnología avanzada, y un enfoque en el bienestar …

    B-SAKATU
    B-SAKATU 2010/04/03
    IEのデフォルトCSSのまとめ。IE6~9まで揃ってて素敵。
  • http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

  • そろそろブラウザの実装レベルに応じたスタイリング分けをしよう - Liner Note

    そろそろブラウザの実装レベルに応じたスタイリング分けをしよう 書いた人: hash 投稿日: 2008年06月08日(最終更新:5年6ヶ月と28日前) 読者の皆さんの反応 1 被ブックマーク数: 70 要約:シンプルなマークアップを元に各ブラウザの実装レベルに応じて、様々なスタイリングをしていく方が楽だし、いろんな閲覧者が幸せになれるんじゃないかなと思った次第 全てのブラウザで同じに見える必要はないというのは前から何度か言われていることですが、もう少し具体的な文脈に落として考えてみようかな。 例えば、引用文を引用文ぽくスタイリングしたいとする、こんな感じに。 で、とりあえずGoogle先生で調べてから頭を回してみるわけですが、 Natalie Downe » Blog Archive » Inline image quotes CSSで引用をデザインする。 – DesignWalker 第

  • スタイルシートについての質問です。 <table>〜</table>のタグ内で背景を半透明化すると同時に 文字と画像を不透明にする方法を教えてください。…

    スタイルシートについての質問です。 <table>〜</table>のタグ内で背景を半透明化すると同時に 文字と画像を不透明にする方法を教えてください。 <td width=”*” class=”***”>で指定して「filter: Alpha(Opacity=50)」を使うと 背景画像と文字or画像両方が半透明化されてしまいます。 やりたいことを簡単に説明すると、 花柄テーブルクロスの上に半透明のおぼんを置いて その上にコーヒーカップを置く感じです。 おぼんからは花柄テーブルクロスが透けますが、 コーヒーカップからは透けません。 やり方が載っているサイトでもOKです。 実際に試してみて上手くいった例を希望します。 使うブラウザはIEでお願いします。

    B-SAKATU
    B-SAKATU 2008/11/14
    「親要素と本文の間に「幅・高さを明示しない」「相対位置指定と明示された」ブロック要素を置くことで親要素に適用されている効果を回避できます。」
  • IE8のCSS3およびベンダ拡張は"-ms-"に変更、Webデザイナは注意必要 | エンタープライズ | マイコミジャーナル

    Internet Explorer 8 Microsoftの次期メジャーブラウザとして登場することになるIE8では、標準規約への準拠作業が着々と進められている。特にCSS 2.1のテストスィートを寄贈するなど、CSS 2.1準拠の取り組みには余念がない。今回さらに同社のCSS 2.1への取り組みを強調する変更がIEBlogにおいてMicrosoft CSS Vendor Extensionsのタイトルのもと発表された。これによってIE7やIE8向けに作成したCSSに変更の必要性が生まれるためWebデザイナは同発表に注意しておきたい。 ブラウザでは標準規約として規程されたCSSプロパティ、標準規約で規程されているものの完全には準拠していないCSSプロパティ、現在標準化が進められているCSSプロパティ、ブラウザベンダが用意した独自拡張プロパティなどがある。こうしたプロパティのうちブラウザベンダ

  • font-familyの憂鬱 - Webtech Walker

    最近font-familyの指定で悩んでます。少し前までは、下記エントリーのような理由で、ヒラギノ→メイリオ→MS P ゴシックみたいな感じで指定していました。 CSSのfont-family:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 ヒラギノを指定しなくなった理由 わけあってヒラギノをwindowsにインストールする必要がありまして、しばらくインストールしたまま使っていたのですが、windowsでヒラギノの表示は少々汚くて見づらいものがありました。 しかも、ヒラギノで表示されるサイトがかなり多いんです。それに耐えられなくなり、ヒラギノは使うときだけインストールするようにして、いったんアンインストールしました。いくらwindowsにヒラギノを入れているユーザーが少ないといっても、自分でそういう経験をしたので、ヒラギノの指定はしづらくなりました。あと、自分の周りのデザイナーさんとか

    font-familyの憂鬱 - Webtech Walker
    B-SAKATU
    B-SAKATU 2008/09/29
    "文字コードがUTF-8で11px相当のフォントサイズがある場合は、IEのみ日本語フォントを指定してみます。"
  • IE7 Test Page

    IE7/IE8 The selectors and properties below should all work according to the W3C specifications. IE7.js CSS Selectors

  • IE 8のβ版は2008年前半にリリース

    Microsoftは次期版ブラウザ「Internet Explorer(IE)8」のβ版を2008年前半にリリースする。同社IEチームが公式ブログで明らかにした。 また同チームは、IE 8がAcid2テストに合格したことも発表した。Acid2は、ブラウザがHTMLCSSなどのWeb標準に準拠しているかどうかを測るためにWeb Standards Projectが作成したテスト。このテストに合格したブラウザには、テスト用のスマイリーマークが正確に表示される。 実際に機能するIE 8のコードでテストした結果、製品版でもAcid2テストに通るとの確信を得たために公式ブログでの発表に踏み切ったという。 IEチームは、IE 8の目標は、既存のWebを壊すことなく適切な標準を優れた実装でサポートすることだとしている。また第2の目標として、IE 7で起きた問題を避けることを挙げている。IE 7ではC

    IE 8のβ版は2008年前半にリリース
    B-SAKATU
    B-SAKATU 2007/12/20
    表示できるにしても今度はいったいどんなバグを実装していただけちゃうんでしょうかね? てか日本でIE7の自動更新後しばらくしてIE8βがでるのか。IE7飛ばしてIE8にいっちゃえばいいのに。/id:t-murachi XPには来ないだろうね。
  • IE7用のハック(*+html body)で指定したスタイルがOperaにも適用される - Webtech Walker

    解決方法 そういうわけでXML宣言を入れてる場合にIE7のみ適用させたいスタイルがある場合は「*:first-child+html」を使用したほうよいです。このハックで指定したスタイルだとXML宣言の有無に関わらず、Operaには適用されないのを確認しました。 なのでIE7のみに適用させたいスタイルがある場合は以下のように書くとよいです。 body { background: blue; } *:first-child+html body { background: green; } まとめ とりあえず今回のことでわかったのは、何が起こるかわからないのでハックは極力しないほうがいいということです。当たり前のことですが、改めて思い知りました。 もしかしたら他にも要因があるのかもしれなし、Operaのバージョンによって現象がでないとかいうこともあるかもしれません。詳しく知っている方は教えてくだ

    IE7用のハック(*+html body)で指定したスタイルがOperaにも適用される - Webtech Walker
    B-SAKATU
    B-SAKATU 2007/12/20
    IE7 のみに適用させるには *:first-child+html body。
  • hoshikuzu | star_dust の書斎 - 2007-09-18 IEではHTMLのコメントにスタイルを付加できるらしい

    バージョン Firefoxの1.508ぐらいの古いもので考えてみました。 background:url("javascript:ほえほえ") background:url("javascript:ほえほえ");Firefoxでは上記のようなスタイル記述をほどこしたbody要素内の各要素で、ほえほえを安易に書いたときに、documentオブジェクトには手が出せません。つまりcookieを単純に盗み出すことが出来ないのかもしれません。権限がないというエラーメッセージが出るのです。また、JavaScriptの組み込み関数も利用できません。alert()とか。XSSされにくい感じです。windowオブジェクトにも制限がかかっているかもしれません。 でもでもでも locationオブジェクトそのものに値を設定はできます。 location="attacker.example.com";これでURLの

    hoshikuzu | star_dust の書斎 - 2007-09-18 IEではHTMLのコメントにスタイルを付加できるらしい
    B-SAKATU
    B-SAKATU 2007/09/25
    <q>IEではHTMLのコメントにスタイルを付加できるらしい。</q>これが IE クオリティー。
  • 窓の杜 - 【NEWS】米MS、HTML構造やレイアウトを検証できるWeb制作者向けIEプラグインを正式公開

    Microsoft Corporationは9日(現地時間)、Webページの構造を検証できるIE用プラグイン「Internet Explorer Developer Toolbar」の正式版を無償公開した。Windows XP/Server 2003/Vista上のIE6/7に対応し、現在同社のダウンロードセンターからダウンロードできる。 「Internet Explorer Developer Toolbar」は、IEのエクスプローラバーとして動作するWeb制作者向けのプラグイン。ローカルまたはインターネット上のWebページのHTML/CSS構文を解析でき、レイアウトや色合いの調整、W3Cの文法チェックサービスを利用した構文エラーチェックなど、アクセシビリティに配慮したWebページ作成に便利な機能が多数搭載されている。 エクスプローラバーはWebブラウザー画面の下側へ表示され、上部に各

    B-SAKATU
    B-SAKATU 2007/05/13
    firebug っぽい
  • TRANS - * { magin: 0;}だけでは物足りない!zoom: 1;を使おうよ!

    IE6からIE7が今後格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。

    TRANS - * { magin: 0;}だけでは物足りない!zoom: 1;を使おうよ!
    B-SAKATU
    B-SAKATU 2007/05/01
    hasLayout とか死ねばいいのに
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    B-SAKATU
    B-SAKATU 2007/04/30
    :first-child で コメントも拾ってしまう
  • LSC - Mar 2007 - dataスキームハック

    B-SAKATU
    B-SAKATU 2007/03/06
    "Another HTML-lint gateway で 100点を取るのは「目標」ではなく「最低ライン」" XHTML であるために 100 点を取る必要はない。XHTML であるかは W3C の Validator で確認すればいい。それに、100 点になることに意味はない。
  • 非対応セレクタを利用した CSS ハックの注意点 - 2xup.org

    2007-01-21T04:00:10+09:00 Microsoft Internet Explorer 7 正式版の登場で、これまで未対応だった CSS セレクタが利用できるようになりました。Windows IE7 で対応したプロパティのおさらいと、その他ブラウザでの対応状況を資料ではなく実際に試してみてまとめていた中から今回は子セレクタと隣接兄弟セレクタにしぼり、備忘録も兼ねてまとめてみます。子セレクタ、隣接兄弟セレクタの仕様は以下のとおり。 子セレクタ A>B { property: value; } 親要素 A の直下(子) にあるBにのみ装飾を行うセレクタ。 div>span { color: gray; } この場合、<div><span>not gray</span></div> はグレーの文字になりますが、<div><p><span>not gray</span></p>

    B-SAKATU
    B-SAKATU 2007/02/09
    子セレクタと隣接兄弟セレクタを利用する場合は、非対応ブラウザに対して違う装飾を行うかどうかに関係なく、要素と要素をつなぐ > や + の前後に空白の無い状態でマークアップするほうがよさそうです。
  • IE5でアルファチャンネルPNGを使うための一番簡単なライブラリ あるいはIEの失われたテクノロジに驚異せよ

    http://d.hatena.ne.jp/amachang/20070206/1170715555 http://labs.unoh.net/2007/02/ie6_png_fix.html http://web.kankodo.net/2007/02/01-233315.html http://phpspot.org/blog/archives/2007/02/iepngjavascript.html なんかはやってるみたいなんで作ってみました! 一番設定が簡単だと思う。IE5IE5.5以上なら多分動く*1。 あとIEすごいよ!というお話 やりかた 1.次の内容を alpha.htc という名前で適当なところに置く <SCRIPT LANGUAGE="JScript"> (function(){ runtimeStyle.filter += 'progid:DXImageTransfo

    IE5でアルファチャンネルPNGを使うための一番簡単なライブラリ あるいはIEの失われたテクノロジに驚異せよ
    B-SAKATU
    B-SAKATU 2007/02/09
    ハイル・ゲイツ!ハイル・ゲイツ!
  • 【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 | クリエイティブ | マイコミジャーナル

    Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます