[Перевод] Хватит использовать JavaScript для решения задач CSS

Недостаток знаний часто подталкивает людей к чрезмерно сложным решениям, и рано или поздно это отражается на производительности. Возьмем content-visibility: auto . Он дает тот же эффект, что и React-Window , но без единой строчки JS и без увеличения размера сборки. Аналогичная ситуация с современными единицами высоты окна ( dvh , svh , lvh ): наконец-то приведена в порядок "мобильная" высота, которую годами пытались компенсировать через window.innerHeight . Обе технологии в 2024 году получили более 90% поддержки современных браузеров и полностью готовы для продакшна. Однако мы по привычке продолжаем решать такие задачи с помощью JS, просто потому, что CSS незаметно ушел вперед, пока мы спорили о React Server Components .

https://habr.com/ru/companies/timeweb/articles/983714/

#javascript #js #css #timeweb_статьи_перевод #contentvisibility #virtualization #intersectionobserver #scrolldriven_animations #виртуализация

[Перевод] Обнаружение изменения положения DOM элемента с помощью IntersectionObserver

Попытка создания универсального решения, которое позволяет обнаруживать изменение положения элемента на веб-странице в независимости от того, чем оно было вызвано: прокруткой, изменением размера окна или родительского контейнера, масштабированием, изменением разметки или непосредсвенно заданием координат left и top самого элемента.

https://habr.com/ru/articles/899780/

#scroll #resize #position #observer #intersectionobserver

⚫️How to animate objects with Tailwind CSS and Alpinejs intersection observer
+ demo + code
by Michael Andreuzza @Mike_Andreuzza
#Tailwind #AlpineJS #intersectionObserver #webdev #tutorial

https://lexingtonthemes.com/tutorials/how-to-animate-objects-with-tailwind-css-and-alpinejs-intersection-observer/

TIL `IntersectionObserver`'s `rootMargin` only works if the observer is in the same origin, because of privacy concerns:

> There is a risk that the API may be used to probe for information about the geometry of the global viewport itself, which may be used to deduce the user’s hardware configuration.

That's why this demo of a sticky navigation doesn't work in CodePen's default view… 😞

<https://codepen.io/nhoizey/pen/QWBrrKB>

#IntersectionObserver #JavaScript #security

⚓️ https://nicolas-hoizey.com/notes/2023/01/26/1/

@marie_ototoi a traduit l'article de Dan Callahan sur l'API #IntersectionObserver et c'est ici : https://tech.mozfr.org/post/2017/08/21/IntersectionObserver-arrive-dans-Firefox

Si jamais (on sait pas hein), vous souhaitez aider à documenter tout ça en fr sur MDN : https://developer.mozilla.org/fr/docs/MDN/Doc_status/API/IntersectionObserver