CSSの「:active」はIE(Edge)で重い | Agnist.code
データテーブルなど要素が大量にある画面をIEで開いている時、スクロールが妙に重いので調査したところ、ボタンにかけていた擬似要素「:active」の存在が重くしていると分かりました。 「:active」の中のCSSプロパティではなく、「:active」の擬似要素がCSSに存在するだけで重くなっていました。 しかも最新のEdgeバージョンで。 経緯と状況 下記のデモページをIEで開いてみてください。 デモページ 重さを体感できるようにするため膨大な行のテーブルを overflow:scroll のレイヤーで囲ってますが、中身はどうでもいいです。 クリックしてからすぐスクロールしたり、スクロールバーのツマミからスクロールしようとすると一瞬引っかかると思います。これは「:active」が原因でIE内でCPU使用率が高まっているためです。 下図はIEのDevツールでUIの応答速度を計測したものです。
【CSS】IEのみに適用する、Firefoxのみに適用する、Chromeのみに… at softelメモ
問題 特定のブラウザのみにスタイルシートを適用したいです。 IE10、IE11では条件付きコメントが効かないので別な方法が必要なのですが。 答え それぞれ以下のようにすると可能。 IEのみに適用 @media all and (-ms-high-contrast: none) { /* ここに書く */ span { color:#c00; } } Firefoxのみに適用 @-moz-document url-prefix() { /* ここに書く */ span { color:#0c0; } } Chromeのみに適用 @media screen and (-webkit-min-device-pixel-ratio:0) { /* ここに書く */ span { color:#00c; } } Safariのみに適用 ::-webkit-full-page-media, :futu
#IE11 で #CSS グリッドは難しくない | Sler系SEの技術ブログ
今回、この記事でAutoPrefixerは利用しません。 IE11は[x]でrepeatを指定できます minmax()は、IE11で利用できますが、auto-fitとauto-fillは利用できません。 fit-content()も、IE11で利用できませんが代替の手段があります。 グリッドの列/行にminmax(min-content, max-content)を適用し、子要素にmax-width: [value]を設定します。 IE11以外のブラウザでは、fit-contentの代わりにautoを指定しても同じです。 ちなみに、IE11のautoの動きは他のブラウザと異なります。 IE11で他のブラウザのautoを再現しようと試みましたが、minmax(min-content, 1fr)は、横幅がコンテンツの量に対応せず、 minmax(min-content, 100%)、minm
CSSメディアクエリで Internet Explorer 10/11 を指定する (CSS Tips)
CSSのメディアクエリで、Internet Explorer 10, Internet Explorer 11 の場合を指定するコードを紹介します。 概要 CSSで Internet Explorer 10, Internet Explorer 11 の場合に限り、スタイルを変更したい場合があります。ユーザーエージェントを判定してプログラムで出し分けすることもできますが、メディアクエリを利用することで、CSSの記述のみで Internet Explorer 10, Internet Explorer 11 でのスタイルを指定できます。 書式 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { ...(IEで適用する スタイル) }
IE11で「flexbox」「min-height」「aligin-items: center」の組み合わせが効かない時の対処法
ChromeとEdgeでは意図通りに動く。でも、IE11だけ動かない・・・ そんなバグがあって四苦八苦したので対処法をメモ。 どうにかして「Chrome」「Edge」「IE11」の動作を同一にすることが出来ました。 やりたいこと こんな感じ。 div要素の中に文字を均等に真ん中に配置したい。 その時の記述がこんな感じ。 <div class="parent"> <span class="child"> test </span> </div> .parent { display: flex; align-items: center; width: 100%; background-color: green; min-height: 90px; } .child { } flexboxのalign-items: centerで、 高さ指定した親のdiv要素に対してspan要素を中央寄せしていま
flex-directionを指定した時に IE11で表示がおかしくなる | WEB PIXY
CSS3から新たに追加された Flexible Boxはプロパティが豊富で可変レイアウトに柔軟に対応できるのでレスポンシブデザインでの制作には欠かせないものになっています。しかし IEでデバッグをしていた時に flex-directionに関連するバグのようなものに遭遇しました。 IEだけ画像に余分な隙間ができる IE 11では flex-directionに columnや column-reverseを指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしまいます。サンプル画像内にある写真の下のグレーの部分がそれにあたります。 解決方法 解決方法はシンプルで min-heightを利用します。IE 11以外のブラウザでの表示に影響はありません。以下がサンプルのコードです。 <div class="flex"> <p class="flex-inner">L
IE11 で disabled 属性の select 要素の color (文字色)を変える。 - Qiita
簡易メモ disabled 属性の select 要素は border や background-color と共に指定すると文字色が変わらない！ <select> <option>Normal</option> </select> <select disabled> <option>Disabled</option> </select> select { color: red; border: solid 1px black; background-color: orange; } select:disabled { color: blue; border: 1px solid black; background-color: orange; }
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） - Qiita
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない
公開2015.08.07 更新2017.12.03 仕事・技術 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません；； 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。 以下のようなコードがあるとします。 <div id="flexParent"> <header>ヘッダー</header> <main> <div class="flexChild left">左</div> <div class="flexChild right">右</div> </main> <footer>フッター</footer> </div> よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。 これら
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
CSSをIEとMicrosoft Edgeにだけ適用させる5つの方法、CSS記述方法やHTML条件分岐など | あすたまいず
CSSをIEとMicrosoft Edgeにだけ適用させる5つの方法、CSS記述方法やHTML条件分岐など IEと、Microsoft Edgeだけ形が崩れてしまったりする場合の対処法-CSS編IEはホームページを制作する側からすると迷惑以外なにものでもない。とはいえ、無視し続けるわけにもいかないので、しぶしぶ対応するしかない。 IEに対してちゃんと動いたり表示されたりするようにする事をIEハックと言ったりするが、今回はCSSでIEハックする方法を5つ紹介。 JavaScriptを使ってIEハックする方法もあるが、今回はより簡単なCSSの方法を紹介。 1. CSSファイルの記述でIEハックする方法例えば、リスト表示のされかたの違いを例に。 ul li { margin-bottom: 5px; /* Chrome、FireFox等 */ margin-bottom: 10px\9; /*
IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法
CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C
CSS Gridで実装する際にはこの点に注意、IE11以下・Edge15以下をサポートするフォールバックのテクニック
CSS Gridは非常に便利ですが、唯一の欠点はIE11以下・Edge15以下のユーザーをサポートする必要がある場合に期待通りに機能しないことです。 CSS Gridでページのレイアウト・グリッド・コンポーネントを実装する際に、IE11以下・Edge15以下をサポートするフォールバックのテクニックを紹介します。 Grid to Flex Grid to Flex -GitHub CSS Gridがレイアウトで優れている点は、水平方向と垂直方向の両方を制御して、レイアウトができるという点です。 Flexboxでは両方を制御することはできないため、その点に注意します。 CSS Grid, Flexboxについて学びたい時は、下記の記事がオススメです。 5分で完璧に分かる！CSS Gridの基本的な使い方を解説 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 CSS
-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 公開日: 2017年4月26日 タグ: css, ie, accessibility 事情があって游書体関連の話題をいろいろ読み漁っていたところ、「游ゴシックにすると IE では数ピクセル上にずれてしまうので、CSS ハックを使って別のフォントを適用する」という手法を紹介しているのがあった1。どういうハックかと思って見てみたら次のようなもので、ちょっとこれどうなのよ? とか思ったのであった。 @media (-ms-high-contrast: none) { /* IE10/11 に適用する*つもりの*フォント指定 */ } 試しに “ms high contrast” で検索してみると同じコードがけっこう出てくるので、もしかしてある程度広く認知されてる手法なのだろうか…あまり信じたくはないのだけ
WebPとLazyLoadを使って表示速度を向上させる 東京新宿のホームページ制作会社イッティ
売り上げ・アクセス数を伸ばしたい 月々の管理費を抑えたい リニューアルで失敗したくない 提案やサポートしてほしい ホームページに関することは お気軽にご相談ください
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OS、ブラウザごとのCSSハックなどまとめ - Qiita
Laravel(LaravelMix)でCSS GridをIE11に対応しやすくするAutoprefixerの設定。 – Stella Design
CSSでスタイルをIEのみ・Firefoxのみ・Chromeのみ・Safariのみに適用する方法 | TechMemo
CSS Grid Layoutをガッツリ使った所感 - Qiita
IEでposition指定の要素がズレる - CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録