happy-css-modulesに機能追加して実際にプロダクトに適用した話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（@apple_yagi）です。 PR TIMESではフロントエンドのスタイリングライブラリにEmotionを使用していましたが、4ヶ月ほど前からCSS Modulesへの移行作業を開始しました（移行の経緯などについては別エントリーで紹介する予定なので、本エントリーでは割愛させていただきます）。その際にhappy-css-modulesを使用してCSS Modulesの型定義を生成する選択を取りました。 しかし、happy-css-modulesには一つ改善したい点がありました。本エントリーではその点を解消するためにhappy-css-modulesに機能追加をし、実際にプロダクトで使った話を紹介します。 happy-css-modulesについては以下の記事にわかりやすくまとまっています。
OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog
The new CSS Color 4 specification has added the new oklch() notation for declaring colors. In this article, we explain why this is important for design systems and color palettes. The extremely short version oklch() is a new way to define CSS colors. In oklch(L C H) or oklch(L C H / a) each item corresponds as follows: L is perceived lightness (0%-100%). “Perceived” means that it has consistent li
Restyle - Zero Config CSS for React
The simplest way to add CSS to React. No build configuration required. Inputimport { styled } from "restyle"; const Button = styled("button", { padding: "0.5rem 1rem", borderRadius: "4px", backgroundColor: "blue", color: "white", }); export default function Page() { return ( <Button css={{ paddingInline: "0.8rem", backgroundColor: "pink", }} onClick={() => alert()} > Click me! </Button> ); } Outpu
Request for developer feedback: customizable select | Blog | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
CSS finally adds vertical centering in 2024 | Blog | build-your-own.org
align-content works in the default layout in 2024, allowing vertical centering with 1 CSS property. <div style="align-content: center; height: 100px;"> <code>align-content</code> just works! </div> Supported since: Chrome: 123 | Firefox: 125 | Safari: 17.4 What’s new? The status quo for CSS alignment is to switch to flexbox or grid because align-content doesn’t work in the default layout (flow). I
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
ZOZOTOWNのフロントエンド開発にCSS in JSを導入して2年後の状況 - ZOZO TECH BLOG
はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています。以前の記事ではCSS in JSの技術選定をした際の背景や課題について紹介しました。 techblog.zozo.com その後、「ZOZO Tech Meetup - Web フロントエンド」でおよそ1年後の状況を簡単に共有させて頂きました。 speakerdeck.com 今回はZOZO Tech Meetupでお話した内容に加えて、CSS in JS導入から2年後の現状を改めて紹介したいと思います。 CSS in JS導入後の運用状況 ZOZOTOWNの開発体制は、Webフロントエンドだけでも5つのチームが存在し、さらに外部の業務委託メンバーも加えると、開発に携わるメンバーは執筆時点でのべ50名を超
センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
Sass: Node Sass is end-of-life
The time has finally come to retire Node Sass. This Node.js wrapper for LibSass was the first official Sass compiler available in the JavaScript ecosystem and was a huge part of Sass growing beyond the scope of the Ruby community where it originated, but it hasn't received a new release in a year and a half and the most recent set of maintainers no longer have the bandwidth to continue updating it
日本語におけるtext-wrapプロパティの運用
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。
iOS has a :hover problem - Human Who Codes
Posted at July 5, 2012 by Nicholas C. Zakas Tags: CSS, Hover, iOS, Mobile Recently, I got my first iPad. I’ve had an iPhone since last year, and had gotten used to viewing the mobile specific view of most websites. When I got the iPad, it was my first time experiencing desktop webpages using a touch interface. Generally, the transition was easy. I just tapped on links I wanted to navigate to. Alth
Interop 2024 mid-year update | Blog | web.dev
Interop 2024 mid-year update Stay organized with collections Save and categorize content based on your preferences. As we head into the second half of the year, it's a great time to look at how Interop 2024 has improved web interoperability this year. Where we started At the beginning of the year, Chrome had an experimental browser support score of 83. Today that score is 90, with a score for stab
Inline conditionals in CSS? • Lea Verou
Last week, the CSS WG resolved to add an inline if() to CSS. But what does that mean, and why is it exciting? Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the var
SVG アイコンの表示に mask-image CSS プロパティを使用する
SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。 HTML でロゴやアイコンを表示する時、SVG はよく使われるフォーマットです。SVG はベクター形式で記述されるため、拡大・縮小しても画質が劣化しないという特徴があります。SVG を HTML で表示する場合、以下のような方法が使われていました。 <img> 要素の src 属性に SVG ファイルのパスを指定する <svg> 要素を直接記述する svg スプライトを使用する それぞれの方法にはメリット・デメリットが存在
高性能な CSS アニメーションを作成する方法 | Articles | web.dev
このガイドでは、高パフォーマンスの CSS アニメーションを作成する方法について説明します。 詳しくは、一部のアニメーションが遅い理由をご覧ください。 おすすめします。 ブラウザの互換性 このガイドでおすすめする CSS プロパティはすべて、クロスブラウザ対応に優れています サポート。 transform 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 36 <ph type="x-smartling-placeholder"></ph> 12 個 <ph type="x-smartling-placeholder"></ph> 16 <ph type="x-smartling-placeholder"></ph> 9 ソース
大規模で複雑なレイアウトとレイアウトのスラッシングを回避する | Articles | web.dev
大規模で複雑なレイアウトとレイアウトのスラッシングを回避する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 レイアウトは、要素の幾何学的情報（要素のサイズとページ上の位置）をブラウザによって管理する場所です。各要素には、使用された CSS、要素の内容、親要素に基づいて、明示的または暗黙的なサイズ設定情報が含まれます。このプロセスは、Chrome ではレイアウトと呼ばれます。 レイアウトは、要素の幾何学的情報（要素のサイズ、ページ上での位置）をブラウザで管理する場所です。個々の要素は、使用された CSS、要素の内容、親要素に基づいて、明示的または暗黙的なサイジング情報を持ちます。このプロセスは、Chrome（および Edge などの派生ブラウザ）と Safari では Layout と呼ばれます。Firefox ではリフローと呼ばれますが、実質上は同じプロ
「CSS Library / Framework」をテーマに「BARフロントえんどう #2」を開催しました！ - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。 フロントエンドエキスパートチームの Saji です 2024 年 4 月 19 日(金)にサイボウズのフロントエンドエンジニア主催で第 2 回 BARフロントえんどうを開催しました。 本記事では、当日の様子やセッションについて紹介します。 BARフロントえんどうとは BARフロントえんどうは Web フロントエンドのトピックからテーマを選び、登壇者や参加者の間で情報を共有することで知見を深めてもらおうというコンセプトの勉強会です。 第 2 回を迎える今回は「CSS Library / Framework」をテーマとして開催しました。 フロントエンドリアーキテクトをテーマとした第 1 回の開催報告も併せて こちら でご覧になれます。 セッション内容 今回はメインセッションとして poteboy さん、株式会社はてなの mizdra さん、ピクシブ株式会社の f_subal さん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.figma.com/community/file/1424823581198686752
CSS でランダムな値を扱う `random()` と `random-item()` 関数
Layout Thrashing and Forced Reflows