Frontend по-флотски 👨‍💻

Интернет технологии

Новости и факты о разработке интерфейсов в неформальном стиле

О канале
Полная статистика

Статистика

Количество постов

729

Среднее количество просмотров на пост

1 386

Средний охват (48ч)

00 000 000

Упоминаний

Получить детальную аналитику

Последние посты канала

play_circleВидео недоступно для предпросмотра

🐑

CSS Overflow Level 5: карусели, маркеры и кнопки скролла — уже в Chrome Chrome завёз из CSS Overflow 5 нативные маркеры прокрутки и кнопки скролла, а затем добавил scroll-target-group для простого scroll-spy. Это позволяет делать карусели, оглавления и навигацию по секциям без JS Что можно делать прямо сейчас 1️⃣ ::scroll-marker и ::scroll-marker-group — автоматические «точки»/метки прокрутки для любого скролл-контейнера 2️⃣ ::scroll-button() — настоящие кнопки «влево/вправо/вверх/вниз» у контейнера 3️⃣ scroll-target-group + :target-current — простая подсветка «активного пункта» в оглавлении/навигации Мини-пример: карусель без JS https://codepen.io/qmzik-the-typescripter/pen/jEWGaVJ

    
        <ul class="carousel">
  <li>Слайд 1</li>
  <li>Слайд 2</li>
  <li>Слайд 3</li>
</ul>

<style>
/* Включаем маркеры и кнопки, если браузер умеет */
@supports selector(::scroll-button(right)) and (scroll-marker-group: after) {
  .carousel {
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-marker-group: after; /* группа маркеров после контента */
    padding: 1rem 2.5rem;       /* место под кнопки */
  }

  .carousel > * {
    scroll-snap-align: center;
    inline-size: clamp(260px, 60vw, 520px);
    block-size: 200px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border, #ccc);
    border-radius: .75rem;
  }

  /* один маркер на каждый элемент */
  .carousel > *::scroll-marker { content: ""; }

  /* подсветка активного маркера */
  .carousel > *::scroll-marker:target-current {
    outline: 2px solid currentColor;
  }

  /* кнопки прокрутки */
  .carousel::scroll-button(left)  { content: "◄"/"Prev"; }
  .carousel::scroll-button(right) { content: "►"/"Next"; }
  .carousel::scroll-button() {
    padding: .4rem .6rem;
    background: color-mix(in oklab, Canvas 85%, CanvasText 15%);
    border-radius: .5rem;
  }
}
</style>{}

⛔️ Пока работает только в Chrome 135+ Почитать подробнее 👇 https://developer.chrome.com/blog/carousels-with-css?utm_source=chatgpt.com&hl=ru ::scroll-marker, ::scroll-button, scroll-target-group, :target-current

1000

21:16

14.10.2025

imageИзображение недоступно для предпросмотра

Хочу быть ближе 📺

Недавно я делился с тобой частью своего путешествия по Мурманской области, очень хочу поделиться с тобой бо́льшим🫰

Мы начали вести тг канал @nikita_alena_travel, там рассказываем про наши путешествия и жизнь, в целом 🤲

Сейчас мы в Батуми, едим хинкали и хачапури, и обыгрываем местные казино, буду очень рад с кем-нибудь из вас встретиться! 🇬🇪

Параллельно экспериментируем с видео на YouTube, буквально вчера смонтировали видео про Териберку (село на берегу Баренцева моря)
https://www.youtube.com/watch?v=NSxy9YRWOeA

1680

12:01

09.10.2025

imageИзображение недоступно для предпросмотра

CSS sibling-index() — позиция элемента среди соседей без JS 🧑‍🎓

Функция sibling-index() возвращает позицию элемента среди его соседей по одному родителю, счёт начинается с 1, работает прямо в значениях свойств, особенно полезно в calc()

Идея: стилизуем по порядковому номеру без классов и скриптов

Базовый синтексис

/* вернёт 1, 2, 3... для каждого ребёнка */
width: calc(8px * sibling-index());

4 быстрых приёмчика
1. Ступенчатая анимация — естественный «каскад» появления без JS

.item {
  animation: fade .6s both;
  animation-delay: calc(80ms * sibling-index());
}
@keyframes fade { from {opacity:0} to {opacity:1} }

2. Градиент по карточкам — комбо с sibling-count() даёт предсказуемые палитры для N элементов

.card {
  /* равномерно раскидываем оттенки по ряду */
  background: hsl(
    calc(360deg / sibling-count() * sibling-index()) 60% 55%
  );
}

3. Нумерация без <ol> — удобно, когда HTML менять нельзя

.row { --i: sibling-index(); display: grid; grid-auto-flow: column; gap: .5rem; }
.row::before { content: var(--i); opacity: .6; }

4. Обратный порядок — подходит для flex/grid, когда DOM трогать нельзя

.item { order: calc(sibling-count() - sibling-index()); }

На данный момент эта фича работает только в Chrome 138+, 65% на caniuse

Почитать подробнее 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-count

#css@frontend_pasta

1690

12:34

08.10.2025

play_circleВидео недоступно для предпросмотра

👨‍💻 VK запускает свой канал про фронтенд

💻 В VK делают интерфейсы, которые должны работать у всех: от старых смартфонов до десктопов с кучей вкладок, поэтому их опыт имеет ценность

В канале Frontend VK Hub эксперты рассказывают о том, как решают такие задачи, а также делятся инсайтами, зовут на митапы и обмениваются опытом с сообществом

👉

Подписывайся, чтобы быть на связи и не пропустить ничего важного

👈

1160