ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わったの調べた - hogashi.*
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 － Publickey を読んだので、調べたものとあわせてまとめる。 三行 原因 forgiving-selector-list Chrome と Safari の状況の違い されている対応と今後 感想 三行 かねてから jQuery には拡張した CSS セレクタとして :has() がある :has() Selector | jQuery API Documentation Safari 15.4 と Chrome 105 で CSS セレクタとして :has() が実装された :has() pseudo class - Chrome Platform Status :has() CSS relational pseudo-class | Can I u
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サイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
Yahoo! JAPAN はパスワードレス認証で問い合わせを 25% 削減、ログイン時間も 2.6 倍速に
Yahoo! JAPAN は日本にて検索やニュースといったメディアサービス、e コマース、メールサービスなど、100を超えるサービスを提供している企業です。これらのサービスで利用するためのユーザーアカウントも長年提供し続け、月間のログインユーザーは 5,000 万を超える規模となっています。しかし、このユーザーアカウントを提供する中で、ユーザーアカウントに対しての攻撃を継続的に受けており、また、アカウントを継続利用する上での課題についてユーザーから問い合わせも多く頂いていました。これらの課題の多くはパスワードという認証手段に依存するものでした。また、当時、技術的にもパスワード以外の認証手段を提供するための機能やデバイスの普及が始まりつつありました。こういった背景のもと、Yahoo! JAPAN はパスワードによる認証からパスワードレスな認証へ移行すると判断しました。 なぜパスワードレスか
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 なページとのコミュニ
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
電子情報学特論：Chromiumのアーキテクチャを解き明かす
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
話題の Portals を使った画面遷移 UX の未来 | ウェブボウズ
ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭（スキンヘッド）にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素
Hayato.io
Hayato.io This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Free Credit Report Dental Plans Parental Control Healthy Weight Loss Work from Home Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy|Cookie settings|Do Not Sell or Share My Personal Information
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
60 (フレーム・パー・) セカンズ：Pinterestの描画パフォーマンス最適化のケーススタディ | POSTD
今日はWebサイトやWebアプリの描画パフォーマンスをどう改善したらいいのか、ということについて取り上げようと思います。私たちWeb開発者にとって、この分野は比較的新しく注目し始めたエリアで、 ユーザエンゲージメントとユーザ体験 に影響があるため重要です。 フレームレートはWebにも影響がある フレームレートとは、 連続した イメージを端末がスクリーンに映し出すレートのことです。秒間フレーム数（FPS）が低ければ肉眼で個別のフレームを判別でき、FPSの数値が高ければユーザにとっては反応が速いと感じられます。ゲーム業界ではおなじみの概念となっているものですが、Webにも当てはまるのです。 長時間に及ぶイメージのデコード、不必要なイメージのリサイズ、重いアニメーションとデータ処理はすべてフレーム落ちを起こす可能性があり、結果としてフレームレートは下がり、jankが多いページになってしまいます。
HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log
linkタグに pre fetch 機能を追加する仕様 (Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…" as=“…" onload=“…” onerror=“…”> 従来は、new Image や XHR と DOM API を使ってリソース毎に別々のJavaScriptを記述する必要がありましたが、お手軽になりますね。 これまで var img = new Image(); img.onload = function() { document.body.appendChild(img); }; img.onerror = ... img.src = url; var script = document
ブラウザのパスワード保存と自動フィルイン - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、開発部の渡辺です。 「最近、パスワードインプットのautocomplete属性周りが盛り上がってるよ、ちょっと調べてよ」という話を頂いたので、現時点での各ブラウザの挙動をさっくりと調べて結果を記します。 背景 6月にリリースされたFirefox 30の対応によって、ほとんどのモダンブラウザではautocomplete=offにしてもパスワードマネージャへの保存を禁止することはできなくなりました1。 しかし、保存されたパスワードがインプットにフィルインされる挙動はブラウザごとに微妙に異なります。すでに幾つかの記事2で言及されている内容ではありますが（二番煎じ感に溢れててごめんなさい）、複数のブラウザで動作を確認する中で、様々な条件があったので、それらをまとめてみようと思います。 調査内容 今回調べる具体的な内容は、「ブラウザに保存されたパスワードが自動フィルインされる条件」です。
Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に
スマートフォンのような小さな画面からデスクトップPCのディスプレイまで、Webに対応するデバイスの画面の大きさや精細度の多様性は高まってきています。 多くのWebデザイナーは、こうした多様な画面に合わせてレイアウトなどを変えることで見やすくするよう努力してきましたが、こうしたダイナミックなレイアウトを実現する上で大きな課題だったのが画像の扱いです。画面の大きさや精細度に合わせて適切な画像を表示させようにも、そのための標準的な方法がないのがその理由です。 Chrome 34ではその、いわゆるレスポンシブイメージへの対応としてimg要素に新機能を実装することを明らかにしました。。 img要素のsrcsetで、画面解像度ごとに表示すべき画像ファイルを複数指定できるようになります。 <img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高梨陣平さんのツイート: "名前出しての告発。JoshuaJB曰く、Edgeチームで働いていたけどEdgeを止めた理由の一つはGoogleが自社のサイトに他者ブラウザを遅くする変更を加え、我々はそれに追従できなかったから。例としてYoutubeは隠された空のdivを追加してEdgeのハードウェアアクセラレーションを効かなくした。… https://t.co/YNkOvrOcRp"