DOMDOMタイムス#17: Blinkはテキストやそのデコレーション、カゲをどうやってペイントしているの？
久しぶりのDOMDOMタイムスです！！ Chromium(Blink)のbug fixを通じてテキストのPaintingまわりの実装について知ったので、自分用にまとめてみます👀 なんかもうDOMとかじゃないんですけど、これもまたDOMDOMタイムスなのです。 いきさつ どんなバグだったのよ めちゃ一言で言うと「テキストをverticalにしたときに、それにあわせて回転する文字が入っていると、text-shadowの位置が仕様と異なっちゃう」というバグのbug fixをやってみています。 こういうことです。 右が正しい実装だと考えている方もいるのではないかと思ったり。 要するにshadowのoffsetは回転に影響を受けない、絶対的なものだよというわけです。この仕様はCSS Writing Modes Level 4にて"Purely Physical Mappings"という概念として定
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
3PCA 22 日目: Privacy Sandbox | blog.jxck.io
Intro このエントリは、 3rd Party Cookie Advent Calendar の 22 日目である。 3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiita https://qiita.com/advent-calendar/2023/3rd-party-cookie 今日からいよいよ Privacy Sandbox の話に入っていく。 単に塞げば良いのか? 各ブラウザが「3rd Party Cookie をブロックしよう」と合意した。しかし、単に使えなくすればそれでいいのか? というと、実はそんなに簡単ではない。 まず、何度も言っているように、「認証連携」やトラッキング問題とは関係のないポジティブなユースケースまで使えなくなることで、多くのサイトが壊れてしまう懸念がある。 ITP によって壊れたサイトは多く存在したが
3PCA 21 日目: SameSite Cookie | blog.jxck.io
Intro このエントリは、 3rd Party Cookie Advent Calendar の 21 日目である。 3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiita https://qiita.com/advent-calendar/2023/3rd-party-cookie Google が 3rd Party Cookie を Deprecate していく方針を発表してから、最初に始めたのが SameSite Lax by Default だった。 これが何のために行われたのかを解説する。 eTLD+1 とは SameSite とは「eTLD+1 が同じ」という説明になる。これを理解するには eTLD を理解する必要がある。 例として example.com ドメインを持ち、そこに以下のような Cookie を付与するとこ
:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!
What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。 ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。 検証の状態とは、例えば<input type="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
WebAssembly Garbage Collection (WasmGC) now enabled by default in Chrome - Chrome for Developers
WebAssembly Garbage Collection (WasmGC) now enabled by default in Chrome Published on Tuesday, October 31, 2023 There are two types of programming languages: garbage-collected programming languages and programming languages that require manual memory management. Examples of the former, among many more, are Kotlin, PHP, or Java. Examples of the latter are C, C++, or Rust. As a general rule, higher-
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。 参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。 まずは、さっそく機能拡張のインストールから。 下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストア この機能
ブラウザの戻る/進むを高速に！ヤフーにおけるBFCache有効化に向けた取り組み
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11/12代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）と、Yahoo!ニュースのエンジニアの喜楽（@gladenjoy）です。今回は、ヤフーで対応をすすめてきた、BFCacheの有効化にむけた取り組みについてお話しします。BFCacheとはそもそも何か、有効化のボトルネックには何があるか、そして調査方法などの具体的な手法などを交えてご紹介します。 ヤフーではこれまでスムーズなユーザー体験を実現するべく、高速にページを表示できるBFCache技術の検証と、BFCacheの有効化率を上げる取り組みを行ってきました。その結果、Yahoo!ニュースでの検証では、PVが+2％向上、広告
Google Chrome、リンクプレビュー機能の導入を検討中
Googleは、デスクトップ向けChromeに新しい「リンクプレビュー」機能を導入する計画を進めています。この機能により、ユーザーのウェブコンテンツとのインタラクションが大きく変わる可能性があります。 Googleは、デスクトップ向けChromeに新しい「リンクプレビュー」機能を導入する計画を進めています。この機能により、ユーザーのウェブコンテンツとのインタラクションが大きく変わる可能性があります。 リンクプレビューは、ユーザーがハイパーリンクをクリックまたはホバリングするだけで、小さなポップアップウィンドウにウェブページのプレビューが表示されるようにするものです。 このプレビューでは、リンク先ページの内容を一部だけ閲覧できるため、ユーザーはそのページを完全に開くか、現在閲覧中のページを継続するかを選択できます。これにより、時間の節約が可能になるだけでなく、不要なコンテンツの読み込みを防ぐ
FirefoxがついにChromeよりも高速なブラウザに
Treeherderは、Mozillaの開発するソフトウェアのテスト結果や、ウェブサービスや外部ツールで取り込んだデータを抽出・加工するETL機能などを有するウェブサイトです。このTreeherderに、Google ChromeとFirefoxのベンチマークテスト結果をまとめたデータが公開されました。これによると、FirefoxはChromeよりも高いスコアを出している、つまりは高速なブラウジングが可能なブラウザということのようです。 Perfherder https://treeherder.mozilla.org/perfherder/graphs?timerange=31536000&series=mozilla-central,3735773,1,13&series=mozilla-central,3412459,1,13 Firefox has surpassed Chrome
decoding="async" について詳しく調べてみる
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
URL バーの表示の変遷 | blog.jxck.io
Intro ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、 Chrome から発表された。 思えば、 URL バーの見た目も、だいぶ変わってきたように思う。 URL バーの表示の変遷を一度まとめておく。 URL バーの再現 本当なら古いブラウザのスクショを集めたいところだったが、これは非常に難しい。ネットで色々落ちてるものをかき集めても、ライセンスや解像度や表示されている URL などを考えると、使い勝手は決して良くない。 試しに古い Chromium をビルドしてみたが、一定より古いものはうまく開くことすらできなかった。開くことができたバージョンもあったが、どうやらそれだけでは当時の URL バーの UI までは再現されないようだ。 そこで、実物のスクショはあきらめ「一般的な URL バーのイメージ」を書いた図で、おおまかな変遷を辿る。あくまで架空の図であること
Google I/O 2023でのウェブ関連のトピック
今年のGoogle I/Oは、KeynoteとDeveloper Keynoteこそ観客をいれて通常運転に戻りましたが、セッションはすべて動画となり、コミュニティ要素はテキストチャットのみという形態となりました。来年こそは今までどおりのGoogle I/Oになってほしいですね。 今年のGoogle I/Oは、ChatGPTを代表としたGenerative AIの登場にとても影響を受けた内容だったな、という感想を持ちました。Bard はGoogle I/Oの前に公開されていましたし、すでに多くの人が試していたのではないかと思います。 ただ、Bardが日本語のサポートを今回遂げたのは、ちょっと驚きでした。Googleから登場する技術やプロダクトの多くが、近年英語のみ対応という状況が多く、多言語対応がなかなか進んでいない印象が僕にはありました。AndroidのApp Actionsなどがその代表
WebAssemblyにガベージコレクション機能が登場、Chrome 111で試験的実装に。Dartなど高級言語のWebAssembly対応へ前進
WebAssemblyにガベージコレクション機能が登場、Chrome 111で試験的実装に。Dartなど高級言語のWebAssembly対応へ前進 WebAssemblyのガベージコレクション機能が、Chrome 111 Devリリースにおいて試験的実装を示すOrigin trialとして実装されることが分かりました。 WebAssemblyのガベージコレクション機能はまだ仕様策定段階ですが、試験的機能として実装が登場することで仕様策定の作業などが進むと同時に、いわゆる高級言語でのWebAssembly対応が広がることも期待されます。 WASM GCはChromeのフィーチャーフラグで有効化 ChromeブラウザにはStable、Beta、Dev、Canaryなど、開発の段階に分かれた複数のリリースチャンネルがあります。 現在リリースされているChrome 111 Devリリースチャンネル
Web の仕様を眺めるシリーズ Control UI Customization | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は Capability Delegation でした。 Control UI Customization 今回は Feature: Customizable <select> Element を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 Open UI 方面からの提案 以前紹介した CSS Anchored Positioning と同じく MicrosoftEdge/MSEdgeExplainers に提案書があります。Author の所属も多くが Microsoft 社であり、半数は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - liriliri/chii: Remote debugging tool
GitHub - AndrewWalsh/openapi-devtools: Browser extension that generates API specs for any app or website
GitHub - fathyb/carbonyl: Chromium running inside your terminal
GitHub - kdzwinel/DOMListenerExtension: Chrome extension that allows you to monitor, browse and filter all DOM changes.