IETFのQUICワーキンググループはHTTP/3の標準化プロセスを完了し、「RFC 9114」として発表しました。 HTTP/3 has been published as an RFC. https://t.co/jdsUHy9FKD — IETF QUIC WG (@quicwg) June 6, 2022 HTTPはWorld Wide Webを開発したティム・バーナーズ＝リーによって1990年に最初のバージョンが作られました。 その後、1996年にHTTP/1.0がIETFによってRFC化され、1999年にHTTP/1.1へアップデート。2015年2月には初めてのメジャーバージョンアップとなるHTTP/2がRFCとなりました。HTTP/3は7年ぶりのメジャーアップデートと言えます。 HTTP/3では高速な通信を実現するために、HTTPのトランスポート層を従来のTCPからQUICに
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ 長くない？ と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日（2023/03/28）、Safari 16.4 がリリースされ、 media query のrange（範囲）記法に対応しました。 ▼ 従来の media query の範囲指定
IETFのQUICワーキンググループで標準化作業が進められてきたQUICとHTTP/3が、6月のQUICワーキンググループにおけるラストコールを経て、IETFのステアリンググループであるIESGのラストコールとして10月21日に受諾されました。 ラストコールとしてIESGが受諾したドキュメントは、QUICとHTTP/3の標準化に関わる以下の6つのドキュメントです。 QUIC: A UDP-Based Multiplexed and Secure Transport QUIC Loss Detection and Congestion Control Using TLS to Secure QUIC Version-Independent Properties of QUIC Hypertext Transfer Protocol Version 3 (HTTP/3) QPACK: Head
Cloudflare、ヘッドレスブラウザ＋Puppeteerがすぐ使える「Workers Browser Rendering API」発表
Cloudflare、ヘッドレスブラウザ＋Puppeteerがすぐ使える「Workers Browser Rendering API」発表 Cloudflareは、同社が提供するCloudflare Workersの新機能として、ヘッドレスブラウザとそれをコントロールするPupeteerを呼び出せる「Workers Browser Rendering API」（以下、Browser Rendering API）のクローズドベータを発表しました。 We’re excited to announce a private beta of the Workers Browser Rendering API. With browser automation, you can programmatically do anything that a user can do when interactin
The new wave of Javascript web frameworksMake sense of the proliferation of new Javascript web frameworks. A deep dive into the problems at scale and the recent evolution of innovation. IntroductionStaying current in the Javascript ecosystem is not for the faint of heart. It’s challenging for those entering the industry to follow what’s happening amongst the new libraries, frameworks, concepts, an
Intro Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。 ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。 レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。 まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。 関連サイト 始めて取り組もうとすると、まずどこを見ればわからないところから始まる。 似たようないくつかのサイトがあり、使い分けがされているからだ。 code search https://source.chromium.org/chromium/chromium/src コードをインタラクティブに検索するためのサイト Workspace 風の U
兄弟要素を積み重ねる時、垂直マージンをどのように実装していますか？ 要素を積み重ねる時のマージンは、フクロウセレクタ（* + *）を使うと簡単です。さらに、>を追加することで、マージンが再帰的に与えられるのを防ぎます。たった3行のCSSで積み重ねる時のマージンを管理できる、フクロウセレクタの効果的な使い方を紹介します。 このテクニックは、テキストとテキスト、見出し直後のテキスト、流動的なフォントサイズにも非常に効果的です。 My favourite 3 lines of CSS by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのカスタムプロパティでのフォールバック値の仕組み The Stackではなく.flowを使うのなぜですか？ gapではなく、marginを使うのなぜですか？ 終わり
Bleeping Computerは10月30日(米国時間)、「Google Chrome now auto-upgrades to secure connections for all users」において、GoogleがすべてのChromeユーザーに対し、HTTPリクエストを自動的にHTTPSリクエストに変更する「HTTPSアップグレード」を開始したと報じた。Googleはこれまでにも同機能を限定的に展開していたが、2023年10月16日に安定版のすべてのユーザーが対象になったという。 Google Chrome now auto-upgrades to secure connections for all users 歴史的に、ブラウザはHTTPSをサポートするサイトにおいて安全ではないHTTPリクエストを行うことがある。Google Chromeでは、次のような条件でHTTPリソー
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて
iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される
2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法などの機能が他のブラウザに先駆けて搭載されました。 New WebKit Features in Safari 15.4 | WebKit https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ ◆img要素にlazy loading機能が搭載へ img要素に「loading="lazy"」属性を付与することで、「付近にスクロールするまで画像を読み込まない
新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」（以下CDS）でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは？ なにができるの？ Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較
iPhoneのパスワードレス機能はWindowsとも連携するとAppleが発表。Windows上のChromeにiPhoneをかざしてログインも可能に、FIDO標準への対応で
iPhoneのパスワードレス機能はWindowsとも連携するとAppleが発表。Windows上のChromeにiPhoneをかざしてログインも可能に、FIDO標準への対応で 日本時間6月7日未明にAppleが開催したイベント「WWDC 2022」でAppleは、iOSデバイスで提供されるパスワードレス機能「Passkeys」が、Apple以外のデバイスとも連携するようになると説明しました。 と同時に、スクリーン上ではWindows 11のデスクトップ画面上にChrome（もしくはEdge）ブラウザのパスワードレスによるログイン画面が表示されていました。 つまり、Touch IDやFace IDを使ってApple以外のデバイスでもパスワードレスでログインできるようになる見通しです。 Passkeysをクロスプラットフォーム対応にすると明言 AppleはWWDC 2022で、iPhoneに代
by iphonedigital AppleはiOS上で動作するブラウザについて、たとえFirefoxやChromeであっても、ブラウザのレンダリングエンジンにはAppleが開発したWebKitを使うことを強制しています。この問題について、Microsoft Edgeのプロダクトマネージャーであるアレックス・ラッセル氏が「AppleはChromeの市場独占を防ぐためではなく、むしろブラウザの将来性を奪っている」と強く批判しています Apple Is Not Defending Browser Engine Choice - Infrequently Noted https://infrequently.org/2022/06/apple-is-not-defending-browser-engine-choice/ そもそもラッセル氏が一連の話をするきっかけが、Twitter上で「Appl
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
Mozillaは1月5日(米国時間)、個人情報がオンラインデータ侵害を受けたかどうかを確認できるサービス「Firefox Monitor」に、Twitterからのデータ流出として2億件のアカウントデータを追加したと伝えた。電子メールアドレスが漏洩の対象とされている。 Firefox Monitor 今回のTwitterデータ漏洩に関して使用しているTwitterアカウントのメールアドレスが漏洩データに含まれているかどうかは、「Firefox Monitor - Twitter (200M) のデータ侵害にさらされていますか？」に、電子メールアドレスを入力して「調査する」をクリックすることで調べることができる。 漏洩したデータに自分の電子メールアドレスが含まれていた場合、今後このデータを悪用したフィッシング詐欺といったサイバー攻撃が実施される危険性があることに注意する必要がある。また、パスワ
【追記】Firefox 版も出しました。 はてなミュート - Chrome ウェブストア https://chrome.google.com/webstore/detail/agomiblbpgcimbonnfmlcealkjlegbnf 機能指定したワードを含む記事をミュート指定した URL (の一部) を URL に含む記事をミュート指定した記事を単体で非表示にする訪問済みの記事を目立たなくする（ on/off 選択可）ブコメページを訪問済みの記事を目立たなくする（ on/off 選択可）1, 2 をする拡張は既にあるけど、下記の機能はこの拡張だけで使える。 記事をその場でミュートするhttps://cdn-ak.f.st-hatena.com/images/fotolife/a/anond_user/20230305/20230305094515.png ミュートアイコンを押すと、ポ
CSSは進化のスピードが速いですが、2022年はさらに速くなりました。そして大きな転換期とも言えるのが、IEのサポート終了です。これにより今まで使用できなかったCSSの機能がたくさん使用できるようになりました。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ 2022年現在、CSSの使用状況を調査した「The State of CSS 2022」を紹介します。 The State of CSS 2022 The State of CSS 2022は、State of CSSでおこなわれたアンケートの調査結果（14,310人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は24-44才が多く、性別は男性が多めです。
先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Is it :modal? by Jhey Tompkins コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh
CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。 Use conic gradients to create a cool border まずは、実際のデモをご覧ください。 conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。 See the Pen Conic Gradient Border by Adam Argyle (@argyleink
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
HTTP/3が正式に勧告、脱TCP時代の幕開けか
インターネット関連技術の標準化を手掛けるIETF（Internet Engineering Task Force）は2022年6月6日（米国時間）、通信プロトコル「HTTP/3（HyperText Transport Protocol/3）」を「RFC 9114」として勧告した。HTTP/3はインターネット通信の多くを占めるWebにおける通信プロトコルの最新版である。 最大の特徴は、トランスポートのプロトコルに「QUIC（Quick UDP Internet Connections）」を採用した点。QUICは2021年にIETFで「RFC 9000」として勧告された。その名前が示すように、TCP（Transmission Control Protocol）ではなく、UDP（User Datagram Protocol）に基づくプロトコルだ。TCPが備えていた再送制御の仕組みや、TLS（Tr
Firefox / Safari 先日Appleが、Safariは幾つかのWebAPIに対応しないと公言しました。 日本語記事も幾つか出ています。 しかし、どのサイトも対応しないAPIの一覧を並べてはいるのですが、それぞれのAPIが具体的にどのようなものなのかを記載した記事が見当たらなかったので、以下はそれらについて調べてみたものです。 対応しない理由 a threat to user privacy、すなわち、あくまでブラウザフィンガープリントなどの手段によって個人を特定・追跡できてしまうからという理由です。 セキュリティ的にも問題なAPIが並んでいるのですが、そちらは理由ではありません。 対応しないWeb API Web Bluetooth caniuse RFC 非公式日本語訳 解説 ブラウザからBluetoothを通して接続先のデバイスにアクセスすることができます。 データ転送形式
Chromeのデフォルト検索エンジンがBingになるOffice 365 ProPlusアップデートに集まる批判の声
Chromeのデフォルト検索エンジンがBingになるOffice 365 ProPlusアップデートに集まる批判の声：Windowsフロントライン（1/2 ページ） 日本ではまだ少し先の話になるが、米国を含む海外の一部地域で2020年2月末に提供が開始されるMicrosoftのある拡張機能について、あちこちから批判の声が挙がっている。同タイミングでOffice 365 ProPlusユーザーに提供される最新アップデートを適用すると、WindowsにインストールされているGoogleのChromeブラウザのデフォルト検索エンジンがBingになるというもので、この直接的な影響を受けることになるIT管理者にとっては頭の痛い問題かもしれない。 【タイトル変更：16時】SNSなどで「Windows 10のアップデートによる変更」と誤解する反応が見受けられたため、タイトルを一部変更しました 「Micr
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。 ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS
先日、とても面白い動画がYouTubeにアップされていました: スライド: Flutterがどのように現在の形になったのか、Flutterと名前が付く前の歴史を、当時のFlutterの開発者であるEric Seidel氏とAdam Barth氏が振り返った動画です。 これがとても面白く、前史を理解することで、Flutterが実はどのような位置づけにいるのか、Flutterが何であって何でないのか、よくわかる内容だったため記事にまとめたいと思います。 （筆者は英語がそこまで得意ではありません。解釈違いなどあればコメントで教えてください。また、分かりやすさのために沢山省略しています。ぜひ元動画も併せてみてください。） 全ての始まり: WebKitからBlinkがフォークされた 2013年4月3日、GoogleはChrome/Chromiumに使用するブラウザエンジンを、WebKitからフォーク
ご挨拶 皆さんこんにちは！「弘基」って書いてホンギです。 本日はクラスメソッドの創立記念日です！そして皆でブログを書く日でもあります。 ということで本日は自分がAWSマネジメントコンソールでサービスを操作する時、利用しているChromeの拡張機能をいくつかご紹介させていただきたいと思います！ Chrome拡張機能とは グーグルクローム拡張プログラム(Google Chrome Extension)は、グーグルクロームブラウザを修正するブラウザ拡張プログラムです。 このような拡張は、HTML、JavaScriptおよびCSSのようなウェブ技術を基盤に使用して作成されます。 おすすめのAWS向けの拡張機能 AWS Favicon Update AWS Favicon Updateは、ブラウザタブのAWSのFaviconをAWSリソースイメージに変更してくれる拡張機能です。 たまに多くのタブを開
「Microsoft Edge」アドレスバーに文字を入力するとクラッシュする不具合 マイクロソフトが回避策を案内
マイクロソフトが提供するWebブラウザ「Microsoft Edge」で、アドレスバーを使った検索時に「Google」を検索エンジンに指定すると、文字を入力した途端ブラウザがクラッシュする不具合が発生中です。マイクロソフトは7月31日、原因を調査中であるとした上で一時的な対処方法を案内しています。 対処方法は、設定で「入力した文字を使用して、検索とサイトの候補を表示する」の項目を「オフ」にすること。また、検索エンジンを「Google」から「Bing」など、他のサービスに切り替えることでも回避可能です。 アドレスバーの検索エンジンを「Google」に設定していると、1文字入力しただけでブラウザがクラッシュします。画像はクラッシュ後の復元画面 設定項目は「設定」→「プライバシーとサービス」→「アドレスバー」から表示できます。 「設定」→「プライバシーとサービス」→「アドレスバー」を開く 「入力
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
ブラウザだけでなく各種アプリに表示される広告も非表示にできる無料広告ブロッカー「Zen」、Windows・macOS・Linux対応でソースコードも公開中
ウェブページに表示される広告を非表示にできるブラウザ拡張機能は多くの種類が存在していますが、PC利用時にはウェブブラウザだけでなく各種アプリのウィンドウ内に広告が表示されることもあります。2023年12月4日に公開された広告ブロッカー「Zen」を使えば、システム上で動作するすべてのアプリを対象に広告を非表示化できるとのことです。 GitHub - anfragment/zen: Simple, free and efficient ad-blocker and privacy guard for Windows, MacOS and Linux https://github.com/anfragment/zen ほとんどの広告ブロッカーはブラウザ向けの拡張機能として配布されており、ブラウザ内の広告しかブロックできません。一方でZenは「システムそのものにインストールし、すべてのアプリからの
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
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 には、以下のように、 『ページ遷移が発生したとき、同じ要素がページをまたいで移動する』 ような、リ
Microsoft Internet Explorer 11.0およびFirefoxのサポート終了について - PayPay銀行
Microsoft Internet Explorer 11.0および Firefoxのサポート終了について 2022年3月25日より、当社推奨ブラウザのうちFirefoxを推奨環境の対象外とさせていただきます。 また、マイクロソフト社のサポート終了（2022年6月15日）に伴い、Microsoft Internet Explorer 11.0についても、近日中に推奨環境の対象外となる予定です。 ※Internet Explorerのサポート終了の際はあらためてお知らせします。 推奨環境の対象外となったブラウザは、画面が正しく表示されなくなる可能性がありますので、ご利用のお客さまは以下のブラウザへの早めのお切り替えをお願いいたします。 Microsoft Edge 最新版 Google Chrome 最新版 お知らせ
ついに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
AI技術の進化により、私たちの働き方も大きく進化していくと想定されています。特に注目を集めているのが、OpenAIが開発したAI文章生成モデル「ChatGPT」です。このChatGPTは、自然な文章を生成することで有名で、様々なシーンで利用が進んでいます。そんなChatGPTを手軽に使えるツールとして、Google Chromeの拡張機能があります。 今回は、ChatGPTを使ったGoogle Chromeの拡張機能おすすめ7選を紹介します。これらの拡張機能を活用することで、ウェブブラウジングの体験が一段と豊かになるでしょう。 そして、本記事では各拡張機能の特徴だけでなく、インストール方法や使い方、さらには連携可能な他のプラットフォームや注意点、問題対処方法まで詳しく解説します。これらの情報を元に、あなたのブラウジング体験を効率的に、そして楽しく進化させてみてください。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IETFによるHTTP/3の標準化プロセスが完了、「RFC 9114」に
QUICとHTTP/3がIETFのラストコール。RFCによる標準化が間近に
The new wave of Javascript web frameworks
Chromium にコントリビュートするための周辺知識 | blog.jxck.io
CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です
Google Chrome、全ユーザーに対しHTTPからHTTPSへ自動変更
新「Microsoft Edge」と「Google Chrome」がマイナンバーカード方式によるe-Tax送信に対応／さまざまな改善により、申告書の作成プロセスは大きく簡略化
【西川和久の不定期コラム】 余ったマシンで無償Chromium OSをお試し! Neverwareの「CloudReady」
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA
「AppleのiOSでのWebKit強制はウェブブラウザの将来性を奪うものだ」という主張
Twitterからメールアドレスが漏洩、「Firefox Monitor」で確認を
はてブの記事を、キーワードや URL でミュートする Chrome 拡張を作った
2022年のCSSのまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
Chromeの拡張機能を自作する - 虎の穴開発室ブログ
Safariは危険なJavaScriptに対応しない - Qiita
Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA
Flutter前史: ChromeがFlutterになるまで
AWSマネジメントコンソールで役に立つChrome拡張機能のご紹介 | DevelopersIO
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する
ChatGPT Google Chrome拡張機能おすすめ7選｜活用して業務効率を高めよう