タグ

firefoxとcssに関するWatsonのブックマーク (17)

  • 超高速エンジンの内部:Quantum CSS(別名Stylo)- 前編 | POSTD

    Project Quantumのことをお聞きになったことがあるでしょう。これはFirefoxを高速化するために、Firefoxの中身を大幅に書き換えたものです。実験的なブラウザ、Servoから部分的に交換を実施し、エンジンの他の部分の著しい改善を図っています。 このプロジェクトは、飛行中のジェット機でのジェットエンジンの取り替えに例えられます。現場でコンポーネントごとに変更を実施するので、各コンポーネントの準備が整い次第、Firefoxで効果を確認することができます。 また、Servoから採用した最初の重要なコンポーネントは、Quantum CSSと呼ばれる新しいCSSエンジン(以前の別名はStylo)で、現在はNightly版でテストすることが可能です。(編注:Firefox 57からはデフォルトで有効化されています) about:config に行き、 layout.css.servo

    超高速エンジンの内部:Quantum CSS(別名Stylo)- 前編 | POSTD
  • Mozilla、CSS 3Dによるロールオーバーページ公開

    Firefox web browser - Faster, more secure & customizable FirefoxのオーロラチャンネルにはCSS 3Dトランスフォームの機能が実装されている。CSS 3Dトランスフォームの機能を活用すると、従来はプラグインや特定のブラウザが提供する独自の機能を使わなければ実現できなかった表現をCSSで簡単に実装できるようになる。 どのような効果を実現できるのかの簡単な説明が開発者向けブログにおいて「Screencast: 3D CSS rollovers and 3D CSS tester」として公開された。回転するロゴをFirefoxナイトリー/オーロラで閲覧した場合と、Firefox安定版で閲覧した場合とで比較するとわかりやすい。

    Mozilla、CSS 3Dによるロールオーバーページ公開
  • フォントブログ

    フォントブログ閉鎖と一部記事の移管について 平素はフォントブログをご覧いただき誠にありがとうございます。 数年前よりブログの更新を中止したまま、諸般の事情で過去の記事は公開をしていましたが、 時代に合わない内容や、すでに古い情報をこのまま残しておくのは良くないと考え、 フォントブログを閉鎖することにいたしました。 これまでお世話になった方々、私に様々な機会を与えてくださった方々、 そして約25年間に当ブログをご覧いただいた方々に心より感謝いたします。 私自身2014年に関東から地元へUターンをし、 書体デザイナーやフォントメーカーの方、文字関係者の方と直接お会いする機会が減ってしまったこと、 また私自身の環境の変化により、以前のように情報収集をする時間の確保が難しくなってしまいました。 フォント好きとして初心に帰り、過去の一部の記事は順次個人サイト (PETITBOYS) のブログのほうへ

    フォントブログ
  • CSSファイル内のセレクタが使用されているか確認できるFirefoxのアドオン -CSS Usage

    ページに読み込まれたCSSファイル内のセレクタが、実際に使用されているか確認できるFirefoxのアドオンを紹介します。 CSS Usage 「CSS Usage」を起動すると記述されているセレクタが一覧表示され、CSSファイルごとに結果が表示されます。 表示のグリーンは一回以上適用、レッドは未適用、グレーはhoverなどの確認できないセレクタです。 各ファイルの末尾には結果が数字で表示されます。

  • Firefox 4 がサポート予定の calc() とは

    Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。 Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。 calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはない

    Firefox 4 がサポート予定の calc() とは
  • CSS による履歴の漏えいを防ぐ取り組み « Mozilla Developer Street (modest)

    これは、Mozilla Security Blog の記事 Plugging the CSS History Leak (英文) の抄訳です。Web 開発者の方は Mozilla Hacks の記事抄訳 CSS の :visited に行われるプライバシー対策 も参照してください。 プライバシーの保護は必ずしも簡単なことではありません Mozilla では近く、以前からブラウザ各社が取り組んでいる個人情報漏えい問題の対策を Firefox の開発ツリーに追加します。私たちはこの改善を非常に楽しみにしており、他のブラウザも後に続いてくれることを期待しています。しかし、これは解決が難しい問題であるため、Mozilla がなぜこのようなアプローチを取ることにしたのか説明しておきたいと思います。 履歴の取得 Web ページ上のリンクは、ユーザがそのリンク先を訪れたことがあるかどうかによって見た目が

    CSS による履歴の漏えいを防ぐ取り組み « Mozilla Developer Street (modest)
  • [CSS]Firefox 3.0/3.5のCSSのバグ情報のまとめ

    Firefox 3.xでおこるCSSのバグ(仕様?)をWeb Designer Depotから紹介します。 CSS Bugs and Inconsistencies in Firefox 3.x 下記に、その中からいくつか紹介します。 outlineのバグ Firefox 3.xではoutlineプロパティを使用した場合、内包要素の余剰分が表示されません。

  • Firefox 3.6 CSS独自拡張バックグラウンド機能を使う方法 | エンタープライズ | マイコミジャーナル

    Firefox web browser - Faster, more secure & customizable css backgrounds in Firefox 3.6 at hacks.mozilla.orgにおいてFirefox 3.6で利用できるようになるCSSバッググラウンド機能が紹介されている。Firefox 3.6では「-moz-background-size」の独自拡張プロパティを使ってサイズを長さや割合で指定できる。同じく、Firefox 3.6で利用できるようになる独自拡張プロパティグラデーション「-moz-linear-gradient, -moz-radial-gradient」と組み合わせた場合のサンプルも掲載されている。 -moz-background-sizeでautoを指定した場合にはオリジナルサイズのままレンダリングされる。割合で指定した場合は、対象と

  • Firefox 3.6でCSSグラデーションを使う方法 | エンタープライズ | マイコミジャーナル

    Firefox web browser - Faster, more secure & customizable 公開が近づいているFirefox 3.6 (Gecko 1.9.2)ではCSS関連の機能が強化される。従来サポートされてきた機能の強化に加え、CSS3からいくつか新機能の取り込みと、Mozillaが提案する独自の機能が追加されることになっている。Mozillaが提案する機能のうち、グラデーションに関する説明がcss gradients in Firefox 3.6 at hacks.mozilla.orgで紹介されている。 グラデーション機能がどのように動作するかは、Firefox 3.6 beta4などでCSS Gradient & Firefox 3.6ページを閲覧するとよくわかる。Firefox 3.5で閲覧した場合と3.6で閲覧した場合では表示される内容が異なっている。

  • 日記 | ヨモツネット

    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 混在でき

  • 異なるバージョンの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 以降のバー

  • Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる·CSSViewer MOONGIFT

    デザインが苦手な人にとって(筆者をはじめ)、CSSによるデザインに問題がある際に何が問題なのかを把握するのがまず難関だ。別な場所で設定した内容が関連している場合もあるだろうし、IDで指定しているのか、はたまたClassで複数指定している場合もあったりするとさらにややこしい。 CSSで困った時に役立つFirefoxアドオン そこで、現在表示されている内容がCSSではどのような設定になっているのか、それを理解する所からはじめよう。使うのはCSSViewerだ。 今回紹介するフリーウェアはCSSViewer、CSSプロパティの一覧を作成するFirefoxアドオンだ。 CSSViewerをインストールするとツールメニューにCSSViewerという項目が追加される。これを選択するとマウスが乗っている項目のCSS設定値がフローティングウィンドウ上に表示される。 指定した場所に赤い点線が引かれる 項目は

    Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる·CSSViewer MOONGIFT
  • :nth-child() pseudo-class のテストのスクリーンショット - Another 朝顔日記

    今日のチェックイン? - Another 朝顔日記 の続きです。とりあえず以下のような html の table を表示したところをスクリーンショットにしてみました。 <table> <tr><td>ほげ</td><td>ふが</td><td>ほげ</td><td>ふが</td></tr> <tr><td>もげ</td><td>むが</td><td>ほげ</td><td>ふが</td></tr> <tr><td>ほげ</td><td>ふが</td><td>ほげ</td><td>ふが</td></tr> <tr><td>もげ</td><td>むが</td><td>ほげ</td><td>ふが</td></tr> <tr><td>ほげ</td><td>ふが</td><td>ほげ</td><td>ふが</td></tr> <tr><td>もげ</td><td>むが</td><td>ほげ</td><

    :nth-child() pseudo-class のテストのスクリーンショット - Another 朝顔日記
  • CSS 3のbackground-sizeとbackground-break:FirefoxとSafariのCSS対応 - builder by ZDNet Japan

    前回に続いて、CSS 3で追加された背景に関するプロパティを確認していきたい。 今回は、背景画像の大きさを指定するbackground-sizeと、インライン要素の背景画像の繰り返し方法を指定するbackground-breakを取り上げる。background-sizeにはSafari 3とOpera 9.5が、background-breakにはFirefoxが対応している。 なお、背景に関する規格については、CSS 3の草案CSS3 Backgrounds and Borders Moduleを参考にする。 背景画像の大きさを指定するbackground-size background-sizeは、背景画像の大きさを指定するプロパティだ。現在、Safari 3が対応しており、-webkit-background-sizeというプロパティ名で利用することができる。また、Opera 9.

    CSS 3のbackground-sizeとbackground-break:FirefoxとSafariのCSS対応 - builder by ZDNet Japan
  • box-sizingで横幅の算出方法を指定する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan

    CSS 3の勧告候補「Basic User Interface Module」では、横幅や高さの算出方法を指定するbox-sizingというプロパティが定義されている。これまではFirefoxとOperaが対応しているだけだったが、Safari 3やInternet Explorer 8(ベータ版)でもサポートされ、主要な4種類のモダンブラウザが対応したプロパティとなっている。 今回はこのbox-sizingプロパティの機能と、各ブラウザでの表示を確認していきたい。 box-sizingプロパティ CSSではHTML/XHTMLでマークアップした部分の横幅をwidth、高さをheightプロパティで指定することができる。このときbox-sizingプロパティを利用すると、widthやheightで指定した横幅や高さに、パディングやボーダーの大きさを含むかどうかを指定することができる。 bo

    box-sizingで横幅の算出方法を指定する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
  • Firefox 3が対応するwidthプロパティの新しい値 - builder by ZDNet Japan

    アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 エンドポイントセキュリティの転機 情報セキュリティ戦略が問われる今 重要インフラ事業者としてANAが考えること 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 対談:クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 現場業務のデジタル化を促進 リモートワークが生んだ課題をアプリで解消 ベネッセのデジタル変革を紹介 次の一手はこれだ! ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス みんなが使うMySQLの企業活用 なぜ有償サポートがあったほうが良いのか? 有名テクノロジー企業もOracleに頼む理由 コンテナをエンプラITに!

    Firefox 3が対応するwidthプロパティの新しい値 - builder by ZDNet Japan
  • HTML/CSS:FirefoxとSafariのCSS徹底検証 - builder by ZDNet Japan

    ウィンドウサイズによってスタイルシートを変える ブラウザのウィンドウサイズは環境によってさまざま。特定サイズを想定し作成すると、それ以外でコンテンツが読みづらくなる。最近はiPhoneなどに対応する必要もあるが、サイズ別にページを用意するのは制作・管理面で手間。こんなときはCSS3のMedia Queryを利用するといい。 2010-03-02 08:00:00 CSS 3のアニメーション機能を使ったロールオーバーやフェードインの設定 CSS 3のアニメーションの機能を利用すると、これまではJavaScriptやFlashを使わないと設定できなかった効果をスタイルシートだけで設定できるようになる。今回はアニメーションを利用したロールオーバーボタンの作成やフェードインの設定を行いながら、アニメーション関連プロパティの細かな機能を見ていきたい。 2010-01-04 13:41:01

  • 1