Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
[この記事は米国 Hacks ブログで公開された "Firefox 49 fixes sites designed with Webkit in mind, and more" の抄訳です] 最近 Hacks で公開したいくつかの記事で、 ブラウザー互換性を意識したウェブ制作の重要性 と、優れた開発者がブラウザー互換性を考慮してどのようにウェブを制作しているか について述べてきました。すべての人がウェブを利用できるかどうかは、開発者にかかっています。今日の時点で、多くの 互換性に関する機能 が Firefox のレンダリングエンジンである Gecko に搭載されています。これは WHATWG の定める最新の互換性標準 によるものです。 Firefox の今回行われた更新で、特筆すべき変更が加えられました。それはいくつかの -webkit- のついた属性と、WebKit に固有なインターフェ
#TabsToolbar:after { top: 0% !important; box-shadow: none !important; background-color: transparent !important; background-image: none !important; } /* ページ表示画面の上 バー境界 1px ボーダー？ */ #navigator-toolbox:after { /* background-color: transparent !important; */ } #main-menubar, #toolbar-menubar, /* メニューバー */ #TabsToolbar, /* タブバー */ #nav-bar, /* ナビゲーションツールバー */ #PersonalToolbar /* ブックマークツールバー */ { /* bor
Firefox Nightly で position: sticky; がサポートされたので紹介。指定することで特定の要素を相対位置に固定表示することが可能です。 ちょっと前の話になってしまいますが、現在、Firefox Nightly としてリリースされている、Firefox 26 で、CSS の position プロパティに対する新しい値、position: sticky; がサポートされました。 今のところ、Firefox Nightly でもデフォルトでは無効になっていますが、layout.css.sticky.enabled を true にすることで試すことができます。 h2 {position: sticky} ： Air Mozilla Sticky Positioning position: sticky; とは 簡単にいってしまえば、position プロパティの値と
Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family
Google検索のCSSがインスタントサーチの導入で変わったようで、サイドバーのカスタマイズの影響でGoogle.comの表示が崩れてしまうのでちょこっと修正。 Firefox 4.0β以降向けなので、3.6でも使えますが使いづらいかも。 Google のサイドバーをマウスオーバーで開閉する - Grieverがベースになってます。 userContent.cssに記述してますが、元がStylish用ですので「@namespace url(http://www.w3.org/1999/xhtml);」を先頭につければ使えるんじゃないかなと。 @-moz-document domain(www.google.co.jp), domain(www.google.com){ #center_col { margin-left:8px!important; border-left:none!imp
Mozilla Developer Centerの『Firefox 3.5 for developers』と、Mozilla Wikiの『Evangelism/Firefox3.5』を参照して、Firefox 3.5で新たにサポートされるCSS機能について簡単にまとめてみた。 @font-face Web開発者とサイトデザイナーは、ユーザーがたまたまインストールしていたフォントに頼る代わりに、ダウンロード可能なTrueTypeとOpenTypeのフォントをデザインに取り入れることで、どのプラットフォームでも一貫した見た目にできる。 メディアクエリー CSS3のメディアクエリーをサポートしたことで、コンテンツがレンダリングされるデバイスに特有の詳細な情報を見ることによって、スタイルシートはコンテンツの外観をより正確にコントロールすることができる。たとえば、カラープリンタで印刷するときと、白黒
CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive. Usage You can use the keyboard shortcut F9, or the context-menu's option "Reload CSS" to reload the CSS files or at page. Feedback Feel free to
slider { background-color:black !important; -moz-border-left-colors:none !important; -moz-border-bottom-colors:none !important; border-style:none !important; } slider[orient="vertical"] { background-color:black !important; -moz-border-left-colors:none !important; border-style:none !important; } これを、userchrome.cssとusercontent.cssにコピペしてみて。使用しているテーマによってはうまくいかないかもしれないけど。「black」の部分を変えれば好きな色になります。
_ userChrome.cssでOffice XP風に Firefoxはその外観をuserChrome.cssでカスタマイズすることができます．例えばFirefox Helpであげられている「メニューをWindows XPスタイルに変更する」などがあります． 今回はuserChrome.cssを使って，メニューバーをOffice XP風に変更する方法について．調べてみるとすでにChristoph Studerで，サンプルが紹介されいたのでそのまま使ってみました． 私はFirefoxのテーマにreinを利用しているのですが，これにあわすと青色がちょっとあわない感じがします．また，Christoph Studerのコードをそのまま使うと少し余計なスペースができてしまいます．そこで，borderとbackground-colorを少し変えて，余白を少しいじってみるだけで，印象が変わりました．あ
Mozilla のカスタマイズ このドキュメントの目的は、ユーザの好みにあわせてカスタマイズできる、あまり文書化されていない Mozilla の機能の一部について、いくつかのヒントを提供することです。 ここに載っているテクニックのほとんどがクロスプラットフォームです。このドキュメントが mozilla.org ドキュメントツリーの中でどこの URL にあるかということに惑わされないでください。(訳注: このドキュメントは unix ディレクトリにありますが、ここで扱っている Mozilla のカスタマイズは、プラットフォームに関係なく利用できるということです) このドキュメントで扱っているトピックの一部です: ユーザ CSS (UI フォントの変更を含む) Linux でフォントをもっと読みやすくする キーバインディング その他の便利な設定 ユーザインターフェイス部品のルッ
Googleのファビコンが変更されました。 シンプルな寒色のgから原色を使ったものに。以前の大文字から小文字へ変わったときも違和感がありましたが、今回はよりひどいです。(少なくとも私には) 目が痛いです。けばけばしいです。 というわけで、Stylish(とuserstyles.org)の力を借りて元に戻します。 それでは以下のスタイルをどうぞ userstyles.org：Google Favicon 2008 ただ、作者が中国の方なので、中国のGoogleに対応しています。 日本のものに対応させるにはスクリプト中の"google.cn"を"google.co.jp"に書き換えてください。 また、Gmailなどのほかの一部Googleサービスにも影響があるようです。 私はGmailのアイコンが変更されたりするのはいやなので(あと、"g"の画像が2つ重なる症状がでましたので)、ちょこちょ
自分が使っている Firefox 3 の Add-on 30種を紹介する 自分が使っている Firefox 3 の Add-on 30種を紹介する Jul252008 Author: ゴリ丸 Categories: IT関連, その他 Tags: add-on, firefox Bookmarks: 人が登録 Next Page: Plurkについてアレコレと Prev Page: デスクトップを3Dにすると、すごく楽しいことになった もうすでに様々なブログなどでFirefox 3 の Add-on は紹介されているわけですが、あえて今、私が使っているAdd-onを紹介してみたいと思います。 使ってるAdd-onの数は、まあ普通だと思います。が、誰かの新しい発見になればいいかなぁと思っている程度の記事です。 またFirefoxのAdd-onは本当に数多くあるため、みんなで情報共有したいとい
Firefox で沖縄県警のサイトを見てみましょう。たぶん悲惨なことになっていると思います。縮小キャプチャを以下にあげておきます。 ▲左：Firefox3 右：IE7 (沖縄県警のサイトTOPのキャプチャ（部分・縮小）) IE など他のブラウザだとキレイに見えるのに、なぜ Fx では悲惨なことになるのでしょうか？ 原因の推測 スタイルシートの指定の仕方が原因かと思います。ソースを見てみます。 <link rel="stylesheet" href="css/import.css" type="text/css" media="print" /> <link rel="stylesheet" href="css/import.css" type="text/css" media="screen" /> このように同じファイル（import.css）を2度指定しています。指定されている imp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
