タグ

FirefoxとCSSに関するmisomakuraのブックマーク (10)

  • Firefoxで使われている上下左右中央配置のスタイルシート

    Firefoxで画像を開いたら、背景が暗い感じのCSSが使われるようになってました。Firefox 12からですかね? 11 からでした。そのページでは画像が上下左右中央に配置されています。 ちょっと興味が湧いたので中身を覗いてみたら、上下左右中央配置もCSSで行っていました。 使われているCSSファイルはresource://gre/res/TopLevelImageDocument.cssにあります。 このファイルはMPL 1.1/GPL 2.0/LGPL 2.1のトリプルライセンスです。 @media not print { body { background-color: #222; margin: 0; } img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } } @medi

    Firefoxで使われている上下左右中央配置のスタイルシート
  • Firefox5におけるnth-childセレクタのバグ

    Firefox5におけるnth-childセレクタのバグ すごい勢いでアップデートを進めるFirefoxですが特定のバージョンにのみ含まれるバグなどもあってかなりの製作者泣かせです。 次のようなHTMLがあり、 <dl> <dt>リスト1</dt> <dd>リスト1の内容</dd> <dt>リスト2</dt> <dd>リスト2の内容</dd> <dt>リスト3</dt> <dd>リスト3の内容</dd> <dt>リスト4</dt> <dd>リスト4の内容</dd> </dl> 次のようなセレクタを指定した場合、 dt:nth-child(3){ color:red; } 通常は「<dt>リスト2</dt>」が赤色になるのですが、Firefox5だけ「<dt>リスト3</dt>」が赤色になります。nth-of-typeセレクタと同じ動きですね。Firefox4やFirefox6ではちゃんと「

    Firefox5におけるnth-childセレクタのバグ
  • サイト全体で未使用のCSSセレクタを見つけるFirefoxアドオン「Dust-Me Selectors」

    不要なCSSセレクタを見つけてくれるFirefoxアドオン「Dust-Me Selectors」を紹介します。 古くからあるアドオンなのでご存知の方も多いかと思います。ページ単位のチェックができる他、サイトマップを使って、サイト全体で使っていないCSSセレクタを見つけてくれる機能もあるようです。 1.インストール 「Dust-Me Selectors」のページにアクセスして、「Continue to Download」のリンクをクリックすればダウンロード画面が表示されます。 Dust-Me Selectors 2011年5月現在では、Firefox4には対応していないようです。Firefox4にインストールしたい場合は「Firefox4で動作しないアドオンを動作させる方法」を試してみてください。 2012年6月現在、最新のFirefoxに対応しています。 2.ページ単位のチェック ページ単

  • すべてZIPにまとめて高速化、Firefox 3.7で対応 | エンタープライズ | マイコミジャーナル

    Firefox web browser - Faster, more secure & customizable MozillaのAlexander Limi氏がMaking browsers faster: Resource Packagesにおいてブラウザの動作を高速化させる方法を提案している。ブラウザ側の対応だけでよく、サポートしていないブラウザが閲覧しても影響がなく、現在の枠組みの中で簡単に実装して実現できる。Alexander Limi氏はPlone CMFの開発者であるとともに、以前はJarnやGoogleで働いていたこともある。 HTTPリクエストの数を減らすことでWebページの高速な表示を実現しようというテクニックのひとつにCSS Spritesと呼ばれる手法がある。これは複数の画像を一つの画像にまとめ、レンダリングの段階でCSSの分割表示機能を使うというもの。HTTPリク

  • @font-face - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    @font-face - CSS: カスケーディングスタイルシート | MDN
  • 異なるバージョンのFirefoxでCSSを有効・無効にするハック集:phpspot開発日誌

    異なるバージョンのFirefoxでCSSを有効・無効にするハック集が紹介されていました。 Firefox のバージョンによって有効なCSSを出し分けるような場合に使えそうです。 すべてのバージョンのFirefoxをターゲットとする /* 方法1 */ #selector[id=selector] { color: red; } /* 方法2 */ @-moz-document url-prefix() { .selector { color: red; } } /* Firefoxを含むすべてのGeckoエンジンで有効にする */ *>.selector { color: red; } Firefox 1.5 と それ以降のバージョンで有効にする .selector, x:-moz-any-link, x:only-child { color: red; } Firefox 2 以降のバー

  • Firefoxアドオンの「Web Developer」を使ってセキュリティ問題を発見

    「作業にツールが必要だが適当なものがない」という状況に陥ったことはないだろうか。例えば、煙探知器の電池を交換しようというときや、ドアノブのがたつきを直そうというときのように。 こうしたときに必要なツールはいつも手元にあるわけではなく、場合によっては買いに行かなければならないかもしれない。開発者が忘れがちなのは、プロジェクトで対処しなければならない問題は、意外にも、バターナイフやつめ切りといった日用品になぞらえられるようなありふれたツールを使って解決できる場合が多いということだ。 アプリケーションセキュリティの分野に目を向けると、そうしたツールとしてFirefoxのアドオン「Web Developer」が挙げられる。 Web Developerは、セキュリティテスト用のツールと思われることはまずないが、この用途に重宝する。作者のサイトから手軽にダウンロード、インストールできて便利な上、無料だ

    Firefoxアドオンの「Web Developer」を使ってセキュリティ問題を発見
  • Firefox 3.5で新たにサポートされるCSS機能 - Mozilla Flux

    Mozilla Developer Centerの『Firefox 3.5 for developers』と、Mozilla Wikiの『Evangelism/Firefox3.5』を参照して、Firefox 3.5で新たにサポートされるCSS機能について簡単にまとめてみた。 @font-face Web開発者とサイトデザイナーは、ユーザーがたまたまインストールしていたフォントに頼る代わりに、ダウンロード可能なTrueTypeとOpenTypeのフォントをデザインに取り入れることで、どのプラットフォームでも一貫した見た目にできる。 メディアクエリー CSS3のメディアクエリーをサポートしたことで、コンテンツがレンダリングされるデバイスに特有の詳細な情報を見ることによって、スタイルシートはコンテンツの外観をより正確にコントロールすることができる。たとえば、カラープリンタで印刷するときと、白黒

    Firefox 3.5で新たにサポートされるCSS機能 - Mozilla Flux
  • 日記 | ヨモツネット

    blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTMLSVG 混在でき

  • 【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル

    あのプロパティの使い方なんだっけ? これからはFireScopeで一発! SitePoint.comは1月27日(米国時間)、Firebug上で動作するアドオン「FireScope v1.0.1」をリリースした。FireScopeはFirefox2-3のFirebug1.2以降で動作するアドオン。各種HTMLエレメントやCSSプロパティといった要素のリファレンスと各種ブラウザの対応状況、サンプルコードを表示してくれるアドオンだ。SitePointが公開している各種HTML, CSSリファレンスの一部をまとめた内容となっている。 主な機能は次のとおり。 HTML Elements Reference HTML Attributes Reference CSS Properties Reference サンプルコード リファレンス内検索 W3C勧告に準拠しているかどうか 各種ブラウザ対応状況(

  • 1