CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
2022年1月においてCSRF未対策のサイトはどの条件で被害を受けるか
サマリ2020年2月にGoogle ChromeはCookieのデフォルトの挙動をsamesite=laxに変更しましたが、2022年1月11日にFirefoxも同様の仕様が導入されました。この変更はブラウザ側でCSRF脆弱性を緩和するためのもので、特定の条件下では、ウェブサイト側でCSRF対策をしていなくてもCSRF攻撃を受けなくなります。この記事では、デフォルトsamesite=laxについての基礎的な説明に加え、最近のブラウザの挙動の違いについて説明します。 （2022年1月29日追記） 本日確認したところ、Firefoxにおけるデフォルトsamesite=laxはキャンセルされ、従来の挙動に戻ったようです（Firefox 96.0.3にて確認）。デフォルトsamesite=lax自体は先行してGoogle Chromeにて実装されていましたが、細かい挙動の差異で既存サイトに不具合が
User-Agent Reduction
Updates May 11th, 2023: the Phase 6 rollout is enabled for 100% of Android clients on M110 and above via Finch. April 25th, 2023: the Phase 6 rollout is enabled for 50% of Android clients on M110 and above via Finch. April 4th, 2023: the Phase 6 rollout is enabled for 10% of Android clients on M110 and above via Finch. March 21st, 2023: the Phase 6 rollout is enabled for 5% of Android clients on M
SharedArrayBuffer と過渡期な cross-origin isolation の話
2021/12/26: Safari も 15.2 から COOP/COEP を使って SharedArrayBuffer が利用できるようになったので、該当箇所の表記を変更しました。 長い記事なので先に結論を書きます。 Chrome、Firefox および Safari で SharedArrayBuffer や高精細タイマーが使えるようになりました。そのためには cross-origin isolation という状態を有効にするのですが、親となる HTML ドキュメントに下記 2 つのヘッダーを送ります。 Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin ただ、これを有効にするには様々な条件と制約が存在し、現段階では多くのサイトは苦戦するでしょう。とりあえず従来通り C
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
WebHID APIを使ってJoy-ConとChromeを簡単コネクト - Qiita
Joy-ConとChromeがツナガル こんな感じでJoy-Conをクネクネ動かしたりスティックをグリグリしたりすると、Chromeに表示されたJoy-Conが連動して動きます。Joy-Conって、普段はNintendo Switchでゲームする時に使うコントローラーなので、こうしてブラウザのChromeと連動して動くだけでワクワクします。 このアプリはGoogleのエンジニアの方が作られたもので、以下のGitHubで公開されています。 https://tomayac.github.io/joy-con-webhid/demo/ https://github.com/tomayac/joy-con-webhid どうやっているの？ WebHID APIという技術が使われています。 このAPIを使うことで、Webアプリケーションからニンテンドースイッチのジョイコンやプレイステーションのデュア
Chrome 91 ベータ版: 手書き文字認識、WebXR 平面検出など
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Chrome 90 ベータ版: WebRTC 用 AV1 エンコーダ、新しいオリジン トライアルなど
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
ChromeでUserAgentが凍結される日（User Agent Client Hintsの使い方） - Qiita
追記（2020-05-06） この記事は2020-02-10に執筆しましたが、その後急速に拡大したCOVID19の影響でスケジュールが変更になっています。現在判明しているリリーススケジュールは以下の通りです。 2021年まで従来通りのUser-Agent文字列が利用できる User Agent Client Hintsについては7月14日に安定版としてリリースされる予定のChromeバージョン84に導入予定 参考) https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/-2JIRNMWJ7s/u-YzXjZ8BAAJ (@devneko 様、ご指摘ありがとうございました！) UserAgentがGoogle Chromeで使えなくなる 「Google Chrome」の開発チームは1月14日、User-Agent文字列を
Chrome85でWebサイトの流入元がとれない問題と対応方法 - paiza times
(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 Chrome最新版(Chrome 85)で、徐々にWebサイトへの正確な流入元URL(URLのパス名)が取得できなくなってきています。 例えば、はてなブログからの流入では、どの記事から流入したかがわからず、流入元の調査・分析などのマーケティングへの影響が大きいと思われます。今回はまだWeb上での情報が限られているようなので、ここでは状況と対応方法について紹介したいと思います。 発端 「paiza」には毎日いろいろなサイトからのアクセスがあります。そんななか、先日ある社員から「やけに『paiza開発日誌』（このブログです）のトップページからのアクセスが増えているのだけど、理由って分かりますか？」と質問がありました。その近辺での「paiza開発日誌」のアクセス数は通
グーグル、画像圧縮ウェブツール「Squoosh」公開 - ZDNet Japan
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Google Chrome Labsは、迅速にロードできるウェブページを作成するための画像の圧縮やフォーマット変換を実行する、「Squoosh」というウェブアプリを公開した。 このツールの目的は、画像を手軽に圧縮し、耐えられるレベルにまで画質を落とすことで、軽量かつ迅速にロードされるウェブページの作成を支援するというものだ。 しかしこのツールによって、Googleが開発した可逆／非可逆圧縮フォーマットである「WebP」の普及も支援されるはずだ。WebP形式をサポートしているブラウザは最近までほぼ「Google Chrome」のみだった。 Squooshはデスクトップ機器あるいはモバイル機器のどのようなブラウザ上でも動作するPWA（Pro
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
デザイナー・デベロッパーのためのGoogle Chromeエクステンション17 – creamu
Google Chromeの拡張機能を探している。 そんなあなたにおすすめなのが、『17 Google Chrome Extensions for Web Designers and Developers』。デザイナー・デベロッパーのためのGoogle Chromeエクステンション集です。 便利そうなのが揃っているので、いくつかご紹介しますね。 Eye Dropper サイトから色を抽出できるカラーピッカー Aviary Screen Capture スクリーンショットを撮れるアドオン Chrome Sniffer 見ているページで使われているフレームワークやCMSを表示してくれる The Lorem Ipsum Generator Lorem Ipsumのダミー文字を生成してくれるアドオン Chrome SEO インデックス数、バックリンク数などを表示してくれるSEOツール IE Tab
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IEエンジンへの切り替え機能などを追加した強化版Google Chrome「ChromePlus」NOT SUPPORTED