Google、「Chrome Enterprise Premium」発表。Chromeブラウザにポリシーの適用や動的URLフィルタリングなどのエンドポイントセキュリティを提供
Google、「Chrome Enterprise Premium」発表。Chromeブラウザにポリシーの適用や動的URLフィルタリングなどのエンドポイントセキュリティを提供 Webブラウザが、企業においてもあらゆる業務アプリケーションのフロントエンドとして使われるようになってきたと同時に、リモートワークの普及やBYOD（Bring Your Own Device）の拡大によって、オフィス以外の場所からWebブラウザを通じて企業内のアプリケーションや業務用のサービスにアクセスする、もしくは社員の私物のスマートフォンなどからWebブラウザを通じて業務アプリケーションにアクセスする機会が大幅に増大しています。 こうした状況においては、エンドポイントとなるWebブラウザにおいてマルウェアやフィッシングの対策、データ漏洩対策を行うことが欠かせません。 今回発表されたChrome Enterpris
ウェブブラウザの相互運用性を改善する「Interop」プロジェクトとはどんなものなのか？
ウェブサイトを閲覧する際に使用するブラウザには、Google Chrome以外にもFirefoxやSafariなどが存在しています。「どのブラウザで見てもサイトが同じように表示される」ようにするため、ウェブサイトの規格であるウェブ標準が策定されていますが、さらに互換性を向上させるために発足したのが「Interop」プロジェクトです。 The web just gets better with Interop 2024 | WebKit https://webkit.org/blog/14955/the-web-just-gets-better-with-interop/ ブラウザはウェブ標準に従うべきとされていますが、全てのブラウザが完全にウェブ標準に従うことができているわけではありません。ウェブ標準にどれくらい従っているかのチェックにはウェブプラットフォームテストなどの自動テストが使用さ
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS Text モジュール レベル 4 の 4 つの国際化 CSS 機能が Chrome に導入されます。この投稿では、すでに発送済みのサービスと今後の予定について説明します。 Chrome 119 以降: 日本語のフレーズが word-break: auto-phrase で改行されるようになりました。 Chrome 120 以降のフラグの背後: text-autospace プロパティによるスクリプト間のスペース 開発中: text-spacing-trim プロパティによる中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズが統一されます。 日本語のフレーズ改行: word-break: auto-phrase 日本語のテキストが読みやすくなるこの機能は Chrome 119 から利用可能 中国語や日本語などの東アジア言語では、単語の区切りにスペースを使
「Google Chrome 120」安定版リリース、「クリックしたら開く」というアコーディオンパターンの実装が簡単に
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン120.0.6099.63がリリースされました。details要素を使うことで簡単にアコーディオンパターンを実装できるようになったり、CSSネストがより簡単に記述できるようになったりしています。 New in Chrome 120 | Blog | Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-120 New in Chrome 120: CloseWatcher API, name attribute for details, privacy policy reports, and more! - YouTube ◆CloseWatcher APIをサポート Androidの「戻る」ボタンが押された場合など、ユーザー
「Google Chrome 119」安定版リリース、iOS版でアドレスバーを画面下部に移動できるようになるもAndroid版は変更なし
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン119.0.6045.106がリリースされました。iOS版にてアドレスバーを下部に移動させる設定が可能になったほか、既存のCookieに400日の有効期限の上限が適用されたり、色の相対的な指定を可能にするCSSのアップデートが行われたりしています。 New in Chrome 119 - Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-119/ How to choose a position for your address bar in Chrome on iOS https://blog.google/products/chrome/customize-chrome-ios-address-bar/ New in Chro
Chromeの新しいターゲット広告用ユーザートラッキングを無効にする方法
Googleはインターネット上でユーザーが何を買い、どんなウェブサイトを閲覧したのかなどの情報を追跡するサードパーティーCookieに代わるユーザーの行動を追跡するための仕組みとして、「Topics API」を導入しました。Topics APIは2023年7月にリリースされたGoogle Chrome 115から利用されているのですが、これは手動で簡単に無効化することが可能ということで、その手順をチェックしてみました。 How to disable Chrome’s new targeted ad tracking - The Verge https://www.theverge.com/23860050/chrome-ads-topics-sandbox How to Disable Google Ad Tracking in Chrome's Privacy Sandbox https
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
Google、HTTP通信を表すChromeの錠アイコンを変更
[レベル: 上級] Chrome が HTTPS で通信していることを示す錠アイコンを Google は変更する予定です。 錠アイコンから tune アイコンに置き換え 現在、HTTPS 通信のページに Chrome でアクセスすると URL の先頭に錠のアイコン🔒がつきます。 この錠アイコンを、異なるデザインのアイコンに置き換えます。 「tune」と新しいアイコンを Google は表現しています。 設定を意味するアイコンだそうです。 アイコンの意味をだれも理解していないため 錠から tune へとアイコンを変更する理由は、ほとんどのユーザーが錠の意味を正しく理解していないためです。 鍵アイコンは HTTPS で通信していることを意味します。 通信が暗号化され、改ざんされておらず、（証明書が割り当てられた）サイトと通信していることを保証するのが HTTPS の役割です。 決して、通信先
「Google Chrome 112」安定版リリース、CSSがネストに対応
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン112.0.5615.49(Linux版・Mac版)・112.0.5615.49/50(Windows版)がリリースされました。この更新からCSSがルールのネスト(入れ子)に対応するようになりました。 New in Chrome 112 - Chrome Developers https://developer.chrome.com/blog/new-in-chrome-112/ New in Chrome 112: CSS nesting rules, no-op fetch handlers skipped, and more! - YouTube ◆CSSのネスト CSSのスタイルルールを他のスタイルルール内にネストさせ、外側のセレクターを内側のルールと組み合わせることが可能になりました。これにより、スタイルシー
Smooth and simple transitions with the View Transitions API | Web Platform | Chrome for Developers
The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+. Transitions created with the View Transition API. Try the demo site – Requires Chrome 111+. Why do we need this feature? Page transitions not only look great, they also communicate direction of flow, and make it clear which elements
View Transitions API - Web APIs | MDN
The View Transitions API provides a mechanism for easily creating animated transitions between different DOM states while also updating the DOM contents in a single step. View transitions are a popular design choice for reducing users' cognitive load, helping them stay in context, and reducing perceived loading latency as they move between states or views of an application. However, creating view
Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する
Chrome 111 は CSS の色関数 や 三角関数の追加 など、目を引く更新が多いですが、中でも View Transitions API は、Web アプリの UX 向上という観点で、高いポテンシャルを秘めた API です。 この記事では、この View Transitions API について、実装例・実用例を交えて概説します。 View Transitions API とは View Transitions API は、『画面の更新前後の異なる DOM 要素間のトランジションを、簡素な記述で実現』 する API です。 PC および Android の Chrome 111 以上、または Edge 111 以上 で使用できます。 つまりどういうこと？ モバイルのネイティブ App には、以下のように、 『ページ遷移が発生したとき、同じ要素がページをまたいで移動する』 ような、リ
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応
Chromeの疑似クラス「:has()」がjQueryの「:has()」に悪影響を及ぼす問題が解決へ。Chromeは回避策実装、jQueryは新バージョンで対応 8月にリリースされたChrome 105で実装されたCSSの疑似クラス「:has()」が、jQueryに以前から備わっている「:has()」に悪影響を及ぼし、一定の条件下ではjQueryを使ったWebサイトが壊れるなどの問題を引き起こすことがあることを、9月の下記の記事で紹介しました。 参考：Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 その後、Chrome側ではこの問題に対応する回避策が実装され、一方のjQuery側でも先日リリースされたjQuery 3.6.2で対応が行われたことが明らかになりました。 Chrome、jQueryそしてCSS
JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】 - Qiita
JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】HTMLJavaScriptChrome初心者popup
CSSの最新テクニック！ シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装
この実装は、完全に想定外の発想でした！ スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。 オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScriptはなし、HTMLとCSSだけで簡単に実装できます。 Pop-up API Off Canvas Menu w/ :has() ⚡️ 実際の動作は、下記ページでご覧ください。 ※Pop-Up APIと:has()を使用しているため、ChromeでFlagを有効にする必要があります（後述）。 Pop-up API Off Canvas Menu w/ :has() ⚡️ まずは、HTMLを見てましょう。 ハンバーガーはbutton要素で、オフキャンバスはpopup属性で実装します。pop
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。 無料で、多くのデバイスをサポートしているのがいいですね。 WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！ Mobile FIRST レスポンシブの確認を簡単にできます。 スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
「Google Chrome 104」安定版リリース、画面共有を便利にするRegion Capture機能を実装
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン104.0.5112.81(Windows版、macOS版/Linux版は104.0.5112.79)がリリースされました。ウェブ画面共有をトリミングするRegion Capture機能が実装され、Media Queries Level 4への対応が行われています。またShared Element Transitions機能がオリジントライアル開始となっています。 New in Chrome 104: Region Capture, Media Queries, Shared Element Transitions, and more! - YouTube ◆Region Capture機能 Region Capture機能を使用することにより、タブ画面から必要な部分だけをトリミングしてキャプチャーし、リモートに共有す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/clockmaker/status/1633232835023872002
便利なのが登場！ これ一つでWeb制作に役立つ機能がたくさん使用できるChromeの拡張機能 -SuperDev
