11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
ファイルが更新されないときのキャッシュの消し方いろいろ（ひとり DevTools Advent Calendar 2020 – 17日目） | Ginpen.com
17 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ちょっとここおかしいな簡単だからさらりと修正しちゃおうよしほら終わったコミットだデプロイだ、ええとでも反映されないなおかしいな？ そんな経験あると思うんですが、キャッシュって厄介ですよね。DevTools を使ってどうにか強制的に最新版へ更新したりできます。 先にまとめ Network パネルの Disable cache を使おう それはそれとしてキャッシュ戦略うまくやろう キャッシュを利用しているかの確認 Network パネルでリクエストを監視して、一覧の Size の項目に出てきます。 “(disk cache)” がブラウザーが保存していたキャッシュファイルを利用した場合です。ネットワークを利用しませんでした。また再読み込みのときに “(memory cache)” にな
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック
通常はお目にかかれませんが、リンク切れの画像があるのはいただけませんね。 画像がリンク切れだと、こんな風に表示されてしまいます。 もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。 よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義しておくことができます。 Styling Broken Images 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 img要素の2つのポイント リンク切れの画像要素のスタイル ブラウザのサポート状況 img要素の2つのポイント リンク切れの画像要素をどのようにスタイルすることができるか理解するために、最初に理解しておくべきimg要素の2つのポイントがあります。 img要素に通常の文字関連のスタイルを定義できます。 定義したスタイルは代替テキスト(
Android 4.4.2以下で起こる、特にうざったい不具合・バグの解決法【厳選4策】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですが、みなさんの嫌いなブラウザはなんですか？ IE8とかでしょうか。わかりますその気持ち。しかし、ブラウザ界にはもっと厄介な野郎がおります。 それが、Androidブラウザです。 一部ではChromeに似た性能などと言われておりますが、開発者からしたら、えっ・・・(；´Д｀)といった感じです。Android OS 4.4.4辺りからかなりよくなってきましたが、4.4.2以下はiOS基準でコーディングすると不具合ありまくり。 そんなAndroidさんのバグ・不具合の中でも、今回はとりわけネット上で解決策が見つかりにくかったものと、その解決策をまとめてみました。ぜひ参考にしていただければと思います。 ▼目次 position: fixedを指定している要素に%でwidthを指定すると無視される Web
Androidでつまずいたバグについてのまとめ
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかってしまったことがいくつかあったのでメモです。 <p>要素が指定した幅に広がらない 原因はおそらくその時のviewportの指定の仕方です。 例えば<p>要素が『100%』としても横幅いっぱいに広がらず、勝手に折り返しされてしまうことがありました。 対策としては『background』の要素を指定してあげると指定したサイズになりました。 背景が白い要素でしたら『background:#FFFFFF;』などを指定してあげるとよいです。 ただ、背景色を付けられないという場合もあるかと思います…。今回の私がそうでした。 なるほどと思ったのは『透過した画像をおく』ということでした。 今回私は透過pngを置いて何とか回避できました。 もしかしたら背景に要素を置いただけではうまく表示できない可能性もあるのですが、その時はサイズも指
Android 標準ブラウザで動的にDOM操作したときにCSS隣接セレクタが適用されないバグ - Qiita
CSSの隣接セレクタにバグがあるもよう。 静的なhtmlでは問題ないようだが、class属性を動的に変更した場合などはうまく適用されないようだ。 <a class="btn">Class属性変更するボタン</a> <div class="block-a">A</div> <div class="block-b">B</div> //jQuery使用 $('a.btn').on('click', function(){ $('.block-b').after('<div class="block-c">C</div>'); //Bブロックの後にCブロックを挿入 $(this).addClass('add'); }); a.btn ~ .block-a { /* 赤字になる */ color: #f00; } a.btn.add ~ .block-b { /* 赤字にならない */ color
主要ブラウザにおける SSL 3.0 無効化タイミングのまとめ
SSL 3.0 の脆弱性 （POODLE） の件で、10月に下記の記事を書いたんですが、その中でも触れた、各主要ブラウザにおける SSL 3.0 無効化タイミングだけ、わかりやすいように抜き出してこちらにまとめておこうと思います。メモ代わり。 SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ Internet Explorer SSL 3.0 が無効になる時期： 正式な時期は不明だが、数ヶ月以内 米国時間の 2015年 4月 14日以降、デフォルトで無効に。 「マイクロソフト セキュリティ アドバイザリ 3009008」 内では、下記の通り、（10月 15日から起算して） 数ヶ月以内に IE の既存設定 （および同社のオンラインサービス） で SSL 3.0 が無効になる旨がアナウンスされています。 マイクロソフト
:not擬似クラスでCSS3のサポートをチェックする方法
CSS3の:notで擬似クラスのサポートをチェックする方法を紹介します。 １．はじめに 「:checked擬似クラスでチェックボックスに連動して要素を表示させる方法」で、CSSの:checked擬似クラスを使ってチェックボックスの操作に連動してテキストエリアの表示を制御する方法を紹介しました。 前述の記事の再掲になりますが、HTMLとCSSの設定は次のとおりです。 <style> .bar { display: none; } input:checked + label + div { display: block; } </style> <div> <input id="foo" type="checkbox" name="foo"> <label for="foo">foo</label> <div class="bar"> <label for="bar">bar:</label>
初心者のサポートに役立つOS・ブラウザ・IPアドレスなどの情報をカンタンにコピペ＆短縮URL化できる「What browser am I using?」
周囲の人よりも少しパソコンなどに詳しいとサポートセンター代わりに使われることが多くなるわけですが、相手に「環境を教えて」と言っても通じないばかりか「何もしていないのに壊れた！」というフレーズのみが延々と繰り返され、肝心の情報が得られないことが多々あります。そういう不毛なやりとりをスムーズに終わらせることができるのが「What browser am I using?」です。 What browser am I using? http://www.whatsmybrowser.org/ 使い方はとてもカンタン。というより、何も考えずにサイトにアクセスするだけ。すると以下のような画面が表示されました。 一番上には、今アクセスしているブラウザの名称とバージョン情報が表示されています。 ページ下部には各種環境設定の情報が一覧表示されています。 で、実際の使い方も簡単、とにかく相手にこのサイトのアドレ
SVGMagic - Great jQuery SVG fallback plugin
SVGMagic: the fully automated SVG fallback SVGMagic is a simple jQuery plugin that searches for SVG images (including background- and inline dataimages) on your website and creates PNG versions if the browser doesn't support SVG. Wondering why you should use SVG images? SVG images are vector based! Meaning that they will be as sharp as hell no matter how big they are. In other words: one file for
ブラウザに「Related Searches」「ご利用のPCは近々クラッシュします！」「OKをクリックして、すぐにクリーンアップしてください。」が表示される場合の対処
ブラウザに「Related Searches」や「ご利用のPCは近々クラッシュします！」「OKをクリックして、すぐにクリーンアップしてください。」などの広告が表示される場合の対処方法を紹介します。 １．問題点 ある日突然ブラウザの左側や下部に広告みたいなものが表示され始めました。 （クリックで拡大） 本来の表示部分を取り除くと、次のように3ヶ所表示されています。 （クリックで拡大） 左側には縦長の「Related Searches」というバナーが表示されています。 ページ下には「アドバンスドシステムプロテクターがアイテムを2個検出しました～今すぐ消去」という意味不明なメッセージが表示されます。 「OKをクリックして、すぐにクリーンアップしてください。」というバナーが表示される場合もあります。 「ご利用のPCは近々クラッシュします！」というバナーが表示される場合もあります。 スクリーンショッ
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
Browserhacks
What’s this? Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox. How to? Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targeted! Reminder! Please keep in mind using
Tabnagging の自衛用 User JavaScript を書いてみた - IT戦記
Tabnagging というフィッシング手法があるそうです。 詳しい内容は、以下の記事をごらんください。 ブラウザでたくさんのタブを開いてネットサーフィン！ あなたが知らないうちに非アクティブなタブの内容が偽のGmailページに書き換えられた！（タブのアイコンも変わる！） ← 別にGmailじゃなくてもFacebookでもmixiでも。 あなたがそのタブに戻ってくるとGmail（もしくは他のサービス）のログイン画面が！（URLはおかしいけれどあなたは気づかない！） ID&PWDを入力してしまってあなた終了のお知らせ…orz ブラウザのタブを使ったフィッシングの最新手法『Tabnagging』が巧妙すぎる件… | IDEA*IDEA これは…！！ というわけで、とりあえずタイトルを「ホスト名を省いたドメイン」に書き換える User JavaScript を書いてみた。 これをインストールする
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Browser Bug Searcher