CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
Kalei - コンパイルレス！JavaScriptで自動生成されるスタイルガイド MOONGIFT
うん、コンパイルレスは確かに手軽ですね。 プログラマーが複数人での開発に際してAPIドキュメントを必要とするのと同様にWebデザイナーであればスタイルガイドが必要になるでしょう。そうしないと意図した使われ方をしなかったり、変更が及ぼす影響範囲が分からなくなります。 CSSのスタイルガイドを生成するソフトウェアは幾つかありますが、通常はスタイルシートを指定してコマンドを実行し、その結果静的なHTMLを出力するものが多かったと思います。それだとWebデザイナーの方にとっては敷居が高くなってしまいます。 そこで使ってみたいのがKalei、クライアントサイドで生成するタイプのスタイルガイドです。インストールは特に不要で、Webサーバ上にKaleiを展開します。 $ git clone git://github.com/kaleistyleguide/kaleistyleguide.git Clon
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
Style Guide Boilerplate
WHY If you're like me, you find yourself using common design components from one website to the next. You could grab the lastest and greatest framework and use that to handle these common components, or you could roll your own framework. Style Guide Boilerplate is geared for people interested in creating their own "tiny Bootstraps". Style Guides: Promote consistency Promote modular thinking Add cl
StyleDocco
StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resiz
Code Standards | Isobar
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices. If you have any feedback, please leave a comment on the announcement blog post. This document outlines our de-facto code standards. The p
レスポンシブウェブデザインについて | CSS Radar | For Frond End Developers
いまこの記事を読んでいるモニタのサイズは何インチだろうか？ iPhone、アンドロイドOS搭載スマートフォン、iPad、ネットブック、ノートPC、デスクトップPCと数年前なら思いもよらなかったモニタ/スクリーンサイズでユーザはウェブサイトを閲覧し始めている。 今後もさらに解像度が異なる環境が増えていくことは間違いない。 ではそのサイズのモニタごとに、スクリーンごとにデザインを作り、HTML/CSSを書き足していくのか？ その疑問への1つの回答がレスポンシブウェブデザイン(Responsive Web Design)。 多くの場合、CSS3で利用が可能になる予定のMedia Queriesを活用して、モニタ/スクリーンのサイズに合わせて最適なデザインを供給するデザイン/コーディング手法がレスポンシブウェブデザインと呼ばれている。 レスポンシブウェブデザインの例 Simon Colliso
MXR is retired
MXR replaced by DXR The MXR code indexing and cross-referencing service has been retired and replaced by DXR Based on your query, we suggest the following DXR URL: DXR url? Please Do Not Hotlink Files Please do not hotlink files directly from MXR or DXR as a way of getting Mozilla code into your project. You may not get the latest version, and your performance will suffer. If you want to incorpora
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
