Benchmarking the performance of CSS @property Stay organized with collections Save and categorize content based on your preferences. Published: Oct 2, 2024 When starting to use a new CSS feature it's important to understand its impact on the performance of your websites, whether positive or negative. With @property now in Baseline this post explores its performance impact, and things you can do to

この投稿では、Chrome でサブリソース イメージ LCP があるページ ナビゲーションのデータを使用して、LCP のサブパートを確認しました。このようなデータは以前にも確認しましたが、フィールド データからは、ページの LCP を待つ間に実際のユーザーがどこに時間を費やしているかを確認することはできません。 <ph type="x-smartling-placeholder"> Core Web Vitals と同様に、CrUX データセットの各オリジンについて LCP サブパートごとに 75 パーセンタイル（p75）を取得し、p75 値の分布を 4 つ（サブパートごとに 1 つ）作成しました。これらの分布をまとめるために、4 つの LCP 下位区分のそれぞれについて、すべてのオリジンで値の中央値を取りました。 最後に、「良好」「改善が必要」「要改善」のいずれであるかに基づいて、オリジ

userVerification の詳細 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このドキュメントでは、WebAuthn における userVerification の内容と、パスキーの作成時または認証時に userVerification を指定した場合のブラウザの動作について説明します。 「ユーザー確認」とはどうでしょうか パスキーは公開鍵暗号で構築されます。パスキーを作成すると、公開鍵 / 秘密鍵のペアが生成されます。秘密鍵はパスキー プロバイダによって保存されます。公開鍵はリライング パーティ（RP）サーバーに返されて保存されます。サーバーは、ペア設定された公開鍵を使用して、同じパスキーで署名された署名を検証することでユーザーを認証できます。「ユーザー提示」公開鍵認証情報上の（UP）フラグは、認証中に誰かがデバイスを操作したことを証明するも

ブロック レイアウトの align-content プロパティが Baseline の一部になりました コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ブロック レイアウトとテーブル レイアウトで、CSS Box Alignment の align-content プロパティを使用できるようになりました。これにより、フレキシブル レイアウトやグリッド レイアウトを作成しなくても、ブロックの方向を揃えることができます。 アイテムを垂直方向に中央揃えする、以前は不可能だったタスクが、フレックスボックスとグリッドと align-content プロパティを使用することで簡単になりました。しかし、この位置揃えを行う以外の目的では、フレックスまたはグリッドのレイアウトを作成する必要がありました。このプロパティはブロック レイアウトに対して指定されており、ここ数か月で

Now in Baseline: animating entry effects Stay organized with collections Save and categorize content based on your preferences. The post four new CSS features for entry and exit effects shared some useful features that had just landed in Chrome. Now, two of these features, @starting-style and transition-behavior: allow-discrete have become Baseline Newly Available with the release of Firefox 129.

@property: 次世代の CSS 変数にユニバーサル ブラウザのサポートを追加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 CSS パワーアップの準備をしよう@property ルールは、CSS Houdini API の包括的な機能の一部であり、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ（CSS 変数）の制御性と柔軟性が高まり、スタイルシートがよりスマートで動的なものになります。 @property のメリット セマンティックな意味: @property を使用して、カスタム プロパティの型（構文）を定義します。これにより、カスタム プロパティが保持するデータの種類（色、長さ、数値など）をブラウザに伝えることで、予期しない結果を防ぎ、グラデーションのアニメーションなどの新たな

コンテナクエリの使用方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 最近、Chris Coyier 氏は、 コンテナクエリがすべてのブラウザ エンジンでサポートされるようになった今、開発者がコンテナクエリを使用する機会が増えないのはなぜでしょうか。 Chris の投稿には考えられるさまざまな理由が挙げられています（意識の欠如、古い習慣が困難になるなど）が、際立った特に理由があります。 今はコンテナクエリを使用したいが、古いブラウザをサポートする必要があるためできないと考えているデベロッパーもいます。 タイトルから推測できるように、古いブラウザをサポートする必要がある場合でも、ほとんどのデベロッパーは本番環境でコンテナクエリをすぐに使用できると考えています。この投稿では、そのためにおすすめのアプローチについて説明します。 実際的なアプローチ 現時点でコ

How to use container queries now Stay organized with collections Save and categorize content based on your preferences. Recently, Chris Coyier wrote a blog post posing the question: Now that container queries are supported in all browser engines, why aren't more developers using them? Chris's post lists a number of potential reasons (for example, lack of awareness, old habits die hard), but there'

Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように

The Intl.Segmenter object is now part of Baseline Stay organized with collections Save and categorize content based on your preferences. You can now use Intl.Segmenter for locale-sensitive text segmentation to split a string into words, sentences, or graphemes. Many non-Latin languages, such as Chinese and Japanese, don't use spaces to separate words. Therefore, using the JavaScript split() method

ウェブデザインと開発の主要なテーマに関するコース（随時追加予定）をご確認ください。Chrome チームのメンバーの支援を受け、業界のエキスパートが各コースを作成しました。モジュールを順番に受講するか、最も興味のあるトピックを受講してください。

Stay organized with collections Save and categorize content based on your preferences.

Interaction to Next Paint is officially a Core Web Vital 🚀 Stay organized with collections Save and categorize content based on your preferences. Interaction to Next Paint is now a stable Core Web Vital metric, replacing First Input Delay. Today's the day! After years of work, we're finally ready to make Interaction to Next Paint (INP) a stable Core Web Vital metric. This marks a significant step

Immutable array updates with Array.prototype.with Stay organized with collections Save and categorize content based on your preferences. Browsers recently gained a new interoperable method that you can call on Arrays: Array.prototype.with(). This article explores how this method works and how to use it to update an array without mutating the original array. Intro to Array.prototype.with(index, val

どこでもグッドノート コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 過去 2 年間、Goodnotes のエンジニアリング チームは、成功した iPad のメモ作成アプリを他のプラットフォームに導入するプロジェクトに取り組んできました。このケーススタディでは、2022 年の iPad アプリが、ウェブ テクノロジーを基盤とするウェブ、ChromeOS、Android、Windows に実装され、チームが 10 年以上にわたって取り組んできた同じ Swift コードを再利用した WebAssembly について説明します。 ウェブ、Android、Windows に Goodnotes が登場した理由 2021 年、Goodnotes は iOS と iPad 向けのアプリとしてのみ提供されていました。Goodnotes のエンジニアリング チームは、Go