October 15, 2025 The position-area property allows you to control the placement of an absolutely positioned element relative to its anchor box. It considers a 3x3 grid defined by the containing block of the absolutely positioned element and the edges of the anchor box. .anchor { anchor-name: --a; } .element { position: absolute; position-anchor: --a; } You can select an area that consists of one o
Whether I'm giving a talk or on a podcast, these two things constantly pop up: how do I find what to study to keep up? what's new in CSS? If you've wondered those things before, then this list is for you. Find something you've never heard of, click the link; and look at you, you're already getting more familiar with what's new! Selectors # :has() :is() and :where() :focus-visible :user-valid :user
乗りこなせ！ モダンフロントエンド モダンなスクロール関連機能を使いこなそう ［CSS Modern Features no.7］ スクロールに絡む機能の実装 こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。今回のテーマは「スクロール」に関するモダンな機能群です。 ブラウザ上でスクロールに絡む機能を実装しようとすると、考慮すべき点や制約は多くなります。 たとえば、スクロールに応じて何か処理をする場合、JavaScriptによるスクロールの監視が必要です。このスクロールの監視処理は、イベントがトリガーされる回数が非常に多くなりやすく、パフォーマンスへの考慮が必要となります。 他にも、スクロールに応じた計算処理も複雑になりがちです。スクロールコンテナ自体のサイズ・内包コンテンツのサイズ・現在のスクロール位置・関連する要素の座標やサイズ、といった多くの情報に基づいた計算が必
Drawing separator lines between various sections of a webpage is a common design technique, which can help to structure the content and make it more readable, as well as more aesthetically pleasing. As we’ll see in this article, there are techniques you can use today to draw separator lines with CSS, but they also come with limitations. In this article, we’re introducing CSS gap decorations, a new
New capabilities for attr() Published on January 21, 2025 The ability to use attr() references in CSS is getting more powerful. Shipping in Chrome 133 (stable rollout beginning next week!), this highly-requested feature gives you ability to supercharge attributes and use them in CSS beyond simple strings! You can reference colors, numbers, percentages, named values as custom identifiers, and more.
画面の幅や高さを取得するには基本的にはJavaScriptを使用しますが、CSSのみでリアルタイムに画面の幅や高さのウィンドウサイズを取得する方法があったので備忘録として紹介します。 CSSカスタムプロパティ「@property」と「:root」を使ってウィンドウサイズの幅と高さを取得 まず、元ネタは以下です。 Get the screen width & height without JavaScript CSSでウィンドウサイズの幅と高さを判別するには、CSSのカスタムプロパティ機能「@property」を使って「:root」の変数に入れる際に三角関数を使って取得します。 @property --_w { syntax: '<length>'; inherits: true; initial-value: 100vw; } @property --_h { syntax: '<leng
Since its introduction, CSS has never had an official logo. Only ever since CSS3 and therefore the well-known shields got introduced people had a visual representation in terms of a logo when they were talking about CSS. For well over a decade now this shield served as a logo for the CSS language, but whilst CSS evolved and more and more features got added the shield with its big 3 in the middle s
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
Can we emulate the upcoming CSS contrast-color() function via CSS features that have already widely shipped? And if so, what are the tradeoffs involved and how to best balance them? Relative Colors Out of all the CSS features I have designed, Relative Colors aka Relative Color Syntax (RCS) is definitely among the ones I’m most proud of. In a nutshell, they allow CSS authors to derive a new color f
The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented sparingly over time, reading articles that danced around the concepts, but I had barely scra
Note: I received a lot of great feedback from the discussions at Mastodon and Hacker News, so I've updated the post with some improvements to the font! I've also added some further examples and acknowledgements at the end. Syntax Highlighting in Hand-Coded Websites The problem I have been trying to identify practical reasons why hand-coding websites with HTML and CSS is so hard (by hand-coding, I
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
昔は CSS と言えば壊れやすい代名詞のようなもので、堅牢な CSS を書くためによく BEM や FLOCSS といったCSS 設計記法の縛りを入れて書いたりしていましたが、最近は React と Scoped CSS のセットで書くことが多くて、素の HTML/CSS で設計記法を遵守した CSS を書く機会はだいぶ減りました。 衝突を気にしなくて良い環境で CSS を書いているので BEM (Block/Element/Modifier) で言うところの Element あたりはあまり気にならなくなりましたが、Modifier の扱いに関しては引き続き現役というか、むしろコンポーネントの Props などでより意識をする機会が多くなったように感じます。 ちなみに 自分は CSS in JS に関しては若干距離を置いてるというか、Scoped CSS が実現できれば十分で、ユーザーに負
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
