はてなブックマーク

サイボウズが実践するBaselineを用いた持続可能なブラウザサポートのご紹介 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Published: November 7, 2025 日本国内で38,000社を超えるエンタープライズ顧客のブラウザ互換性を管理することは、決して容易ではありません。1日あたり150万以上のアプリケーションでクリティカルなビジネス運用を支えているkintoneにとって、ブラウザサポートの判断は極めて重要な意味を持ちます。 日本を代表するグループウェア企業であるサイボウズは、その課題に直面していました。製品全体で一貫したウェブ標準の基準を維持しながら、独自のブラウザサポート基準のメンテナンス負担を回避するには、どうすればよいのか。 至った解決策は、開発時の機能基準にBaselineを採用することでした。この決断は、私たちのウェブプ

Published: Oct 20, 2025 If you've ever built a feature that needs to react to URL changes, you've likely found yourself writing complex regular expressions or pulling in a third-party library for routing. The URL Pattern API, now Baseline Newly available, provides a standardized, powerful, and interoperable solution for this common challenge. It lets you match URLs against a familiar pattern synta

Published: September 16, 2025 Browserslist is a utility that tells build toolchains how to modify source code for a specified set of browsers. Browserslist relies on a query syntax that specifies exact versions of browsers, relative queries such as last 2 years, and even usage-based queries like > 0.5%. It's used by other popular tools such as Babel and PostCSS. Chances are, if you use any kind of

パスキーは、パスワードに代わる、より安全で簡単かつ高速な方法として急速に普及しており、セキュリティとユーザーの利便性を高めています。パスキーの可能性を最大限に引き出すには、パスキーの管理に関するユーザー エクスペリエンスを慎重に検討する必要があります。このドキュメントでは、直感的で安全で堅牢なパスキー管理システムを設計するためのガイドラインとオプション機能を概説します。 複数のパスキーを管理する ユーザーが複数のパスキーを追加し、複数のプロバイダを使用できるようにします。ただし、同じプロバイダの同じアカウントに複数のパスキーを追加することは許可しないでください。プラットフォームがプロバイダをサポートしていない場合や、ユーザーがプロバイダにアクセスできなくなった場合でも、別のプロバイダの別のパスキーでログインできます。この設定により、アカウントのロックアウトのリスクが軽減されます。データベー

パスキーは、ログイン エクスペリエンスを変革し、パスワードに代わる、よりシンプルで高速かつ安全な方法を提供するように設計されています。このチェックリストでは、パスキーを実装して最適なユーザー エクスペリエンス（UX）を実現するための主な要素について説明します。 このチェックリストの使用方法 このチェックリストは、認証フローにパスキーを実装するデベロッパーとプロダクト チームを対象としています。適した用途: 実装が、以下の記事で説明されている最新のパスキーの UX のベスト プラクティスに準拠していることを確認します。 ユーザビリティ、セキュリティ、互換性を向上させる必須要素とオプション要素を特定します。 開発中とデプロイ前に実装を確認します。 ユーザーの採用とシステムの相互運用性をサポートするベスト プラクティスに沿って設計します。 これにより、エンドユーザーにスムーズで安全なエクスペリエ

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, Last updated: March 26, 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

公開日: 2025 年 2 月 7 日 2024 年 4 月に、このサイトの投稿で、Popover API がベースラインで新しく利用可能になったことが発表されました。ただし、誤りがあり、ポップオーバーは 2025 年 1 月 27 日よりベースラインに移行されます。この記事では、誤った判断をした理由と、このような誤りが起こりにくくするためにその後に行われた変更について説明します。 Popover API とは何ですか？ Popover API には、ウェブ アプリケーションで使用されるさまざまなタイプのポップオーバーを作成するための組み込みの方法が用意されています。これまでは、JavaScript を使用して、ユーザー アクセスが可能な方法で実装する必要がありました。この API を使用すると、ブラウザにこれらすべてを導入できます。また、HTML で宣言的にシンプルなポップオーバーを作成

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

ブロック レイアウトとテーブル レイアウトで、CSS Box Alignment の align-content プロパティを使用できるようになりました。これにより、フレキシブル レイアウトやグリッド レイアウトを作成しなくても、ブロックの方向を揃えることができます。 アイテムを垂直方向に中央揃えする、以前は不可能だったタスクが、フレックスボックスとグリッドと align-content プロパティを使用することで簡単になりました。しかし、この位置揃えを行う以外の目的では、フレックスまたはグリッドのレイアウトを作成する必要がありました。このプロパティはブロック レイアウトに対して指定されており、ここ数か月で 3 つの主要エンジンすべてにこの機能がリリースされています。 ブロック レイアウトで 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 subparts. 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 subpart for each origin in the CrUX dataset, resulting

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,

最近、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