サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
web.dev
ブロック レイアウトの align-content プロパティが Baseline の一部になりました コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ブロック レイアウトとテーブル レイアウトで、CSS Box Alignment の align-content プロパティを使用できるようになりました。これにより、フレキシブル レイアウトやグリッド レイアウトを作成しなくても、ブロックの方向を揃えることができます。 アイテムを垂直方向に中央揃えする、以前は不可能だったタスクが、フレックスボックスとグリッドと align-content プロパティを使用することで簡単になりました。しかし、この位置揃えを行う以外の目的では、フレックスまたはグリッドのレイアウトを作成する必要がありました。このプロパティはブロック レイアウトに対して指定されており、ここ数か月で
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) などで表すこともできます。 これらのさまざま
userVerification deep dive Stay organized with collections Save and categorize content based on your preferences. This document discusses what userVerification is in WebAuthn, and the browser behaviors that result when userVerification is specified during passkey creation or authentication. What is "user verification" in WebAuthn? Passkeys are built on public key cryptography. By creating a passke
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()。 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 115 <ph type="x-smartling-placeholder"></ph> 16 ソース この記事では、このメソッドの仕組みと、このメソッドを使用して配列を更新する方法について説明します。 コピーされます。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value)
どこでもグッドノート コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 過去 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」がウェブに関する主な指標に コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Interaction to Next Paint は正式に Core Web Vitals となり、First Input Delay に代わって 3 月 12 日に有効になります。 <ph type="x-smartling-placeholder"> Web Vitals プログラムでは、ウェブ デベロッパーがウェブ上のユーザー エクスペリエンスの重要な側面を測定するための指標を提供しています。First Input Delay(FID)は、プログラムの応答性の側面を表していましたが、時が経つにつれて、ウェブのインタラクティビティの側面を捉えるためには、FID にはなかった新しい指標が必要であることが明ら
テストの学習へようこそ! コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、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) 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 10
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 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: when it becomes newly available, and then when it becomes widely a
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
次のページ
このページを最初にブックマークしてみませんか?
『Home | web.dev』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く