【CSS】背景のアニメーション - Qiita
a { background-size: auto 100%; transition: 0.3s; } a:hover { background-size: auto 110%; } (ベンダープレフィックス、その他の要素は省略) としてたのですがががが。。。 IE11が動かないorz ほかのCSSアニメーションは何の違和感もなく動いているのに、background-sizeだけは反応してくれない スムーズな動きは全くなく、transitionなんて無かったかのようにカクカク動きやがる IEなんて無くなればい(ry さてどうしたもんか ここでjsを使うのもなぁ、、、ということで scaleで対処することにしました
asamuzaK.jp : IE11でもbackground-sizeをアニメーション
IE11にはいろいろと毀誉褒貶があるようだが、Web標準の実装では今や他のブラウザとほとんど遜色ないし、個人的には良くできたブラウザだと思う。 そんなIE11だが、CSSのAnimation関連で、いくつかアニメ化が実装されなかったプロパティがある。 IE11に欠けているアニメーション可能な主なプロパティ background-size flexbox関連のプロパティのいくつか multi-column関連のプロパティのいくつか font-size-adjust / font-stretch / outline-offset / text-decoration-colorなど flexboxとかmulti-columnは最近になって勧告候補（Candidate Recommendation）になったばかりだし、ほかのプロパティもまだ草案（Working Draft）段階だったりするものもあ
メイリオ専用CSSの読み込ませ方 【スクランブルエッグ編集長のブログ】
ローカルで生きている環境がWindows XP＋Internet Explorer(以下IEと略)6.0マシンが2台、Mac OS X、OS9が各1台あるので、各OS、ブラウザ、バージョンによって見え方にあまり違いが生じないように吸収しているつもりですが、Windows Vista＋メイリオはたまに外出先でチェックしながら修正するだけなので、いまひとつ対応がしきれない状況でした。 現在のスクランブルエッグのIEユーザのうち、IE6は60％、IE7は37％です。時間とともにIE7の割合が増えていくことは歴然としています。 XPマシン2台のうち1台にWindows XP ServicePack3をインストールすることをきっかけにIE7もインストールし、さらにメイリオフォントも入れることにしました。 メイリオダウンロードの詳細 : Windows XP 向け ClearType 対応日本語フォン
スタイルシートをめぐる冒険: 要素を左右に隙間なく配置することができない
スタイルシートによるレイアウトで、「ボックス」を最重要 "概念" とするなら、floatは最重要 "テクニック" と言えるだろう。floatとは、後に続く要素を左右どちらかに回り込ませるためのものだが、この性質を利用して要素を横にピッタリ隙間なく並べようとするとなかなかうまくいかない。 [該当するブラウザ] Windows／IE5.5、6.0 この現象を検証するために、左右それぞれの半円画像を背景とするボックスを設定し、floatを使って横に配置した。意図するところは、左右ピッタリくっつけて完全な円にしたいということなのだが、Windows版のIEでは間に3ピクセルほどの隙間ができてしまう。（→サンプルページ1） 【スタイルシート】 #half-left-circle { width: 40px; height: 80px; background-image: url(circle_l.g
IE6〜8でCSS3セレクタ利用「Selectivizr」
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6～8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6～8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
ヨモツネット[日記] ≫ CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
dtをfloatする場合の注意点 | d-spica
dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで，dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで，更新日を dt で，更新内容を dd でマークアップした場合を想定してみましょう。 まず，XHTMLでのマークアップは次のような感じです。 <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキスト...。</dd> <dt>2008-05-06</
HTML5ことはじめ | Another Step.com
制作者側にはかなり普及してきた感もあるHTML5。 情報は溢れていますが、自身も少しづつ勉強してきたのでXHTML1.0との違いなどをメモがわりにアウトプットしてみた。 (マークアップメインの話です) HTML5はW3Cより2008年1月22日に草案が発表され、2010年8月現在も草案の段階です。 勧告はW3Cが2012年3月、WHATWGは2022年としており、どちらにしてもまだ先ですが、新しいブラウザは段階的に対応していくと予想されるし、JSを使えばIEもカバーできるので、現状利用することも可能でしょう。 メリット・デメリットについては賛否両論?あるでしょうが… ※このサイト自体もHTML5で組んでいますが、HTML5、WordPressともに未熟なため、制御できず正しく組めていない箇所があります。 また下記内容についても間違っている可能性があるので、その場合は指摘していた
jquery.pngFix.js - PNG 透過ライブラリ Windows IE 5.5 & 6 (IE PNG Fix)
jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6. Features unobtrusive script, simple to setup works now also with CSS-Backgrounds (but scaling backgrounds) works with PNG-Images within Links TITLE, ALT, CLASS and STYLE-Attributes are considered This page uses jQuery Version Version
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ
cssやプログラミングIE6でも動くjQuery 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入
リストタグを使用した際にIEで生じる隙間を消す｜web bibo
リストタグを使用してメニューを作ることは良くあると思いますが、この時にIEだけに変な隙間が入る事があります。Firefox、Safari等で見るとちゃんと隙間なく詰まってるのに。。。またIE様のバグですかぁ。と憤る方もいると思います。 これはmarginやpaddingの問題でなく、IEではリスト内のインライン要素をブロック化した場合、line-heightの解釈がおかしくなるみたいです。 →メニューの間に隙間ができるサンプル 解決策は以下のとおり。 HTMLコード <ul> <li><a href="#">メニュー01</a></li> <li><a href="#">メニュー02</a></li> <li><a href="#">メニュー03</a></li> </ul> CSSコード ul { list-style-type: none; width: 300px; }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGをIE等のブラウザ対応を考慮して使う方法まとめ（SVGのフォールバック画像など）｜2.IDEA
いまさらだけど、マイクロソフトのウワサのブラウザ「Edge」についてまとめてみた
My Browser Information
IDEA * IDEA
https://d-lover.com/css/hack.shtml