[B! jQuery][CSS] rryuのブックマーク

rryu id:rryu

jQueryとCSSに関するrryuのブックマーク (2)

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サイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
rryu 2022/09/21
「:has()」の括弧内に書けるものがCSSとjQueryとで異なるが、ブラウザの実装がエラーにしないけどちゃんと処理もしない記述の挙動が変わってしまうということらしい。jQuery側の実装も割とアレで混乱している模様。

jquery

css
リンク
固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモまずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。実装手順使用するのは「jQquery」と「waypoints.js」の2つです。まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles
rryu 2015/01/21
スクロールにつれて固定ヘッダ部分がもにゅむにゅ変形するアレ。

webデザイン

jQuery

CSS

javascript
リンク
1