PostCSS で先取りする、未来の CSS 7選
はじめに この記事は 個人的なアドベントカレンダー2021 の1日目です。 次回： postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをまとめたものです。 postcss-preset-env では、 custom property (var(--some-value)) や nesting rules (ネストしたセレクタ) といった Sass などのプリプロセッサでお馴染みの機能から、ニッチだが便利な機能まで、さまざまな策定中の機能を取り入れることができます。 また、いずれも策定中の機能であるため、将来、CSSの機能として組み込まれる可能性がある機能も含まれており、より標準に近い形で新機能を使えます。 （策定中のため、書き方が変わったり、機能
Clean CSSだけ
CSSの書き方が昔風になりつつある。SassにもPostCSSにも依存しない書き方だ。その上で、あってもなくても良い処理を、また別の安定した独立ツールに任せるようにした。その独立ツールとしてはClean CSSが優秀なので、これに任せてあとは気にしない。 もちろんこのウェブサイトのCSSのような小さな規模での話で、規模が大きいならどちらかは使う。小さな規模では、多くの環境でそのまま動くように書く。大きな規模では、その状態になるようにSassやPostCSSを使って書く。 SassやPostCSSだけでどうにかしようとすると、ともすればコードが奇抜なCSSのような何かになりがちだ。日常的にそうした環境に浸かっていると、普通のCSSが書けなくなるどころか、読めなくなる。CSSのデバッグ環境が開発者ツールにまだ依存している現在、読めなくなるのはかなりまずい。 小さな規模では、普通のCSSとして書
PostCSSでCSSの中の画像URLのcache busteringを行う方法 - Qiita
でもこのままだと、例えば画像の配信で何かしらのキャッシュが設定されていた場合（Cache-ControlのHTTPヘッダーなど）に、画像を変更してもキャッシュが使用されてすぐに変更をクライアント側に反映できない。 そこでcache busteringを行う。URLの末尾に何かしらのクエリーストリングなどを付けて別のURLにすることで、ブラウザーのキャッシュを回避する方法だ。 上のように変更すれば、新しい画像がブラウザーに読み込まれるようになる。 でも画像の変更があるたびにいちいちCSSをいじるのは面倒なので、自動化したい。そこでPostCSSのプラグインであるPostCSS Cachebusterを使ってみる。 導入は簡単に yarn add -D postcss-cachebuster なり npm install --save-dev postcss-cachebuster なりで。
PostCSSプラグイン: to-longhand
Edge 17にあるカスタム・プロパティーとショートハンド・プロパティーでのバグが、パッチ・レベルでは直りそうもない。つまり、そう簡単には世界から消えてくれないことが確定してしまったため、しばらく(最低1年半くらい)の間ロングハンド・プロパティーで書かなくてはならない。しかし、そう書き直されたCSSを見ていると、とにかく悲しいので、to-longhandというPostCSSプラグインを書いて誤魔化すことにした。 marginやpaddingプロパティーの変換は簡単だ。まず4値の指定に変換し、それから上右下左に割り当てるだけだ。 borderプロパティー群のショートハンドの変換は難しい。歴史的に幅、スタイル、色の順で書かれることが多いようだし、僕もそう書いているので、それで決め打ちということにした。 ヒマがあったら順不同に対応できるように書き直したい、と考えていたが、どうやら無理そうだ。どの
SassとPostCSSを組み合わせて作るCSS開発環境 ｜ Tips Note by TAM
突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではない はい、これです。 この記事で言いたいことは、これがほぼ全てです。 僕は、PostCSSを、コンパイルしてCSSを生成するSassのようなものだと思っていました！ ですが、そもそもSassを使っていたので全くと言っていいほど必要性を感じてませんでした。 PostCSSは自分で必要な機能だけを選べるからカスタマイズ性がある！楽しい！軽い！ とか言われても、Sass遅くないし、むしろ必要な機能を選んで構成するのがめんどくさいと思ってました。というか今も思ってます。 ポストプロセッサーとしてのPostCSS PostCSSというくらいなので、ポストプロセッサーとして、生成されたCSSに対して後処理をすることに使えます。 (導入するプラグインによっては
QiitaのCSS構成2017 - Qiita
この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass) を使っています。 プリプロセッサーとして PostCSS を使わなくなった最大の理由は @apply ルールが仕様から落ちた ことです。@apply は Sass でいう引数なしの mixin みたいなもので、Chrome の Canary では実装されていた時期がありましたが、消えてしまいました。 おそらく CSS Nesting Module や CSS Extend Rule も落ちると思
PostCSSのプラグイン探しに使えるサイト - NxWorld
PostCSSのプラグインを探せるサイトのまとめです。 普段からPostCSSを多用しているならある程度使うプラグインは決まっていたりしますし、そんなに頻繁に探すわけでもないですが、ざっくりとした動きは同じでも細かい部分で違いがあったり、中には「これどんな場面で使うの？」って感じの面白いプラグインもあったりするので、いろいろ試したいときや新しいプラグインを見つけたいときに。 PostCSS Plugins リポジトリ内のplugins.mdにざっくりとしたカテゴリー別に分かれた形でプラグインが一覧化されています。 各プラグインリポジトリへのリンクも付いており、どのような機能を追加できるかのシンプルな説明文もあります。
最近使って便利だったgulpのプラグイン - 第1回 | toMemo - メモ的に色々書いていく個人ブログ
SassをCSSにコンパイル、画像の圧縮、svgスプライトの作成等など便利すぎて今の制作には欠かせなくなった「gulp」。 そんなgulpを制作を行う中で便利だと思ったプラグインを3つ紹介します。 merge-stream このプラグインは1つのタスクで複数のソースを処理するときに使用します。 Sassを使用する環境であればSassのファイルを分割しそれぞれの役割で管理しコンパイルで一つのCSSにまとめるという方法を使われている方をも多いと思います。 しかしSassを使用していない時代であればそれぞれのCSSで管理し、共通部分と各ページのCSSのディレクトリが違うということもあると思います。 追記 - ディレクトリ例がなかったので追記しました 下記ディレクトリであれば一つの箇所にありまとめているから通常のコンパイルでも問題無い src ┗sass ┠_reset.css ┠_layout.
Get Started on the CSS of the Future with PostCSS-cssnext — SitePoint
To learn all about CSS properties and how to apply them correctly, check out our AtoZ: CSS course, a complete guide to CSS, letter by letter by expert front-end dev and General Assembly London teacher Guy Routledge. A discussion of PostCSS-cssnext appeared earlier this year in “7 PostCSS Plugins to Ease You into PostCSS”, published by SitePoint. PostCSS-cssnext is a plug-in pack for writing next g
10 Awesome PostCSS Plugins to Make You a CSS Wizard
PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it’s built. The core part of PostCSS is a Node.js module that you can install with npm, and it has an ecosystem of more than 200 plugins you can choose to use in your project. PostCSS is neither a preprocessor nor a postprocessor, as different PostCSS plug
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pleeease Casino ▷ Guides de casinos et des jeux d'argent 🏅