どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
PostCSS とは何か
関西フロントエンドUG 主催「Grand-Frontend-Osaka 2015 Summer」での発表資料です。 http://kfug.github.io/events/2015/grandfrontendosaka/
PostCSSというnode.js製のツールがある。 PostCSSのGitHubでのStar数は4000を超え、海外のブログではPostCSSについての記事をよく目にするようになった。しかしまだ日本では盛り上がりを感じていないので、日本語のPostCSSの記事を書くことにした。 PostCSS PostCSSとは、JavaScriptで書いたプラグインでCSSを変換するためのツールだ。 PostCSS自体は、CSSパーサーとそのASTを操作するためのAPIのみを提供していて、ユーザーはPostCSSのプラグインを書くことでCSSを変換することができる。 僕もPostCSSを使って、以前ブログにも書いたAtCSSというCSSプリプロセッサーや、postcss-style-guideというスタイルガイドをMarkdownから自動生成するためのプラグインなどを書いたことがある。 PostCSS
リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize
ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、normalize.cssの必要なスタイルのみを使用できるPostCSS Normalizeを紹介します。 PostCSS Normalize -GitHub normalize.cssについては、下記を参考に。 Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意 PostCSS Normalizeは、browserl.istに基づいて必要なnormalize.cssの必要なスタイルのみを使用できます。 例えば、各ブラウザの最新から3つまでのバージョン、IEだと9, 10, 11をサポートする場合は、下記のようにな
cssnext 今日ではSassやStylusなどaltCSSを用いたウェブデザインは主流になりつつあるが, 一方で, 次世代CSSではaltCSSで実装されているような様々な機能追加が検討されている. そこで次世代CSSを先取りするcssnextと次世代CSSで足りない機能をPostCSSのプラグインを用いて補う方法について紹介する. これらのツールを用いると, CSSの枠組みの中で閉じた開発が行えて良いのではないかと思う. 最近のウェブデザイン事情と次世代CSS 最近のウェブデザインでは, SassやStylusなどのaltCSSと呼ばれるメタ言語を用いてスタイルを記述し, それぞれのプリプロセッサを用いてCSSを生成するような開発スタイルが多くなってきた. Twitter BootstrapやFoundationなど, 主要なCSSフレームワークはSassを用いて開発が行われており,
こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！ 髪がだいぶもっさりしてきたのでそろそろなんとかしないとなぁと思っています。 この写真は先日 きたむらさんとこくぼさんで朝明渓谷に行ってきた時の写真です。 すごく綺麗で泳いだのですが、まぁまぁ寒かったです。 最近はポケモンGOにはまっています。 会社の入っているビルがポケストップになっていて、お昼休みに社長がルアーモジュールを置くので、 ポケモンも集まるし、社員も集まってきます。 どうやら社長が会社にルアーモジュールおいたっぽい— めろたん。れんやたん。 (@renyamizuno_) July 25, 2016 Misocaのはいってるビルはポケストップになっていて、昼休みは社長の仕事としてルアーを指しています。社員に1000円のランチを奢るより感謝されている実感がある。 pic.twitter.com/8
GitHub - postcss/postcss: Transforming styles with JS plugins
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog
この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサー（またはメタ言語）とは、CSSとは異なる独自の構文で記述された文字列を入力とし、ブラウザが解釈可能なCSSコードを出力するもの。SassやLess、Stylus等がその実装に当たる。 次にCSSポストプロセッサーとは、CSSを入力とし、より効果的なCSSに変換し、最適化するもの。例えば、コードを圧縮したり、自動でベンダープリフィックスを付与したり、プロパティ宣言の順番を読みやすいように並び変えたりするもので、CSSWringやAutoprefixer、CSSCombがその実装。いわゆるオプ
Flow/PostCSS の大規模プロジェクトを TypeScript/emotion に移行して数万行のプルリクを投げた話 - JX通信社エンジニアブログ
JX通信社CDOの小笠原(@yamitzky)です。 AI 緊急情報サービスの「FASTALERT」は、報道機関や公共機関に導入いただいている(お堅めな) BtoB SaaS でありながら、 事業開始当初から React を使った Single Page Application(SPA) として作っています。 2017年には、より信頼性のあるフロントエンドを提供するため、 Facebook の Flow を導入しました。しかし、昨今の TypeScript の盛り上がりや、社内の他プロダクトで TypeScript を使っていることなどを受けて、フロントエンドのアーキテクチャを大幅に見直しました。 今回取り組んだ大きな変更は、 Flow から TypeScript への移行 (型チェックの移行) TypeScript 化に合わせた、 babel-plugin-proposal-*** の廃
『PostCSSを使ったモダンCSS開発環境』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2015年度新卒入社の森下(@morishitter)です。 今は755のフルリニューアルに向けて、Webフロントエンドの開発を担当しています。 その傍らでOSS活動も行っており、本エントリーで紹介するPostCSSは、GitHub上で僕がメンバーの1人でもあるプロジェクトです。 PostCSSとは PostCSSはNode.js製のCSSのパーサーで、そのAST(パース結果のJSオブジェクト)を操作するための便利なAPIを提供しています。PostCSS自体が提供する機能はたったこれだけで、非常に小さいライブラリです。 ASTを操作し、
GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
PostCSS って最近ちらほら目にするようになったけどいったいなに？と思っている方いませんか？僕はその一人です。なんとなくこんなもんかな？といった感じで曖昧にしか理解していなかったので「とりあえずこれだけ知っておけばいい」という情報を簡単にまとめてみました。 はじめに PostCSSをノートPCに例えると… SassをVAIOのようなメーカーが作ってパッケージしたノートPCに例えると、PostCSSはマザーボードからプロセッサーからケースまで、すべて自分で選んで組み立てる自作PCです。 かなり良さそう 結論から言ってしまうと、かなり良さそうなので早速使い始めて損はないと思います。大きな導入リスクやデメリットは思いあたらないし、すでにビルドツールを使っていれば導入コストも少なくすみます。少なくとも試してみる価値は十二分にありそうです。もちろん、開発体制や環境、プロジェクトの性質によるんでし
Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
postcss.parts
A searchable catalog of PostCSS plugins.
Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. :fullscreen { }CSS input:-webkit-full-screen { } :-ms-fullscreen { } :fullscreen { }CSS output PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need
CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ
at html5j, 61th.
2016/9/8 ※cssnextに含まれる機能についての記事を書きました。 cssnextから学ぶ次世代CSS PostCSSを知っていますか？ 筆者はどこかで聞いたことあるぐらいで 次のCSS？ またSassみたいなやつ作ったのか もうSassで終わりにしようぜ（覚えるの辛い） といった負のイメージから勉強してみたのですが、だいぶ想像と違いました。 Sassの代替というよりかはCSSのエコシステムを構築するための共通基盤、といったところでしょうか。 本記事はタイトルにもあるようにPostCSSを使ってCSSをモダン化する流れで書きました。 「Sassすら使っていない」「このCSS界隈のライブラリよくわからない」という方こそ是非読んでみてください。 PostCSSとは 2015年4月頃以前はこんな感じ SassやLESSを筆頭にプリプロセッサとPostCSSを内部的につかっていたcssn
JSer.info #506 - Moment.jsのウェブサイトにProject Statusが追加されています。 Moment.js | Docs Moment.jsに新しい機能の追加などはしないメンテンスモードであることが書かれています。 互換性保ちつつ新しい機能や仕組みを入れるのは難しい状態であるため、別のライブラリの利用を推奨しています。 代替となるライブラリとしてLuxon、Day.js、js-joda、date-fnsについて紹介されています。 また、Intl APIや現在策定中のTemporalについても書かれています。 このプロジェクトステータスの明示の発端は、Chrome Dev ToolsのLighthouseにmoment.js利用の警告を表示したことに起因しています。 If JavaScript libraries are proving costly, repl
突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては
GitHub - postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Deliver your website's styles, faster. Plug in cssnano into your build step for modern CSS compression. Get Started What it does cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment. Input /* normalize selectors */ h1::before, h1:before { /* reduce shorthand even further */ margi
はじめに この記事は 個人的なアドベントカレンダー2021 の1日目です。 次回： postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをまとめたものです。 postcss-preset-env では、 custom property (var(--some-value)) や nesting rules (ネストしたセレクタ) といった Sass などのプリプロセッサでお馴染みの機能から、ニッチだが便利な機能まで、さまざまな策定中の機能を取り入れることができます。 また、いずれも策定中の機能であるため、将来、CSSの機能として組み込まれる可能性がある機能も含まれており、より標準に近い形で新機能を使えます。 （策定中のため、書き方が変わったり、機能
どんどん進化しているCSS。コーディングが捗る新しいプロパティや値を使いたいけど、ブラウザー対応が…。でも、CSS変換ツール「PostCSS」の便利なプラグインを利用したら、CSSの最新仕様を心置きなく使えちゃうそうですよ。 前にSitePointで書いた記事『The PostCSS Guide to Improving Selectors and Media Queries』の説明から引き続き、CSSの利用範囲を広げるPostCSSプラグインを紹介します。以前の記事ではセレクターとメディアクエリを拡張することでスタイルシートの構造改善に主眼を置きました。今回は、最新仕様のプロパティや値の実装を中心に紹介します。記事で紹介するプラグインにはそれぞれ異なった機能が備わっており、ニーズに応じて単体でも、組み合わせても効果的に利用できます。 私が個人的に気に入っているものから紹介します。 リセッ
at Back to Basics, CSS event in Japan
噂のPostCSSを検証してみた｜dwango creators' blog（ドワンゴクリエイターズブログ）
皆さん、どーもこんにちは、イズムです。 普段仕事でCSSを触る時はSassを使って快適なCSS記述ライフを送ってるわけですが、最近、なにやらたまーに耳にするPostCSSとやらが気になっています。 名前からすると「Post（次の、後の）CSS」ということかな？と、雑な推測をしたところで、どんなものなのか全然想像つかないですね！ そんなわけで、今日は私が気になっているPostCSSについてサクッと調べつつ、実際に使ってみたいと思います！ PostCSSってなに？ PostCSS どうやらPostCSSとは、JavaScriptで記述されたCSSにまつわるプラグインを扱うことのできるAPIを持ったツールのようです。 有名なプリプロセッサーであるSassやLess、Stylusなどは否応なしにありとあらゆる機能をワンパッケージにして提供しているのに対し、PostCSSはプラグインとして個別にプリ
セカイエブログをご覧のみなさまこんにちは。 Webフロントエンド担当の富坂です。 今日はセカイエアドベントカレンダー1日目 ということで PostCSSについて少し書いていきます。 最近ではもう当たり前のようにSassやLess、StylusなどのaltCSSを使った開発がデファクトスタンダードになってます。 最近ではちらほら聞こえ始めた「PostCss」という言葉。 そのPostCssを取り入れて開発している所も徐々に増え始めているのではないでしょうか。 PostCSSとは 公式レポジトリのREADMEには PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline
From Sass to PostCSS
Sass has been my go-to for years. But for a while now, I've wanted to try a new styling setup with PostCSS and the cssnext plugin. I love the idea of writing future CSS syntax today and using tooling more aligned with other tools I'm used to. This personal site is a perfect test bed to try this new setup. The first step I took was an inventory of my Sass usage. I needed to know what features I was
postcss-preset-envで少し未来のCSSを予習する - 弁護士ドットコム株式会社 Creators’ blog
こんにちは、弁護士ドットコムでデザイナーをしているhosogaiです。 ふだんは https://www.bengo4.com/ サービス内のUI改善などをしています。 先日このブログ「弁護士ドットコム株式会社 Creators’ blog」のデザインカスタマイズを行った際にCSSの新機能をいくつか試す機会があったので、今回ここで紹介させていただこうと思います。 きっかけ PostCSSとは postcss-preset-envの使い方 npm packageで使う場合 CodePenで使う場合 試せるCSSの機能 Stage0（意欲的） Stage1（実験） Stage2（許容） Stage3（包含） Stage4（標準化） 新機能のNesting CSS Moduleを使ってみる Nesting CSS Moduleのルール 直接入れ子にする場合 @nestを使う場合 プラグインでの挙
gulp-sassとgulp-postcssを組み合わせると、快適なCSSのコンパイル環境を実現できます。 Sassのコンパイルはgulp-sassで行い、ポストプリセッサーであるgulp-postcssにその後の処理を連携させるイメージです。 ※このエントリーは当初「gulp-sassとgulp-cssnextで快適コンパイル環境を構築」というタイトルで公開していましたが、gulp-cssnextが非推奨プラグインとなり、PostCSSを使ったやり方が主流になってきたため、gulp-postcssを用いた内容に全面的に修正しました。 基礎知識 gulp-sassについて gulpでSassのコンパイルを行うnpmパッケージです。 libsassを使っているため、gulp-ruby-sassやgulp-compassと比べて処理が高速で、 Rubyに依存しないため環境の構築・共有がしやすい
ReworkとPostCSS
AutoprefixerやMyth経由で話題になったRework。そしてAutoprefixerが乗り換えたPostCSS。両者はどのようなことに主眼を置いているライブラリなのか、SassやLESSとの関係はどうなのか、そしてどのようなツールを書く時にそれらを使うべきなのだろうか。 ReworkはCSSをプリプロセスするためのライブラリということになっている。サポートされているかどうかよくわからない最先端の標準仕様のドラフトに従って書かれたCSSをブラウザーがちゃんと解釈できるようにするとか、特殊な記法を展開するとか、だ。こういった現実世界ではうまく動かないCSSをプリプロセスしてちゃんと動くCSSに変換するツールを作るためのものということになる。 SassやLESSと同じ立ち位置のものを作るためのものなので、共存させることにはあまり意味が無い(まったく無いわけではない)。現状のSassや
最近のWeb制作の現場では、ふわっとした自然な動きのアニメーションやSMACSSのようなスタイルの概念、スタイルのコンポーネント化など、PSDをそのままCSS化すればいいという時代ではなくなってきていますね。 レスポンシブデザインなどに対応するため、すでにBootstrapやSASSのようなpre-processorを採用されているところも多いと思いますが、ここにきてPostCSSというヤツが注目されています。 今回は次世代CSS！になるかもしれない、PostCSSの使い方を紹介します。 PostCSSって何？ PostCSSはjavascriptを使ってCSSスタイルを変換する、CSS Processor。javascriptはプラグインとして既に数多く公開されており、変数やミックスイン、カスタムセレクターなど様々な機能があります。 また、関数を使う場合を除きCSSからかけ離れた特殊な記
GitHub - MoOx/postcss-cssnext: `postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Sass、Less、Stylusなどのプリプロセッサーよりも柔軟に、必要な機能を選んで使えるCSS変換ツール「PostCSS」。海外のフロントエンド開発界隈で普及しつつある人気ツールの導入方法とおすすめプラグインをチェック。 SitePointではPostCSSの記事を『An Introduction to PostCSS』『How to Use PostCSS with Gulp』『PostCSS Mythbusting: Four PostCSS Myths Busted』などで何度も特集してきましたが、いまだに多くの人が混乱してしまっているようです。PostCSSを一言で表すと、 PostCSSはうんざりするような仕事をあなたの代わりに処理してくれるものです PostCSSはSass、Less、StylusのようにソースコードをCSSにコンパイルする、簡潔なプログラミング言語を提供す
URLYou can post either your article on Qiita or your blog post. About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
GitHub - tj/frontend-boilerplate: webpack-react-redux-babel-autoprefixer-hmr-postcss-css-modules-rucksack-boilerplate (unmaintained, I don't use it anymore)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
PostCSSの仕組み - Qiita
// parse.js const fs = require('fs') const util = require('util') const postcss = require('postcss') const css = fs.readFileSync('./input.css') const ast = postcss.parse(css) console.log(util.inspect(ast, false, null)) $ node parse.js Root { raws: { semicolon: false, after: '\n' }, type: 'root', nodes: [ Rule { raws: { before: '', between: ' ', semicolon: true, after: '\n' }, type: 'rule', nodes:
GitHub - hail2u/node-csswring: A CSS minifier for PostCSS
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PostCSSとcssnextで最新CSS仕様を先取り！
PostCSSとは何か - morishitter blog
cssnextでみる次世代CSSとPostCSS | Yucchiy's Note
altCSSを捨ててPostCSSで活きよう！ - 弥生開発者ブログ
PostCSSってなに？導入前に知っておきたいことを箇条書きでまとめてみた
PostCSS - a tool for transforming CSS with JavaScript
Sassを捨ててPostCSSに移行したのでそのときの工程メモ - Qiita
PostCSS and cssnext
Step by Stepで始めるPostCSS - Qiita
2020-09-21のJS: Moment.jsのステータス、PostCSS 8.0.0、Vue 3.0.0、DOMの順序と表示順序の一致
SassとPostCSSを組み合わせて作るCSS開発環境 ｜ Tips Note by TAM
cssnano: A modular minifier based on the PostCSS ecosystem.
PostCSS で先取りする、未来の CSS 7選
CSSの最新仕様はこんなにすごい！ PostCSSプラグインで未来を先取り
PostCSS 5.0: for Custom CSS Preprocessing
PostCSSさわってみた - sekaie engineers' blog
gulp-sassとgulp-postcssで快適コンパイル環境を構築 - Qiita
次世代CSS登場！PostCSSの簡単な使い方 - TetraThemesブログ
PostCSSならCSSプリプロセッサーをもう乗り換え続けなくて済むかもよ！
一人PostCSSのカレンダー | Advent Calendar 2016 - Qiita
PostCSSを導入してみた & PostCSSの便利プラグインと誰得プラグイン – Snaplog
