これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill

2023/09/05 13 users トリガー Safari スクロール アニメーション CSS

先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネックはSafariのサポートだと思います。 Scroll-driven Animationsの仕様で定義されているScrollTimelineとViewTimelineのポリフ... 続きを読む

AppleやNetflixなどの大企業も使用するオープンソースライブラリ「core-js」をたった1人で維持する開発者が「もう限界だ」と支援を求める

2023/02/16 31 users Babel オープンソースライブラリ Spotify ウェブ

オープンソースのJavaScriptライブラリである「core-js」は、古いブラウザでもJavaScriptの最新機能を使えるようにするPolyfill(ポリフィル)として強い人気を誇り、オープンソースのJavaScriptトランスコンパイラであるBabelにも組み込まれています。AppleやNetflix、Spotify、Pornhubといった大企業を含む多くのウェブ... 続きを読む

CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました

2022/10/06 42 users アップデ ブラウザ 安定版 準備 サポート

コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナクエリが安定版のブラウザにサポートされ、ポリフィルも大幅にアップデ... 続きを読む

アマゾンのページ表示速度を劇的に改善した6つの実践テクニック【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ

2022/02/03 16 users アマゾン 実践テクニック IKEA あめたま SEO情報まとめ

illustration by つきのあめだま 「ファーストビューのコンテンツを先に読み込む」「すべてSSRする」「使っていないポリフィルを削除する」など、アマゾンのページ読み込み速度を向上させるチームが用いた具体的なテクニックを6つ、紹介する。 また、同じ「ページ表示速度」関連のトピックとして、IKEAのサイトで全画像... 続きを読む

CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい

2022/01/19 28 users コンテナクエリ CSS 新機能コンテナクエリ モダンブラウザ

先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメ... 続きを読む

IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」 | TechMemo

2019/07/01 12 users TechMemo ブラウザ 以下 画像 IE11

Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。 picture要素を使うことで、ブラウザの幅によって画像を出し分けることができます。例えば、以下のように記述すると、1000px以上ならextralarge.jpg、800px以上1000px未満ならlarge.jpg、8... 続きを読む

CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ | コリス

2018/05/10 142 users コリス Jav jQuery CSS アニメーション

ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる Jav... 続きを読む

Chrome、Edge、Firefox互換のブラウザー拡張を作るポリフィル。 | Ginpen.com

2018/04/23 24 users Ginpen.com That Edge Chrome ソース

最近思うところあってブラウザー拡張を作って公開しました。仕事中についSNS見ちゃうのを止めるやつです。 Chrome → Stop SNS – Chrome Web Store Firefox → Stop SNS – Add-ons for Firefox Edge → 未公開 ソース → ginpei/stop-sns: Chrome, Edge, Firefox extension that... 続きを読む

[tech] JSDeferred -> Promise 置き換え方法 | Mon, Nov 30. 2015 - 氾濫原 [HANRANGEN]

2015/11/30 25 users JSDeferred HANRANGEN tech Mon

もはや Promise がスタンダードに入り、モダンな実行環境ではポリフィルすら必要なく使えるケースが増えましたね。かくいう自分も JSDeferred は使っておらず完全に Promise 依存に切替えております。外部ライブラリ依存なんてないほうがいい!! JSDeferred と Promise の違い 機能的にはほぼ変わりがないので機械的に置き換えできますが、Promise は1度だけしか ... 続きを読む

レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証 – Rriver

2014/08/22 71 users Rriver 検証 レスポンシブ 紆余曲折 イメージ

レスポンシブ・デザインの画像の扱いの課題を解決するのが「レスポンシブ・イメージ」です。この「レスポンシブ・イメージ」には紆余曲折あったわけですが、熱心な開発者の方々のおかげでようやく仕様がまとまり、ブラウザでのネイティブ実装も進んでいます。 結論から言うと、ブラウザのネイティブ実装はまだこれからですし、ポリフィルのPicturefill 2.xには大きな欠陥があり、プロダクションサイトでの使用は待... 続きを読む