How to hide <select> dropdown's arrow in Firefox when using "-moz-appearance: none;".You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
Chrome/Firefox の JavaScript Debugger でステップ実行時にライブラリ・フレームワークをスキップする - Qiita
JavaScript のデバッガ、便利ですよね。つかって、ますよね! Chrome, Firefox 両方の Developer Tool (Web Inspector) には JavaScript デバッガが付属しています。両者には Event Listener Breakpoints 機能が存在し、特定イベントのリスナ全部にブレークポイントを仕掛ける事が可能です。 しかし、jQuery の $.on, $.bind, その他 $.click(fn) 等でイベントハンドラを定義すると jQuery の中で addEventListeners が呼ばれ内部で処理をした後に実際に jQuery に渡した関数が呼ばれます。 そのため、JavaScript デバッガは jQuery 内部でブレークし本来飛んでほしいはずの関数に一発で飛んでくれません。 そこで Firefox には Library
Firefox (v12) とChome (v18) のcss3 animationの記述の違い | イヨノート
animation 12/05/15現在、Firefox (v12) ではanimation-nameとkeyframesの指定に、クォーテーションを使用すると動かない。 参考: CSS animations - MDN 現状動作する記述は以下。 e:hover { -webkit-animation: 'actHover' ease-out 1s 1; /* クォーテーションなしでも動作 */ -moz-animation: actHover ease-out 1s 1; animation: 'actHover' ease-out 1s 1; } @-webkit-keyframes 'actHover' { from { opacity: 0.5; } to { opacity: 1; } } /* クォーテーションなしでも動作 */ @-moz-keyframes actHover
line-height: normal !important
たまに忘れてFirebugで調査して「あーそうだった！ これだよ！ クソが！ 俺か！」みたいな。これはFirefoxのフォーム系の置換要素に設定してあるデフォルト・スタイルで、入力ボックスとボタンの高さを揃えるのが面倒くさい原因のひとつ(もちろんこれだけではない)。これはかなり昔からあるけど「置換要素がline-heightプロパティーで高さ変わるわけねーだろクソが」という理由によりWon't Fixなので、死ぬまで付き合うことになりそう。 !importantなため制作者スタイルからはどうあがいても上書きするのは無理なので、他のブラウザー向けにline-height: normalを設定してやるのがまず必要。その上で入力ボックスとボタンのbox-sizingプロパティーが違うことに気をつけ、高さを指定する。 input[type="text"] { height: 1.75em; lin
FirefoxにおけるSVGの背景画像
結構前から21の現在に至るまでFirefoxではCSSで背景画像に指定されたSVGをうまく拡大出来ずにぼやける(ラスタライズしてから拡大してる)のはSVG使おうとすると普通にぶち当たるのでかなり有名。で、その対策として大きくSVGを作って縮小するというのがベスト・プラクティスっぽい感じだったんだけど、縮小でもアレなことに最近になって気づいた。環境依存な気がするので、とりあえずメモ。 Demo: SVG Background Resizing on Firefox SVGの公式ロゴは638px四方のもの。それを背景に仕込んで領域を基準にリサイズすると、49%ではギザギザになり、48pxではキレイに(Chrome 27やInternet Explorer 10と同じに)なる。僕のPCではHTMLやCSSをほぼ限界まで削っても再現するが、再現しないマシンがあったりして根拠がよくわからない。 アイ
Google アナリティクス オプトアウト アドオンのダウンロード ページ
Google アナリティクス オプトアウト アドオンは、Google アナリティクス JavaScript（analytics.js、gtag.js）によるデータの使用をウェブサイトのユーザーが無効にできるように開発された機能です。 この機能を利用するには、このアドオンをダウンロードして、ご利用のウェブブラウザにインストールしてください。Google アナリティクス オプトアウト アドオンは、Chrome、Safari、Firefox、Microsoft Edge でご利用いただけるように設計されています。このオプトアウト アドオンを適切に機能させるには、ブラウザに正しく読み込んで実行してください。このオプトアウト アドオンの詳細と、ブラウザに適切にインストールする方法については、こちらをご覧ください。 お使いのブラウザでは Google アナリティクス オプトアウト アドオンがサポートさ
CI as a Service ブラウザを使ったJavaScriptのテストをCIサービスで動かす方法のまとめ
Travis CIを始めとするウェブサービスとして使えるCIを使って、 JavaScriptのブラウザテスト(ブラウザ上でJavaScriptを走らせて行うユニットテスト)をやる方法をサービスごとにまとめてみました。 テストフレームワークとして Buster.JS を使用して行います。 Karma (旧Testacular) では公式サイトにも Karma – Travis CI でCI Serviceとの連携方法が記載されているのでそちらも参考にして下さい。 今回紹介するCI Servicesは以下のものです。 Travis CI drone.io BuildHive Jepso CI テスト実行の流れ Jepso CI を除いては、テスト実行の流れ自体は同じなので先に解説します。 Capture用のローカルサーバを立てる テストしたいブラウザで capture URL へアクセスする
ボーダーで三角形などを作るときにはtransparentではなくrgba()で
よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire
ブラウザでSassをデバッグ
ブラウザで簡単にですが、Sassをデバッグする方法をご紹介いたします。 対象ブラウザはFirefoxとChromeブラウザです。 FirefoxはアドオンからFirebugと FireSassをインストールします。 ChromeはWeb StoreからSASS Inspectorをインストールします。 インストールした後、「config.rb」に「sass_options = {:debug_info => true}」を記述します。 次に「compass watch」でSassファイルを監視し、Sassファイルに何らかの記述をすると、CSSが更新されCSSに「@media -sass-debug-info{}」という記述が追記されます。 以上でSassファイルの記述内容を行番号付きで、インストールしたブラウザの拡張機能に表示させることができます。 FirefoxではFirebugの「HT
ColorZilla
ColorZilla for Firefox and Chrome Advanced Eyedropper, ColorPicker, Color Analyzer and other colorful goodies for your Firefox and Chrome. ColorZilla for Chrome and Firefox Advanced Eyedropper, ColorPicker, Color Analyzer and other colorful goodies for your Chrome and Firefox. Ultimate Gradient Generator A powerful online Photoshop-like CSS gradient editor, image to CSS converter and much more Cha
Dust-Me Selectors – Get this Extension for 🦊 Firefox (en-US)
Dust-Me Selectors has three main functions: == Scan any HTML page == Get details of all the stylesheets and selectors that were found, organised into used and unused selectors. This will tell you what CSS is used on that single page. == Spider an XML or HTML sitemap == Load and scan every page that's linked from the sitemap, checking every stylesheet against the DOM of every page that includes it.
Firefox、大量タブ使用時のパフォーマンスはChromeを圧倒 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable Mozillaは現在、Firefoxにおけるメモリアロケーションに関してさまざまな方法を模索しており、最近の実装はすでに通常負荷時でメモリの使用量を削減することに成功している。この新しいメモリアロケーションは高負荷時にはどういった振る舞いを見せるのか、メモリアロケーション関連の開発に従事しているGregor Wagner氏がベンチマークの結果をScalability - Garbage Collection stats and thesis updatesにて発表した。 実施されたベンチマークは、Most Popular Websites on the Internetから上位150のサイトを1.5秒ごとに新規タブで開いてくというもの。最後にすべてのサイトのロードが終わるまで9
WebSocketがセキュリティ問題を解決して再び実装へ
Webブラウザとサーバのあいだで専用のプロトコルを用いて通信を行うことで、サーバからのプッシュなど、より柔軟なデータのやりとりをWebブラウザとサーバ間で可能にするWebSocket。当初はHTML5仕様の一部として検討され、その後独立した仕様となりましたが、昨年12月にセキュリティ上の問題が発覚。見直しが行われていました。 WebSocketはプロトコルをIETFが、APIをW3Cが策定中ですが、IETFがセキュリティ問題を解決したプロトコル仕様のラストコールを発表しています。いつもWeb標準の動向を伝えてくれる「Web標準Blog」の記事「WebSocketプロトコルがLast Callに」が伝えています。 過去のバージョンとの互換性はなし WebSocketは、昨年にFirefox 4やOperaに実装されましたが、プロトコルにセキュリティの問題が発覚。いったん機能が無効になりました
モジラ、「Node.js」サーバプロジェクトに参入
ブラウザだけでなくサーバ上でJavaScriptプログラムを実行する「Node.js」プロジェクトに関心を持つMozillaは、独自色を打ち出したソフトウェアで初期のマイルストーンを通過した。 Node.jsは、Googleのブラウザ「Chrome」のJavaScriptエンジンである「V8」を採用しているが、Mozillaは「SpiderNode」と呼ぶプロジェクトで「Firefox」のJavaScript技術を移植している（FirefoxのJavaScriptエンジンは「SpiderMonkey」という名称で、SpiderNodeで採用されたハイブリッド技術は「V8Monkey」と呼ばれる）。 SpiderNodeプロジェクトを率いるPaul O'Shannessey氏は米国時間4月18日のTwitterで、この初期段階ではまだクラッシュするものの、「われわれは今や、V8Monkey上
Ruby on Railsアプリ以外でも Selenium RC を使えば RSpec でテストが書ける！ - yuumi3のお仕事日記
RSpec のテストを記述するDSLとしては素晴らしさは、 Selenium RC と組み合わせる事で Ruby on Railsアプリ以外でも使えます。 Selenium は Javascriptを使いWebアプリのテストを行うツールとして有名ですが、Selenium RC を使うと RSpecで書いたテストを Webブラウザー上で走らせる事が出来ます。 準備 Seleniumのページから Selenium IDE 、 Selenium RC (Remote Control) をダウンロードします。 Selenium IDEは Firefox上で動きますので Firefox を使っていない方は ダウンロード して下さい。最近 Firefox4.0がリリースされましたが、2011/3/28日現在は、旧版の 3.6 の方が良いかもしれません、Firefox3.6はここからダウンロードできます
Vimperator - livedoor Wiki（ウィキ）
Vimperator Firefox AddonであるVimperatorの解説(主に開発視点) トップページページ一覧メンバー編集 × FrontPage 最終更新：ID:iy6zZnngrQ 2009年10月23日(金) 08:20:22履歴 Tweet プラグイン開発 プラグイン一覧 liberatorオブジェクト一覧(version 1.2) liberatorオブジェクト一覧(version 2.0) liberator.modulesオブジェクトの主なプロパティ一覧 ソース一覧から見ていく（ソースの構成） vimperator 2.0 ヘルプ翻訳プロジェクト 外部リンク Vimperator関係の公的ページやプラグイン配布先、日本語サイトなど 公式ページ Projects (vimperator labs) Vimperator :: Firefox Add-ons Main
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefoxの開発ツール
CSS Usage – Get this Extension for 🦊 Firefox (en-US)
Web開発者の皆様へ - Firefox5周りでの変更点について
