[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張
CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。 そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。 検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。 Feature Queries Manager -GitHub Feature Queries Managerの機能 Feature Queries Managerのダウンロード Feature Queries Managerの使い方 Feature Queries Managerの機能 Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。 例えば、レイアウトをFlexboxで実装する場合、Fle
![[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張](https://cdn-ak-scissors.b.st-hatena.com/image/square/971099afcdbec5ce4d85c8447e3cda9402d0849b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018052507.png)
Firefox 60の性能は1年前とは別物 Chromeを視界に捉える - Mozilla Flux
当ブログでは、Firefoxの延長サポート版（ESR）のメジャーアップデート時期を開発の区切りとみて、Web上で実行可能なベンチマークの測定結果を公開している。今回は、Firefox 60のパフォーマンスをFirefox 52およびChrome 66と比較する。 検証を行った具体的なバージョンを挙げると、32bit版Firefox 52.7.4（ビルドID：20180427222832）、64bit版Firefox 60.0 RC2（ビルドID：20180503143129）、それに64bit版Chrome 66（バージョン：66.0.3359.139）である。Firefox Quantumのリリースに伴ってマルチプロセス機能（e10s-multi）が全面的に有効化され、その前に64bit版への移行も開始された。今回のテストではそれらの点が反映されている。 動作環境についてだが、OSは64
Scroll to the future—Martian Chronicles, Evil Martians’ team blog
If you’re interested in translating or adapting this post, please contact us first. Everything you always wanted to know about implementing scrolling but were afraid to ask. We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Most of th
サイトの「HTTPS化」が世界的に進んで大きなターニングポイントを迎える
By Sean MacEntee 通信の内容を暗号化することでセキュアなインターネット通信を実現するHTTPSへの対応が全世界的に進められています。セキュリティ関連の専門家であるトロイ・ハント氏はこの状況について、変化の動きが急激に大きくなるティッピングポイントに達したと指摘しています。 Troy Hunt: HTTPS adoption has reached the tipping point https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/ ハント氏はまず、2016年10月にネットのトラフィックをモニタリングしているMozilla Telemetryにおいて、HTTPS経由で送信されたページリクエストが全体の50%を超えたことを挙げて潮目の変化を示しています。 Yesterday, for t
DockerとSeleniumGridとNightwatchでE2Eテストを始めよう - 文系プログラマによるTIPSブログ
Dockerで簡単に始められますよ〜 Nightwatchならライトにサクッと書けますよ〜 皆さんはE2E(end to end)テスト、してますか？ 今回はDocker、Selenium grid、Nightwatchを使ったE2Eテスト（ブラウザテスト）の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。 技術要素 なぜNightwatchなのか 環境構築 docker node.js for mac for windows テストの準備 dockerコンテナ git clone node_moduleの依存 nightwatchの設定 docker-hub Nightwatchでテストを実行する ローカルでテストする場合 Selenium Gridで並列テストする場合 dockerコンテナの起動 Selenium Gridの動作確認 Nigh
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
Firebugを使って無名関数への参照を手に入れる - monjudoh’s diary
Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - 文殊堂の応用編 参照が欲しい無名関数の中の適当な所で、 breakpointを設定し、条件を↓にする。 (window.someFunction = arguments.callee),false この無名関数が1度でも実行されれば、someFunctionで参照できるようになっている。 someFunction.toSource(); とかやると以下のようになる。 (function ($) {var map = new Array;$.Watermark = {ShowAll: function () {for (var i = 0; i < map.length; i++) {if (map[i].obj.val() == "") {map[i].obj.val(map[i
Firefoxを簡単に軽くする2つの方法 : ２のまとめＲ
2010年02月03日 ➥ Firefoxを簡単に軽くする2つの方法 87 comments ツイート 104： チョーク(東京都) []：2010/02/02(火) 17:34:22.65 ID:F0JmIHaP Firefoxが重いとか言ってる奴はちゃんとカスタマイズしてないだろ？ ・ワンクリックでシステムデータを最適化 ttps://addons.mozilla.jp/firefox/details/11198 ・これもワンクリックでアドオンの不要な言語ファイル（日本語と英語以外）を消してくれる。 何MB減ったのか表示されるから楽しいｗ ttp://mozilla-remix.seesaa.net/article/112689126.html この２つ実行したら糞軽くなってワロタｗ 111： フラスコ(神奈川県) []：2010/02/02(火) 17:58:23.59 ID:yGB
FireFoxが最近やたら重いから、お手軽に軽量化に挑む - Affamative Way
アドオン40個入ってるせいなのか？使ってるとどんどんメモリが増えていくように。。。 根本解決にはならないが、お手軽な軽量化に挑む Mozilla Re-Mix: 効果歴然！Firefoxのメモリ使用法を変更して軽快に動作させる方法。 この辺はすでにやってあったので なんか見つけたこれをやってみる。 hayasaka修行ブログ〜裏目人生脱却計画〜 » FireFoxのメモリ消費量低減方法 「browser.sessionhistory.max_total_viewers」 を探します。 すると、値の箇所が「-1（Flase扱い）」になっていますので、それを3以下に設定します。（0<=n<=3） セッション周りの設定っぽいけどなんか不安なので明日調べてみよう。。 体感としてはイマイチ実感なし。 また、なんか見つけたら追加していこう。
15+ Useful Firefox Addons For Web Developers | W-Shadow.com
A blog about web development, software business, and WordPress Everyone already knows and loves Firebug and Web Developer. So instead of another redundant “Top 10” list, here’s a collection of 15+ great add-ons that you might not have heard about yet. Dust-Me Selectors Dust-Me Selectors helps you find unused CSS selectors. You can use it to test an individual page, or let it spider your entire sit
Firefoxで長時間ネットを見ているとだんだん重くなってくるのを何とかしたい。 | 教えて君.net
Firefoxの弱点の1つにメモリ消費の大きさが挙げられる。長時間起動したままにしておくとメモリ消費量はどんどん大きくなり、メモリの少ないパソコンではほかの作業ができなくなってしまう。Firefoxを再起動すれば回避できるが、しょっちゅうブラウザを再起動するのは面倒。そこで「AFOM Plus」というアドオンを利用しよう。 指定した間隔ごとにFirefoxのメモリ開放を行ってくれるため、再起動の必要がなくなる。起動したままにしておくと、数百Mバイトものメモリを消費することも珍しくないが、メモリ開放の間隔を短くすれば、常に100Mバイト以内に抑えられるはずだ。 なお、このアドオンは初期設定のままだとFirefox起動時に自動で動作しない。オプション画面からスタートアップ登録しておこう。 「この実験的なアドオンをインストールします」にチェックしてAFOM Plusをインストールし、再起動する
Webのバグを燃やしまくるFirebugと、そのアドオン7選
■HTMLのデバッグ ［HTML］タブのデバッグ画面では、HTMLのデバッグを行うことができます。HTMLデザイナやJSPエディタによるデバッグと異なり、JavaScriptにより動的に書き換えられたHTMLタグ（要素）のデバッグもできます。選択したHTMLタグのスタイルシートの確認、レイアウトの確認、DOMの確認ができます。 左のツリーからタグを選択、もしくは、Webブラウザ上の調査したい文字を選択し、右クリックから［要素を調査］を選択すると、選択したタグのスタイルシートが右のペインに表示されます。 タグに複数のスタイルシートが適用され、スタイルシートが上書きされている場合は、上書きされたスタイルシートに斜線が引かれます。スタイルを設定しているのに、表示に反映されない場合、スタイルシートの上書きが考えられますが、Firebugを利用すれば、上書きされたスタイルシートを簡単に見つけることが
Firefox の RSS フィード追加ボタンで Google Reader を使う - mooz deceives you
Firefox では現在見ているページが RSS フィードを提供していると、ツールバーにオレンジのアイコンが表示されます。 このアイコンをクリックするとディフォルトの状態ではメニューが開いて、登録先のアプリケーション / サービスを選ぶことになるのですが、ぼくは Google Reader しか使わないので、どうもこの手間が面倒でした。 そこで [設定]->[アプリケーション] と進んでフィードの関連付けを変更しようとしたのですが、 Google Reader 用の設定が見当たりません。 しようがないので色々調べた結果、 about:config から 以下の設定を追加すれば良いことが分かりました。 名前 値 種類 browser.contentHandlers.types.6.title Google Reader 文字列 browser.contentHandlers.types.6.
Google Chrome使い始めたけどFirefoxにはコレがあるから完全に移行出来ないっていうアドオンまとめ
二十歳街道まっしぐらさんの私が Firefox から Chrome に乗り換えた７つの理由という記事に刺激されて食わず嫌い（と言うほどでも無いけど・・）していたGoogle Chromeを使い始めました。 記事通り、リリース当初よりかなり便利になっていますし、Chromeの速度はかなり魅力なのですが、Firefoxの「このアドオンがあるから・・」という理由でやはり完全に移行出来ませんでした。カメきちさんの記事のブコメもいろいろと参考になりますね。一言で済ますと好みですよね。使いやすいもの使ったり併用したり。 僕は今は半々くらい、ややFirefoxよりでテスト利用しています。通常ブラウジングは殆どChromeになりそうです。ついでに「このアドオンがあるから・・」というアドオンをご紹介したいと思います。 「お勧めアドオン」系の記事ってあまり参考にならないことも多いと思いますので「こいつはこんな
Firefox高速化テクニック8 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable LinuxLinksにおいてFirefox Tipsのタイトルのもと、Firefoxの高速化を実施するためのテクニックが紹介されている。設定をすることでFirefoxの性能を引き上げ、Google Chromeのように開発ペースの早いブラウザにも対応できると冒頭に説明がある。なお、紹介されているテクニックを試す前に、prefs.jpファイルに保存されている設定のバックアップをとることが推奨されている。紹介されているテクニックは次のとおり。 BleachBitを使う BleachBitをインストールして使う。BleachBitはキャッシュ、履歴データ、一時ファイル、不要な使われていないローカルファイル、ログ、クッキーなどのデータを削除するツール。Windows版とLinux版が提
快適なWeb開発環境を構築する、Firefoxアドオン10選
快適なWeb開発環境を構築する、Firefoxアドオン10選：エンジニアがお薦めする 現場で使えるツール10選（2）（1/5 ページ） ITエンジニアの方であれば一度は使ってみたことがあるFirefoxだが、いまひとつ使いこなせていない人や標準のInternet Explorer（IE）に戻ってしまった人もたくさんいるだろう。 FirefoxといえばオープンソースのWebブラウザとしてIEをしのぐ勢いでWebブラウザのシェアを獲得してきている。2008年6月には「Firefox 3」になり、レンダリングエンジンも高速化されて注目を集めた。そんなFirefoxの最大の魅力は、何といっても拡張機能である豊富なアドオンが公開されていることだ。 アドオンを組み合わせて自分が使いやすいWebブラウザ環境をつくることができる。これがFirefoxの楽しみ方の1つでもある。しかし実際には、あまりにも多く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The 45 best Firefox keyboard shortcuts you can use to navigate the web browser more efficiently
A modern version of normalize.css
「Greasemonkey」ユーザースクリプトベスト10 （2009年版） : ライフハッカー［日本版］, 仕事も生活も上手くこなすライフハック情報満載のブログ・メディア
Gmail×Firefox＝最強！ ～GmailをFirefoxで使い倒す！～