スタイルシートの統計情報を出力するNode Packageを作った。 t32k/stylestats Node.js 0.10以上が必要で、CLIだとこんな感じの情報を出力してくれる。 $ npm install -g stylestats $ stylestats path/to/stylesheet.css StyleStats! ┌────────────────────────┬──────────┐ │Size │ 498.0B │ ├────────────────────────┼──────────┤ │Rules │ 7 │ ├────────────────────────┼──────────┤ │Selectors │ 11 │ ├────────────────────────┼──────────┤ │Simplicity │ 63.64% │ ├───────
(Photo by sada_h) この記事は CSS Property Advent Calendar 2013 18日目のエントリです。 今回はCSSのテストについて書きます。 仕様と実装 CSSの仕様はW3Cによって策定が進められ、その仕様を元にブラウザベンダが実装を行います。 仕様がどうあれ、CSSのプロパティがどういった風に振る舞うかを決めるのはブラウザの実装次第です。 「同じスタイルを当ててるのにブラウザによって表示が違う…」なんて経験をしたことはありませんか？ 各ブラウザにCSSが正しく実装されるには、その仕様に対してのテストケースが必要です。仕様とそのテストケースを元に実装が行われれば、どのブラウザでも同じ様に表示されることが期待できるようになります。 仕様が勧告に至るにはテストケースをパスする必要があります。テストがなければいつまで経っても勧告に至りません。 CSSの仕様
はじめに 最近は業務においても生のhtmlやcssを書く機会が少なくなりました。また、JavaScriptもいわゆるaltjs系といわれるものが次々に開発されています。 また、以前はサーバ・サイドのフレームワークのテンプレート・エンジンとして使用されることがほとんどだったものも、今ではスタティックなサイトやアプリケーションを生成するジェネレータに多く取り入れられていたりします。 このエントリーは、そのようなテンプレート・エンジンや、プリプロセッサ、alternate javascriptを大胆にもいっしょくたにまとめた、自分向けのメモです。 がっつり試したものもあれば、やんわりと触っただけのものもありますが、リストアップしてみたいと思います。 テンプレート・エンジン / マークアップ言語 jade Node Template Engine jadeは、Hamlに影響を受けてつくられたテンプ
Sorry: this tester doesn't work when JavaScript is not enabled... ( ) Recipes Select every third element starting at second if it's a list item Select the third item if it's a list item Select the the first four elements if they are list items Select the second to last element if it is a list item Select the first appearing div Select the last appearing div Select odd list items Select every fifth
スタイルの正規化にまつわるご質問をいただきました。 アスタリスクで全要素のマージンをゼロにするようなリセットの仕方は海外では行われず、使用する要素だけにマージンをゼロを指定していくという仕方が最近の流れだとセミナーで聴きました。 そのほうがブラウザに対する負荷も少ないので・・・ということなのですが、一体どの程度の負荷なんでしょうか？体感的に重いなと感じる程度なんでしょうか？ ブラウザが読み込んだら固まってしまう状態を100としたらどの程度なんでしょうか？ ページ全体をdiv要素で囲んで、その中の全要素（div * { margin: 0; }）と指定したら、その中で使ってる要素だけなので、あまり気にすることではないような気がします。 まず補足しておきますと、個々のブラウザが適用するデフォルトスタイルシートによって生じる差異をあらかじめ解消するため、制作者スタイルシート側で要素のマージンやパ
ASCII.jp：30分でできる！Webサイトを高速化する6大原則 高速化する6大原則として『4.CSS セレクターは短く最適化せよ！』とこの記事では挙げられているのですが、原則というのはちょっと言い過ぎではないかと。少なくとも『3.HTTPリクエストは最小にせよ！』などと同列に考えるのは避けた方が良いかもしれません。 というのも、ハイパフォーマンスWebサイトの著者であるSteve Soudersはこんなことを言っています。 CSSセレクタを最適化するために時間を費やすのは価値のあることだとは思わない。もし、明日起きて世界中のサイトのCSSセレクタが奇跡的に最適化されていたのなら、私は遠くに行ってこう叫びたい。『誰も気づいてないですやん！！』 High Performance Web Sites :: Performance Impact of CSS Selectors Steve S
CSS is easy to change, hard to test CSS is a declarative language which basically means that it’s easy to make changes but very difficult to make sure those changes don’t produce unexpected consequences elsewhere in the project. This site collects the current techniques and tools available for CSS testing to provide both a simple starting point and a general reference for future development. Why?
CSS Flexbox Please! The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does
さてさて第３弾となる【CSS 中級講座】ですが、今回は個人的にメンドくさくて仕方ない「ベンダープレフィックス」について。 ちょくちょくみかける”-moz-”やら”-webkit-”ってヤツです。 これは、草案段階のCSS3プロパティなどに対して、各ブラウザ側で実験的に実装するために用意されたモノ。 実験的な状態から恒常的な実装となった場合、該当ブラウザのベンダープレフィックスは必要なくなりますが、それがいつ不要となったのか、なかなか調べる機会もありません。 っちゅーコトで、2012年9月12日現在、主要なCSS3プロパティのベンダープレフィックスが未だ必要なのかどうか、最新情報をいくつか調べてみましたよ！ CSS3の各種ベンダープレフィックス調査 CSS3プロパティは数あれど、今回調べたのは結構主要なトコだと思われる下記６つ。 調査対象のCSS3プロパティ text-shadow box-
After starting the test-suite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests. Because it is technically not possib
Media Query & Asset Downloading Results April 10, 2012 # book media queries mobile performance responsive A little while back, I mentioned I was doing some research for the book about how images are downloaded when media queries are involved. To help with that, I wrote up some automated tests where Javascript could determine whether or not the image was requested and the results could be collected
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
