サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
インタビュー
web.dev
Published: March 18, 2025 Polyfills have long been a part of the web developer experience, as they attempt to provide support for web features that aren't supported in all browsers. It would seem that polyfills are an indispensable tool in the web developer's toolkit, but it's nearly impossible to distill such a complex area of concern into a single, definitive statement. Knowing when to use a pol
Published: March 12, 2025 ESLint has long been the preferred linter for JavaScript, offering a variety of settings and rules that help developers enforce good style for JavaScript in their projects. Recently, ESLint shipped support for linting CSS in projects, offering additional rules for checking aspects of stylesheets. As a part of launching CSS support, ESLint now offers the require-baseline r
Popover API のベースラインが新規に利用可能に コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 2 月 7 日 2024 年 4 月に、このサイトの投稿で、Popover API がベースラインで新しく利用可能になったことが発表されました。ただし、誤りがあり、ポップオーバーは 2025 年 1 月 27 日よりベースラインに移行されます。この記事では、誤った判断をした理由と、このような誤りが起こりにくくするためにその後に行われた変更について説明します。 Popover API とは何ですか? Popover API には、ウェブ アプリケーションで使用されるさまざまなタイプのポップオーバーを作成するための組み込みの方法が用意されています。これまでは、JavaScript を使用して、ユーザー アクセスが可能な方法で実装する
Published: February 7, 2025 In April 2024, a post on this site announced that the Popover API was Baseline Newly available. However, we got it wrong, and popover enters Baseline as of January 27, 2025. This post explains why we got it wrong, and what has changed since to make these mistakes less likely to happen. What's the Popover API? The Popover API provides a built-in way to create various typ
公開日: 2025 年 1 月 31 日 ブラウザで、フロントエンドだけでなくバックエンドも含めて、完全に機能するブログを実行するとします。サーバーやクラウドは不要です。必要なのは、ユーザー、ブラウザ、WebAssembly だけです。WebAssembly は、サーバーサイド フレームワークをローカルで実行できるようにすることで、従来のウェブ開発の境界を曖昧にし、新しい可能性を開いています。この投稿では、Vladimir Dementyev(Evil Martians のバックエンド ヘッド)が、Ruby on Rails を Wasm とブラウザに対応させるための進捗状況を共有します。 15 分で Rails をブラウザに導入する方法。 Rails の wasm 化の裏側。 Rails と Wasm の将来。 Ruby on Rails の有名な「15 分でブログ」がブラウザで実行可能
Published: Feb 1, 2025 With the scrollbar-color property you can change the colors used for scrollbars. You can specify the color of the thumb and the color track with it. Using scrollbar-width you can opt-in to a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability. Learn more about scrollbars and how to style them in scrollbar styling.
Published: January 31, 2025 Imagine running a fully functional blog in your browser—not just the frontend, but the backend, too. No servers or clouds involved—just you, your browser, and… WebAssembly! By allowing server-side frameworks to run locally, WebAssembly is blurring the boundaries of classic web development and opening up exciting new possibilities. In this post, Vladimir Dementyev (Head
Published: October 23, 2024 In this post, learn how you can use the new <baseline-status> web component on your own site, and the Baseline logos in presentations, whenever you write or talk about web platform features. Most developers have had the experience of searching for a solution to a web development problem, finding an article that describes the perfect solution, then realizing right at the
base64 encoding and decoding is a common form of transforming binary content to be represented as web-safe text. It's used commonly for data URLs, such as inline images. What happens when you apply base64 encoding and decoding to strings in JavaScript? This post explores the nuances and common pitfalls to avoid. btoa() and atob() The core functions to base64 encode and decode in JavaScript are bto
Web Platform Dive into the web platform, at your pace.
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 help prevent negative impact. Benchmarking the performance of CSS with PerfTestRunner To benchmark the performance of CSS we built t
ブロック レイアウトの 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
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. You can now create entry animation effects for elements, including those animating from display: none, and animating into the to
公開日: 2024 年 7 月 12 日 CSS のパワーアップに備えましょう。CSS Houdini 傘下の API の一部である @property ルールが、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ(CSS 変数)の制御と柔軟性が飛躍的に向上し、スタイルシートをよりスマートで動的なものにすることができます。 @property のメリット 意味: @property を使用して、カスタム プロパティの型(構文)を定義します。これにより、カスタム プロパティが保持するデータの種類(色、長さ、数値など)をブラウザに伝え、予期しない結果を防ぎ、グラデーションのアニメーション化などの新しい可能性をサポートできます。 代替値: スタイルが消えることはありません。@property を使用して、カスタム プロパティの初期値を
Published: July 12, 2024 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 (also known as CSS variables), making your stylesheets smarter and more dynamic. The benefits of @property Semantic meaning: Use @pro
Today that score is 90, with a score for stable browsers of 85 as of the release of Chrome 126 in June. The overall experimental interop score has risen 10 points, and this post shares some of the features that have contributed to that score. Popover Popover became part of Baseline Newly available in April 2024. Popover is exciting because so many of the UI features you need to build—for example,
この記事では、ウェブサイトの保護に使用できる最も重要なセキュリティ ヘッダーについて説明します。ウェブベースのセキュリティ機能の理解、ウェブサイトへの実装方法の学習、リマインダーが必要な場合の参照として使用してください。 機密性の高いユーザーデータを扱うウェブサイトに推奨されるセキュリティ ヘッダー: コンテンツ セキュリティ ポリシー(CSP) 信頼できる型 すべてのウェブサイトに推奨されるセキュリティ ヘッダー: X-Content-Type-Options X-Frame-Options Cross-Origin Resource Policy(CORP) Cross-Origin Opener Policy(COOP) HTTP Strict Transport Security(HSTS) 高度な機能を備えたウェブサイトのセキュリティ ヘッダー: クロスオリジン リソース シェア
最近、Chris Coyier 氏は、 コンテナクエリがすべてのブラウザ エンジンでサポートされるようになった今、開発者がコンテナクエリを使用する機会が増えないのはなぜでしょうか。 Chris の投稿には考えられるさまざまな理由が挙げられています(意識の欠如、古い習慣が困難になるなど)が、際立った特に理由があります。 今はコンテナクエリを使用したいが、古いブラウザをサポートする必要があるためできないと考えているデベロッパーもいます。 タイトルから推測できるように、古いブラウザをサポートする必要がある場合でも、ほとんどのデベロッパーは本番環境でコンテナクエリをすぐに使用できると考えています。この投稿では、そのためにおすすめのアプローチについて説明します。 実際的なアプローチ 現時点でコンテナクエリをコードで使用するものの、すべてのブラウザで同じエクスペリエンスを表示したい場合は、コンテナクエ
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's one particular reason that stands out. Some developers say they want to use container queries now but think they can't
Google スプレッドシートは、Chrome で WasmGC を使用する Google 初のプロダクトの一つです。この移行は 2022 年に発表されました。スプレッドシート チームと Chrome チームは、標準化、エンジニアリング、ツールの面で連携し、最適化に関するリアルタイムのフィードバックを提供することができました。このパートナーシップは、Google のエンジニアリング チームが Chrome と効果的に連携して、より多くの Google アプリを WasmGC で実行できるようにするための先例となりました。 課題: JavaScript Google スプレッドシートの計算エンジンは、もともと Java で記述され、2006 年にリリースされました。サービス初期の頃は、すべての計算がサーバーで行われていました。ただし、2013 年以降、このエンジンは JavaScript を
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 optimizations. This partnership set a precedent for how engineering teams at Google can effectively work with Chrome to have more Google apps running on WasmGC. The chall
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
本日は、web.dev に関する最新のコースをご紹介します。Learn JavaScript は、Mat Marquis が作成した新しいコースで、最新の JavaScript について詳しく説明しています。既存のコース、特に「HTML、CSS を学ぶ」の基礎コースと合わせてご利用ください。 web.dev の他のすべてのコースと同様に、コースを最初から最後まで学習する必要はありません。仕様をブラッシュアップするだけの参考資料としてご利用いただけます。 リンクする資料は、他の記事の背景情報としても使用します。 JavaScript の学習がお役に立てば幸いです。 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Develop
システム色は、現在使用されている color-scheme 値に反応できます。light-dark() 関数は、作成者に同じ機能を公開します。 CSS のシステムカラー CSS では、さまざまなカラースペースのいずれかから多くの色を使用できます。たとえば、名前付きの色、16 進数の色、特定の色空間にリンクされた色関数、より汎用的な color() 関数を使用できます。 たとえば、名前付きの色 cornflowerblue は、#6495ED、hsl(218.54deg 79.19% 66.08%)、color(display-p3 0.43 0.58 0.9) としても表すことができます。 これらのさまざまな名前と形式に加えて、CSS にはCSS Color Module Level 4 で指定されているシステム色として記述される色が含まれています。これらのシステム色はブラウザによって定義
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 passkey, a public-private key pair is generated, the private key is stored by the passkey provider, and the public key i
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 forward in the way we measure interaction responsiveness, addressing many of the shortcomings of First Input Delay (FID). Interaction to Next Paint (INP) promotion timeline. In this post, we'll quickly recap what exactly is changing today,
最近、配列に対して呼び出すことができる、相互運用可能な新しいメソッドがブラウザに導入されました。 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)
次のページ
このページを最初にブックマークしてみませんか?
『Home | web.dev』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く