はてなブックマーク

The nuances of base64 encoding strings in JavaScript Stay organized with collections Save and categorize content based on your preferences. 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 po

CSS nesting improves with CSSNestedDeclarations Stay organized with collections Save and categorize content based on your preferences. Published: Oct 8, 2024 To fix some weird quirks with CSS nesting, the CSS Working Group resolved to add the CSSNestedDeclarations interface to the CSS Nesting Specification. With this addition, declarations that come after style rules no longer shift up, among some

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

ブロック レイアウトの 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

@property: 次世代の CSS 変数にユニバーサル ブラウザのサポートを追加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2024 年 7 月 12 日 CSS のパワーアップに備えましょう。CSS Houdini 傘下の API の一部である @property ルールが、すべての最新ブラウザで完全にサポートされるようになりました。この画期的な機能により、CSS カスタム プロパティ（CSS 変数）の制御と柔軟性が飛躍的に向上し、スタイルシートをよりスマートで動的なものにすることができます。 @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 スプレッドシートが計算ワーカーを JavaScript から WasmGC に移植した理由 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google スプレッドシートは、Chrome で WasmGC を使用する Google 初のプロダクトの 1 つです。この移行は 2022 年に発表され、Google スプレッドシートと Chrome のチームは標準化、エンジニアリング、ツールに関して連携し、最適化に関するフィードバックをリアルタイムで提供しました。このパートナーシップは、Google のエンジニアリング チームが Chrome を効果的に連携させ、より多くの Google アプリを WasmGC で実行できるようにする前例となります。 課題: JavaScript Google スプレッドシートの計算エンジンは元々 Java で記述

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 Platform Dive into the web platform, at your pace.

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)

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

Web Platform Dive into the web platform, at your pace.

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 にはなかった新しい指標が必要であることが明ら