タグ

2016年12月5日のブックマーク (4件)

  • Houdini、それはCSSの進化を促すプロジェクト - The future starts today

    この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは

    Houdini、それはCSSの進化を促すプロジェクト - The future starts today
  • PostCSSのプラグインを作ってみる - Qiita

    3日目では、PostCSSのASTを簡単に、効率よく操作するためのAPIをいくつか紹介しました。今日は、実際にPostCSSのプラグインを作り切るところまで説明します。 作るプラグイン 今回は、PostCSSのプラグインの例として、overflow-wrap プロパティが使われたとき、フォールバックとして word-wrap プロパティを追加するためのプラグインを考えます。 PostCSSプラグインの開発ガイドライン PostCSSのプラグインを開発するためのガイドラインがあるので、そこからいくつか紹介します。 パッケージ名に postcss- プリフィックスを付ける 名前を明確にするために postcss- プリフィックスをパッケージに付けたほうが良いです。(e.g. postcss-mixins, postcss-simple-vars)ただし、Autoprefixerやstyleli

    PostCSSのプラグインを作ってみる - Qiita
  • PostCSSのASTを操作する - Qiita

    PostCSSには2日目で説明した、ASTを簡単に操作するためのAPIが用意されています。ASTはJavaScriptのオブジェクトなので、JavaScriptの構文で直接変換させることもできますが、より便利に、そして効率の良い処理をするためにも提供されているAPIを使います。 また、PostCSSの全てのAPIAPIドキュメントで確認することができます。 ノードの種類 まずはASTのノードの種類です。PostCSSのASTのノードは以下の5つです。 Rootノード: ASTの1番上のノード(Rootノードは親ノードがない) Ruleノード: 1つのルールセット AtRuleノード: 1つの@ルール Declarationノード: 1プロパティ宣言 Comment: 1つのコメント これらは実装的には PostCSSの Node クラスを継承したもので、Node.type を参照すること

    PostCSSのASTを操作する - Qiita
  • KUTE.js | JavaScript Animation Engine

    The magic behind Spicr, the result of hard work, the bridge between old and new, the dream and inspiration. Forward Looking The modern JavaScript powering the core functionality, the modular architecture, the solid and complete components are all geared towards the future of web development. Knowing the Past While KUTE.js was re-developed to support mainly modern browsers, it also leaves the door