Argentina, Spain, United Kingdom, France, United States
(Photo by sada_h) この記事は CSS Property Advent Calendar 2013 18日目のエントリです。 今回はCSSのテストについて書きます。 仕様と実装 CSSの仕様はW3Cによって策定が進められ、その仕様を元にブラウザベンダが実装を行います。 仕様がどうあれ、CSSのプロパティがどういった風に振る舞うかを決めるのはブラウザの実装次第です。 「同じスタイルを当ててるのにブラウザによって表示が違う…」なんて経験をしたことはありませんか？ 各ブラウザにCSSが正しく実装されるには、その仕様に対してのテストケースが必要です。仕様とそのテストケースを元に実装が行われれば、どのブラウザでも同じ様に表示されることが期待できるようになります。 仕様が勧告に至るにはテストケースをパスする必要があります。テストがなければいつまで経っても勧告に至りません。 CSSの仕様
CSS Property Advent Calendar 19日目のエントリ。 最近自分の中でホットなCSSアニメーションについて。 なぜCSSアニメーションか jQuery.animateでもアニメーションは出来るのに、わざわざCSSでやる理由は何か？ という内容で書こうと思っていたのだけど、11日目の Toshimaru さんのエントリと内容が丸被りしてしまった。 しかも俺の書く拙い文章よりもはるかに詳しくわかりやすく書かれていて申し分無い。 つまり俺はお呼びでないというわけだ。 仕方がないので、一発芸します。 CSSアニメーション一発芸 Snowfall!! クリックすると雪が降るよ。 JavaScript不使用 PCは Firefox, Chrome, Safari で動作確認済 スマホは未確認 雪にマウスオーバーすると・・・？ ソースコードはこちら おまけ 作ったはいいけど没にな
CSS Custom Properties for Cascading Variables ModuleはCSSで変数を使うために、その変数を定義するためのプロパティについての仕様だ。 これが先日Firefox Nightly 29で実装されたらしく、ちょっとお触りしてみた。これについては同じようにお触りされた記事、Playing around with CSS variables - "custom properties"が良かったのでこっちも参照するのをおすすめする。 基本的な使い方 CSSで変数というと、SassやLESSなどのプリプロセッサとして使うことができ、そのあたりで使ったことがあるのであれば、CSSerの人でもなんとなく馴染みやすい仕様かもしれない。とはいえ定義とその参照方法はSassやLESSのそれとは全然異なる。 /* 変数を定義する。 `var-`の後が参照する時のキ
CSS Property Advent Calendar 2013 の15日目です！ 今回は、 現在 Technical Report 段階の CSS-Speech Module を紹介します！ CSS-Speech Moduleってなに？ CSS （ Cascading Style Sheets ）は、（ HTML や XML などの）マークアップ文書から， スクリーン, 紙, 発話（ speech ）, 等々 の媒体への具現化（ rendering ）を記述するための言語である。 Speech モジュールは、作者が，発話合成を通して, 加えて 随意で音声指示も利用して，文書の音声化（ rendering ）を宣言的に制御できるようにするための、聴覚 CSS プロパティを定義する。 この標準は Voice Browser Activity との協同の下，開発された。 扱いとしては、med
CSS Property Advent Calendar 2013 14日目の記事。 明日は @watilde さん。 先日のHTML5 CONFERENCE 2013 の中で "CSS Regionsを使った新しいCSSレイアウトを作る方法" というセッションを聞いて依頼、CSS レイアウトが気になったので少し調べてみました。 今回は Flexible Box Layout, Multi-column Layout, CSS Regions, CSS Shapes を調べました。 各 CSS レイアウト の概要を書く際、Microsoft Developer Network の CSS セクション を参考にさせて頂きました。 参考サイトにデモが上げられているものが、こちらに関しては Google Chrome Canary 動作を確認しました。 また、Canary で各サイトのデモを確認
これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある
CSS Property Advent Calendar 2013の12日目の記事です。 もともと:futureや:pastなどを考えていたのですが、9日目にTime-dimensional擬似クラスについて調べてみたで書かれています*1ので、今日はSVG 2で検討されているプロパティを2つ見てみます*2。 paint-orderプロパティ SVGの描画モデルでは、図形やテキストは、まずfillが描画され、次にstrokeが描画され、その上にmarkersが描画されます（SVG 1.1ではRendering ModelのPainting shapes and textを参照）。 ですが、時と場合によってはこの順番を変えたい時があります。特にfillとstrokeの順番を変えたいときがあります。strokeは、strokeの中心がオブジェクトの縁（アウトライン）にあうように描画されるので、太
目次 なぜCSSアニメーションなのか？ パフォーマンス的観点 CSS vs jQuery1. CSSによるアニメーション2. jQueryによるアニメーションブラウザ対応状況CSSアニメーションの書き方どこからアニメーションの着想を得るか最後に参考CSS Property Advent Calendar 2013の11日目の記事としてCSSアニメーションのプロパティを紹介をします。 なぜCSSアニメーションなのか？さて本ブログでもタイトルやアイキャッチ画像のイメージの表示にちょっとしたCSS3アニメーションを採用しています。ほんのちょっとのCSSの記述なんですがサイトがイイ感じにリッチに見えてとても気に入ってます。 jQueryなんかでも.animate()を使えばアニメーションができますね。ではなぜCSS3アニメーションなのか？ そこからエントリを始めてみたいと思います。 パフォーマンス
追記（2018年4月13日）：紹介した機能の実装が進みました（Can I use：allプロパティ、initial、unset）。 一方で文中で取り上げたScoped Stylesheetsは仕様から削除されてしまいました。 このエントリはCSS Property Advent Calendar 2013の10日目のものです。 すみませんすみません日付勘違いしてました。ほんと申し訳ありません…… 今回はradial-gradient()のMixin…は作りません。プロパティじゃないしね。ふつうのプロパティと値についてご紹介しようかと。 CSS Cascading & Inheritanceのall, initial, unset Firefox 27あたりからallプロパティとunset値なんてものが実装されました。CSSのCascading and Inheritanceモジュールで定義
元ネタ Googleが出している統計を利用しています。 Chromium Dashboard 自動収集される膨大な情報を即時解析し、直近二十四時間分のCSSプロパティ利用統計を見せてくれる。 Google Chromeには使用統計を自動的に送信する仕組みが組み込まれています。 「設定＞機能＞詳細設定を表示…＞プライバシー＞使用統計データや障害レポートを自動的に Google に送信する」がそれです。たぶん。 で、この機能で送信されてきた統計情報のうち、CSSプロパティの利用状況についての情報が上記のものです。あ、なのでたぶんページ単位ではなく閲覧単位です。よく見られるページで利用されていれば使用率は上がる事でしょう。いずれにしろ人気度という観点で問題ないと考えています。 ちなみにCSS以外の統計情報もありそうなんですが、本記事執筆時点ではまだ公開されていないようです。 第1位はwidth、
CSS Property Advent Calendar 2013の1日目の記事です。 私の好きなCSSプロパティをランキング形式でご紹介します。 好きなプロパティ第3位安定の「-webkit-animation-timing-function」プロパティです！ 好きな理由なんといっても長い！ JavaScriptを使用して値を書き換える際など「webkitAnimationTimingFunction」とかもう長い。 すごい長い。 3位になってしまった理由はググラビリティが低いということ。 直接「-webkit-animation-timing-function」で検索すると 「-webkit-animation-timing-function に一致する情報は見つかりませんでした。」 になって引用符で囲むという… 好きなプロパティ第2位安定の「display」プロパティです！ 歳を重ね
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
