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
CSS大解剖 1日目: 「仕様書」
本稿は、2024年2月頃に書き溜めていたシリーズです。最後まで温存させるのが勿体ないので、未完成ですがそのまま公開します(公開日: 2025/9/21)。そのため、内容の重複や記述方針の不一致があるかもしれませんが、ご理解ください。 CSSの仕様を理解するために、1日ごとにテーマを決めて説明する企画1日目です。今日のテーマは「仕様書」です。 仕様書 CSSはWebの標準化団体であるW3Cによって標準化され、各ブラウザベンダによって実装されている規格です。 標準化して挙動を仕様書として書き起こすことによって、Webブラウザ間の相互運用性が高まり、Web開発者も互換性の高い記述を心掛けてCSSを書くことができるようになります。 とはいえ、仕様書と実装の関係は必ずしも一方向的ではありません。「仕様書に記載される → 実装される」というシンプルな順番であるとは限らないのです。実装されたものにあわせ
Apple has a private CSS property to add Liquid Glass effects to web content
I have an incredibly boring summer hobby: looking at the changelog for the WebKit Github repo. Why? Because I spend a chunk of my professional life working with webviews inside mobile apps and I like to get an early peek into what's coming in the next version of iOS. Since Tim Cook has yet to stand up at WWDC and announce "one more thing... Service Worker support in WKWebView, provided you add the
styled-components maintenance mode: A 40% faster fork | Sanity
styled-components is dead, but millions of components still need it. Our performance-focused forks gave Linear 40% faster renders while they plan their escape. Your React app might be 40% slower on first render than it needs to be. Not because you wrote bad code. Not because React is slow. But because styled-components never implemented React 18's useInsertionEffect hook: a feature specifically de
The Basics of Anchor Positioning
In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier. Please use Chrome on a desktop or laptop if you want to try the interactive demos. If not, I’ve attached a video for most of the demos. Intro When learning CSS, you most likely came across the position property and how to position an element outside of its normal flow. .parent { position: relati
State of CSS 2025
One could be forgiven for being slow to adopt all these new-fangled CSS features. After all, do we really need them? And even if we do, do they even work reliably across browsers? But as Baseline indicators turn to green one after the other, and satisfaction with new functions and properties remains high, even the most reluctant among us might have to admit that features such as :has(), aspect-rat
Infinite Pixels
I was on one of my rounds of social media trawling, just seeing what was floating through the aether, when I came across a toot by Andy P that said: Fun #css trick: width: calc(infinity * 1px); height: calc(infinity * 1px); …and I immediately thought, This is a perfect outer-limits probe! By which I mean, if I hand a browser values that are effectively infinite by way of theinfinity keyword, it wi
Item Flow – Part 2: next steps for Masonry
Back in March, we published Item Flow, Part 1: a new unified concept for layout, an article about a new idea for unifying flex-flow and grid-auto-flow into a single set of properties under a new item-flow shorthand. We shared some new ideas being developed in the CSS Working Group, discussed how they might fit into Flexbox and Grid, and hinted at the implications for future layouts. Here’s a refre
Release 0.15.0 | StyleX
StyleX v0.15.0 introduces significant improvements to media query handling, dynamic styles optimization, and improvements to the linter, types, and documentation. Media query orderingPreviously, media queries within a style property were applied in a predetermined sorting order. This often meant that the order you authored the queries did not match how they were applied, so we recommended manuall
Vanilla JavaScript support for Tailwind Plus
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> <el-dropdown class="relative inline-block text-left"> <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"> Options <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="tr
Release 0.14.0 | StyleX
StyleX v0.14.0 introduces new APIs to the compiler and linter, as well as a couple of breaking changes to improve performance. New featuresCompiler: viewTransitionClassThe viewTransitionClass API allows you to use StyleX to customize your CSS View Transitions. This API works nicely with React’s new <ViewTransition /> component: import {unstable_ViewTransition as ViewTransition} from 'react'; imp
CSS Environment Variables Module Level 1
CSS Environment Variables Module Level 1 Editor’s Draft, 29 April 2025 More details about this document This version: https://drafts.csswg.org/css-env-1/ Issue Tracking: CSSWG Issues Repository Inline In Spec Editors: Tab Atkins-Bittner (Google) Dean Jackson (Apple) Suggest an Edit for this Spec: GitHub Editor Abstract This specification defines the concept of environment variables and the env() f
State of CSS 2025
There is only one item on my CSS wishlist for 2025: a slower pace! After years of rapid innovation, now feels like the right time for browser vendors to take a beat to consolidate, fix browser inconsistencies, and let the rest of us catch up. After all, we might've heard about subgrid, :has(), scroll-driven animations, and all the other recent CSS improvements – but how many of us can say that we'
Exploring the OKLCH ecosystem and its tools—Martian Chronicles, Evil Martians’ team blog
Authors: Irina Nazarova, CEO, Arthur Objartel, Product Designer, and Travis Turner, Tech EditorTopics: Developer Products, Design, DX, Design for devtools, OKLCH, CSSExplore a powerful set of tools built around the OKLCH color model—Harmonizer for accessible palettes, Polychrom for Figma contrast checking, apcach for color contrast calculations, and more. Perfect for frontend developers and design
CSS Spotlight Effect – Frontend Masters Blog
I recently made an experiment about Proximity Reactions. The idea was to create an interactive effect according to the mouse position relative to elements. Then I made a less JavaScript, more CSS version where the only thing JavaScript does is to pass the mouse position into a couple of CSS custom properties. That’s it. All the heavy lifting happened inside the CSS itself, safely away from the Jav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語縦書きWebの現在地 2025 - フロントエンドカンファレンス東京
Group Note: CSS Snapshot 2025
🐼 Panda v1 🎊 · chakra-ui/panda · Discussion #3321
Untitled UI React — React UI Component Library
CSS conditionals with the new if() function | Blog | Chrome for Developers
