Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に
CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE （IE11）や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() ： CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables （CSS カスタムプロパティ） と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基本的な記述 例
Firefox 37 が正式リリース、display: contents のサポートなど
もうそろそろ Firefox 38 が自動更新で提供開始されそうなころですが、Firefox 37 がリリースされた時に書いた記事が下書きのまま放置状態で忘れてましたので、こんなタイミングですが公開しておきます。ですので、以下は1ヶ月以上前の話ですのでご了承ください。 Firefox の最新版、Firefox 37 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。 Firefox 37.0 リリースノート Android 版 Firefox 37.0 リリースノート Firefox 37 for developers ： MDN CSS 関連では、display: contents のサポートや、インスペクタに 「アニメーションパネル」 が追加され、選択した要素に適用されている CSS アニメーションの詳細情報を表示したり、アニメーションを再生 / 一時停止
Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に
現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。 例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合などに、unicode-range でその文字や文字コード範囲を指定することができます。 4.5 Character range: the unicode-range descriptor - CSS Fonts Module Level 3 Editor's Draft 27 October 2014 unicode-range デスクリプタの使い方 こういう指定が妥当というか実用的かは別として、
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
CSS Variables （CSS カスタムプロパティ） の使い方
CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様 「CSS Variables」 について、最新仕様に基づいた解説します。 CSS Variables とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。 以前、この Blog でも書きましたが、CSS Variables は Firefox 29 が実装し、機能としては使用できるようになっていましたが、正式リリース版ではデフォルトでは無効だったのと、カスタムプロパティの接頭辞が var- という古い仕様での実装でした。 近日正式版がリリースされる予定の Firefox 31 で最新の仕様 （接頭辞が -- に変更） を基に実装、デフォ
Firefox 29 が正式リリース、CSS Variables などに対応
Firefox の最新版、Firefox 29 が正式リリースされ、自動更新も提供開始されました。CSS 関連では、CSS Variables に対応。また、input type="number"、および input type="color" にデフォルトで対応しました。 Firefox の最新版、Firefox 29 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。 Firefox 29 からデザインが刷新されたのが最も目立つ大きな変更ですが、その他にも CSS 関連では、CSS Variables に対応したり、HTML5 関連では、input type="number"、および input type="color" にデフォルトで対応しました （実装はされていましたが、今まではフラグ立てる必要がありました）。 Firefox 29 リリースノート An
Firefox 27 が正式リリース、all:unset で CSS のリセットが可能に
Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。 CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab、-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。 Firefox 27.0 リリースノート Firefox 27 サイト互換性情報 Firefox 27 for developers all: unset で何ができるか 仕様的には下記にあります。 3.1 Resetting All Properties: the all property ： CSS Cascading and Inheritance Level 3 The all property is a shorthand that
新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向
HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様が年明け、1月 2日に公開されましたので簡単に紹介。 所謂、レスポンシブ・イメージ （Responsive images） のお話ですが、HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様 （Editor's Draft） が年明け、1月 2日に公開されました。 ちょっと時間が経ってしまいました （10日以上、下書きのままで放置されていたのはナイショ） が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。 The picture Element, Editor's Draft, 2 January 2014 ちなみに、1つ前の仕様は下記になります。 The picture elemen
CSS Flexible Box （Flexbox） を使ってみよう - 最新仕様対応版 | WWW WATCH
スクリーンサイズや可変するウィンドウサイズなどに柔軟に対応するレイアウトが可能な CSS Flexible Box について、最新の W3C 仕様に基づいた解説をサンプルソースを使いながらやってみます。 CSS3 のモジュールとして策定されている CSS Flexible Box （CSS3 Flexbox） は、CSS によるレイアウトを実現するための仕組み。 レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。 現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。 CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 Septe
CSS filter プロパティで 「半透明ガラス」 効果を再現してみる
2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...） とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね？ と思ってやってみました。 実際に iPhone の Safari で表示してみた例が下記の画像です。 ただし、dialog 要素や ::backdrop 疑似要素を使っちゃうと、現時点では Chrome Canary で、さらにフラグを立てないと動作しないっていう、ほとんどの人が試せない状態になってしまうので、今回は div 要素を J
Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に
Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのことで、HTML5Rocks でデモページが公開されています。その紹介と、dialog 要素についての簡単な解説。 HTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。 現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス （モーダルウィンドウ） の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に
WebKit （Nightly Builds） で srcset 属性がサポートされたらしい
WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようですので、簡単に srcset 属性の仕様について解説してみます。 WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようです。 srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ （デバイスピクセル比に応じて） 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images （レスポンシブ イメージ）」 を HTML のみで実現することができます。 Improved support for high-resolution displays with the srcset image attribute ： Surfin' Safari WebKit Nightly
IE11 でユーザエージェント文字列から 「MSIE」 が消えた件
IE11 になって機能追加やレンダリングエンジン周りの進化もかなりありましたが、それとあわせてユーザエージェント文字列が大幅に変更されました。 先月末に Windows 8.1 のプレビュー版が公開され、早速手持ちの MacBook Pro に入れてみたっていう話は先日書いたとおりですが、Internet Explorer 11 （IE11） については細かく触れなかったのでまとめておこうと思います。 IE11 になって機能追加やレンダリングエンジン周りの進化もかなりありましたが、それとあわせてユーザエージェント文字列が大幅に変更された結果、従来のブラウザ判別コードで検出できなくなる可能性もあったりします。その辺について Nicholas C. Zakas 氏が Blog 記事を上げていたので紹介しつつ触れてみたいと思います。 とりあえず、IE11 の概要とか 公式情報として、IEBlog
Square のクレジットカードリーダーが届いたので実際に決済してみた
「Square」 のクレジットカードリーダーが週末に届いたので、早速ですが、実際に決済するところまでやってみました。商品登録から決済までひと通りの手順を解説しています。 ちょっと前に、iPhone や iPad などのスマートフォンがクレジットカード決済端末になる 「Square」 というサービスの日本での提供開始に関連して、早速アカウント作ってみたよっていうエントリーを書きました。 iPhone や iPad がクレジットカード決済端末になる 「Square」 のアカウント作ってみた その 「Square」 のクレジットカードリーダーが週末に届いたので、早速ですが、実際に決済するところまでやってみました。かなり簡単に決済が可能ですので、今まで審査や費用など、敷居の高さにクレジットカードの導入を諦めていた、小規模な小売店さんとか、移動販売の方々なんかには、オススメかもしれません。 Squa
Selectors Level 4 の Working Draft が更新される
5月 2日付けですが、Selectors Level 4 の Working Draft （草案） が更新されました。 Selectors Level 4 自体は 2011年 9月 29日の Selectors Level 3 仕様の勧告とあわせて最初の Working Draft が公開されていますが、そこから今回で 2回目の更新となります。 Selectors Level 4 W3C Working Draft 2 May 2013 Working Draft 内の、「Selectors Overview」 に Selectors Level 4 を含めた、セレクタの一覧がありますので、下記に引用しつつ簡単に日本語での解説も付け加えておきましたが、Selectors Level 4 ではセレクタがより一層便利になっていますので、早いところブラウザ側で実装されるといいですね。 ちなみに、
Pointer Events 仕様が W3C 勧告候補に
タッチ、マウス、ペンといった様々な入力を、特定のハードウェアに依存しない 「ポインタ」 という概念で扱う仕様、「Pointer Events」 が FPWD （First Public Working Draft） から 5ヶ月で勧告候補 （Candidate Recommendation） として更新されました。 Pointer Events W3C Candidate Recommendation 09 May 2013 W3C Transitions Pointer Events to Candidate Recommendation ： IEBlog Fig. 1 A pointer is a hardware agnostic representation of input devices that can target a specific coordinate (or set
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
Webkit に最適化されたサイトを IE10 に適応させるためのガイド
スラッシュドットで 「Microsoft、「WebKitはWeb標準を破壊している」と主張」 なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが 「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」 っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。 Microsoft、「WebKitはWeb標準を破壊している」と主張 ： スラッシュドット・ジャパン ちなみに翻訳元の記事は 「Windows Phone Developer Blog」 で書かれた内容なので、「Windows Phone 8 で動作する IE10」 っていう書き方になっている部分や、すべて Webkit と対比して書かれているなど、モバイル
Firefox 13 における HTML5 canvas 要素のアクセシビリティ
昨日 （6月6日） に Firefox の最新版であるバージョン 13 が正式リリースされました。 この Firefox 13 で実装された新機能や変更点に関しては下記の記事で紹介されていますが、 Firefox 13 の主な新機能を紹介します ： Mozilla Developer Street (modest) アクセシビリティコンサルティングを提供する Paciello Group の公式 Blog で、新しい Firefox 13 が canvas 要素のフォールバックコンテンツに対するフォーカスに対応したことに関する記事が上がっていましたので、紹介して見ようかと思います。 原文： HTML5 Canvas Accessibility in Firefox 13 ： The Paciello Group Blog 完全な対訳ではなく、わかりやすいようにポイントをかいつまみながら訳し
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
