CSSだけでtooltipの位置を指定できるCSS Anchor Positioningについて

2023/06/01 6 users アンカー CSS 実装 特定 要素

3 行まとめ 特定の要素(アンカー)を基準にして、その要素から位置を指定できる CSS Anchor Positioning JavaScript を使わなくても tooltip などの実装ができるように Chrome Canary で試せる CSS Anchor Positioning とは CSS Anchor Positioning は特定の要素(アンカー)を基準にして、その要素から別の要素の位置を指... 続きを読む

GoogleがChromeにお気に入りウェブサイトの自動更新確認機能「フォロー」を試験実装すると発表 - GIGAZINE

2021/05/20 8 users GIGAZINE blog.chromium.org 試験

GoogleがChromeの試験運用版に相当するChrome Canaryにウェブサイトの自動更新確認機能「フォロー」を試験実装すると発表しました。 Chromium Blog: An experiment in helping users and web publishers create deeper connections on Chrome https://blog.chromium.org/2021/05/an-experiment-in-helping-users-and-web... 続きを読む

知っておくと役立つ、CSSの新機能！コンテナクエリの基礎知識と便利な使い方を解説 | コリス

2021/05/13 10 users コリス ビューポートサイズ コンテナクエリ CSS プラグ

CSSのコンテナクエリが、Chrome Canaryのフラグで利用できるようになりました。正式なサポートはこれからですが、一足先に、コンテナクエリの基礎知識と便利な使い方を紹介します。 メディアクエリはビューポートサイズに基づきますが、コンテナクエリは文字通り親コンテナに基づいてスタイルを定義できます。これにより... 続きを読む

CSS GridをChrome デベロッパーツールで検証、デバッグする方法を解説 | コリス

2020/11/06 18 users Chrome レイアウト コリス 翻訳記事 アップデート

Chrome デベロッパーツールでWebページ上のCSS Gridを検証し、レイアウトの問題をデバッグする方法を紹介します。 Chromeの次のアップデートで予定されている機能で、現在はChrome Canaryで利用できます。 Inspect CSS Grid by Jecelyn Yeen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様... 続きを読む

Google Chromeの｢タブスクロール｣機能をいますぐ試す方法 | ライフハッカー［日本版］

2020/10/22 7 users ライフハッカー Google Chrome 機能 日本版 方法

Chromeに新しいタブ管理機能が追加されることになりそうです。この｢タブスクロール｣機能をいますぐ試すには、Chrome Canaryが必要になりますが、わざわざインストールする価値は十分にあります。 この機能をオンにすると、Chromeの上部に表示されるタブストリップを、ウィンドウの｢範囲外｣にも広げることができます。 Ch... 続きを読む

Cloudflareと「Chrome Canary」がHTTP/3に対応--「Firefox」も間もなく - CNET Japan

2019/09/27 19 users CloudFlare http HTTPプロトコル 後押し

HTTPプロトコルの次期メジャーバージョンであるHTTP/3は米国時間9月26日、大きな後押しを受けた。CDN大手のCloudflareとGoogleの「Chrome Canary」が対応し、Mozillaの「Firefox」も近く対応するためだ。 Cloudflareは26日より、ダッシュボードでオプションを有効にすることで、顧客は自分のドメインをHTTP/3に対応させ... 続きを読む

Googleは高速な画像読み込み機能をChrome Canaryに展開 | TechCrunch Japan

2019/05/10 17 users TechCrunch JAPAN プロダクトマネージャ

Googleは米国時間5月7日、重い画像を含むウェブサイトをより高速に読み込むための機能をChromeに追加することを発表した。ただし現時点では、Chromeの実験的なバージョンであるChrome Canaryでのみ利用可能となっている。Chrome担当のプロダクトマネージャ、Tal Oppenheimer（タル・オッペンハイマー）氏が米国時間5月7... 続きを読む

Chrome Canaryで画像の遅延読み込みが利用可能に | スラド IT

2018/08/18 28 users スラド NEOWIN LazyLoad 遅延読み 遅延

Chrome Canaryで画像の遅延読み込み機能が利用可能になっている(Bleeping Computerの記事、 Android Policeの記事、 Neowinの記事)。 Google Chromeの遅延読み込み(LazyLoad)機能実装計画は1月に発表されたもので、画面に表示されない部分の画像や特定のサードパーティiframeについて、ページをスクロールして表示範囲に... 続きを読む

Chrome に PWA for Desktop が来ていたので next-editor で試した - mizchi's blog

2018/07/12 211 users Sandbox Electron ウェブアプリ Chrome

今年中に来るとは聞いていたやつ。要はウェブアプリを デスクトップアプリ化するやつ。Electron と違って Chrome の Sandbox と同じ権限で動いている Twitter Lite をデスクトップ PWA にして使ってるんだけど、最 & 高です。 Mac だと Chrome Canary で enable-desktop-pwas のフラグを立てると使えます。 pic.twitter.... 続きを読む

グーグルの広告ブロッカー、Android版「Chrome Canary」で試験運用 - CNET Japan

2017/08/02 21 users グーグル 広告ブロッカー 試験運用 CNET Japan 標準

「Chrome」ブラウザの「Android」向け試験運用版アプリ「Chrome Canary」の最新版は、Googleによるネイティブな広告ブロッカーがどのように機能するのかを示している。 米国時間7月31日に最新版がリリースされた Chrome Canary は、迷惑な広告をブロックする機能を標準登載する初めてのChromeで、Googleが2018年始めに提供開始を計画している。 広告ブロッカ... 続きを読む

先見の明があるならAMPよりもPWAに注目!? プログレッシブウェブアプリでウェブサイトのアプリ化が可能に | 海外SEO情報ブログ

2017/01/26 88 users Pwa 先見 プログレッシブウェブアプリ AMP App

[レベル: 上級] Android版の Chrome Canary と Chrome Dev でWebAPKの機能を利用できるようになりました。 WebAPKを利用すると、PWA (Progressive Web App: プログレッシブ ウェブ アプリ)を実装したサイトをアプリのように扱うことができます。 WebAPKの設定手順 WebAPKを設定する手順を説明します。 まずChrome (Ca... 続きを読む

Google、Android用ChromeにWEBサイトをアプリとして利用可能にする「WebAPK」を実装開始 ｜ ガジェット通信

2017/01/23 22 users 実装 Chrome Dev Android ガジェット通信

Google、Android用ChromeにWEBサイトをアプリとして利用可能にする「WebAPK」を実装開始 Google が Android 用の Chrome Dev と Chrome Canary に WEB アプリを通常の Android アプリのように利用できる「WebAPK」の実装を開始しました。WebAPK は Chrome 47 以降がサポートしている「Progressive W... 続きを読む

CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS LAB

2015/07/07 351 users mix-blend-mode ICS LAB ICS池田

こんにちは、ICS池田です。 mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。今まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近(2015年5月)になってIEを除く主要... 続きを読む

グーグル、「Chrome Canary」でパスワード自動生成機能をテスト - CNET Japan

2014/09/08 26 users Chrome グーグル 新しいインターフェース テスト 実験版

パスワードをさらに改良する取り組みがインターネット全体で行われているが、Googleはこのほど、「Chrome」ブラウザの実験版に独自のパスワード生成機能を組み込んだ。 この機能は2012年からChromeのオプション機能となっているが、Googleは米国時間9月4日、遅ればせながらこの機能に注目し、まだ荒削りな「Chrome Canary」の新しいインターフェースに追加した。安定版のChrome... 続きを読む

Silverlight の光は、もうすぐ消えるんじゃないかと - latest log

2014/08/27 15 users silverlight latest log Mac はて

2014-08-27 Silverlight の光は、もうすぐ消えるんじゃないかと Mac で Chrome Canary (Ver 39, 64bit版) を使っているんですが、Silverlight を入れても入れても Siliverlightが利用できません と表示されるので、 (ε・◇・)з o O ( ?? はて ?? になってました。 Chrome Stable (Ver 37, 32... 続きを読む

Chrome 38からDevToolsに搭載されるレスポンシブ表示確認ツール「Device Mode」が良さげ – Rriver

2014/07/07 17 users Rriver DevTools ブックマークレット 良さげ

現在Chrome Canaryに実装されているChrome 38から、DevToolsにレスポンシブWebデザインで作ったサイトの表示が簡単に行えるツール（Device Mode？）が実装されるようです。 Chromeのプラグインやブックマークレットでも同じようなツールはあるのですが、よく使うChrome DevToolsに実装されるとさらに便利になりそうです。 正式版はまだChrome 35なの... 続きを読む

CSS filter プロパティで 「半透明ガラス」 効果を再現してみる | WWW WATCH

2013/09/25 59 users プロパティ WWW WATCH ダイアログボックス 半透明

2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...） とかで使わ... 続きを読む

yebo blog: 「Chrome Canary for Mac」がリリース

2011/05/03 12 users yebo blog リリース Browser 毎晩 Dev版

2011/05/03 「Chrome Canary for Mac」がリリース ほぼ毎晩更新され、ChromeのDev版よりも早く新しい機能を試す事ができる「Chrome Canary」を昨年7月から公開しているが、ようやくMac OS X向けのChrome Canaryがリリースされた。 投稿者 zubora 投稿時間 20:18 ラベル: Browser, Google, Mac 0 コメント... 続きを読む