Captured Custom Properties
Current music:toe — 風と記憶Current drink:Yunnan teaTable of Contents Introduction In a few of my latest experiments and articles (“Fit-to-Width Text: A New Technique” and “Querying the Color Scheme”), I used one naming pattern for registered custom properties that I think worth highlighting in a separate blog post. Registered custom properties are invaluable, as they unlock many things previously not
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
OKLCH Color Picker & Converter
OKLCH is a new way to encode colors (like hex, RGBA, or HSL)
CSS Text Level 4 を読む（抄訳）
css-text-4-memo-ja.md CSS Text Level 4 を読む（抄訳） CSS Text Module Level 4 W3C Working Draft, 19 February 2024 This version: https://www.w3.org/TR/2024/WD-css-text-4-20240219/ Latest published version: https://www.w3.org/TR/css-text-4/ Editor's Draft: https://drafts.csswg.org/css-text-4/ この文書はCSS Text Level 4を読むための参考として部分的に訳した抄訳です。 この仕様書全体の日本語訳は https://triple-underscore.github.io/css-text-ja.html に公開
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能（Chrome 119 以降） 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache – CSS Wizardry
I began writing this article in early July 2023 but began to feel a little underwhelmed by it and so left it unfinished. However, after recent and renewed discussions around the relevance and usefulness of build steps, I decided to dust it off and get it finished. Let’s go! When serving and storing files on the web, there are a number of different things we need to take into consideration in order
Responsive type scales with composable CSS utilities
If you’ve ever attempted to create responsive type that seamlessly adapts and scales between pre-determined sizes within a type scale based on viewport or container widths, you may have wrestled with JavaScript or wrangled with CSS calculators. But with the help of calc(), clamp(), and a somewhat wonky use of CSS vars, we can simplify this process and tap into the dynamism that modern CSS affords.
Tailwind CSSで引数のあるMixinのような仕組みを作る方法
後日追記: このブログの内容を再考して「Tailwind CSSで引数のあるMixinのような仕組みを作る方法（改）」として書き直した。 Sassでは、引数の値に応じて宣言をクラスに注入できるMixinの機能がある。たとえば次のようにすれば、フォントサイズがビューポートの幅に応じて流動的に変化するように実装できる。 @function rem($px) { @return ($px / 16 * 1rem); } // https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/ @function fluid-size($min-size, $max-size, $min-width: 640, $max-width: 1280) { $v: (100 * ($max-size - $min-siz
CSSにおける汎用化の先送り、ユーティリティファーストCSS、レイアウトプリミティブ - yuhei blog
CSSは普通、セレクタの記述から始まる。目の前にあるHTML片に対してどのようなスタイリングを施すかという前に、いかにしてそのHTML片を選択するかという意識が先に来る。あらかじめ完成したHTML文書へ向けてスタイルを適用していくのであればそれでうまくやれるのかもしれない。だが広く行われているウェブデザインの制作では、まずゴールとして定められた描画結果だけがあり、そこから逆算してHTMLとCSSを書き進めていく。つまり個別の結果だけがある状態で実装に取り掛かることになる。実装のために必要な構造化はたいてい後手に回る。 それでもCSSがセレクタから始まることは変わらない。実装を進めるためにはまずセレクタを書かなければならない。セレクタは規則の根幹である。バグを減らし、開発を効率的にするためには、あらゆるスタイリングの意図をセレクタに反映させるのが基本だ。しかし最初から正確にその意図を把握でき
PIXIV Design System 2021 の発表をしました（前編） #pixivdevmeetup - pixiv inside
2021/10/25追記 おまたせしました。この記事の後編も公開しておりますので、合わせてお読みください。 inside.pixiv.blog こんにちは。プロダクトデザイナーの yksk とフロントエンドエンジニアの f_subal です。 ピクシブにはデザインシステムを開発するチームがあります。ピクシブが運営する数多くのプロダクトが共通のガイドライン、コードを使ってUIを設計できる体制への移行を目的としており、そのための仕組みづくりに取り組んでいます。 今回は、先日行われた pixiv DEV MEETUP 2021 のセッション「PIXIV Design System 2021」で発表した、技術的な取り組みについて前後編に分けて発表します。 前編にあたるこの記事では f_subal パートの内容をおさらいをしていきます。 PIXIV Design System 2021 昨年のpix
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
Tailwind CSSの二面性、デザインシステムを借りるということ | Marginalia
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
Type safe CSS design systems with @property · September 1, 2023
Type safe CSS design systems with @propertySeptember 1, 20237 min read CSS types are a worthy investment into type safety in your front-end work. We're still awaiting cross browser interop, but we'll get there 🙂 In case you've never seen one, here's a typed CSS variable with @property: @property --focal-size { syntax: '<length-percentage>'; initial-value: 100%; inherits: false; } Used that one so
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Modern CSS For Dynamic Component-Based Architecture Updated on: Jan 19, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will
CSS Clothoid Corners｜Takehiko Ono
クロソイド曲線を利用した視覚的にやわらかなコーナーをHTML要素に適用する、CSS clip-pathジェネレータを作った。 iOSのアプリアイコンの角にはCSSの border-radius のような一定比率ではない、特殊な曲率を用いた曲線が利用されており、視覚的に「自然でやわらか」な印象を与えます。 iOSで使われているのは「クロソイド」と呼ばれる曲線で、この曲線は高速道路のカーブでも利用されていることからも、視覚的だけでなく数学的・物理学的にも無理のない自然なものと言えます。 下図のRound Rectはコーナーに真円を使用し、Clothoid Rectにはクロソイド曲線を使用していますが、後者の方が機械的ではなく、どことなくやわらかな印象をお持ちになるのではないでしょうか。 このあたりのお話は以下の記事が大変くわしいので、ご興味ありましたらぜひ一読になってください。 • • • C
High definition CSS color guide | CSS and UI | Chrome for Developers
For over 25 years, sRGB (standard red green blue) has been the only color gamut for CSS gradients and colors, with color space offerings within it like rgb(), hsl() and hex. It is the most common color gamut capability amongst displays; a common denominator. We've grown accustomed to specifying colors within it. https://almanac.httparchive.org/en/2022/css#colors As displays become more capable of
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Modern Font Stacks
Designing better target sizes
Re-evaluating px vs em in Media Queries