サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
web.dev
For this post, we used data from page navigations with a subresource image LCP in Chrome to take a look at the LCP sub-parts. We've looked at this kind of data before, but never from field data to see where real users are spending their time while waiting for a page's LCP. Like with Core Web Vitals, we took the 75th percentile (p75) of each LCP sub-part for each origin in the CrUX dataset, resulti
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 を使用して、カスタム プロパティの型(構文)を定義します。これにより、カスタム プロパティが保持するデータの種類(色、長さ、数値など)をブラウザに伝えることで、予期しない結果を防ぎ、グラデーションのアニメーションなどの新たな
@property: Next-gen CSS variables now with universal browser support Stay organized with collections Save and categorize content based on your preferences. Get ready for a CSS power-up! The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. This game-changing feature unlocks new levels of control and flexibility for CSS custom properties (a
Interop 2024 mid-year update Stay organized with collections Save and categorize content based on your preferences. As we head into the second half of the year, it's a great time to look at how Interop 2024 has improved web interoperability this year. Where we started At the beginning of the year, Chrome had an experimental browser support score of 83. Today that score is 90, with a score for stab
この記事では、保護するために使用できる最も重要なセキュリティ ヘッダーについて説明します。 測定しますウェブベースのセキュリティ機能を理解し、 ウェブサイトに実装し、リマインダーが必要なときの参考にしてください。 ユーザーの機密情報を扱うウェブサイトに推奨されるセキュリティ ヘッダー: コンテンツ セキュリティ ポリシー(CSP) Trusted Types すべてのウェブサイトで推奨されるセキュリティ ヘッダー: X-Content-Type-Options X-Frame-Options クロスオリジン リソース ポリシー(CORP) クロスオリジン オープナー ポリシー(COOP) HTTP Strict Transport Security(HSTS) 高度な機能を持つウェブサイトのセキュリティ ヘッダー: クロスオリジン リソース シェアリング(CORS) クロスオリジン エンベ
コンテナクエリの使用方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 最近、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 スプレッドシートが計算ワーカーを JavaScript から WasmGC に移植した理由 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google スプレッドシートは、Chrome で WasmGC を使用する Google 初のプロダクトの 1 つです。この移行は 2022 年に発表され、Google スプレッドシートと Chrome のチームは標準化、エンジニアリング、ツールに関して連携し、最適化に関するフィードバックをリアルタイムで提供しました。このパートナーシップは、Google のエンジニアリング チームが Chrome を効果的に連携させ、より多くの Google アプリを WasmGC で実行できるようにする前例となります。 課題: JavaScript Google スプレッドシートの計算エンジンは元々 Java で記述
Why Google Sheets ported its calculation worker from JavaScript to WasmGC Stay organized with collections Save and categorize content based on your preferences. Google Sheets is one of the first products at Google to use WasmGC on Chrome. The move was announced in 2022, and the Sheets and Chrome teams partnered on standardization, engineering, and tooling to provide real-time feedback on optimizat
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
Learn JavaScript のご紹介 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 本日は、web.dev に関する最新のコースをご紹介します。Learn JavaScript は、Mat Marquis が作成した新しいコースで、最新の JavaScript について詳しく説明しています。既存のコース、特に「HTML、CSS を学ぶ」の基礎コースと合わせてご利用ください。 web.dev の他のすべてのコースと同様に、コースを最初から最後まで学習する必要はありません。仕様をブラッシュアップするだけの参考資料としてご利用いただけます。 リンクする資料は、他の記事の背景情報としても使用します。 JavaScript の学習がお役に立てば幸いです。 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用
Stay organized with collections Save and categorize content based on your preferences.
light-dark() を使用して CSS のカラーパターンに依存する色を使用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 システムカラーは、現在使用されている color-scheme 値に反応できます。light-dark() 関数は、同じ機能を作成者に公開します。 CSS のシステムカラー CSS では、多数の色空間のうちの 1 つから多数の色を使用できます。たとえば、名前付きの色、16 進数の色、特定の色空間にリンクされた色関数、より一般的な color() 関数を使用できます。 たとえば、名前の付いた色 cornflowerblue は、#6495ED、hsl(218.54deg 79.19% 66.08%)、color(display-p3 0.43 0.58 0.9) として表すこともできます。 CSS には、これらのさまざまな名前
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
最近、配列に対して呼び出すことができる新しい相互運用可能なメソッド Array.prototype.with() がブラウザに追加されました。 この記事では、このメソッドの仕組みと、元の配列を変更せずに配列を更新する方法について説明します。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value) メソッドは、指定された新しい value に index を設定して、呼び出された配列のコピーを返します。 次の例は、年齢層の配列を示しています。配列の新しいコピーを作成し、第 2 の年齢を 15 から 16 に変更します。 const ages = [10, 15, 20, 25]; const newAges = ages.with(1, 16); console.log(newAges); // [1
どこでもグッドノート コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 過去 2 年間、Goodnotes のエンジニアリング チームは、成功した iPad のメモ作成アプリを他のプラットフォームに導入するプロジェクトに取り組んできました。このケーススタディでは、2022 年の iPad アプリが、ウェブ テクノロジーを基盤とするウェブ、ChromeOS、Android、Windows に実装され、チームが 10 年以上にわたって取り組んできた同じ Swift コードを再利用した WebAssembly について説明します。 ウェブ、Android、Windows に Goodnotes が登場した理由 2021 年、Goodnotes は iOS と iPad 向けのアプリとしてのみ提供されていました。Goodnotes のエンジニアリング チームは、Go
ウェブデザインと開発の主要なテーマに関するコース(随時追加予定)をご確認ください。Chrome チームのメンバーの支援を受け、業界のエキスパートが各コースを作成しました。モジュールを順番に受講するか、最も興味のあるトピックを受講してください。
3 月 12 日に「Interaction to Next Paint」がウェブに関する主な指標に コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 3 月 12 日より、「Interaction to Next Paint」が「Core Web Vitals」として正式に採用され、「First Input Delay」の代わりになります。 Web Vitals プログラムでは、ウェブ デベロッパーがウェブ上のユーザー エクスペリエンスの主要な側面を測定するための指標を提供しています。First Input Delay(FID)はプログラムの応答性の要素を示すものでしたが、時間の経過とともに、FID ではなかったウェブでのインタラクティビティの側面を捉えるには新しい指標が必要であることが次第に明らかになりました。Chrome チームはこのニーズを認識し、20
テストの学習へようこそ! コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
「Same-site」と「same-origin」 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 「同一サイト」と「同一オリジン」はしばしば引用されますが、用語は誤解されがちです。たとえば、ページの遷移、fetch() リクエスト、Cookie、ポップアップの表示、埋め込みリソース、iframe のコンテキストで使用されます。このページでは、各プロパティの概要と相違点について説明します。 出発地 送信元の構造。 「送信元」は、スキーム(HTTP や HTTPS などのプロトコルとも呼ばれます)、ホスト名、ポート(指定されている場合)を組み合わせたものです。たとえば、URL が https://www.example.com:443/foo の場合、「origin」は https://www.example.com:443 です。 「同一オリジン」と「クロ
すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット(2024 年) コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 すべてのフロントエンド デベロッパーは、:has() が「親セレクタ」以上のものであること、subgrid の仕組みと理由、組み込みの CSS 構文でネストする方法、ブラウザで見出しテキストの折り返しのバランスを取る方法、コンテナクエリ ユニットの使用方法について知っておくべきだと思います。 この投稿は、すべてのフロントエンド デベロッパーが知っておくべき昨年 2023 年の 6 つの CSS スニペットの続きです。 CSS:has(.potential-beyond-being-a-parent-selector) :has() は 2023 年末に、すべての主要なブラウザでリリースされました。この新しいセレ
JavaScript のインポート地図がクロスブラウザでサポートされるようになりました。 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ES モジュールは、ウェブ アプリケーションに JavaScript コードを含めて再利用する最新の方法です。これらは最新のブラウザでサポートされており、従来の非モジュール式 JavaScript 開発アプローチに比べていくつかの利点があります。 ES モジュールを使用する最新の方法は、<script type="importmap"> タグを使用することです。このタグを使用すると、外部モジュール名とそれに対応する URL のマッピングを定義できます。これにより、コードに外部モジュールを組み込んで使用するのが容易になります。 <script type="importmap"> アプローチを使用するには、まずそれを HTM
バックフォワード キャッシュ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 バックフォワード キャッシュ(bfcache)は、すぐに前後に移動できるブラウザの最適化です。これにより、特に低速のネットワークやデバイスを使用するユーザーのブラウジング エクスペリエンスが大幅に向上します。 このページでは、すべてのブラウザで bfcache を使用するようにページを最適化する方法について説明します。 ブラウザの互換性 bfcache は、パソコンとモバイルの両方で、長年にわたって Firefox と Safari の両方でサポートされています。 Chrome バージョン 86 以降では、ごく一部のユーザーを対象に、Android のクロスサイト ナビゲーション用に bfcache が有効になっています。今後のリリースでは、追加のサポートが段階的にリリースされま
Baseline 2023 Stay organized with collections Save and categorize content based on your preferences. Baseline is coming to caniuse.com! In this post learn about the integration, and also discover some of the features that became part of Baseline in 2023. With the new definition of Baseline, there are two stages in a feature's lifecycle. Firstly, when it becomes newly available, and then when it be
Compression Streams are now supported on all browsers Stay organized with collections Save and categorize content based on your preferences. The Compression Streams API is for compressing and decompressing streams of data using the gzip or deflate (or deflate-raw) formats. Using the built-in compression of the Compression Streams API, JavaScript applications do not need to include a compression li
パフォーマンスの学習へようこそ! コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブ パフォーマンスはウェブ開発において非常に重要な要素であり、ページの読み込み速度や、ユーザー入力に対する応答性に重点を置いています。ウェブサイトのパフォーマンスを最適化すると、ユーザー エクスペリエンスが向上します。ユーザー エクスペリエンスの向上は、ウェブサイトの目標を達成するうえで大いに役立ちます。 ウェブ パフォーマンスはニッチなトピックのように思えるかもしれませんが、実際には広範で深いトピックです。ウェブ パフォーマンスに関するコースは、分野としての深さを考えると、親しみやすいものであると同時に、有益でもあることが不可欠です。このコースの初回リリースでは、初心者の方が役立つウェブ パフォーマンスの基礎に焦点を当てています。 このシリーズの各モジュールは、可能な限
Stay organized with collections Save and categorize content based on your preferences. This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance. Go back
次のページ
このページを最初にブックマークしてみませんか?
『Home | web.dev』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く