#статья дня
Вообще, это скорее даже тянет на хештег #фишка.
Есть такой способ навигации по странице, как якоря. Расставляете ссылки формата
И всё прекрасно и работает как задумано, вот только если у вас есть зафиксированная при скролле шапка, она закроет часть содержимого.
Как с этим боролись раньше? А довольно забавным образом.
Вместо всей секции ссылались на некий элемент:
К счастью, теперь это не нужно! Пруф: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
TL;DR: scroll-padding-top на :root или scroll-margin-top на целевой элемент.
Прям прекрасно. Очевидно, работает не только для якорей, но и для scroll-snap интерфейсов.
И уже можно использовать.
#css #scroll #margin #anchor
Вообще, это скорее даже тянет на хештег #фишка.
Есть такой способ навигации по странице, как якоря. Расставляете ссылки формата
<a href=“#news”>News</a> и, собственно, раздел: <section id=“news”>bla</section>.И всё прекрасно и работает как задумано, вот только если у вас есть зафиксированная при скролле шапка, она закроет часть содержимого.
Как с этим боролись раньше? А довольно забавным образом.
Вместо всей секции ссылались на некий элемент:
<a name=“news”></a>, который сдвигали отрицательным margin или position: relative на величину высоты шапки. Грубовато, но работало!К счастью, теперь это не нужно! Пруф: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
TL;DR: scroll-padding-top на :root или scroll-margin-top на целевой элемент.
Прям прекрасно. Очевидно, работает не только для якорей, но и для scroll-snap интерфейсов.
И уже можно использовать.
#css #scroll #margin #anchor
👍1
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor
👍32
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
❤19👍1
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
👍16
This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Если у вас есть Chrome Canary (125+), то уже сегодня можно побаловаться такой фичей, как CSS Anchor Positioning.
Короче, можно прилепить один элемент к другому так, что он всегда там будет, несмотря на скролл и так далее. Без расчёта координат и трансформаций. Без прямой зависимости межлу элементами в DOM. Просто указываем ID элемента-якоря в атрибуте anchor и передаём позицию в стили:
Это, в целом, продолжение идеи, развиваемой в спецификации Popover.
Уна Кравец как раз сделала инструмент для демонстрации этой возможности: https://anchor-tool.com/
Повторю: только Chrome Canary 125+.
Ну а, конечно, пока этого нет в основных браузерах, нам надо довольствоваться https://floating-ui.com/ aka ex-Popper. Работает очень хорошо.
#css #anchor #tool
Если у вас есть Chrome Canary (125+), то уже сегодня можно побаловаться такой фичей, как CSS Anchor Positioning.
Короче, можно прилепить один элемент к другому так, что он всегда там будет, несмотря на скролл и так далее. Без расчёта координат и трансформаций. Без прямой зависимости межлу элементами в DOM. Просто указываем ID элемента-якоря в атрибуте anchor и передаём позицию в стили:
inset-area: right bottom. Всё.Это, в целом, продолжение идеи, развиваемой в спецификации Popover.
Уна Кравец как раз сделала инструмент для демонстрации этой возможности: https://anchor-tool.com/
Повторю: только Chrome Canary 125+.
Ну а, конечно, пока этого нет в основных браузерах, нам надо довольствоваться https://floating-ui.com/ aka ex-Popper. Работает очень хорошо.
#css #anchor #tool
🤩12❤6
#фишка дня
Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.
Потому что писать noopener не надо.
Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.
Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.
Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.
#eslint #security #anchor
Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.
Потому что писать noopener не надо.
Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.
Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.
Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.
#eslint #security #anchor
👍17❤1
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2024, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2024, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
👍17
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
А нет такого, что новые технологии фронтенда нет смысла изучать, пока их не разжуют Шадид, Комо или Вес Бос? :)
Не, ну серьёзно. Вот читаешь ты блоги разработчиков Хрома или, простите, Вебкита. Что получаешь?
Получаешь нечто слишком рано, слишком мало, слишком сухо и сложно. Ну, буквально, посмотрите на статью про якорное позиционирование в блоге WebKit aka Safari: https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning/
A gentle introduction... куда уж более gentle: ни одного интерактивного примера, код минимален.
И тут давайте Шадида возьмём, буквально утром сегодня выпустил: https://ishadeed.com/article/anchor-positioning/
Уже начиная с шапки становится понятно о чём речь!
Каждый пример как всегда снабжён интерактивом, а если браузер не поддерживает пока якоря — всегда есть переключатель на видео.
Как всегда, глубокое почтение Шадиду за работу и рекомендация к прочтению! Якоря — уже не за горами, как минимум, можно заполифиллить.
#css #anchor
А нет такого, что новые технологии фронтенда нет смысла изучать, пока их не разжуют Шадид, Комо или Вес Бос? :)
Не, ну серьёзно. Вот читаешь ты блоги разработчиков Хрома или, простите, Вебкита. Что получаешь?
Получаешь нечто слишком рано, слишком мало, слишком сухо и сложно. Ну, буквально, посмотрите на статью про якорное позиционирование в блоге WebKit aka Safari: https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning/
A gentle introduction... куда уж более gentle: ни одного интерактивного примера, код минимален.
И тут давайте Шадида возьмём, буквально утром сегодня выпустил: https://ishadeed.com/article/anchor-positioning/
Уже начиная с шапки становится понятно о чём речь!
Каждый пример как всегда снабжён интерактивом, а если браузер не поддерживает пока якоря — всегда есть переключатель на видео.
Как всегда, глубокое почтение Шадиду за работу и рекомендация к прочтению! Якоря — уже не за горами, как минимум, можно заполифиллить.
#css #anchor
👍12❤4🤩2👎1