Diffs, from PierreA diff rendering library@pierre/diffs is an open source diff and code rendering library. It's built on Shiki for syntax highlighting and theming, is super customizable, and comes packed with features. Made with love by The Pierre Computer Company.
WebKit Features for Safari 26.4
March has a way of bringing a lot of new things to WebKit — and this year is no exception. With 44 features, 191 fixes and one deprecation, Safari 26.4 is a release packed with web technology. What’s most exciting? CSS Grid Lanes brings masonry-style layouts to the web platform — a long-awaited solution for building rich visual galleries and much more. WebTransport provides a modern alternative to
GitHub - pbakaus/impeccable: The design language that makes your AI harness better at design.
Anthropic created frontend-design, a skill that guides Claude toward better UI design. Impeccable builds on that foundation with deeper expertise and more control. Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes: Inter font, purple gradients, cards nested in cards, gray text on colored backgrounds. Impeccable fights that bias with: An expa
The CSS Selection - 2026 Edition - Project Wallace
Introduction Welcome to The CSS Selection 2026! In this article we’re having a look at how CSS is used at scale on over 100,000 websites. We’ll look at what things are common on most websites and discover interesting outliers. This is the first edition of what I hope to be many, so this is meant as a baseline for future editions, setting up the first numbers to compare with in coming years. This a
Chrome 146 beta | Blog | Chrome for Developers
Published: February 11, 2026 Unless otherwise noted, these changes apply to the latest Chrome Beta channel release for Android, ChromeOS, Linux, macOS, and Windows. For more information about these features, see the provided links or the list on ChromeStatus.com. Download the latest version from Google.com for desktop or from Google Play Store on Android. CSS and UI Scroll-triggered animations Thi
Release 17.0.0 · stylelint/stylelint
It contains 14 breaking changes, which we've detailed in the migrating to 17.0.0 guide. Additionally, it adds 3 options to the rules and fixes 9 bugs. We've also released compatible versions of our shared config, Visual Studio Code extension, Node.js Rule Tester and Jest preset. Removed: CommonJS Node.js API (#8859) (@jeddy3). Removed: output property in the Node.js API returned resolved object (#
Introducing CSS Grid Lanes
It’s here, the future of masonry layouts on the web! After the groundwork laid by Mozilla, years of effort by Apple’s WebKit team, and many rounds debate at the CSS Working Group with all the browsers, it’s now clear how it works. Introducing CSS Grid Lanes. .container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } Try it today in Safari Technolog
How to load CSS (fast)
Yoav Weiss (@yoav, @yoavweiss) has been working on mobile web performance for longer than he cares to admit, on the server side as well as in browsers. He now works at Shopify, bringing the web platform to where online commerce needs it to be. He also co-chairs the Web Performance Working Group and the Web Incubator Community Group at the W3C, to make sure the web is as fast as it can be, and full
CSS Wrapped 2025
To open a <dialog> modally by clicking a <button> you typically need an onclick handler that calls the showModal method on that <dialog>. <button onclick="document.querySelector('#my-dialog').showModal();">Show Dialog</button> <dialog id="my-dialog">…</dialog> With invoker commands–available from Chrome 135–buttons can now perform actions on other elements declaratively, without the need for any J
Design Tokenが変化することを前提にした型安全なCSS — newmoでPanda CSSを採用した理由 - newmo 技術ブログ
© 2023-Present Segun Adebayo newmoでは、1行目のCSSを書く前に1つ目のDesign Tokenを定義しました。Design Tokenを起点にした開発を実現するため、CSSスタイリングフレームワークにはPanda CSSを採用しています。 しかし、創業期のスタートアップでは、デザインシステムは完成品ではなく日々変化していくものです。Design Tokenの命名が変わる、階層構造が見直される、色の値が調整される——こうした変更が頻繁に発生します。数百箇所に散らばったtokenを手動で置換すると、必ず修正漏れが発生します。そもそもDesign Tokenの使用を強制できなければ、変更に追従する以前の問題です。 newmoでは、TypeScriptの型システムを活用して、Design Tokenの変更を安全に行える仕組みを構築しました。この記事では、なぜPa
Panda CSS でデザインシステムのメンタルモデルを確立する - 一休.com Developers Blog
この記事は一休.com Advent Calendar 2025の2日目の記事です。 レストランプロダクト UI 開発チームの鍛治です。一休.com レストランのフロントエンドを担当しています。 2025 年 4 月、PayPay グルメ の全面リニューアルが完了しました。このリニューアルでは「一休.com レストラン」と「PayPay グルメ」の 2 つのサービスを 1 つのコードベースに統合しています。 一休レストラン・PayPay グルメではリニューアルプロジェクトを契機に Tailwind CSS から Panda CSS への置き換えを進めています。 また置き換えやってるのか 1 と思われるかもしれませんが、もちろん理由あっての導入です。本稿では、なぜ導入したのか、それにより何が得られたのかをご紹介したいと思います。 PayPayグルメについて 本記事で登場する「PayPayグル
Type-safe Composable CSS
From simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API. import { styleframe } from 'styleframe'; import { useColorDesignTokens } from '@styleframe/theme'; const s = styleframe(); const { variable, ref, selector } = s; const spacing = variable('spacing', '1rem'); const { colorPrimary } = useColorDesignTokens(s, { primary: '#318fa0', }); selector('.bu
Perfectly Pointed Tooltips: A Foundation – Frontend Masters Blog
At the time of writing, only Chrome and Edge have full support of the features we will be using. Let’s start with a demo: Click-and-drag the anchor and see how the tooltip behaves. It will try to position itself in a way to remain visible and avoid any overflow. Cool, right? No JavaScript is used to position the tooltip (except the one for dragging the anchor, which is irrelevant to the trick). Th
What You Need to Know about Modern CSS (2025 Edition) – Frontend Masters Blog
We published an edition of What You Need To Know about Modern CSS last year (2024), and for a while I really wasn’t sure if only a year later we’d have enough stuff to warrant and new yearly version. But time, and CSS, have rolled forward, and guess what? There is more this year than there was last. At least in this somewhat arbitrary list of “things Chris thinks are valuable to know that are eith
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Release styled-components@6.3.7 · styled-components/styled-components
Web フォントを使って contenteditable から脱出する
React’s ViewTransition Element – Frontend Masters Blog
Release v8.0.0 · FullHuman/purgecss
Release @pandacss/dev@1.8.0 · chakra-ui/panda
feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com
