CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある
CSSの:has()がブラウザで使用できるかどうかを@supports selector()で検出するには、:has(*)ではなく、:has(+ *)が必要です。 これは2023年現在、:has()はFirefoxを除くすべての主要ブラウザでサポートされていますが、Firefoxで実験的な機能としてサポートされているためです。 CSS :has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*) by @Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの:has()を検出するには :has(*)を使用した場合の問題点 デモとコード 終わりに はじめに CSSの:has()を@supports
Safari･Chrome･Firefoxでありがちなバグの対処法について(主にCSS) | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、コーダーのばやしです。 皆様はInternet Explorer（以下IE）のことをどう思いますか？「昔ながらの使いやすいブラウザ」でしょうか？おそらく、コーディングをかじったことのある方で好きな人はあまりいないでしょう。 （IE BIG LOVEな方がいらっしゃいましたら申し訳ありません） なぜかと言えば、IE特有の仕様やバグといったものが多数存在するためです。 コーディング時に常に意識しなければならないのが、特定のブラウザ限定の特殊な仕様やバグです。 IEならではの仕様やバグに惑わされたことは枚挙に暇がないですが、IE以外の主要ブラウザで直面する仕様やバグも中々厄介なものです。 今回はそのような、Chrome/Safari/Firefoxなどの主要ブラウザで見られるようなバグや仕様を紹介していきます。よろしければブラウザを切り替えながら見比べてみてください。 ※以下の内容は
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
Firefox 54で全ユーザー向けに導入されたブラウザ高速化技術「Electrolysis」がオンにならない場合の対処法
2017年6月にリリースされた「Firefox 54」では、ブラウザの動作を高速化するために8年以上かけて開発されてきたマルチプロセス技術「Electrolysis」が全ユーザー向けに解放されました。しかし、いまだ多くのユーザーの環境ではFirefox 54にアップデートしてもこの恩恵を受けられないケースがあります。その原因は、このマルチプロセス技術に非対応のアドオンのせいで、場合によってはちょっと面倒な手順を踏まなければオンにできないことがあるようです。 How to Speed Up Firefox With Multi-Process, If It's Not Working By Default http://thehackernews.com/2017/06/electrolysis-firefox-mutiprocess.html Electrolysisは条件を満たしていれば
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処方法を紹介します。 １．問題点 テーブルのヘッダ部分がページの上部にさしかかると「position: sticky」で表示が固定されるサンプルを作りました。 <style> table { border-collapse: collapse; width: 600px; } thead { position: sticky; top: 0px; background: grey; } th, td { border: solid 1px #00 0000; } </style> <body> <p>1</p> <table> <thead> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> </tr> </thead> <tbody> <tr> <t
「https://」で始まるページでブックマークレットが動作しない理由
「https://」で始まるページでブックマークレットが動作しない理由を調べてみました。 １．問題点 はてなブックマークでブックマークをするときには、いつも公式のブックマークレットを使っています。 が、「https://」で始まるページではこのブックマークレットが動作しない場合があります。 FirefoxやChromeでこの現象が発生します。 ブックマークできない代表的なURLはTwitterやFacebookなどです。 なお、「https://」で始まるすべてのページでブックマークレットが動作しないという訳ではありませんし、ブックマークレットによっては動作するものもあります。 ２．原因 調べてみたところ、ChromeやFirefoxでは「Content Security Policy」というものに対応しているためのようです。 「Content Security Policy（CSP）」は
Firefoxで「このプラグインは安全ではありません。更新してください。」と表示されたときの対処
Firefoxで「このプラグインは安全ではありません。更新してください。」と表示されたときの対処方法を紹介します。 １．問題点 FirefoxでFlashを使った広告などで「このプラグインは安全ではありません。更新してください。」と表示されます。 「更新を確認する」をクリックすると、該当すると思われる「Shockwave Flash」は「最新です」の表示になっています。 （クリックで拡大、以下同様） アドオン画面の「プラグイン」一覧では現在のバージョンが古いことを示しています。 「今すぐ更新する」をクリックしてみます。 が、「ユーザを保護するため Flash Player Plugin between ～ はブロックされています。」と表示されるだけで、更新方法が分かりません。 ２．対処方法 Adobe Flash Playerのページにアクセスして、「今すぐインストール」をクリック。 ダウ
Firefox の srcset 属性実装は sizes 属性を省略すると正常に動作しないらしい
1つ前の記事で picture 要素 や srcset 属性に関して書いた課程で知ったんですが、Firefox （テストしたのは Firefox Nightly 34.0a1） の srcset 属性実装に関して、sizes 属性を省略したときに正しく動作しない問題があるようです。Bugzilla@Mozilla に報告されていました。 1052417 - Default `sizes` attribute value for `srcset` should be 100vw ： Bugzilla@Mozilla srcset 属性の実装状況 srcset 属性は、近々正式リリースされる、Firefox 32 で試験的に実装されていますが、今回テストしたのは Firefox Nightly （34.0a1） です。まだ試験的な実装のため、dom.image.srcset.enabled お
Firefox 25で表示が遅くなった場合の対処方法
Firefox 25でページ表示が遅くなった場合の対処方法を紹介します。 １．問題点 先日、会社で使っているFirefox 24が自動更新でFirefox 25にアップデートされたあと、ページの表示時間が劇的に遅くなりました。 具体的には、これまで数秒で表示されていたページが、表示されるのに数十秒かかるようになってしまいました。 最初はアップデートが原因と気が付かなかったのですが、ネットで色々調べるとFirefox 25の問題であることが分かりました。 ２．原因 Firefox 25で自動プロキシ設定スクリプト（proxy.pac：ファイル名は任意）を扱う際のバグらしいです。 Bug 923458 - [Regression v24 to v25] Slow loading of websites via proxy / pac file なお、この問題は会社などで下記のように自動プロキシ
Firefoxの再起動ができるアドオン「Restartless Restart」
Firefoxの再起動が手動でできるようになるアドオン「Restartless Restart」を紹介します。 １．概要 Firefoxで問題が発生するとクラッシュして自律で再起動しますが、手動で再起動する方法がありません。 このアドオンを利用すれば手動でFirefoxを再起動できるようになります。 特に、複数のウィンドウを開いている状態からの再起動で威力を発揮します。 ２．インストール メニューバーの「ツール」→「アドオン」をクリック。メニューバーを表示していない場合は左上のFirefoxボタン→「アドオン」をクリック。 「Restartless Restart」で検索。 「Restartless Restart」が表示されていることを確認します。 「Restartless Restart」の右側にある「インストール」をクリック。 背景色が少し濃くなればインストール完了です。ブラウザの再
FirefoxでYouTubeの「共有」をクリックしたときに「undefined」が表示される不具合の対処
FirefoxでYouTubeの「共有」をクリックしたときに「undefined」が表示される不具合の対処方法を紹介します。 １．問題点 FirefoxでYouTubeの動画を共有しようと思い、「共有」クリックするとスクリーンショットのように「undefined」が表示されてしまいます。 本来であれば「再生リストに追加」というメッセージとどこに追加先の再生リストが表示されます。 Firebugで確認すると、「a.k is null」というJavaScriptエラーが発生しているようです。 最近インストールしたアドオンが干渉しているのかと思い、いくつかのアドオンを無効にしてFirefoxを再起動してみましたが事象は改善しませんでした。 ２．対処方法 Firefoxで該当のクッキーを削除したところ、さくっと直りました。 具体的な操作方法は、メニューバーの「ツール」→「オプション」をクリック。
FirefoxでPDFの表示が崩れる場合の対処
FirefoxでPDFの表示が崩れる場合の対処方法を紹介します。 １．問題点 Firefoxで確定申告書を作成していたのですが、最後の「印刷画面の表示」で表示されたPDFの文字の表示が大きく崩れていました。 （クリックで拡大：入力データはほとんどダミーです） そのときは原因が分からなかったので、Google Chromeで作成し直しました。 ２．原因 Firefox 19で機能追加された「PDFビューア」で表示されていることが原因です。 Firefox 19 リリースノート ちなみに、PDFビューアで見ると崩れていますが、ダウンロードしてAdobe Readerなどで閲覧すれば正常に表示されます。 ３．対処方法 ダウンロードせず、そのまま正常に表示するには、ツールバーの「ツール」→「オプション」をクリック。 「プログラム」タブにある「PDF文書(PDF)」をクリック。 プルダウンメニューの
フォーム入力中に誤って消えてしまった文字を復活させるFirefox用アドオン「Textarea Cache」
問い合わせるために文章などをフォームに長々と入力しているときに、意図せずブラウザを閉じてしまって、文章を書き直すことがありますが、Firefox用のアドオン「Textarea Cache」を使えば、消えてしまった文章を簡単に元に戻すことができます。アドオンのインストールと操作方法については以下から。 Textarea Cache :: Add-ons for Firefox https://addons.mozilla.org/en-US/firefox/addon/textarea-cache/ Firefoxから上記サイトへアクセスし「＋ Add to Firefox」をクリック。 「今すぐインストール」をクリック。 「今すぐ再起動」をクリックして、Firefoxを再起動させればインストールの完了です。 ◆使い方 例えばHotmailなどを使ってメール本文を作成しているときに、誤ってブ
Firefox16でMovable Typeのカテゴリ・フォルダ選択ができない不具合について（続き：パッチの適用バージョン調査）
Firefox16の使用で、Movable Typeの記事編集画面でカテゴリ・フォルダ選択ができない問題が発生しており、公式サイトの以下のページで対処パッチがリリースされています。 Firefox 16 でカテゴリおよびフォルダの選択が保存できない。 提供されているのは以下の2ファイルです。 mt-static/js/mt_core_compact.js mt-static/js/common/List.js ただし、提供されているパッチは以下のバージョンしか指定されておりません。 Movable Type 4.38 Movable Type 5.07 Movable Type 5.14 Movable Type 5.2 該当するバージョンを利用中でない場合、MTのアップグレードが必要みたいですが、簡単にアップグレードできないケースも多いと思います。 ということで、他のバージョンで適用可能
Firefox16でMovable Typeのカテゴリ・フォルダ選択ができない不具合について
Firefox16の使用でMovable Typeに問題が発生しているようなので、本エントリーで情報展開します。 この情報は2012年10月16日現在のものです。 追記：MT用のパッチがリリースされました。以下のリンク先からダウンロードしてください。 Firefox 16 でカテゴリおよびフォルダの選択が保存できない。 １．問題点 Firefox16を使うと、Movable Typeのブログ記事投稿時にカテゴリが選択できません。 ブログ記事投稿時のカテゴリ ブログ記事投稿後のカテゴリ（選択したカテゴリのチェックがはずれている） カテゴリだけでなく、ウェブページ作成時のフォルダも選択することができません。 ウェブページ作成時のフォルダ ウェブページ作成後のフォルダ（選択したフォルダが選択されていない） MT5がすべて影響があると思われます。またプレビュー時もプレビュー画面にカテゴリが反映され
Firefoxで3Dが表示されない場合の対処
Firefox 11以降では3D表示（ページインスペクタ機能を利用）が可能です。が、どういうわけか3Dにできないケースもあるようです。私がそうでした。 ということで、Firefoxで3Dが表示されない場合の対処方法について紹介します。 １．3D表示する 対処方法は後回しにして（笑）、まずは3Dの表示方法から説明します。 メニューから「Web開発」→「調査」を選択。または画面を右クリックして「要素を調査」を選択。 ブラウザ右下に表示された「3Dビュー」をクリック。 これで3Dビューに切り替わります。マウスでドラッグすれば方向を変えられ、ホイールでズームイン・ズームアウトができます。 ２．問題点 ところが、冒頭で述べたとおり、私の環境では「3Dビュー」ボタンが表示されませんでした。 ネットを検索しても、 「3Dこんな風に表示されました！すごい！最高！」 という、まったく苦労せずに表示されました
Firefoxでサイトのフッターとブラウザになぞの隙間 clearfix問題 - HTML5やCSSやCMSやオープンソースなどなどの設定備忘録｜hacked by micc
あるデザインテンプレートを利用したら、Firefoxでサイトのフッターとブラウザの間になぞの隙間ができていたのがずっと気になっていた。 IEでは再現しなかった。 目立たない部分なので解決を後回しにしていたのだが、やっとちゃんと調べてみたらこれが原因だった。 clearfixの決定版を作る −モダンブラウザ編− http://norisfactory.com/stylesheetlab/000038.php clearfixというCSSの手法が利用していたデザインテンプレートにも使われていたのだが、これが問題だった。 利用していたデザインテンプレートでは .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline
[JS]Firefoxでのパララックススクロールのもたつきを解消するスクリプト
複数の画像を使って視差効果を生み出すパララックススクロールを操作する際、Firefoxで起こるもたつきを解消するスクリプトを紹介します。 Faster parallax scrolling websites in Firefox [ad#ad-2] パララックススクロールとは下記のサイトなどで使用されているテクニックで、複数のレイヤーをそれぞれ異なるタイミングでスクロールし、視差効果を生み出すものです。 Iutopi ここで紹介するのは、これらのパララックススクロールを操作する際、Firefoxでもたつくのを解消するスクリプトです。 この現象は、IE, Chrome, Safari, Operaでは見られません。 Firefoxでのパララックススクロールのもたつきを解消するスクリプト 下記のスクリプトを使用することで、Firefoxでのもたつきを解消できます。 /* Firefox sup
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Browser Bug Searcher
http://blog.e-riverstyle.com/2013/09/chromefirefoxcsscss.html
